12
2011
Building a simple Titanium App – Part 1
by 
Appcelerator Titanium makes cross-platform native application development easy. As a free and open source application development platform, Titanium lets you create native mobile, tablet and desktop application experiences using existing web skills like Javascript, HTML, CSS, Python, Ruby, and PHP. It’s also vastly under documented, so the good guys over at Testled have kindly decided to run us through a building a simple titanium app. Let’s begin!
The best way to learn a new technology is to build something real, so we decided to build a useful little tool to check if any of our sites or servers are down from a mobile device. Given that this is quite a simple application, I decided to write up the process. Hopefully this should give anyone using Titanium a useful starting point.
This article doesn’t cover setting up Titanium, or installing any SDK’s, as there is already the excellent documentation on the Titanium site.
Essentially, all this application does is:
- Grab some JSON data.
- Use that data to build a tableview.
- Setup a window for each item of data.
We’re going to be getting data from our own internal server monitoring software, but you can substitute our data with anything you like, such as JSON from someone’s Twitter feed, or maybe blog posts from a WordPress JSON feed.
We start by building some wireframes for the application:
The application consists of just two pages. The first is a scrolling list, which is split into two categories, servers and websites. The second is a detail page for a server or website, which gives the current status, and some detail about uptime over the last month.
Next, we created the project in Titanium Developer:
As this app is so simple, we don’t really need to split the application up into multiple files, so we kept all the code in app.js. First, I wanted to setup the window for the application.
The above code just sets up a simple TabGroup object, and then attaches a Tab, which contains a Window. As this application doesn’t have any other tabs, we hide the actual tab bar on line eight.
As our application does nothing unless it has some data to work with, the next thing we do it setup an event handler to immediately load our JSON data. The JSON response we’ll be dealing with looks like this:
The simplest thing we can start with it to make the request for that JSON, then output a log message to show that we got a response.
Now that we are successfully retrieving data, we need to turn the raw data into something useful. We walk through the JSON, appending to a ‘data’ array as we go. Once we have finished, we attach the ‘data’ array to a TableView, and display it on the screen. There is also a few other things going on here, though; first, I’m watching the ‘group_name’ field for changes, so we can insert headers into the list. I’m also attaching a search bar to the list, as in our real-world implementation, we have a list of nearly a hundred domains. The code looks like this:
Running the application, you should see something like this:
We’re now half-way through creating our app; most of the hard part is done. We are getting data from our web service, and parsing it to create the main list. In part two, we’ll build the individual screens for each server, and play with making the app a little more user-friendly.
THAT’S IT FOR NOW! PART 2 WILL BE AVAILABLE VERY SOON.
In the meantime, feel free to share your thoughts below.
This tutorial was originally published on the Testled Blog. Go there and say hello! Be nice!
