Building a native mobile app with Titanium in less than an hour
Posted: July 13th, 2010 | Author: Giv | Filed under: Mobile, Tutorials | 24 Comments »UPDATE: 24 Nov 2010
Please note I no longer develop apps using Titanium and no longer follow version updates so the examples below may no longer work.
When I wrote my last blog entry, I favoured objective-c over Appcelerator’s Titanium framework thinking it just wasn’t good enough. Almost 6 months later and I would like to take back that comment. Titanium is no longer an embedded web browser inside an app. It uses Javascript to compile an entire iPhone/Xcode project with objective-c, so it uses native UI elements using clever APIs. This is also true for Android apps, iPad and now Blackberry.
This is not to say there’s no need to use Xcode ever again. But if you’re planning to build a general navigation-based app with loads of menus, windows and the ability to pull/push data from the web, it can be done much faster with Titanium. Plus you’ll be able to create the same app for multiple platforms without re-writing the code.
So I wanted to put together a relatively simple app that lets me browse and search through a list of items, in this example, animals; and be able to group them alphabetically like the iPhone’s contacts directory. Then I want to click on an item to see more details and be able to save my favourite items for easy access later.
I’ve created a sample app that you can download and use right now. All you have to do is add your own data and you’re done.
I’m going to quickly run you through how to set up the tabs, the list, alphabetical grouping, search and detail view for each item. I won’t explain the saving feature here but once you do the main part below you should be able to easily follow the rest by looking at the code.
Here’s how it works. See the sample app to work out where to place individual files.
1. Create a tab group. One for the main list and one tab for saved items:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | // create tab group var tabGroup = Titanium.UI.createTabGroup(); // create base UI tab and root window var mainList = Titanium.UI.createWindow({ title:'Animals', backgroundColor:'#ffffff', barColor:'#333', url:'mainList.js', tabBarHidden: false }); var tabMainList = Titanium.UI.createTab({ icon:'book.png', title:'Animals', window:mainList }); // create saved items tab var faves = Titanium.UI.createWindow({ title:'Saved Items', backgroundColor:'#ffffff', barColor:'#333', url:'faves.js', tabBarHidden: false }); var tabFaves = Titanium.UI.createTab({ icon:'star.png', title:'Saved Items', window:faves }); // add tabs tabGroup.addTab(tabMainList); tabGroup.addTab(tabFaves); tabGroup.open(tabMainList); Titanium.UI.currentWindow.add(tabGroup); |
That’s it. We have now created two tabs. mainList.js will take care of the content for the first tab and faves.js for the saved items tab.
2. Create a JSON doc (data.js) containing your data for the list:
1 2 3 4 5 6 7 | var myData = [ {"title":"Armadillo", "description":"Armadillos eat ants but they are not Anteaters"}, {"title":"Bear", "description":"Bears are awesome and they like honey"}, {"title":"Dog", "description":"Dogs are the best and they woof"}, {"title":"Deer", "description":"D'oh! a deer..."}, {"title":"Zebra", "description":"Zebras are stripey and cool"} ]; |
3. Set up your directory list in the first tab (mainList.js)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | // include the data Titanium.include('data.js'); var data = []; var firstLetter; var oldFirstLetter; // loop through data and add to list for (var i = 0; i < myData.length; i++) { // get first letter of each item for grouping firstLetter = myData[i].title.substr(0,1); if(i == 0){ oldFirstLetter = firstLetter; Ti.API.info(oldFirstLetter); } else { if(firstLetter == oldFirstLetter){ oldFirstLetter = null; } else { oldFirstLetter = firstLetter; } } data.push({title:myData[i].title,hasChild:true,header:oldFirstLetter}); oldFirstLetter = firstLetter; } // add search bar var search = Titanium.UI.createSearchBar({ showCancel:false }); // create table view var tableview = Titanium.UI.createTableView({ data:data, search:search, filterAttribute:'title' }); Titanium.UI.currentWindow.add(tableview); // create table view event listener tableview.addEventListener('click', function(e) { var win = Titanium.UI.createWindow({ url:'details.js', backgroundColor:'#ffffff', barColor:'#333333', title:e.rowData.title }); // send selected item's title to detail page win.currentItem = e.rowData.title; Titanium.UI.currentTab.open(win,{animated:true}); }); |
Notice in the tableview event listener we are telling it to just open a new window on click and pass the item’s title.
4. Display the selected item’s data in details.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | // include the data Titanium.include('data.js'); win = Titanium.UI.currentWindow; var desc = ''; // create scroll view for the content var scrollView = Titanium.UI.createScrollView({ contentWidth:'auto', contentHeight:'auto', top:0, showVerticalScrollIndicator:true, showHorizontalScrollIndicator:false }); // loop through data and get correct item by title (this is easier than using Id's incase you add new items later) for (var i = 0; i < myData.length; i++){ if(myData[i].title == win.currentItem){ desc = myData[i].description; } } // create description label var label = Titanium.UI.createLabel({ text:desc, height:'auto', width:300, top:10, font:{fontSize:16}, color:'#333333', textAlign:'left' }); |
That’s it. I said an hour to develop this but in reality it will probably take you much less once you get used to the APIs. Of course for the data source you can use XHR to get data from the web but if you want your app to be usable without an internet connection, you would have to store the data locally like this.
I hope this was helpful. Let me know if you have any questions.
24 Comments »