Simple mobile app in Titanium Developer

  1. RkBlog
  2. EN
  3. Programming
Check out the new site at https://rkblog.dev.
25 February 2010 Comments
Now it's time to write some simple mobile app using Titanium Developer. Venturing in the APIs we some help - KitchenSink example app and documentation.

Application files and folders

Mobile app created in Developer will look like this: 
build  CHANGELOG.txt  LICENSE  LICENSE.txt  manifest  README  Resources  tiapp.xml
Folder build will contain binary builds of your app. Resources folder holds all files and code of your app. File tiapp.xml contains application configuration, including list of windows (2 by default), like this: 
<window>
            <id>initial</id>
            <url>index.html</url>
            <backgroundColor>#FFFFFF</backgroundColor>
			<icon>ti://featured</icon>
			<barColor>#000</barColor>
			<fullscreen>false</fullscreen>
        </window>
If we specify only one window - no tabs will be used. In Resources we will find: 
about.html  android  index.css  index.html  index.js
index.html is the main window of our application (defined in tiapp.xml). Folders "android" i "iphone" can be used to add specific files or code for selected os (they can overwrite files in Resources).

How do you make an application?

It's quite strange to code a mobile app in HTML/CSS/JS. What you have to do is:
  • Make HTML templates
  • Write some CSS styles
  • Write JavaScript code that will handle the app functionality
You can go with basic web-like apps that doesn't use native widgets, or write a lot of JavaScript code that uses Titanium AVI to create app interface using widgets. Application built with native widgets is presented in Hybrid iPhone Apps with Titanium Mobile.

The Mobile API isn't documented well, and you will have to digg in Kitchen Sink or do a lot of debuging, testing.

Simple mobile application

So we start with an application that will show RSS channel entries from a selected website (in this case filmaster.com). For comparison I'll make two windows - two tabs. One will show RSS entries using native widgets, and second one using HTML.
  • Create mobile project in Titanium Developer
  • In tiapp.xml define two windows: 
    <windows>
        <window>
            <id>initial</id>
	    <title>Native</title>
	    <icon>static/native.png</icon>
            <url>index.html</url>
            <backgroundColor>#FFFFFF</backgroundColor>
	    <barColor>#000</barColor>
	    <fullscreen>false</fullscreen>
        </window>
	<window>
            <id>weblike</id>
	    <title>Weblike</title>
	    <icon>/static/weblike.png</icon>
            <url>weblike.html</url>
            <backgroundColor>#EE4508</backgroundColor>
	    <barColor>#000</barColor>
	    <fullscreen>false</fullscreen>
        </window>
    </windows>
  • Create weblike.html, and add some initial code to this file and to index.html: 
    <html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Filmaster Mobile</title>
	<script type="text/javascript" src="static/jquery.js"></script>
	<script type="text/javascript" src="static/jquery.jfeed.pack.js"></script>
	<script type="text/javascript" src="static/jquery.utils.min.js"></script>
	<script type="text/javascript" src="index.js"></script>
	<link href="index.css" rel="stylesheet" type="text/css"/>
</head>
<body>
	<div id="logo"><img src="static/logo.png" alt="logo" /></div>
	<div id="rss">
		Loading RSS Channel
	</div>
</body>
</html>
    Where jquery.jfeed.pack.js is a jfeed jQuery plugin (RSS parsing), jquery.utils.min.js is a jquery-utils plugin (needed by me to handle UTF-8 strings with non-ascii characters - like Polish language ;)). The HTML/CSS page will show the site logo on orange background and message about loading RSS channel. index.js and weblike.js for the second window (tab) will contain code implementing their functionality.
  • Now it looks like this:
    tiapp1
  • I wrote such code for weblike.js: 
    window.onload = function()
{
	html = '';
	jQuery.getFeed({
        url: 'http://filmaster.pl/planeta/rss/',
        success: function(feed) {
		for(var i = 0; i < feed.items.length && i < 5; i++) {
		    var item = feed.items[i];
		    html = html + '<h4>' + item.title + '</h4><p>' + item.description + '</p>';
		    }
		
		jQuery('#rss').html(html);
		}    
	});

};
    The code uses jFeed plugin to download RSS channel and put the result in the page weblike.html.
  • The window looks like this:
    tiapp1
    . For Polish feed there are problems with non-ascii characters. Such problems can be solved by $.UTF8decode() from jQuery-utils.
  • After the fix code looks like this: 
    window.onload = function()
{
	html = '';
	jQuery.getFeed({
        url: 'http://filmaster.pl/planeta/rss/',
        success: function(feed) {
		for(var i = 0; i < feed.items.length && i < 5; i++) {
		    var item = feed.items[i];
		    html = html + '<h4>' + $.UTF8decode(item.title) + '</h4><p>' + $.UTF8decode(item.description) + '</p>';
		    }
		
		jQuery('#rss').html(html);
		}    
	});
};
    tiapp2a
So using web technologies we created simple application, that (nicely finished) can be used to promote the website or serve as a mobile version of it. Now lets try do the same with native widgets.
  • For index.js I wrote such code: 
    window.onload = function()
{
	jQuery.getFeed({
        url: 'http://filmaster.pl/planeta/rss/',
        success: function(feed) {
            var data = [];
            var desc_data = [];
            for(var i = 0; i < feed.items.length && i < 5; i++) {
                var item = feed.items[i];
                data[i] = {title: $.UTF8decode(item.title), hasChild: true};
		desc_data[$.UTF8decode(item.title)] = $.UTF8decode(item.description);
            }
	
	var tableView = Titanium.UI.createTableView({data:data,title:'Tytuł'}, function(eventObject) 
		{
		    // Now call some eventhandler function to handle the click event object
		    // Took this from the Kitchen Sink
		    var a = Titanium.UI.createAlertDialog();
		    a.setTitle(eventObject.rowData.title);
		    a.setMessage(desc_data[eventObject.rowData.title]);
		    a.show(); 
		
		});
	//add view to current window
	Titanium.UI.currentWindow.addView(tableView);
	// show view
	Titanium.UI.currentWindow.showView(tableView);

        }    
	});

};
  • Which in android gives:
    tiapp3a
    tiapp3
  • In this JavaScript code there is Titanium.UI.createTableView (doc) - native widget available through the API. This will show a native table view on each system. Clicking on an entry will show it's description through Titanium.UI.createAlertDialog widget - doc.
Titanium Developer has some big potential, but it really needs well written documentation (like PyQt4 one?) and short examples of common tasks and code patterns.

Source

Import project in Titanium Developer.
RkBlog

Linux and programming, 25 February 2010

Check out the new site at https://rkblog.dev.
Comment article
Comment article RkBlog main page Search RSS Contact