There are a lot of mobile platforms out there: iOS, Android, Windows Phone, webOS, BlackBerry and Symbian, just to mention a few. In my honest opinion, there are way too many and a good thing at least two of these, webOS and Symbian, will disappear off the face of the Earth in the not-so-distant future. Looking into the crystal ball, I’d say that the future for Windows Phone also looks bleak: Windows Phone 7 sales numbers are, to put it mildly, disappointing and if it wasn’t for the fact that Microsoft can bleed pile upon pile of cash before they have to throw in the towel, the Windows Phone platform would have been taken behind the barn a long time ago. It was a great leap from the unbelievably crappy Windows Mobile platform, but as long as you don’t sell any handsets you’re not making any money, no matter how huge the potential is. What might turn the tide for Windows Phone, though, is Microsoft’s partnership with Nokia, which is also getting pretty desperate not to get completely squeezed out of the smart phone market, or that Windows Phone 7.5 Mango is some sort of magic money making wand, or that Steve Jobs turned out to mean more to Apple’s success than he should or that the Android platform continues to dig itself into a segmentation hole. Didn’t we learn anything at all from J2ME?

But I digress already.

Out of all the available platforms, two stick out: iOS and Android. If we look at the US market only, they have a combined market share of 71 percent (comScore, October 2011). This means that if you build your mobile applications for these two platforms, you have covered a lot of end users. The problem is, however, that iOS and Android are two very, very different platforms. Everything from native language support to the application distribution ecosystem is different. To support both platforms you’ll need a team of Java developers for Android and a team of Objective C developers for iOS and virtually nothing they do will benefit both teams.

Luckily, there are options that can help you: Frameworks that aim to bridge the gap between the different mobile platforms. In this entry, we’ll look at Titanium Mobile from Appcellerator. Using the Titanium framework and common technologies like JavaScript, HTML and CSS, you can create applications that are run on both iOS and Android without the need to touch any native code. We’ll create a small application that has become the de facto “Hello, World” application for testing frameworks; a simple Twitter client. Our client will query Twitter for the latest tweets by a given username and display them on the screen.

I’ve never used Titanium before, so this will be a write-blog-entry-as-I-learn-experience. Also, in spite of being a software professional for almost ten years now, I’ve got very little experience with JavaScript. The reason for this is that when I first started to look at JavaScript many years ago it was a immense mess of spaghetti code that had to be tailored for every single browser and the experience gave me headaches and high blood pressure. So, for me, learning to use Titanium will be a real double rainbow because it’ll allow me to play around with not just one, but two new toys.

Everything in this entry assumes that you have you’ve already got Titanium Studio and all of it’s prerequisites installed, configured and up and running. Another assumption is that you have an Android device available that you can use to test our application. To be honest, getting Titanium ready was a major pain because there are a lot of applications that have to be installed. If you are, like me, developing on Windows 7, you can use this somewhat outdated guide written by Appcelerator themselves for installation instructions. Note that you will not be able to create an iOS version of our application when you are developing on Windows. Unfortunate, but it’s the harsh reality when working with Apple technologies. Why, then, even bother using Windows when developing using the Titanium framework? Good question. Since the source code we’ll write is platform agnostic - it’s JavaScript, not native code - it should, at least in theory, be possible to import our Twitter client project in Titanium Studio on a Mac and create an iOS version there. This enables each developer to use their preferred work environment to create applications. In my case, that is Windows 7. But it would have been Ubuntu if my employer’s VPN login supported more browsers than IE. Honestly.

Anyway. Let’s get started, already!

If you’re having problems with any of the code below, you can download the complete Titanium Studio project here.

1. In Titanium Studio, press Alt+Shift+N and select “Titanium Mobile Project” from the popup menu. Name the project “Twitter Reader” (without the quotes), enter “com.test.twitterreader” as App Id and click the Finish button. Titanium Studio creates a skeleton project that will be the basis for our Twitter client.
2. Now would be a good time to connect your Android device to your computer. Make sure it is configured for application debugging (settings->Applications->Development->check USB debugging) and that you have proper USB drivers for your device installed.
3. In the App Explorer on the left hand of the screen you’ll see a “Play”-button (upper left). Click on the arrow to the right of the button and select “Android Device”. The Titanium Studio will now compile and install our skeleton application on the device. When it’s ready, you’ll find the application “Twitter Reader” together with the rest of your applications on the connected device. Open it and marvel at your first Titanium application, created in a matter of minutes (not counting the hours you used to install Titanium).
4. The next step is to replace everything in the app.js file with the following code. This will strip the skeleton further, and the only thing being displayed if you install and start the application again will be a black main window with the title “Twitter Reader”.

1. Titanium.UI.setBackgroundColor('#000');
2. var twitterWindow = Titanium.UI.createWindow({
3.     title:'Twitter Reader',
4.     backgroundColor:'#fff'
5. });

5. Titanium has a lot of built in libraries we can utilize to quickly do a lot of things that might have been a bit of a hassle if we were coding in Java or Objective C. One of those libraries provide an HTTP client that we will use to query Twitter for the most recent tweets by a given username. Add the following to app.js:

 7. var twitterUserName = "vegardskjefstad";
 8. var httpClient = Ti.Network.createHTTPClient();
 9. httpClient.timeout = 10000;
10. httpClient.open("GET","http://api.twitter.com/1/statuses/" +
11.     "user_timeline.json?count=10&screen_name=" + twitterUserName);

This will create an HTTP client that connects to Twitter and asks for the user timeline of my Twitter account in JSON format. If you want to use another Twitter account, simply change the value of the twitterUserName variable. on line 7.

6. Next we have to do something with the response from the Twitter server. First, we create an array, twitterData, where we’ll store a selection of the data in the response. Then we tell the HTTP client we use what to do when it receives a successful response from the Twitter server:

13. var twitterData = [];
14. httpClient.onload = function() {
15.    try {
16.       var tweets = JSON.parse(this.responseText);
17.       for (var i=0; i < tweets.length; i++) {
18.
19.       }
20.    } catch(E) {
21.       alert(E);
22.    }
23 };

This block of code will serve as the basis for our processing of the data from Twitter. It splits the response into pieces that can be handled by the code and then loops through all the data. It doesn’t do anything with the data yet, but that will change soon as we start to add code in the body of the for-loop on line 17.

7. First, we add code that extract the tweet text, username, avatar URL and tweet date from the response. We also create a table view row where we’ll eventually display the data for a particular tweet:

16. ...
17. for (var i=0; i < tweets.length; i++) {
19.     var tweetText = tweets[i].text;
20.     var user = tweets[i].user.screen_name;
21.     var avatar = tweets[i].user.profile_image_url;
22.     var created_at = tweets[i].created_at;
23.     var row = Ti.UI.createTableViewRow({hasChild:true,height:'auto'});
24.
25.
26.
27. }

8. Next we take the data we just extracted and insert them into visual elements defined by Titanium like views, image views and labels. This is quite a lot of code, but I suspect still not as much as if you’d done this in either Java or Objective C.

var postView = Ti.UI.createView({
    height:'auto',
    layout:'vertical',
    left:5,
    top:5,
    bottom:5,
    right:5
});

var avatarImageView = Ti.UI.createImageView({
    image:avatar,
    left:0,
    top:0,
    height:48,
    width:48
});

postView.add(avatarImageView);

var userLabel = Ti.UI.createLabel({
    text:user,
    left:54,
    width:120,
    top:-48,
    bottom:2,
    height:16,
    textAlign:'left',
    color:'#444444',
    font:{fontFamily:'Trebuchet MS',fontSize:14,
        fontWeight:'bold'}
});

postView.add(userLabel);

var dateLabel = Ti.UI.createLabel({
    text:created_at,
    right:0,
    top:-18,
    bottom:2,
    height:14,
    textAlign:'right',
    width:110,
    color:'#444444',
    font:{fontFamily:'Trebuchet MS',fontSize:12}
});

postView.add(dateLabel);

var tweetTextLabel = Ti.UI.createLabel({
    text:tweetText,
    left:54,
    top:0,
    bottom:2,
    height:'auto',
    width:236,
    textAlign:'left',
    font:{fontSize:14}
            });

    postView.add(tweetTextLabel);
    row.add(postView);
    twitterData[i] = row;
}

9. The last thing we’ll do inside the body of the try-block (but outside the body of the for-loop) is to add a table view with all the Twitter data we’ve processed to the main window of our application.

88. ...
        }
        var tableview = Titanium.UI.createTableView({data:twitterData,
            minRowHeight:58});
        twitterWindow.add(tableview);
        twitterWindow.open();
    } catch(E) {
        alert(E);
    }
};

10. All the code that process the data is of no use if we don’t get any data from the Twitter server. There’s only one thing left to do to get our Twitter client operational and that’s to request data from Twitter:

99. httpClient.send();

11. Now once more tell Titanium Studio to install Twitter Reader on your connected device and open it when it’s installed. A window should open and you should shortly see the 10 latest tweets by me.

So, there you have it: A Twitter client in less than 100 lines of code. Pretty amazing. Since I don’t have the iOS simulator or an actual iOS device available for testing, I can only confirm that the client is working on Android. We’ll just have to trust Appcelerator in their claim that everything will work on iOS as well.

This should be enough for proof for everyone that Titanium Mobile is great and that we should never ever again have to code anything using a native language. Or maybe not. Before you go nuts and throw away all your Java and Objective C books, there are a few things you should consider.

Firstly, frameworks like Titanium are nice, but you lose control of the native code. You can never be sure if the framework converts its code to the most efficient version of the native code. Secondly, frameworks will always lag behind the release versions of the native platforms they support in terms of available features. Thirdly, you will soon find yourself in situations where you have to customize parts of the code for specific mobile platforms. Frameworks are not he holy grail of mobile applications, but they can be very helpful in certain cases. Titanium Mobile is certainly worth considering if you are going to make an application that has to work on both iOS and Android.

Sources:

• Titanium Mobile: Installing on Windows 7
• Appcelerator Documentation Center - Documentation
• Getting Started with Kitchen Sink.
• appcelerator/KitchenSink - GitHub

A slimmed down version of this entry is available at BEKK Open.