Protokoll

Zur Entwicklung mit Appcelerator Titanium Mobile ist zuerst der Download des aktuellen SDK Titanium Developer notwendig. Zur Nutzung des Programms ist ein kostenloser Appcelerator Network Login notwendig, für den man sich online anmelden kann.

Beim ersten Start des Developers wird eine neue Version 1.5 des Mobile SDK heruntergeladen. Dies ist ein wenig verwirrend, da der Developer selbst eine Versionsnummer besitzt (1.2.1) und diese in der Kopfzeile des Produkts angezeigt wird. Auch nach der Installation des Updates ändert sich diese nicht. Nach etwas Recherche stellt sich heraus, dass Developer sozusagen das GUI für das Mobile SDK ist, die Versionsnummer des Mobile SDK jedoch nirgends angezeigt wird und nur bei Updatevorgängen auftaucht.

Nachdem diese Unklarheit beseitigt ist kann der Pfad des lokal schon installierten Android SDK eingestellt und das erste Projekt vom Typ „Mobile“ erstellt werden. Hierbei werden der Anwendung schon ein Name und eine Paketbezeichnung (zum Beispiel com.organisation.application) zugewiesen. Im gewählten Ordner werden die grundlegenden Projektdateien erstellt.

Im Ordner „Resources“ befindet sich eine Datei „app.js“ die beim Start der mobilen Anwendung aufgerufen wird. Sie ist mit Quellcode einer einfachen Beispielanwendung gefüllt, die dem Entwickler erste Beispiele zur Nutzung von Titanium Mobile geben soll. Das Beispiel macht einen sehr übersichtlichen Eindruck.

„Test & Package“ funktioniert leider nicht direkt, es ist eine Vielzahl an Einstellungen im Android SDK und den Umgebungsvariablen des Betriebssystems notwendig. Dieser komplizierte Prozess ist jedoch weniger Titanium Mobile geschuldet, sondern Java und dem Android SDK allgemein zuzurechnen. Trotzdem erschwert es den Einsatz ungemein.

Ist das Problem behoben, lässt sich die Beispielanwendung im Android Emulator betrachten und testen. Appcelerator Titanium nutzt die in den Mockups vorgesehene Tabbar (vgl. Abbildung 6.1, unterer grauer Balken mit Tabs) schon in der Beispielanwendung, weshalb bei der Titanium-Implementierung dieses Interface-Element im Gegensatz zur jQTouch-Implementierung auch genutzt werden soll.

Der Beispielcode wird gelöscht und der Startbildschirm mit gloveler-Logo und Suchfeld erstellt. Gleichzeitig werden die Tabs eingebunden und die Favoritenansicht vorbereitet. In wenigen Zeilen Quellcode ist so der Grundstein für die Anwendung gelegt worden (vgl. Quellcode 6.6).

var tabGroup1 = Titanium.UI.createTabGroup();

var suche = Titanium.UI.createWindow( … );
var tab1 = Titanium.UI.createTab( … );
var logo = Titanium.UI.createImageView( … );
suche.add(logo);
var suchfeld = Titanium.UI.createTextField( … );
suche.add(suchfeld);
var favoriten = Titanium.UI.createWindow( … );
var tab2 = Titanium.UI.createTab( … );

tabGroup1.addTab(tab1);
tabGroup1.addTab(tab2);
tabGroup1.open();

Quellcode 6.6: Grundgerüst des Prototyps mit Appcelerator Titanium Mobile

In diesem Codebeispiel wurden lediglich die Eigenschaften-Definitionen der einzelnen Objekte weggelassen. Diese erfolgen als eigenes Objekt, das an die Methode übergeben wird und sind sehr an CSS-Eigenschaften einer Webseite angelehnt. Beispielhaft das Konfigurationsobjekt des Logos auf dem Startbildschirm in Quellcode 6.7.

{
url: 'gloveler-logo-195x40.png',
width: '195px',
height: '40px',
left: '60px'
}

Quellcode 6.7: Eigenschaftenliste für Objekte in Titanium Mobile

Auch alle weiteren Objekte lassen sich auf diese Weise konfigurieren. Die nutzbaren Eigenschaften sind im API Reference Guide von Titanium Mobile dokumentiert. Leider fehlen dort meist grafische Beispiele, so dass die Suche nach bestimmten Interface-Elementen sehr zeitraubend sein kann.

Interaktion mit einzelnen Elementen wird in Titanium Mobile durch ein Event-System realisiert. Die Objekte lösen zu bestimmten Anlässen definierte Events aus, die dann vom JavaScript-Code behandelt werden können. Das Textfeld wird mit einem Event-Handler für das Drücken der Enter-Taste belegt, der die Funktion doSearch() ausführt (vgl. Quellcode 6.8).

suchfeld.addEventListener('return', doSearch);

Quellcode 6.8: Hinzufügen eines Event-Listeners auf ein Objekt

Diese blendet erst einmal nur die bisher angezeigte TabGroup mit Start- und Favoritenbildschirm aus und lädt dafür zwei Tabs für die Suchergebnisse und die Kartenansicht.

Das dynamische Laden von Daten vom gloveler-API sollte eigentlich mit Titanium.Network.HTTPClient realisierbar sein, funktioniert im Simulator allerdings nicht. Eine ausführliche Recherche und viele Codebeispiele helfen nicht. Das Problem bleibt ungelöst und ein statisches Suchergebnis wird als Variable in das Programm eingebunden, um weiter arbeiten zu können. Dieses Suchergebnis lässt sich gut verarbeiten und die einzelnen Informationen zur Darstellung in einer Tabelle extrahieren. Diese bietet hervorragende Möglichkeiten zur Formatierung der Darstellung.

Obwohl Titanium Mobile die Einbindung einer Karte von Google Maps laut Dokumentation explizit unterstützt, ist die Funktionalität nicht zum Laufen zu bekommen. Die Anwendung zeigt im Simulator einfach nur eine weiße Fläche an oder stürzt ohne Fehlermeldung ab.

An dieser Stelle wird die Entwicklung des Prototyps mit Appcelerator Titanium Mobile wegen Überschreitung des vorgesehenen Zeitkontingents abgebrochen.

Bewertung

Nach der Gewöhnung an das objektbasierte Vorgehen von Titanium Mobile ist die Entwicklung einer Anwendung mit JavaScript sehr angenehm. Die Dokumentation zeigt vorbildlich welche Eigenschaften zur Verfügung stehen und wie diese genutzt werden können. Die Integration der Simulatoren mit Debugging-Fenster in SDK Titanium Developer ist vorbildlich.

Gleichzeitig funktionieren viele Elemente nicht wie erwartet oder der Programmierer wird unerwartet bei der Nutzung einiger Elemente eingeschränkt. Hat er eine Frage, steht er fast alleine da. Die angebotene Community-Lösung von Appcelerator verhindert das effektive gemeinsame Lösen einer Problemstellung leider.