Getting started with Appcelerator

A few days ago I started looking into Appcelerator Titanium, which enables you to develop mobile applications for a multiple platforms using Javascript.  If you already have knowledge developing in Javascript, now you can use that knowledge to create native applications for the IPhone and Android.  Appcelerator does this by taking the javascript that you write, and compiling it into code that is supported by each specific platform.  This takes out a lot of the rework usually needed when creating applications on multiple platforms, although it still enables you to add functionality that is specific to each platform.

If you jump over to the Appcelerator web site, you will find a ton of information.  I would advise reading some of the documentation to get a feel for what is actually going on.  Appcelerator provides their own IDE which you will need to use in order to develop applications, and in order to get the IDE, you will need to create an Appcelerator account.

The next step is to install each platform's SDK if you have already not done so in the past.  When you launch the IDE, the dashboard that is displayed will show you what SDK versions are required depending on the platform that you are developing for.  

I ran into a few issues here. First of all it said that I already have xcode installed (which I do) and that I am ready to develop IPhone apps.  After creating a new project and running it, I found out that I am not ready to develop IPhone apps.  It turns out that you need the newest version of xcode in order to use Appcelerator, and depending on your version of OSX, you might not be able to get it.  The newest version of xcode is version 4, which requires OSX Lion.  So, even though Appcelerator doesn't state it, you will need to update to Lion and then update xcode to version 4.  At this point you will be ready to develop IPhone apps.

If you do not plan on building IPhone apps, but instead your cup of tea is Android, you might also run into a few problems.  On Appcelerator's dashboard, the Android tab stated that I need to update to a newer version of the SDK, but when I clicked on the update SDK button, nothing happened.  It seems to have been an issue with the IDE.  I then went on a path of trying to figure out how to update the SDK.  This was a little tough since most of the Google documentation assumes you are using Eclipse.  I ended up going into Eclipse and updating the SDK from there.  Then I went back into Appcelerator and pointed it to my newly updated version of the SDK.  

After all of the setup I was finally able to develop native applications, now all I needed was a way to learn how to do that.

After a little Googling, I found a great starter tutorial on mobile tuts. I would advise you to check it out here.

The tutorial is pretty good, it walks you through how to make a simple twitter client that loads a user's tweets into a list.

The tutorial was informative, but when I was done, I wanted to be able to add a 'refresh' button in order to refresh the tweets.  In order to accomplish this, I added a button to the top of the tabView and then added a click event to it so that when the user clicked on it, I could refresh the list.

var refreshBtn = Titanium.UI.createButton({
 title: "refresh",
 top:0,
 height:40
});

refreshBtn.addEventListener('click', function(){
 Titanium.API.log('user clicked refresh');
 loadTweets();
});

As you can see, I set the top to 0 and the height to 40.  This puts it at the top of the tab.  I then changed the top in the TabView to be 40 so that it starts right after the button.

If you run the application and click the refresh button, it will update the list and everything appears to be working.  If you try to scroll down the list though, you will start to see the text duplicate on each row.  This is  because you are creating a new tableView and adding it to the window each time you hit refresh.  In order to get around this, you need to move the creation of the TableView outside of the loadTweets function.  Then inside of the function, use tableview.setData(rowData); to update the table with the new data.

var tableView = Titanium.UI.createTableView({
   top:40
  });
...

function loadTweets(){
...
      tableview.setData(rowData);
...
}

Now when you run the application and hit the refresh button, the rows are updated and not created on top of each other.

The documentation on the Appcelerator web site is not the greatest when it comes to starting out for the first time.  Their site recommends that you download their sample project 'kitchenSink' which contains a ton of examples.  It is overwhelming at first, but if you know what you are looking for, it can be very helpful.  I used the 'button.js' example to determine out to create buttons and add events to them, and then used the 'table_refresh.js' example to determine how to refresh the list.

Getting started with Appcelerator might be a rocky road, but it definitely looks promising.