Die folgenden Anleitungen wurden unter Mac OSX (Snow Leopard, Lion) erstellt und ich würde jedem raten, zur Entwicklung auch einen Mac zu nutzen, da ein Test mit iOS-Geräten nur so möglich ist und anderseits der Android Emulator bei jedem Start quälend langsam alles compiliert und das so einfach keinen Spass macht. Im schlimmsten Fall läuft Titanium aber dank Aptana->Eclipse->Java auch unter Windows.

Basisobjekte von Titanium UI

Mobile Entwicklung mit Titanium enthält im Normalfall die folgenden Instanzen

• Tabgroups
• Tabs
• Windows
• Views

Tabgroups und Tabs sind nicht zwangsläufig notwendig. Um irgendetwas darzustellen, ist aber mindestens ein Window und ein damit verbundener View notwendig.

Ein View ist in hier ein normaler (nativer) View oder ein so genannter Webview. Bei einem Webview wird innerhalb der Anwendung  der Browser des Endgeräts geöffnet und dort die Webseite angezeigt. In Verbindung mit einer mobilen Framework wie z.B. jquery-mobile lassen sich so relativ schnell Apps erstellen, die aber im einfachsten Fall  nur mit Appicons verknüpfte Webseiten sind. Titanium bietet aber die Möglichkeit, App interativ zu entwickeln. Es wird mit einer simplen Webview-Anwendung gestartet und im Anschluss mit nativen Elementen aufgehübscht, mit mobilen Seiten erweitert und bei ausreichend Durchhaltevermögen steht eine native Anwendung und nebenbei wurde vielleicht noch eine mobile html-Version erstellt.

Nun aber ein einfacher Quickstart, um eine Webseite einzupacken, mit einem Icon und Startbildschirm zu versehe

Erstes Projekt anlegen

• Titanium starten
• Ein neues mobiles Titanium Projekt erstellen: File -> New -> Titanium Mobile Projekt
• Innerhalb der Dialogbox nun nett alles eintragen und vor allem auf die App Id achten. Diese ist wichtig für das spätere Deployment im AppStore. Die Daten aus diesem dialog können später allerdings auch im Nachhinein geändert werden, falls ein Eintrag nicht stimmt. Als Deployment Targets nehmen wir das volle Programm inkl. Android, denn sonst könnte wir das ganze ja direkt mit Objektive C programmieren, welches wir ja alle beherrschen, gell?
• Im kommenden Dialogfenster wählen wir nun aber kein Projekttemplate aus denn wir wollen ja eine einfachen sicheren Start hinlegen.  Finish ist hier unser Freund und im Anschluss hat titanium uns
• Ein “nicht leeres” Projekt angelegt mit 2 Tabs und 2 nativen Views, die innerhalb von 2 windows dargestellt werden.

App im Simulator testen

Wir können nun prüfen, ob unsere Entwicklungsumgebung schon mal läuft. Hierzu einfach erstmal den iphone Simulator starten. Nun übersetzt Titanium unseren Code erst in Objektive C und deployed eine kompilierte Version auf dem Simulator.

In der Console lassen sich nun die ganzen Debug-Meldungen und evtl. Fehler verfolgen. Sehr praktisch ist die Console auch um über den Simulator zu debuggen. Mittels z.B. Ti.API.debug lassen sich touch events oder eventListener auswerten. Fehler werden hier in roter Schrift angezeigt und führen im schlimmsten Fall zum Abbruch der Simulation. Titanium schickt in der Standardkonfiguration Trackingdaten, was bei meiner Firewall gesperrt ist und somit als Fehler deklariert wird. Der Simulator läuft aber denoch einwandfrei.

Verzeichnisstruktur

Innerhalb von Titanium haben wir nun ein root-Verzeichnis und darin die Projekteinstellungen. Der Klick auf tiapp.xml öffnet das Dialogfenster welches wir bei der Erstellung des Projekts angelegt haben. Der Ressources Ordner ist allerdings der “Place to Be”.

Hier finden sich die folgenden Elemente:

Alles auf Null

Wir wollen die Basisbefüllung erst einmal vergessen und machen wir geplant einen doofen Webview ohne Tabs, Titel oder sonstigen Kladeradatsch. Also mutig voran, auf in die app.js und den gesamten Inhalt erst mal löschen.

Als erstes brauchen wir jetzt einen view, um die Website anzuzeigen. Also erzeugen wir eine Webview-Instanz

var viewWeb = Ti.UI.createWebView({url:'http://blog.wolfgang-burger.de'};

Nun noch eine Window-Instanz erzeugen und ein Child an die Instanz anhängen. windowWeb.open() öffnet das Fenster dann.

var windowWeb = Titanium.UI.createWindow();
windowWeb.add(viewWeb);
windowWeb.open();

Beim Tippen im Editor versucht Titanium Code zu vervollständigen, was ebenso wie die CodeHints sehr nützlich ist. Jetzt starten wir allerdings unsere App und nach kurzer Zeit erscheint die angegebene URL in unserem Simulator.

Optik

Um unsere App nun rund aussehen zu lassen, wäre ein eigenes App-Icon und ein Startbildschirm toll. Da dies von den Endgeräten abhängig ist müssen wir zur Anpassung in  den entsprechenden Ordner. Unser App-Icon befindet sich unter iphone und heisst treffenderweise appicon.png. Einfach mit einem png-Bild in der Auflösung 75×75 Pixel in 72 dpi ersetzen und fertich!

Das gleiche gilt für den Startbilschirm (Splashscreen). Hier werden für die unterschiedlichen Auflösungen entsprechende bilder benötigt:

• iphone
• iphone Retina
• ipad
• ipad-Landscape-Modus

Finish

So jetzt ist die App erstmal deploybar. Noch nicht grosses, aber wenn nun ein Kunde so etwas für wenig Geld erstmal haben will – gut so.

Für uns ist das allerdings erst der Einstieg in die Entwicklung in Titanium und um und im nächsten Teil werde ich wohl einen nativen View bauen und en paar Tabs einbauen.

Zum Schluss…

muss noch erwähnt werden, dass Appcelerator die Verwendung von webviews nicht empfiehlt und es nicht garantiert ist dass eine solche App durch den Apple Genehmigungsprozess kommt. Aber das ist ja nur ein Start und am Ende machen wir dann hoffentlich alle glücklich!

Quellen:

• Q&A zu Titanium von Appcelerator 
• Titanium API-Referenz