Implementierung

Jetzt klicken Sie auf New Project, um ein neues Projekt anzulegen. Bei Project type wählen Sie Mobile, um eine iPhone- und/ oder Android-Anwendung zu erzeugen. Bei Auswahl von iPad ist Apples Tablet das Zielsystem der Wahl. Titanium überprüft, ob das iPhone SDK installiert ist; falls ja, können Sie das Projekt dann auch tatsächlich anlegen.Vergeben Sie einen Namen, eine Anwendungs-ID (übliches Namensschema de.Firma.Anwendungsname - diesen Bezeichner können Sie später nicht mehr ändern) und wählen Sie ein Speicherverzeichnis für die Daten aus. Titanium erzeugt dann im gewählten Ordner die Rahmendateien für das Projekt und stellt Ihnen (unter anderem) das Register Test & Package zur Verfügung. Dort können Sie - je nach Verfügbarkeit der SDKs - die Anwendung direkt unter dem iPhone-Emulator und dem Android-Emulator testen. Prüfen Sie das gleich einmal; im Test hat die iPhone-SDK-Version 4.0 (Auswahl links unten) am besten funktioniert.

Implementierung

Im Projektverzeichnis finden Sie die Datei tiapp.xml, die zentrale Einstellungen rund zum Projekt enthält, inklusive der von Ihnen angegebenen Informationen zur Anwendung wie etwa ID und Titel. Die eigentliche Implementierung befindet sich im Verzeichnis Resources und dort in der Datei app.js. Diese ist zur Steuerung der Anwendung zuständig und erstellt und füllt die einzelnen Tabs.

1. Titanium.UI.createTabGroup() legt eine Gruppe von Tabs an;
2. Titanium.UI .create Window() erzeugt ein Fenster;
3. Titanium.UI.createTab() erzeugt einen Tab und verwendet ein in Schritt 2 angelegtes Fenster;
4. Abschließend werden die Tabs der Tab-Gruppe hinzugefügt (addTab()) und diese dann geöffnet (open()).

Hier ein einfaches (und gekürzt wiedergegebenes) Beispiel, auf Basis des standardmäßig angelegten Projekts sowie bereits etwas angepasst, um in das zweite Register eine JavaScript-Datei zu laden:

var tabGroup = Titanium.UI.
createTabGroup();
// ...
var win2 = Titanium.UI.createWindow({
title:'Tab 2',
backgroundColor:'#fff',
url:'rss.js'
});
var tab2 = Titanium.UI.createTab({
icon:'KS_nav_ui.png',
title:'Tab 2',
window:win2
});
tabGroup.addTab(tab2);
tabGroup.open();

In der Datei rss.js, die in obigem Code referenziert wird, befindet sich Code, der den Inhalt des Fensters steuert. Als Beispiel orientieren wir uns an dem Szenario aus dem letzten Titanium-Artikel und stellen den RSS-Feed des Internet Magazin dar. Die Methode Titanium.Network.createHTTP-Client() ist eine Abwandlung des von Ajax-Anwendungen bekannten XMLHttpRequest-Objekts und für HTTP-Anfragen zuständig.Die Rückgabe wird direkt als XML ausgewertet und in die Ausgabe geschrieben. Hier der komplette Code, beachten Sie die teilweise etwas andere Ansteuerung von Array-Elementen als von JavaScript her gewohnt, frei von eckigen Klammern:

xhr = Titanium.Network.
createHTTPClient();
xhr.open("GET", "https://
internet-magazin.magnus.
de/QQrssZ1/");
xhr.onload = function()
{
var xml = this.
responseXML;
var itemList = xml.
documentElement.
getElementsByTagName
("item");
for (var i = 0; i < Math.min
(10, itemList.length); i++) {
var text = itemList.item(i).
getElementsByTagName("title").
item(0).text;
var label1 = Titanium.UI.
createLabel({
color:'#999',
text:text,
font:{fontSize:12,fontFamily:
'Helvetica Neue'},
left:10,
top:-300 + i*70,
width:'auto'
});
Titanium.UI.currentWindow.add
(label1);
}
};

Natürlich ist der Ansatz, den Titanium Mobile geht, eine Form von kleinster gemeinsamer Nenner, da parallel Android und iPhone unterstützt werden . Allerdings gibt es auch spezielle Schnittstellen für jeweils eines der Zielsysteme.