Was brauchen wir zum Start

Unter http://www.appcelerator.com/products/download/ können Sie sich nach einer kostenlosen Registrierung die „Comunity Edition“ des  „Titanium Studion“ herunter laden. Das Studio unterstützt Sie in allen Belangen der Entwicklung. Ob Projektverwaltung, coding oder das Ausführen auf Emulatoren oder Endgeräten. Für die Entwicklung von Android-Apps können Sie  Windows, Linux (bevorzugt Ubuntu) und MacOS nutzen. Das kompilieren von Apples iOS Programmen setzt zwingend ein MacOS voraus. Das erstellen von Blackberry Anwendungen ist nur unter Windows möglich.

Um die Programme auch für die jeweilige Plattform zu kompilieren benötigen Sie, wie in der nativen App-Entwicklung üblich noch die jeweiligen SDK´s der Hersteller. Installieren Sie bitte Googles Android SDK, welches für alle Plattformen vorhanden ist. Auf dem Mac sieht es etwas anders aus. Hier wird das iPhone SDK 4.3, sowie die Programmierumgebung Xcode 4.X benötigt. Nach der SDK installation kommt nun das vorher heruntergeladene Titanium Studio. Der Installer führt Sie durch alle wichtigen Einstellungen. Das Erkennen des iOS-SDK erfolgt automatisch. Bei dem Android-SDK kann es manchmal zu Problemen kommen wenn der Pfad nicht erkannt wird. Dann muss per Hand eingegriffen werden und der Pfad selbst eingestellt werden. Lassen Sie uns nun die Installation abschließen. Um sicher zu sein ob alles richtig eingerichtet ist, erzeugen Sie ein neues Projekt. Durch „File->New->Titanium Mobile Project“ erstellen Sie ihr erstes Titanium Projekt. Hierbei müssen folgende Pflichtangaben gemacht werden:

- Projektname – Wie heißt Ihre App? Damit ist nicht nur das Verzeichnis gemeint, welches angelegt wird.

- AppId – für viele mobile Entwickler bereits ein alter Hut. Für die Neueinsteiger aber trotzdem noch einmal kurz erklärt. Diese Id wird normalerweise in der sogen. "reverse-domain-name“ Konvention geschrieben. Beispiel: de.beispieldomain.appname.

- Plattform Checkboxen werden noch die möglichen Zielplattformen ausgewählt. Im Normalfall also iPhone, iPad und Android. Jetzt noch mit „Finish“ abschließen. Fertig ist das erste Projekt. Bei dem Erstellen wird automatisch ein lauffähiger Beispielcode mit geliefert. Damit kann das erstellte Projekt direkt getestet werden. Dabei können Sie sowohl den iPhone-Simulator wie auch den Android-Emulator starten. Der Emulator von Android braucht erfahrungsgemäß etwas länger. Sind die Emulatoren gestartet und fertig geladen sollte Ihr Ergebnis wie auf den Abbildungen X und Y aussehen. Dabei sind die Tabs unter Android oben angeordnet und im iOS unten. Nativ eben, so wie es die Benutzersteuerung der Plattform vorsieht. Dies wurde nicht im Code programmiert.

Das erste Programm – Hallo Making-Apps

Nachdem die Installation erfolgreich abgeschlossen ist, wollen wir nun mit der ersten eigenen Entwicklung anfangen. Erstellen Sie nun wieder ein neues Projekt und nennen es „Hallo Making-Apps“. Vergessen Sie nicht die Pflichtangaben AppId und Publisher URL. (Abbildung X). Die Datei app.js im Ressource-Ordner ist unser erster Einstiegspunkt. Im Kasten Script X sehen Sie den zu erstellenden Code. Die Zeilen 1-3 im Script erstellen ein Window-Objekt um überhaupt etwas anzuzeigen. Dabei wird die Eigenschaft Hintergrundfarbe auf Weiss gesetzt. Die Zeilen 5-10 erstellen ein Label-Objekt und legen den anzuzeigenden Text und die Ausrichtung fest. Danach wird in Zeile 12 das Label auf das Window „geklebt“ und in Zeile 14 das Window-Objekt geöffnet um es anzuzeigen. Eigentlich ganz einfach.

var win = Titanium.UI.createWindow({ 

    backgroundColor:'#fff'

});

var label1 = Titanium.UI.createLabel({

            color:'#999',

            text:'Hallo mobile Welt',

            textAlign:'center',

            width:'auto'

});

win.add(label1);

win.open();

Glückwunsch! Das erstes Titanium Mobile-Projekt ist erstellt. Dies kann sowohl im Android- sowie iPhone-Simulator laufen lassen. Nachdem nun „Hallo Welt“ auf den beiden Plattformen läuft, hier nun die wichtigsten Bestandteile für ein Titanium Mobile Projekt. Die Verzeichnisstruktur enthält immer auf oberster Ebene die Datei tiapp.xml. Diese Datei stellt quasi eine Konfiguration für jedes Projekt dar. Der Ordner „Build“ enthält die Unterordner iPhone sowie Android. Hier finden Sie nach einem erfolgreichen Buildvorgang die nativen Projekte.

Den „Ressources“-Ordner kennen Sie ja schon, in diesem haben Sie die app.js Datei editiert. Der Ressource Ordner ist für Code vorgesehen. Dabei ist die app.js immer die Datei die als erstes beim Start einer App ausgeführt wird. Die Unterordner iPhone und Android sind für Plattformspezifisches. Dies können z.B. Bilder sein. Ein iPhone benötigt eine andere Auflösung für den Splashscreen oder das App-Icon als ein Android-Gerät.  Je nach Gerät wird dann der jeweilige Ordner automatisch berücksichtig.

Hallo making-Apps 2.0

Nun müssen wir noch sicherstellen dass unser Hallo Welt Beispiel auch in anderen Ländern verstanden wird. In nativen Projekten gibt es ja eine Lokalisierungsdatei. Das ist bei Titanium Mobile auch so. Erstellen Sie auf der Projektordner-Ebene ein Verzeichnis „i18n“. Danach folgen Unterverzeichnisse nach dem ISO 3166-1 Buchstabencode. Also z.B. de für Deutschland, en für English oder auch se für Schweden. Innerhalb dieser Ordner erstellen Sie eine strings.xml Datei (Script Y). Die Android-Entwickler unter Ihnen werden sich dabei wie zu Hause fühlen. Diese Strings.xml ist identisch mit den Android lokalisierungs Dateien. In der app.js müssen wird nun noch die Lokalisierung eingetragen.  In Zeile 7 ersetzen Sie das statisch geschriebene text:’Hallo mobile Welt’ mit text:Titanium.Locale.getString(„lblHelloWorld“). Nun wird automatisch auf dem SmartPhone die jeweilige Sprache aus der stings.xml geladen.

Nun kenne Sie die Basics von Titanium Mobile. Sie können die ersten Schritte in Titanium Mobile erstellen. 

Dies ist ein Gastbeitrasg von Markus Ross von der Firma Zahlenhelfer.de