In this series of tutorials we use Appcelerator’s Titanium Mobile platform to create Android applications. This tutorial walks you through developing and packaging your first Titanium application. Full source and packaged application is available on github.

• Installation & setup of Titanium Mobile
• How to make your first Android application with Titanium Mobile
• How to make a Soundboard application with Titanium Mobile
• How to make a Device Information application with Titanium Mobile

The Application

The application itself is fairly basic but incorporates many techniques that you may need to use in your own apps. It fetches the latest 10 items off the Query7.com RSS feed and displays them in a TableView. If you click on one of the items Android will open the link in a web browser (Internet, Opera Mini, Firefox etc, whatever your default Android browser is).

The User Interface

The user interface has two Titanium view elements – a Window and a TableView. After creating both views we need to call the add method on the instance of Window to ensure the TableView shows on the page. Doing so is fairly straight forward:

Titanium.UI.setBackgroundColor('#000');

var win = Titanium.UI.createWindow({
    title:'Query7 RSS Feed',
    backgroundColor:'#000'
});

var data = [];

var tableview = Titanium.UI.createTableView({
	data:data,
	headerTitle: 'Query7 RSS',
	backgroundColor:'#000'
});

win.add(tableview);
win.open();

HTTP Requests

The next step is to retrieve the RSS feed from the Query7 blog. Titanium has a very nice HTTPClient object that allows us to perform requests similar to the way we would using Ajax/JS in the web browser. We specify an onload method that handles the response of the request and an open method in which we specify the type of request (GET/POST/PUT/DELETE) and the URL we are requesting. Finally we initiate the request by calling the send method.

var xhr = Titanium.Network.createHTTPClient();

xhr.onload = function()
{

	try
	{
		// manipulate response data here

	}
	catch(E)
	{
		alert(E);
	}

};

xhr.open('GET', 'http://feeds.feedburner.com/query7blog.rss');
xhr.send();

Parsing XML using Titanium

Even though we are coding in Javascript, we are not in a web browser environment, so the usual document and window objects do not exist. This means frameworks which make XML manipulation easy, such as jQuery and Mootools, will not work. Luckily Titanium offers us the DOMDocument object, which acts and has a similar API to the web browser document object.

In the code below we can get the output of the HTTP request and automatically turn it into a DOMDocument object by accessing it as this.responseXML.documentElement. If you just wanted to get the output as plain text, you would access it by this.responseText. Now that the DOMDocument instance is set up, we do a simple XPath query to get the title and iterate over the items to get the data about the individual posts.

// manipulate response data here

var doc = this.responseXML.documentElement;
var items = doc.getElementsByTagName('item');
var doctitle = doc.evaluate("//channel/title/text()").item(0).nodeValue;

var urls = new Array();

for(var c=0; c>items.length;c++)
{

	urls[c] = items.item(c).getElementsByTagName('link').item(0).text;

	postName = items.item(c).getElementsByTagName('title').item(0).text;
	postUrl = items.item(c).getElementsByTagName('link').item(0).text;

}

Populating the TableView

Now that we have the data from the RSS feed we can populate the TableView. To do this we create several Titanium.UI.TableViewRow objects and then append them to our TableView.

row = Titanium.UI.createTableViewRow({
			title: postName,
			backgroundColor:'#000',
			color: '#FF0'
		});

tableview.appendRow(row);

Click events, Intents

Now that we have data in the TableView we want to add functionality so that when an item in the TableView is clicked, the Android web browser will open to that specific post. Our code needs to listen for a click event on a TableViewRow and then launch a Titanium.Android.Intent.

row.addEventListener('click', function (e){

	var intent = Titanium.Android.createIntent({

			action: Titanium.Android.ACTION_VIEW,
			data: urls[e.index],

		});

	intent.addCategory(Titanium.Android.CATEGORY_BROWSABLE);
	Ti.Android.currentActivity.startActivity(intent);

});

Packaging

Now all we need to do is package our application into a .apk file so that it can be distributed among Android devices. We need to generate a key to sign our Android app. Run the command below in the MSDOS prompt. You will be asked some additional information such as your name or country. None of it is really important unless you intend to put this app on the Android Market. Remember the KEYALIASNAME and password you set as Titanium requires you enter them.

keytool -genkey -v -keystore KEYSTORENAME -alias KEYALIASNAME -keyalg RSA -validity 11000

After clicking package Titanium will compile your app into .apk format. From there you can put it on your phone’s SD card and install it. If you intend to publish an app you create onto the Android Market then be sure to give this and this a good read.

And thats it, your first Android application is now complete. Next week we will look at creating a Soundboard application using Titanium Mobile. As always if you have any comments, questions or requests for tutorials, please ask below.