Creating a native iphone and android app with Appcelerator Titanium – Part1

In this blog post I will be documenting my first app which I am building with Titanium which is a cross platform native app tool made by Appcelerator.  Feel free to use it as a tutorial is you like.

Introduction

I am an experienced developer and have been using a MAC with XCODE to make some basic apps over the last 6 months.  Quite frankly I find it pretty hard work, that is not to say that programming should not be difficult, but Apps is more of a sideline for me and my company so I would like to be able to get a bigger ‘bang for my buck’ (buck in this case being hours).

I have built a sort of wrapper for quick and easy deployment of HTML5 based apps built with sencha touch and jqtouch but they are not quite as good as native apps.  It is for this native building that I want to maximize my efforts and therefore the idea of a cross browser platform is appealing so long as it really does produce native code.  In the case of Titanium I saw that after making my program I was able to export it as an XCODE project and then compile it, therefore I do see Titanium as providing this ‘real native’ solution.

The log of my app

firstly I see that Titanium makes a native folder structure on your filesystem and from then on you are on your own.  It creates a few files for you but you have to find an editor yourself and work from examples and the API Docs. From here I start with an app called test003m.

In the folder there is :

• tiapp.xml, which is apparently a static configuration file
• build(folder), which is where the output will go
• Resources (folder), where “resources” will go, I am not quite sure what “resources” are at the moment but I will soon find out.
• i18n (folder), where I can put language specific stuff, apparently.
• More informtion can be found here.

app.js

In the resources folder is app.js which I suspect is quite important. it contans the following code to start with:

Titanium.UI.setBackgroundColor('#000');

var tabGroup = Titanium.UI.createTabGroup();

var win1 = Titanium.UI.createWindow({
 title:'Tab 1',
 backgroundColor:'#fff' 
}); 

var tab1 = Titanium.UI.createTab({
 icon:'KS_nav_views.png', 
 title:'Tab 1', window:win1 
});

Now this is very reminiscent of the structures you use in EXT.JS in order to set up the GUI.  It is all JSON based syntax, so far it looks like it could be quite easy to get the hang of.

The following are the major design components in Titanium:

• Windows – windows host one or most Views
• Views – views draw content on the screen
• Widgets – widgets are special types of views that perform specific actions like buttons

Here is an example from the Appcellerator website of code to make a view in a window

var win = Ti.UI.createWindow();
var view = Ti.UI.createView({backgroundColor:"red"});
win.add(view);
win.open();

We could restructure the above code to use a URL-based design.

First, in your app.js, you would add:

var win = Ti.UI.createWindow({url:"view.js"}); win.open();

Then, create a file named view.js and add the following code:

var win = Ti.UI.currentWindow; var view = Ti.UI.createView({backgroundColor:"red"}); win.add(view);

Notice that the win variable points to Ti.UI.currentWindow. Titanium defines a set of special variables in your JavaScript context automatically for you which allow you. Ti.UI.currentWindow defines the Window reference that owns (opened) the current Window so you can still reference it.

To add interacivity this should be the code according the the tutorial I am reading:

view.addEventListener('click',function() {
 view.animate({width:96,height:96,duration:1000});
});

Here is a more complicated example:

view.addEventListener('click',function() {
 var t = Ti.UI.create2DMatrix();
 t = t.rotate(-90).scale(4);
 view.animate({transform:t,duration:1000});
});

Widgets

It seems to me that widgets are basically forms, i.e. views with controls on them which in turn cannot contain views.  Here is another example from the website

var win = Ti.UI.createWindow();
var view = Ti.UI.createImageView({
 image:"myimage.png",
 width:24,
 height:24
});
var button = Ti.UI.createButton({
 title:"Animate",
 width:80,
 height:40,
 bottom:10
});
button.addEventListener("click",function(){
 view.animate({top:0,duration:500});
});
win.add(view);
win.add(button);
win.open();

Modal windows

You can create modal windows at any time without adding them to another component.  Here is an example of opening a modal window which is attached to a button by the use of an onclick handler

var b3 = Ti.UI.createButton({
 title :'b3'
});
b3.addEventListener('click',function(e) {
 var mod1 = Titanium.UI.createWindow({
 backgroundColor:'red'
 });
 var mod1b3 = Ti.UI.createButton({
 title :'b3'
 });
 mod1b3.addEventListener('click',function(e) {
 mod1.close();
 });
 mod1.add(mod1b3);
 mod1.open({
 modal:true,
 modalTransitionStyle: Ti.UI.iPhone.MODAL_TRANSITION_STYLE_COVER_VERTICAL,
 modalStyle: Ti.UI.iPhone.MODAL_PRESENTATION_FORMSHEET
 });
});

The reference guide (link)

There is a comprehansive guide to the API but I found it difficult to determins which component was which by looking at the descriptions.  I made myself a set of notes which I share with you:

• Tab Group, this is the classic navigation with tabs below the display
• Table View, this is any sort of tabular data but NOT a navigation
• WebView, this is any sort of html in a window
• OptionsDialog – this is the options which shoot up from the bottom of the screen
• EmailDialog – this is for sending emails
• MapView – the classic map view
• Coverflow View – this is the flipping inames
• Dashboard view – this is like the appie front screen with a series of icons
• Tab Badge – is the red number on the tabs
• WindowNavBar – this is at the top of the window and has the back buttons
• Window Toolbar – this is at the bottom of the view and I think is seldom used
• NavGroup – this is the left sliding list of items with a detail view or a 2nd level of menu to the right
• Controls
• Slider
• Switch (on off)
• Activity indicator
• Progress bar
• Button
• Label (any text)
• Search Bar – this bar at the top of a view
• Text field, text area
• Button Bar – a group of buttons
• System Buttons (as from the system)
• Picker – this is a select box
• Photo Gallery – access to photos
• Orientation – access to orientation
• Contacts – acces to address book
• Camera – camers
• Save to Gallery
• Shake
• Status Bar – the whole bar at the top of the page  - can be hidden.
• App Badge – the red number in the app

To help with remembering which components and view to use I have made a sort of cheat sheet with screenshots from the Appcelerator Titanium kitchen sink Application:

I am currently writing my part 2 so this post is to be continued…

Advertisement