Creating my first Titanium mobile app

This is a post I published back in July when I was still posting to Tumblr.

As part of our Gendroid mobile initiative, I’ve created a Todo application using Appcelerator’s Titanium studio. The goal of the exercise was to build a simple “breakable toy” application in order to get comfortable with the basics of building a mobile app. Many people in the group decided to build their app as a native Android application using Java and Eclipse.

I decided to build my app using Titanium to take advantage of a single code base that creates apps for multiple mobile platforms. Secondly, the fact that the language used in Titanium is javascript really appealed to me. Javascript is probably the second-most import language that a developer should know (aside from whatever primary language you already know). Lastly, apps are converted to native Objective-C code for iOS if you use the built-in Titanium libraries.

Start by creating a new Titanium mobile project and selecting the mobile devices you want to target (in my case I chose iPhone and Android). After the project files are generated look for the app.js file in the Resources folder. This is the “Main” function that gets called to start your app. In here you setup the starting interface for your app such as a single window or a tab group if your app will involve several pages. For my app I didn’t really have multiple tabs to switch between because it only dealt with managing a task list. Basically my vision was to build a list page and a details page. In order to get page navigation working the way native iPhone apps do it was necessary to create a tab group that had a single tab. Doing this provided the app with a title bar that would automatically incorporate navigation buttons at the top whenever I switched from my list view to my details view.

So app.js defined the tab group. The tab group itself housed a “window” object. The window object represents a new view (or page if you’re more comfortable with the web world). To best separate this I created a new .js file for each window, in this case I created a list.js page and a details.js page. Inside the list.js page is a table view object that you bind to a data array. By default the table view object will fill all available screen space unless you manually set it’s width or height properties. I bound a click event to the table, the code looks very similar to binding a click event to an element in jQuery. In the click event I have it open a new window whose url is set to the detail.js page while setting some page-level variables of this new page so it knows the Id of the row I clicked.

On the details page there are 3 main elements: 1 textbox for Name, 1 textarea for Description, and a Save button. In order to get these on the screen I explicitly set each element’s height, width, and top properties.

Yes this is dreaded absolute positioning and I’m not a big fan of it. I honestly haven’t tried setting up elements any other way yet and am hoping that there’s more of a natural flow layout that happens instead somehow. Once Save is clicked I persist all data and then close the current window. The built-in windows navigation nows to jump back to the previous open window so that the list page comes back up. Of course, if I just close the details window the list page will have stale data and will need to be refreshed. The way that I solved this was by creating a page-level function in the list page that just refreshes the table view data. I pass this function the details page so that when Save is called, the details page can call the Refresh function before it closes its window.

So that’s the general gist of how my first app went. I didn’t really follow any video or web tutorials, what I did do was look at some code from Appcelerator’s KitchenSink demo app. For me it’s just fun to try and figure out how to make something work on your own than to follow a cookie-cutter tutorial on getting something done. It’s probably not the right way but I was happy with the progress that was made and for the short amount of time it took to finish the app (I use the word ‘finish’ very loosely).