App-Entwicklung für die Cross-Plattform

Transkript

1 App-Entwicklung für die Cross-Plattform von Tobias Reinke Thibault Guégan Betreuung: Prof. Dr. M. von Schwerin

2 Inhaltsverzeichnis 1 Teil I: Überblick Einleitung App-Entwicklung Apps für Android Apps für ios App-Entwicklung für die Cross-Plattform Sencha Touch Titanium Studio Unterstützung weiterer Plattformen Installationsanleitung Teil II: Vertiefung Titanium Einführung Titanium Neues Projekt erstellen Projektaufbau Hello World Die Programmierschnittstelle (API) GUI (Titanium.UI) AlertDialog Button Label Picker ScrollView Slider Switch TabGroup TableView TextArea View WebView Window TouchEvents Click (click) Double Click (dbclick) Single Tap (singletap) Double Tap (doubletap) Twofinger Tap (twofingertap) Touch Start (touchstart) Touch Move (touchmove) Touch End (touchend) Swipe (swipe) Datenbanken (Titanium.Database) WLAN (Titanium.Network) Netzwerkstatus überprüfen Sockets Bonjour Service GPS (Titanium.Geolocation) Soziale Netze Medien (Titanium.Media)

3 2.3 Unterschiede zwischen ios und Android im Überblick Adaptionen zwischen ios und Android Teil III: Entwickeln einer App mit Titanium Einführung - SET Projektmanagement Product Backlog Singleplayermodus Multiplayermodus Spiel erstellen An einem Spiel teilnehmen Backlog Items Umsetzung Das Spiel Zusammenfassung

4 1 Teil I: Überblick Im ersten Teil dieser Arbeit wird der stetig wachsende Einfluss von Smartphones in unserer Gesellschaft erörtert. Die dadurch neu entstehenden Märkte bieten mit unter die Möglichkeit Anwendungen (Apps) für Smartphones zu entwickeln und zu vertrieben. Anschließend wird auf eine Problematik hingewiesen mit der die Entwickler häufig konfrontiert werden. Sie müssen sich entscheiden für welches Betriebssysteme sie entwickeln wollen und sind somit gezwungen einen Teil der Zielgruppe von vornherein auszuschließen. Titanium Studio zeigt eine Alternative dazu auf. Mit diesem Framework ist es möglich plattformunabhängig zu entwickeln. Im Anschluss folgt eine Installationsanleitung, welche bei der Einrichtung von Titanium Studio auf einem Windows 7 System helfen soll. Der zweite Teil des Berichts gibt Informationen über das Entwickeln mit JavaScript und vertieft sich anschließend in das Programmieren mit Titanium. Dabei werden die wichtigsten Module der von Titanium bereitgestellten API erläutert. Weiterhin werden hier auch alle erarbeiteten Unterschiede, sowie mögliche Adaptionen, zwischen den Plattformen Android und ios aufgelistet. Im abschließenden Teil dieser Arbeit wird mit Titanium eine App entwickelt. Realisiert wird ein Spiel, welches den Namen SET trägt. Dieses Spiel funktioniert auf Android sowie dem ios gleichermaßen wobei jedoch nur ein Entwicklungsprozess durchschritten wurde, nicht wie bisher üblich eine Entwicklung pro Zielplattform. Weiterhin verfügt das Spiel über einen Mehrspielermodus, der die WLAN Tauglichkeit von Titanium demonstriert. 1.1 Einleitung Ein Smartphone ist ein Mobiltelefon welches, verglichen mit herkömmlichen Geräten, mehr Funktionalität besitzt. In der heutigen Zeit besitzen immer mehr Menschen ein derartiges Gerät. Inzwischen werden Smartphones nicht mehr nur zum Telefonieren oder SMS schreiben verwendet, sie dienen schon längst als MP3 Player oder als mobiler Datenspeicher für Bilder, Videos und anderen elektronischen Daten.Außerdem kann man mit ihnen im Internet surfen, seine Termine verwalten und s schreiben. Weitere Anwendungsmöglichkeiten sind in Tabelle 1 aufgeführt. Anwendung Beispiele Kommunikationszentrale Mobiltelefon, SMS, Webbrowser, , VoIP, Chat Personal Information Manager Adressbuch, Terminkalender, Aufgabenliste, Notizblock Datenspeicher Oft mit USB-Schnittstelle (vergleichbar mit USB-Stick) Medienfunktionen MP3-Player, Radio, Videoplayer, Bildbetrachtung, Foto- und Videokamera Taschencomputer Textverarbeitung, Tabellenkalkulation, PDF-Reader Funk-Modem Tethering, Hotspot Navigation Navigationssysteme, Länderkarten Spiele-Plattform Mobile Spielekonsole Tabelle 1: Mögliche Anwendungen für Smartphones 4

5 Um diese und weitere Funktionalitäten zu gewährleisten sind eine Vielzahl von Sensoren nötig. Smartphones enthalten unter anderem häufig Bewegungs-, Lage-, Magnetfeld-, Licht- und Näherungssensoren, sowie GPS-Empfänger. Wie in Abbildungen 1 zu sehen hat der Absatz von Smartphones in Deutschland im letzten Jahr stark zugenommen. Und die Prognose für 2011 liefert ein erneutes Wachstum um 39 Prozent. [BITKOM] Abbildung 1: Absatz und Umsatz Prognose für Smartphones in Deutschland [BITKOM] Auf Smartphones lassen sich meist so genannte Apps installieren, welche den Funktionsumfang des Gerätes enorm erweitern können. Apps sind Programme die auf dem Gerät laufen und bestimmte Aufgaben erfüllen. Dabei können sie auf Funktionen des Mobiltelefons zugreifen und so zum Beispiel Kontaktdaten manipulieren, oder Sensorwerte auslesen und interpretieren. Infolgedessen hat sich ein, inzwischen großer, Markt für Apps entwickelt. Nachteilig ist, dass die Endgeräte der unterschiedlichen Anbieter auch mit unterschiedlichen Betriebssystemen ausgestattet sind. Aus diesem Grund kann eine App nur auf dem Gerät installiert werden, dass ein zum App passendes Betriebssystemen enthält. 1.2 App-Entwicklung Nach [SMART] sind die derzeit wichtigsten Hersteller für Smartphone Betriebssystemen Symbian, Android, RIM, Apple ios und Windows Mobile. Auf den Abbildungen 2 bis 4 ist der Marktanteil dieser Hersteller für die Jahre 2009 bis 2011 zu sehen. Es ist zu erkennen, dass fast alle Hersteller Marktanteile verloren haben. Einzig Google Android und Apple ios konnten ihre Anteile steigern. 5

6 Abbildung 2: Marktanteil 2009 [SMART] Abbildung 3: Marktanteil 2010 [SMART] Abbildung 4: Marktanteil 2011 [SMART] Diese Tendenz zeigt deutlich, dass die beiden Betriebssysteme Android und ios in naher Zukunft noch mehr an Bedeutung gewinnen werden. Dieser Trend ist auch für die Entwickler von Apps relevant. Apps, deren Marktdurchdringung hoch sein soll, müssen also zumindest auf den beiden, am weitesten verbreiteten Betriebssystemen lauffähig sein. Nur so kann gewährleistet werden, dass die Zielgruppe der Anwender groß genug ist. Weil sich Android und ios jedoch stark unterscheiden ist es nötig ein App, welches beispielsweise auf Android läuft, für das ios erneut zu schreiben. Zwar kann hier natürlich einiges an Wissen wieder verwendet werden, ein Großteil des Entwicklungsaufwandes ist jedoch trotzdem vorhanden. Der gesamte Code muss beispielsweise von Java in Objective-C übersetzt werden. Auch das GUI (graphical user interface), sowie der Zugriff auf gerätespezifische Sensoren kann zwischen den Plattformen deutlich variieren. Hinzu kommt der doppelte Aufwand für Testen und Debugging. Folglich ist es deutlich Entwickler-freundlicher und kostengünstiger, wenn eine Anwendungen nur einmal programmiert werden muss Apps für Android Zur App Entwicklung für Android stellt Google das Android SDK zur Verfügung. Zusätzlich gibt es das AVD (Android Virtual Device), welches es ermöglicht die Apps während der Entwicklung auf einem Emulator zu testen. Beides kann mit dem Android SDK and AVD Manager in Eclipse integriert werden. Wurde dieses 6

7 Plugin installiert, so kann einfach über File > New > Project... ein neues Android Projekt angelegt werden. Eclipse ermöglicht es so, Anwendungen in Java zu entwickeln und diese auf dem Emulator als auch auf dem Zielgerät zu testen und zu debuggen. [AVD] Apps für ios Zur App Entwicklung für das ios stellt Apple das Tool X-Code bereit. Dieser Compiler ermöglicht es ein App mit Objective-C zu entwickeln und dieses sowohl auf dem Emulator als auch auf dem Zielsystem zu testen und zu debuggen. [XCODE] 1.3 App-Entwicklung für die Cross-Plattform Der wesentliche Unterschied zwischen dem Entwickeln für Android (Abschnitt ) und ios (Abschnitt ) ist, dass in zwei unterschiedlichen Sprachen programmiert werden muss. Wünschenswert wäre es allerdings wenn man eine Anwendung nur einmal schreiben müsste und diese dann auf beiden Plattformen lauffähig wäre. Um diesen Ansatz der Cross-Plattform zu verfolgen gibt es, neben Titanium, ein weiteres Tool. Im Folgenden Kapitel wird das Framework Sencha Touch vorgestellt Sencha Touch Apps die mit Sencha Touch entwickelt wurden laufen nicht wie gewöhnliche Anwendungen auf einem Smartphone. Sie werden in den Browser eingebettet. Folglich ist eine App nur eine Webseite welche mit HTML5 und JavaScript erstellt wurde. Vorteilhaft ist hier, dass die Entwickler keine komplexen Sprachen wie Java oder Objektive-C lernen müssen. Webtechniken wie (X)HTML/CSS und JavaScript sind für Einsteiger leichter zu erlernen. Nachteilhaft dagegen ist, dass zur Publikation der Apps ein weiteres Tool wie beispielsweise PhoneGap notwendig ist, welches die Anwendung kapselt damit sie auch in einem App-Store angeboten werden kann. Auch der Zugriff auf wie Sensoren und native Dienste wie Kontaktdaten und Ähnliches ist hier nur beschränkt möglich. [SENCHA] Zu guter Letzt benötigen Anwendungen welche mit Sencha Touch entwickelt wurden eine Internetverbindung, da es sich hier ja eigentlich um eine Webseite handelt. Titanium Studio hingegen, bietet eine umfangreiche API für die Verwendung von nativen Diensten an. Auch der Zugriff auf Sensoren ist hier über die API möglich. Weiterhin ist bei Titanium kein zusätzliches Tool notwendig um eine vertriebsreife Anwendung zu erstellen. Aufgrund dessen wurde in dieser Arbeit nicht Sencha Touch, sondern Titanium genauer untersucht und evaluiert. 7

8 1.3.2 Titanium Studio Titanium Studio ermöglicht es Anwendungen einmal zu entwickeln und diese dann in den, den Zielgeräten entsprechenden, nativen Code zu übersetzten. Wie Abbildung 5 zeigt kann mit Titanium Studio in JavaScript entwickelt werden, anschließend wird der Code je nach gewünschter Plattform in Java oder Objektive-C Code umgewandelt. [CT201016] Abbildung 5: Funktionsprinzip Titanium Der Vorteil von Titanium gegenüber Sencha Touch ist, dass durch die Verwendung von nativem Code (Java oder Objektive-C) auch die Geschwindigkeit von Apps deutlich höher sein kann. Auch lassen sich so Zugriffe auf Hardwareelemente wie Sensoren und Ähnliches durchführen. Sencha Touch hingegen bietet nur für wenige native Dienste und Sensoren eine Schnittstelle. Ein weiterer Vorteil ist, dass Anwendungen auf dem üblichen Weg publiziert werden können, da sich das fertige App nicht mehr von klassisch entwickelten Anwendungen unterscheidet Unterstützung weiterer Plattformen Titanium Studio unterstützt neben Android und ios noch die Plattformen BlackBerry und Mobile Web. Dieser Teil des Titanium SDKs ist allerdings noch in der Beta-Phase und werden darum in dieser Arbeit nicht weiter berücksichtigt. Zusätzlich sind, wie in Kapitel 1.2 beschrieben, die Plattformen ios und Android am weitesten verbreitet. Aus diesem Grund ist hier eine Plattformübergreifende Lösung wie Titanium dringender als beispielsweise für ein BlackBerry Gerät. 8

9 Installationsanleitung In diesem Abschnitt wird beschrieben wie Titanium Studio auf einem Windows 7 System zu installieren ist [INST]. Für die Installation (und auch für die spätere Verwendung des Emulators) sind Administratorrechte notwendig. Es wird empfohlen die benötigten Programme an den in Tabelle 2 vorgeschlagenen Orten zu installieren. Für 32-Bit Systeme kann der Pfad durch C:\Program Files\ ersetzt werden. Python C:\Program Files (x86)\python27 Git C:\Program Files (x86)\git JDK C:\Program Files (x86)\java\jdk1.6.0_23 Android SDK C:\Program Files (x86)\android\android-sdk-windows Tabelle 2: Wichtige Pfade für die Installation Umgebungsvariablen Die Pfad (path) Variable muss um die folgenden Pfade erweitert werden. Python C:\Program Files (x86)\python27 Git C:\Program Files (x86)\git\bin JDK C:\Program Files (x86)\java\jdk1.6.0_23\bin Android SDK C:\Program Files (x86)\android\android-sdk-windows\tools Tabelle 3: Erweiterung der Pfad Umgebungsvariablen Die hier angegebenen Pfade sind Beispiele. Hier muss natürlich der Pfad verwendet werden an dem die Programme in den folgenden Abschnitten installiert werden. Zusätzlich zur Pfad Variable müssen noch zwei weitere Umgebungsvariablen definiert werden. Java benötigt folgende Variable: JAVA_HOME C:\Program Files (x86)\java\jdk1.6.0_23 Tabelle 4: Java Home Umgebungsvariable Und das für das Android SDK ist der Eintrag in Tabelle 5 nötig. ANDROID_SDK C:\Program Files (x86)\android\android-sdk-windows Tabelle 5: Android SDK Umgebungsvariable Python Titanium benötigt Python 2.6 oder höher. Auf dieser Seite kann die aktuelle Version (Python bit) runter geladen werden: Zu beachten ist, dass Python in das Verzeichnis installiert wird welches in Punkt empfohlen wurde. 9

10 Git Git ist eine freie Software zur verteilten Versionsverwaltung von Dateien und wird für die Beispielapplikation KitchenSink (von Titanium) benötigt. Unter muss msysgit für Windows runter geladen und installiert werden. Bei der Installation sollten die Einstellungen gemäß folgenden Screenshots (Abbildung 6 bis 7) übernommen werden. Abbildung 6: Git Installation - 1 Abbildung 7: 8: Git Installation

11 Java Development Kit Titanium benötigt weiterhin das Java Development Kit (JDK). Es sollte nicht mit der Java Runtime Environment (JRE) verwechselt werden. Das JDK beinhaltet die JRE, jedoch nicht anders herum. Wichtig ist dass hier das JDK 6 Upgrade 26 verwendet wird. Es entspricht der Java Version Android SDK Tool Das Android SDK kann unter runtergeladen werden. Nach der Installation startet sich automatisch der Android SDK and AVD Manager. Hiermit kann das gewünschte SDK Package runter geladen werden. Dazu wird es ausgewählt (Abbildung 9) und herunter geladen (Abbildung 10). Abbildung 9: Android SDK Installation - 1 Abbildung 10: Android SDK Installation

12 Titanium Studio Unter folgendem Link kann die aktuelle Version von Titanium Studio runter geladen werden. Durch einen Doppelklick wird der Installationsassistent gestartet. 12

13 2 Teil II: Vertiefung Titanium Im zweiten Teil dieser Arbeit wird der Umgang mit Titanium beschrieben. Mit dem gängigen HelloWorld Programm wird ein Einblick in die grundlegende Funktion und Struktur der Titaniumprojekte gegeben. Außerdem werden die einzelnen Module der Titanium-API vorgestellt und getestet. Abschließend folgt eine übersichtliche Darstellung der Unterschiede zwischen den Plattformen und ein Kapitel in dem erklärt wird wie man bestimmte Unterschiede durch Adaptionen vermeiden kann. 2.1 Einführung Titanium An dieser Stelle wird das Werkzeug Titanium näher erklärt um die ersten Schritte eines Entwicklers zu erleichtern. Startet man das Programm, so wird man zunächst mit einem Dialog gemäß Abbildung 11 konfrontiert. Abbildung 11: Titanium - Login Titanium verlangt das sich ein Benutzer zunächst registriert. Die Registrierung ist kostenlos, erfordert allerdings eine Internetverbindung. Aus diesem Grund ist auch eine Verwendung von Titanium ohne Internetverbindung nicht möglich. Dies ist nicht zu verwechseln mit der entwickelten Anwendung, welche später auch ohne Internetverbindung auf dem Smartphone lauffähig ist. Nach dem Login öffnet sich das User Interface wie in Abbildung 12 zu sehen. Die Benutzeroberfläche ist in drei wichtige Bereiche aufgeteilt. Der Projekt Explorer auf der linken Seite beinhaltet alle vorhandenen Projekte. Über die Baumstruktur kann so jedes Projektverzeichnis durchsucht werden. In dem großen Fenster rechts oben werden die JavaScript Dateien dargestellt welche den Source-Code der Anwendungen enthalten. Rechts unten befindet sich das Consolenfenster wo während dem Kompilieren DebugInformationen und Fehlermeldungen zu finden sind. Oben im Projekt Explorer befindet sich eine Toolbar, welche es (abhängig vom Betriebssystem) ermöglicht das Programm im Anrdoid bzw. ios Debugger auszuführen oder auf ein gewünschtes Zielgerät zu laden. 13

14 Abbildung 12: Titanium Studio Neues Projekt erstellen Ein neues Projekt erstellt man gemäß Abbildung 13 über das Menü File>New>Titanium Mobile Project. Anschließend öffnet sich ein neues Fenster (siehe Abbildung 14) in welchem man den Projektname, die App Id, die zu Version des Titanium SDK und die möglichen Zielplattformen auswählen kann. Abbildung 13: Erstellung eines neuen Projektes Schritt 1 Mit dem Button Finish wird das Projekt schließlich erstellt. Darauf öffnet sich eine XML Datei welche wichtige Informationen über das Projekt enthält. Der Name dieser Datei ist immer tiapp.xml. Um die XML Datei leichter lesen zu können gibt es hier, wie in Abbildung 15 zu sehen, eine Eingabemaske, welche bereits mit den zuvor eingegebenen Werten (bei der Projekterstellung) belegt ist. 14

15 Abbildung 14: Erstellung eines neuen Projektes Schritt 2 Später können hier auch Änderungen am Projekt vorgenommen werden um beispielsweise ein neueres SDK zu verwenden. Der aufmerksamen Leser fragt sich hier, warum Mobile Web ausgegraut, also nicht anwählbar ist. Mobile Web wird erst in einer höheren Version von dem Titanium SDK unterstützt. Weil diese neue Version vom Titanium SDK (1.8.x) erst im Laufe dieser Arbeit erschienen ist und weil das neue SDK nicht hundert prozentig abwärtskompatibel ist, wird in dieser Arbeit nur die Version verwendet. 15

16 Abbildung 15: Die tiapp.xml Datei Projektaufbau Das neu erstellte Projekt aus Kapitel erscheint links im Projekt Explorer. Abbildung 16 zeigt die Projektstruktur wie sie nach der Projekterstellung vorhanden ist. Expandiert man das Projektverzeichnis sieht man zunächst ein Verzeichnis Ressourcen und mehrere Konfigurationsdateien. Der Hauptaugenmerk sei hier auf die tiapp.xml (siehe Kapitel ) und auf das Ressourcen Verzeichnis gelegt. In dem Ordner befinden sich eine JavaScript Datei, zwei Bilder (PNG) und zwei weitere Verzeichnisse android und iphone. In diesen Unterordner befinden sich Grafiken die speziell für eine Plattform hinterlegt werden können. So ist es dem Nutzer möglich je nach Endgerät eine andere Grafik zu laden und somit das jeweilige Erscheinungsbild anzupassen. Verständlicherweise soll es auch gemeinsame Grafiken geben, da ja eine Anwendung angestrebt ist welche sich auf beiden Plattformen gleich verhält. Dafür können Grafiken auch ausserhalb der bereits vordefinierten Verzeichnisse abgelegt werden. Auch das Erstellen neuer Ordner und Unterordner stellt kein Problem dar. Lediglich bei der Referenzierung muss darauf Rücksicht genommen werden. Hier sind relative Pfade, beginnend beim Ort der ausführenden Datei, zu verwenden. 16

17 Abbildung 16: Aufbau eines Titanium Projektes Zu guter Letzt folgt die Datei app.js. Hier wird die Anwendung gestartet. Bei der Projekterstellung wurde hier bereits eine kleine Anwendung hinterlegt um die grundsätzliche Funktionsweise von Titanium zu erklären. Dieses Hello-World Beispiel wird in Kapitel erklärt. Die gelben Einträge in Abbildung 16 sind auf die Verwendung eines Versionsverwaltungssystemes zurück zu führen, welches sich besonders bei größeren Projekten anbietet. Hier soll jedoch nicht näher darauf eingegangen werden. Interessierte Leser werden hier auf [SVN] verwiesen Hello World Kompiliert und startet man das in Kapitel erstellte Projekt, so erscheint im Simulator oder auf dem Zielgerät eine Oberfläche gemäß Abbildung 17. Verwendet wird hier eine TabGroup, welche in Kapitel noch detailierter erklärt wird. 17

18 Abbildung 17: Hello World Anwendung von Titanium In der Anwendung kann man durch anklicken der Schaltflächen Tab 1 und Tab 2 zwischen zwei Fenstern wechseln, welche sich durch ein Textlabel unterscheiden. Genau genommen müssten in Abbildung 17 auf den Schaltflächen Tab1 und Tab2 jeweils eine Grafik zu sehen sein. Im Android Simulator (in dem Abbildung 17 erstellt wurde) werden die Grafiken jedoch nicht angezeigt. Dieser Fehler ist bereits bekannt, eine Lösung dafür gibt es derzeit aber noch nicht. [ICON] Auf dem Endgerät werden die Icons jedoch ordnungsgemäß angezeigt. Der folgende Code ist in der Datei app.js enthalten. // this sets the background color of the master // UIView (when there are no windows/tab groups on it) Titanium.UI.setBackgroundColor('#000'); // create tab group var tabgroup = Titanium.UI.createTabGroup(); // create base UI tab and root window var win1 = Titanium.UI.createWindow({ title:'tab 1', backgroundcolor:'#fff' var tab1 = Titanium.UI.createTab({ icon:'ks_nav_views.png', 18

19 title:'tab 1', window:win1 var label1 = Titanium.UI.createLabel({ color:'#999', text:'i am Window 1', font:{fontsize:20,fontfamily:'helvetica Neue'}, textalign:'center', width:'auto' win1.add(label1); // create controls tab and root window var win2 = Titanium.UI.createWindow({ title:'tab 2', backgroundcolor:'#fff' var tab2 = Titanium.UI.createTab({ icon:'ks_nav_ui.png', title:'tab 2', window:win2 var label2 = Titanium.UI.createLabel({ color:'#999', text:'i am Window 2', font:{fontsize:20,fontfamily:'helvetica Neue'}, textalign:'center', width:'auto' win2.add(label2); // add tabs tabgroup.addtab(tab1); tabgroup.addtab(tab2); // open tab group tabgroup.open(); In der ersten Codezeile wird mit Titanium.UI.setBackgroundColor('#000'); die Hintergrundfarbe des aktuellen Fensters auf Schwarz gesetzt. Statt dem hier verwendeten RGB Code können auch Schlüsselworte wie red, green, black und ähnliche verwendet werden, empfohlen werden jedoch Farbwerte nach dem Schema #RGB oder #RRGGBB. [RGB] Mit Titanium.UI.createTabGroup(); wird anschließend eine neue TabGroup erstellt. Für diese TabGroup werden anschließend mehrere Objekte erstellt. Zwei unterschiedliche Fenster (Window) welche zur leichteren Unterscheidung zwei verschiedene Label enthalten und zwei Tabs. Die Tabs beinhalten den Titel der in der TabGroup dargestellt wird sowie das Icon, welches im Simulator leider nicht angezeigt wird. Diese Objekte werden mit der Methode add(...) der TabGroup hinzufügt. Abschließend wird die TabGroup noch mit open() sichtbar gemacht. 19

20 2.2 Die Programmierschnittstelle (API) Titanium stellt zur zur App Entwicklung einer API bereit. Diese API ermöglicht es Programmierern auf bestimmte Funktionen von Titanium zuzugreifen. So kann beispielsweise über einen standardisierten Aufruf ein typisches Element einer Anwendung erstellt und gestaltet werden. Im Folgenden wird dies Anhand eines einfachen Fensters erklärt. Die meisten Apps benötigen ein Fenster in dem sie ihre Oberfläche (Formularelemente und ähnliches) darstellen können. Dieses Fenster kann mit dem nachfolgendem Code erstellt werden (dieser Aufruf ist bereits aus dem Hello-World Beispiel aus Kapitel 2.1 bekannt). var w = Titanium.UI.createWindow({ backgroundcolor:'#336699' w.open(); Wird dieses Fenster anschließend mit der Methode open() geöffnet so erhält man ein Fenster gemäß Abbildung 18. Abbildung 18: Einfaches Fenster (window) Diese und weitere Funktionen sind in der API von Titanium enthalten. [API] Theoretisch solle jedes Modul auf beiden Betriebssystemen gleichermaßen funktionieren. Dies wird im Folgenden genauer untersucht. 20

21 2.2.1 GUI (Titanium.UI) Das grafische Benutzerinterface (engl: graphical userinterface) wird oft als GUI abgekürzt. Gemeint sind damit grafische Elemente wie Buttons, Radioboxen, Schieberegler, Textfelder und ähnliches. Titanium stellt eine Klasse Titanium.UI zu Verfügung welche den Zugriff auf derartige Elemente ermöglicht. Die wichtigsten Elemente aus Titanium.UI werden hier vorgestellt AlertDialog Für kurze Bildschirmausgaben oder Ja/Nein Dialoge ist der AlertDialog geeignet. Es gibt zwei Möglichkeiten einen Dialog aufzurufen. Für den einfachen Fall einer normalen Textausgabe, die der Benutzer lediglich mit OK bestätigen kann ist folgende Codzeile ausreichend. alert('this is a simple alert.'); Dabei wird ein Objekt vom Typ Titanium.UI.AlertDialog angelegt und der Benutzer hat gemäß folgender Abbildung nur die Möglichkeit die Meldung mit OK zu bestätigen. Abbildung 19: Einfacher Dialog Statt obiger Kurzschreibweise kann auch ein Objekt vom Typ AlertDialog in einer Variablen gespeichert werden. Dies hat den Vorteil, dass dem Dialog so auch ein Eventlistener hinzugefügt werden kann. So kann je nach Benutzereingabe unterschiedlich reagiert werden. Der Code sieht dann folgendermaßen aus: var dialog = Titanium.UI.createAlertDialog({ title: 'Hello', message: 'This is a normal alert.', buttonnames: ['OK', 'Cancel'] dialog.addeventlistener('click', function(e) { if(e.index==0) { // OK } else if(e.index==1) { // Cancel } dialog.show(); 21

22 Der zugehörige Dialog ist in Abbildung 20 zu sehen. Abbildung 20: Normaler Dialog Anhand des Attributes buttonnames lassen sich auch noch zusätzliche Buttons definieren. ButtonNames: ['Choice 1', 'Choice 2', 'Choice 3'], Abbildung 21: Erweiterter Dialog Auf Android kann so ein Dialog jedoch nicht mehr als drei Buttons enthalten. Zusätzlich angegebene Elemente werden einfach nicht angezeigt. Auf dem ios werden die Buttons nicht wie in den Screenshots nebeneinander, sondern untereinander angeordnet. Aus diesem Grund können hier mehr Buttons eingefügt werden Button Ein wesentlicher Teil der meisten Apps ist ein Button. Ein einfacher Button lässt sich durch folgenden Code erstellen: var button = Titanium.UI.createButton({ title: 'Simple button', width: '200', height: '40' 22

23 Dem Button kann ein Eventlistener hinzugefügt werden. Zum Beispiel vom Typ click. Für weitere Informationen zu Eventlistener wird hier auf Kapitel verwiesen. button.addeventlistener('click', function() { // do something Einem Button kann mit der Eigenschaft image ein Icon hinzugefügt werden. Dies funktioniert jedoch ausschließlich auf dem ios. Sollte der folgende Code auf einem Android System ausgeführt werden, wird der gesamte Button durch die angegebene Grafik ersetzt. var button = Titanium.UI.createButton({ title: 'Image button', width: '200', height: '40', image: 'myimage.png' Um die Grafik für den Button selbst zu wählen bietet das Objekt Button die Eigenschaften 'backgroundimage' und 'backgroundselectedimage'. Erstere legt das Bild des Buttons im Normalzustand und zweitere das Bild im Moment des Klickens fest. Zu beachten ist wiederum, dass die Eigenschaft 'backgroundselectedimage' auf Android keine Auswirkungen hat. Wichtig ist die Zuweisung von Höhe und Breite der Schaltfläche, weil ios sonst die Fläche des Elements auf Null setzt und somit nicht darstellt Label Das Label funktioniert unter Android und ios problemlos. Jedoch ist die automatische Textfarbe unter Android weiß und auf dem ios schwarz. Aus diesem Grund sollte die Farbe direkt angegeben werden. var lbl = Titanium.UI.createLabel({ title: 'This is my lable', width: 'auto', height: '40', color: 'white' 23

24 Picker Mit dem Picker kann man den Benutzer zwischen mehren Eingabewerten auswählen zu lassen. Der folgenden Code erzeugt einen Picker mit dem Beispieldatensatz gemäß den Abbildungen 22 bis 24. var picker = Titanium.UI.createPicker({ top: 0, left: 0 var data = []; data[0]=ti.ui.createpickerrow({title:'bananas',custom_it em:'b' data[1]=ti.ui.createpickerrow({title:'strawberries',cust om_item:'s' data[2]=ti.ui.createpickerrow({title:'mangos',custom_ite m:'m' data[3]=ti.ui.createpickerrow({title:'grapes',custom_ite m:'g' picker.add(data); Der Picker wird auf Android und ios unterschiedlich dargestellt. Bei Android wird dem Benutzer ein Dropdownmenü mit einem voreingestellten Wert angezeigt. (Abbildung 22) Durch einem Klick auf das Menü öffnet sich ein Fenster mit allen Auswahlmöglichkeiten (Abbildung 23) und erlaubt so dem Nutzer zu wählen. Abbildung 22: Android Picker Abbildung 23: Auswahlmenü des Android Pickers 24

25 Das ios stellt den Picker als Spinner dar. Der Benutzer hat hier die Möglichkeit an einem Rad zu drehen und so den gewünschten Wert einzustellen. Abbildung 24: ios Picker (Spinner) DatePicker Eine Spezialform des Pickers ist der DatePicker. Er wurde speziell darauf angepasst ein Datum zu bestimmen. Der nötige JavaScript Code ist im Folgenden aufgelistet. var mindate = new Date(); mindate.setfullyear(2000); mindate.setmonth(0); mindate.setdate(1); var maxdate = new Date(); maxdate.setfullyear(2020); maxdate.setmonth(11); maxdate.setdate(31); var value = new Date(); var picker_date = Titanium.UI.createPicker({ type: Titanium.UI.PICKER_TYPE_DATE, mindate:mindate, maxdate:maxdate, top: 0, left: 0, value:value Es werden zuerst zwei Objekte vom Typ Date erzeugt und auf verschiedene Zeitpunkte gesetzt. Diese entsprechen den Maximal- und dem Minimalwert des Datepickers. Ein dritter Zeitstempel wird erstellt um dem Picker einen Startwert zu geben. Unter Android werden, wie in Abbildung 25 zu sehen, Jahr, Monat und Tag angezeigt. Diese können dann mit den entsprechenden Plus- und Minustasten eingestellt werden. 25

26 Abbildung 25: Android DatePicker ios verwendet hier ebenfalls den bereits vorgestellten Spinner. (Abbildung 26) Abbildung 26: ios DatePicker (Spinner) Android bietet jedoch die Möglichkeit alle Picker in Spinner um zu wandeln. Dazu muss dem Picker lediglich das Attribut usespinner auf true gesetzt werden. Dann erhalten Android Nutzer den Spinner aus Abbildung 27. Abbildung 27: Android DatePicker (Spinner) ScrollView Mit Titanium.UI.ScrollView können auch Elemente dargestellt werden deren Größe über die Bildschirmgröße hinaus geht. Hier ist es wie bei allen GUI Elementen auf ios wichtig die Höhe und Breite anzugeben. auto als Höhen- oder Breitenangabe darf auf dem ios auch nicht verwendet werden. Der Code für ein ScrollView sieht folgendermaßen aus: 26

27 var scrollview = Titanium.UI.createScrollView({ width: 100, height: 300, contentwidth: 'auto', contentheight: 'auto', top: 0, showverticalscrollindicator: true, showhorizontalscrollindicator: true, layou: 'vertical' Mit der Methode add() können dem Objekt schließlich Kindobjekte hinzugefügt werden. Mit remove() sollten diese auch wieder zu entfernen sein. Dies funktioniert jedoch leider mit Android nicht. Das Thema ist im Forum sehr wohl bekannt, aber bisher wurde keine Lösungsvorschläge genannt. Ein weiterer Unterschied zwischen Android und ios besteht in der Eigenschaft scrolltype. Diese kann nur bei Android verwendet werden. Sie beschreibt die Richtung in der gescrollt werden kann. Auf Android gibt es hier nur die Möglichkeit horizontal oder vertikal. Auf dem ios, wo scroll Type nicht gesetzt werden kann, können diese Funktionen standardmäßig auch kombiniert werden Slider Die grundlegenden Funktionen des Sliders (siehe Abbildung 28) funktionieren auf Android und ios gleichermaßen. Die Attribute min und max legen den minimalen und Abbildung 28: Slider maximalen Wert des Sliders fest. Mit value kann der aktuelle Wert des Sliders eingestellt werden. Die Höhenangabe darf in diesem Fall auch auf dem ios mit auto belegt werden. Das Attribut thumb beschreibt den Pfad zu dem Bild welches den Runden Knopf in Abbildung 28 darstellt. Mit highlightedthumbimage kann schließlich ein Bitmap gesetzt werden, welches nur angezeigt wird wenn das ScrollView gerade verändert wird. Der change-listener wird immer dann ausgeführt wenn der Slider seinen Wert verändert. In der Funktion wird der Wert des Sliders ausgelesen, gerundet und in ein Label (im Code nicht vorhanden) geschrieben. var slider = Titanium.UI.createSlider({ min:0, max:10, value:5, width:200, height:'auto', thumb: 'images/slider_thumb.png', highlightedthumbimage:'images/chat.png' slider.addeventlistener('change',function(e) { lbl.text = 'Value = ' + Math.round(e.value); Die Anpassung mit eigenen Grafiken (thumb und highlightedthumbimage), wie im Codebeispiel zu sehen, ist jedoch nur auf dem ios möglich. 27

28 Switch Switches oder Checkboxen sind sowohl auf Android als auch auf dem ios möglich. Jedoch werden sie unterschiedlich dargestellt. Android stellt den Switch standardmäßig wie in Abbildung 29 und 30 gezeigt dar. Ein Button mit einer grünen Lampe welche nur leuchtet wenn der Schalter aktiviert wurde. ios wiederum verwendet dazu einen Schieberegler der entweder den Wert 0 oder 1 annehmen kann. Siehe dazu Abbildung 31 und 32. Abbildung 29: Android Switch aktiviert Abbildung 31: ios Switch aktiviert Abbildung 30: Android Switch deaktiviert Abbildung 32: ios Switch deaktiviert Android stellt außerdem noch die klassischen Checkboxen (Abbildungen 33 und 34) zur Verfügung. Mit der Eigenschaft style kann das Aussehen somit angepasst werden. style:titanium.ui.android.switch_style_checkbox, style:titanium.ui.android.switch_style_togglebutton, Abbildung 34: Android Checkbox aktiviert Abbildung 33: Android Checkbox deaktiviert TabGroup Ein weiteres wichtiges Element ist die TabGroup. Sie funktioniert auf beiden Betriebssystemen in gleicher Form. Zunächst muss eine TabGroup erstellt werden: var tabgroup = Titanium.UI.createTabGroup(); Einer TabGroup können mehrere Tabs mit der Methode add() zugewiesen werden. Die Tabs werden mit folgendem Code erstellt: 28

29 var tab1 = Titanium.UI.createTab({ icon: 'KS_nav_views.png', title: 'Tab 1', window: win1 Neben dem Titel und einem Icon kann einem Tab schließlich ein Fenster zugewiesen werden, welches wiederum zunächst erstellt werden muss. var win1 = Titanium.UI.createWindow({ title:'tab 1', layout: 'vertical', backgroundcolor:'#fff' Schließlich wird das Tab noch der TabGroup zugewiesen. tabgroup.addtab(tab1); Und um die TabGroup anzuzeigen musst noch die Methode open() ausgeführt werden. tabgroup.open(); Erwähnenswert ist außerdem noch die Methode setactivetab(). Ihr kann man entweder einen Index oder ein Objekt (Titanium.UI.Tab) übergeben. Das übergebene Tab wird somit geöffnet. Öffnet man unter Android eine TabGroup, so ersetzt diese das Fenster aus der heraus man die TabGroup geöffnet hat. Folglich wird der Befehl tabgroup.close() nicht das zuvor geöffnete Fenster zum Vorschein bringen, sondern die Activiy beenden. Auch das Aussehen der TabGroup ist von der Zielplattform abhängig. Android zeigt die Tableiste oberhalb der Tabs an (Abbildung ), auf dem ios wird diese unterhalb angezeigt (siehe Abbildung ). Abbildung 35: Android TabGroup Abbildung 36: ios TabGroup 29

30 TableView Mit TableView lassen sich beispielsweise Datensätze bequem anzeigen. Die Daten müssen lediglich in ein Array gespeichert werden. Beispielsweise das folgende Array daten: var daten = [ {title:'row 1', haschild:true, color:'red', selectedcolor:'#fff'}, {title:'row 2', hasdetail:true, color:'green', selectedcolor:'#fff'}, {title:'row 3', hascheck:true, color:'blue', selectedcolor:'#fff'}, {title:'row 4', color:'orange', selectedcolor:'#fff'} ]; Das tableview Objekt besitzt die Eigenschaft data, welche mit dem Array daten belegt wird. var tableview = Titanium.UI.createTableView({ width: 200, height: 400, data:daten Schließlich muss die TableView noch einem Fenster mit der Methode add() hinzugefügt werden. tableview.add(data); Wie in dem Beispiel zu sehen können den Datensätzen zusätzlich noch Attribute angehängt werden. So lässt sich beispielsweise die Schriftfarbe mit color oder die Schriftfarbe beim Anklicken mit selectedcolor setzten TextArea Mit folgendem Code lässt sich ein Textfeld erstellen welches länger als eine Zeile sein kann, es werden dann automatisch Umbrüche eingefügt. Die Abmessungen lassen sich wie üblich mit den Eigenschaften width und height bestimmen. Ist editable auf true gesetzt, so kann der Inhalt der TextArea vom Benutzer verändert werden, andernfalls nicht. Mit value wird der Text in die TextArea geschrieben. Das Attribut font erhält ein Objekt welches Informationen über Schriftgröße, -art und Schriftstärke beinhaltet. Die Schriftfarbe kann man mit dem Attribut color bestimmen. Die Ausrichtung des Textes ist mit dem Attribut textalign auf linksbündig gesetzt. Und schließlich wurde hier ein Rahmen um das Textfeld gelegt. Die letzten drei Attribute bestimmen Rahmenbreite, Rahmenfarbe und den Radius an den Ecken des Rahmens. 30

31 var ta1 = Titanium.UI.createTextArea({ editable: true, value:'i am a textarea', height: 200, width: 100, font:{fontsize:20,fontfamily:'marker Felt', fontweight:'bold'}, color:'#888', textalign:'left', borderwidth:2, bordercolor:'#bbb', borderradius:5 Mit der Methode focus() kann der Fokus auf das Textfeld gelegt werden (die Tastatur wird eingeblendet). Weiterhin gibt es die Methode blur(), sie entfernt den Fokus von dem Objekt wieder (und die Tastatur wird ausgeblendet). Die Methode blur() funktioniert auf Android jedoch nicht View View ist ein Container welcher verwendet werden kann um mehrere Element relativ zueinander zu positionieren. Dabei kann dem View die Eigenschaft layout mit horizontal oder vertical gesetzt werden. Dadurch werden die mit add() zugefügten Kindelemente nebeneinander oder untereinander angeordnet. Dem Container können weiterhin Höhen- und Breitenangaben übergeben werden. Außerdem können Hintergrund-, Rahmenfarbe und Rahmenbreite angegeben werden (backgroundcolor, bordercolor, borderwidth...). var mainview = Titanium.UI.createView({ backgroundcolor: 'black', width:200, height: 200, borderradius: 10, layout: 'vertical' WebView Mit WebView können HTML Dokumente, PDFs oder SVGs dargestellt werden. Die HTML Dokumente können dabei entweder lokal oder aus dem Internet geladen werden. Mit folgendem Code wird ein WebView erstellt welcher automatisch den Webseite lädt welche mit dem url Attribut übergeben wurde. var webview1 = Titanium.UI.createWebView({ url: ' Alternativ kann dem url Attribut auch ein lokaler Pfad zu einem HTML Dokument oder einer PDF übergeben werden. 31

32 Window Eines der wichtigsten grafischen Elemente ist verständlicher Weise das Fenster in dem eine Anwendung laufen kann. Mit folgendem Code lässt sich ein einfaches Fenster erstellen und öffnen. var w = Titanium.UI.createWindow({ backgroundcolor:'#336699' // create a button to close window var b = Titanium.UI.createButton({ title:'close', height:30, width:150 w.add(b); // add eventlistener for button b.addeventlistener('click', function() { w.close(); w.open(); Zunächst wird ein neues Objekt vom Typ Window angelegt. Dabei wird dem Fenster gleich eine Hintergrundfarbe zugewiesen. In den folgenden Zeilen wird ein Button erstellt und auf dem Fenster platziert. In dem onclicklistener wird das Fenster mit der Methode close() wieder geschlossen. In der letzten Zeile wir das erstellte Fenster schließlich mit der Methode open() geöffnet TouchEvents Allen GUI Elementen können anhand der Methode addeventlistener() verschiedene Listener mitgegeben werden. Diese Listener warten auf spezielle Ereignisse und führen dann die registrierte Funktion aus. Zum besseren Verständnis folgt hier der Code für einen Button mit einem click Event. var button = Titanium.UI.createButton({ title: 'Hallo', button.addeventlistener('click', mylistener); function mylistener(e) { Titanium.API.info("You clicked the button"); } Zuerst wird ein neuer Button mit dem String Hallo als Titel definiert. Anschließend wird dem Button mit der Methode addeventlistener() ein Listener zugewiesen. Der Listener reagiert auf Click-Ereignise, was durch das Schlüsselwort click definiert wird. Der zweite Übergabeparameter ist die Funktion die ausgeführt werden soll wenn das Ereignis eintritt. Im letzten Teil des Codeabschnitts wird diese Funktion schließlich definiert. Neben click gibt es noch einige andere Ereignisse auf die ein Element reagieren kann. Die wichtigsten sind hier im Folgenden erläutert. 32

33 Click (click) Das Click-Event wird ausgelöst wenn das entsprechende Element angeklickt, beziehungsweise mit dem Finger an getippt wird. Die zugehörige Funktion muss einen Übergabeparameter besitzen welcher folgende Eigenschaften besitzt: globalpoint ein Objekt mit den Eigenschafen x und y, welche die absoluten Bildschirmkoordinaten des Events enthalten source das Objekt welches das Event ausgelöst hast type der Name des Events x X-Koordinate des Events, relativ zum auslösenden Objekt y Y-Koordinate des Events, relativ zum auslösenden Objekt Tabelle 6: Eigenschaften eines Click-Events Double Click (dbclick) Dieses Event funktioniert weder unter Android noch auf dem iphone Single Tap (singletap) Single Tap verhält sich genau so wie das Click-Event mit dem Unterschied, dass ein Tap nur eine sehr kurze Berührung des Bildschirmes erfordert. Daraus folgt, dass jede einfache Berührung ein Click-Event auslöst. Ist die Berührung nur kurz, so wird zusätzlich noch ein Tap-Event ausgelöst. Folglich werden zwei Events ausgelöst. Die Eigenschaften sind zum Click-Event identisch. Leider funktioniert das Single Tap Event auf dem ios nicht sehr zuverlässig Double Tap (doubletap) Das Double-Tab-Event wird ausgelöst wenn der Bildschirm zweimal kurz an getippt wird. Die Eigenschaften sind zum Click-Event identisch. Leider funktioniert das Double Tap Event auf dem ios nicht sehr zuverlässig Twofinger Tap (twofingertap) Dieses Event funktioniert weder unter Android noch auf dem iphone Touch Start (touchstart) Das Touch-Start-Event wird ausgelöst sobald der Bildschirm mit dem Finger berührt wird. Die Eigenschaften sind zum Click-Event identisch Touch Move (touchmove) Das Touch-Move-Event wird ausgelöst sobald man mit dem Finger über den Bildschirm wischt. Die Eigenschaften sind zum Click-Event identisch. 33

34 Touch End (touchend) Das Touch-Ende-Event wird ausgelöst sobald man den Finger von dem Bildschirm weg nimmt. Die Eigenschaften sind zum Click-Event identisch Swipe (swipe) Das Swipe-Event (wischen) funktioniert bisher nur für das ios. Um auf Android die selbe Funktion zu erhalten wird folgender Workarround empfohlen: [SWIPE] var win = Ti.UI.createWindow({ backgroundcolor: '#fff' /** * Adds "swipe" event support to Android, and adds swipe * up and down to ios. view The view that should be made swipeable. allowvertical Whether or not vertical swipes * (up and down) are allowed; default is false. tolerance How much further you need to go in a * particular direction before swipe is fired; default * is 2. */ function makeswipeable(view, allowvertical, tolerance) { tolerance = tolerance 2; var start; view.addeventlistener('touchstart', function(evt) { start = evt; view.addeventlistener('touchend', function (end) { var dx = end.x - start.x, dy = end.y - start.y; var dist = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2)); // only trigger if dragged further than 50 // pixels if (dist < 50) { return; } var isvertical = Math.abs(dx / dy) < 1 / tolerance; var ishorizontal = Math.abs(dy / dx) < 1 / tolerance; // only trigger if dragged in a particular // direction if (!isvertical &&!ishorizontal) { return; } // disallow vertical swipe, depending on the // setting if (!allowvertical && isvertical) { 34

35 return; } // now fire the event off so regular 'swipe' // handlers can use this! end.direction = ishorizontal? ((dx < 0)? 'left' : 'right') : ((dy < 0)? 'up' : 'down'); end.type = 'swipe'; view.fireevent('swipe', end); } /** * Now call the function on our window, and we'll enable * vertical swipes while we're at it. */ makeswipeable(win, true); /** * Now add a regular event listener for "swipe". It will * work cross platform! */ win.addeventlistener('swipe', function(evt) { alert('swiped ' + evt.direction + '!'); win.add(ti.ui.createlabel({ text: 'Welcome to the Swipe for Android workaround + vertical swipes!', textalign: 'center', touchenabled: false })); win.open(); Dabei wird zunächst das Event Touch-Start verwendet um die Startposition der Bewegung fest zu stellen. Anschließend meldet das Touch-End-Event den Endpunkt der Bewegung und berechnet so die zurückgelegte Strecke, sowie die Richtung der Wischbewegung. Wenn daraus (mit einer gewissen Toleranz) eine horizontale oder vertikale Bewegung erkannt wird, werden die Übergabeparameter des Touch-End-Events um einen String der die Wischrichtung enthält erweitert. Zusätzlich wird der Event-Typ überschrieben. Mit den neuen Parametern wird dann ein neues Event vom Type swipe ausgelöst. Nachdem dies getan ist kann das Element wie gewohnt mit einem EventListener versehen werden. Die übergebenen Parameter enthalten in diesem Fall zusätzlich zu den bisher bekannten Werten noch die Richtung des Wischens (siehe Tabelle 7); 35

36 globalpoint ein Objekt mit den Eigenschafen x und y, welche die absoluten Bildschirmkoordinaten des Events enthalten source das Objekt welches das Event ausgelöst hast type der Name des Events (swipe) x X-Koordinate des Events, relativ zum auslösenden Objekt y Y-Koordinate des Events, relativ zum auslösenden Objekt direction ein String welcher die Wischrichtung beschreibt (up, down, left oder right) Tabelle 7: Angepasste Eigenschaften eines swipe-events 36

37 2.2.3 Datenbanken (Titanium.Database) Anwendungen auf Android und ios Smartphones können eigenen Datenbanken verwalten. Es handelt sich hierbei um SQLight Datenbanken. [SQLIGHT] Mit Titanium kann auch auf diese Datenbanken zugegriffen werden. Das entsprechende Paket in der API findet sich unter Titanium.Database. Mit dem Befehl var db = Titanium.Database.open('my_db'); wird die Datenbank my_db zurückgegeben und in der Variable db gespeichert. Sollte noch keine Datenbank mit diesem Namen existieren, wird automatisch eine Neue angelegt. Ist die Datenbank schließlich verfügbar können die bekannten SQL Befehle verwendet werden (Siehe dazu in [SQL]). Anhand der Methode execute() kann beispielsweise eine neue Tabelle angelegt werden. db.execute('create TABLE IF NOT EXISTS my_table (ID INTEGER, NAME TEXT)'); Falls die Tabelle my_table noch nicht vorhanden ist wird sie angelegt. Sie enthält die Spalten ID vom Typ Integer und NAME vom Type Text. Nachdem die Interaktion mit der Datenbank abgeschlossen ist sollten die Ressourcen wieder freigegeben werden um den Arbeitsspeicher nicht unnötig zu belasten. Dies geschieht mit der Methode db.close() Nach diesem Funktionsaufruf ist das Objekt db ungültig und kann nicht mehr verwendet werden. Bei SQL Befehlen, wie zum Beispiel SELECT, welche einen Rückgabewert liefern kann dieser mit folgender Form aufgefangen werden: var rows = db.execute('select * FROM my_table'); Die somit erhaltenen Datensätze in rows können mit einer Schleife durchlaufen werden. while (rows.isvalidrow()) { var my_id = rows.field(0); var my_name = rows.fieldbyname('name'); rows.next(); } Mit rows.next() wird dabei zum nächsten Datensatz in der Tabelle gewechselt. Die einzelnen Spalten können entweder über den Index (beginnend bei 0), oder mit der Methode fieldbyname('name') ausgelesen werden. 37

38 Um beispielsweise Benutzereingaben in einem SQL Befehl zu berücksichtigen müssen diese in das Argument der Methode execute() eingefügt werden. db.execute('insert INTO my_table (ID, NAME) getid(), getname()); VALUES(?,?)', Im obigen Beispiel wird an die Position des ersten Fragezeichens der Wert des zweiten Parameters der Funktion execute() gesetzt. Dort steht also der Rückgabewert der Funktion getid(). Analog dazu wird an der Stelle des zweiten Fragezeichens der Rückgabewert von getname() eingefügt. Um eine vorhandene Datenbank endgültig zu löschen muss die Methode remove() verwendet werden. db.remove(); Dies löscht die Datenbank mit ihrem gesamten Inhalt von der Festplatte. Dieser Befehl kann nicht Rückgängig gemacht werden und ist darum mit Umsicht zu behandeln. 38

39 2.2.4 WLAN (Titanium.Network) Die Titanium API stellt zwei Möglichkeiten zur Verfügung um mit WLAN zu arbeiten. Es ist möglich den so genannten BonjourService zu verwenden, oder Kommunikation direkt über Sockets ab zu wickeln. Das Top-Level-Modul der API für Netzwerkanwendungen befindet sich unter Titanium.Network Netzwerkstatus überprüfen Zur Überprüfung des Netzwerkstatus wird das Modul Titanium.Network verwendet. Mit Titanium.Network.networkTypeName lässt sich der Netzwerktyp abfragen der entweder den Wert WIFI, LAN, MOBILE oder NONE enthält. Über Titanium.Network.online erhält man einen boolschen wert, der indiziert ob das Gerät mit einem Netzwerk verbunden ist oder nicht. Ein Teil des Programms: // Check the status of the connection, especially // useful at the beginning, // when the application is launched, it initializes the // label for the connection status Titanium.Network.addEventListener('change',function(e){ var stringonline; var online=e.online; if(online){ stringonline='ja'; } else if(e.networktypename=='none'){ stringonline='nein'; } labeltest.text = 'type:' + Titanium.Network.networkTypeName + ' online:' + stringonline; // check if the devise is not connected => if it is not, it shows an alert Dialog if(e.networktypename == 'NONE'){ var alertdialog=titanium.ui.createalertdialog({ title: 'ACHTUNG!', message: 'Sie sind nicht angemeldet.', buttonnames: ['OK'] alertdialog.show(); } // Wir haben ein Label geschaffen: 39

40 Abbildung 37: Start der Anwendung Man bemerkt, dass der Label mit dem Code oben implementiert ist. Wann das Gerät angemeldet ist, man erhält: online: JA und der Typ (NONE, WIFI, LAN oder mobil) ist abhängig von dem Netzwerk. Mit diesem Beispiel, wir arbeiten mit dem Simulator, der Typ ist nur mobile oder NONE. 40

41 Abbildung 38: Start der Anwendung mit ios Wenn das Gerät nicht angeschlossen ist: Abbildung 39: Das Gerät ist nicht angeschlossen 41

42 Wie wir zuvor gesehen haben, der Benutzer ist nicht angemeldet. Der Code zeigt, wenn networktypename gleich NONE, ein Show Dialog scheint. Der Button aktualisieren hat ein addeventlistener, und wenn man drückt, benutzt fast den gleichen Code Sockets Mit Sockets ist es möglich eine TCP Verbindung zwischen zwei Geräten zu erstellen. Es gibt keine Beschränkung auf den Speicherort der Programme, die zwei Programme können auch auf der gleichen Maschine (localhost= ) laufen. Was wichtig zu verstehen ist, ist, dass eine TCP-IP Verbindung durch vier folgenden Daten identifiziert ist: Die IP-Adresse des ersten Programms Der Port eines Programms (in der Regel, lassen wir das System einen Port wählen) Die IP-Adresse des zweiten Programm Der Port des weites Programm Man spricht oft über Client und Server Kommunikation. Im Fall von HTTP, der Client ist der Webbrowser (Mozilla Firefox, Google Chrome ), und der Server ist die Web-Server. Der Wert des Port ist 80 für HTTP, 21 für FTP, 25 SMTP ( senden), 110 für POP3 ( s erhalten). Sockets sind Endpunkte der Kommunikation zwischen Prozessen. Eine Schnittstelle durch jede Prozessen kann senden/erhalten Informationen. Hier ist ein Diagramm: Abbildung 40: Sockets im Netzwerk Das Programm: Hier werden wir nicht alle Zeile des Codes, aber die wichtige Funktionen und den Verlauf des Programms. Zuerst, um die Verbindung zu initialisieren. Wir müssen die Verbindung konfigurieren. Der Port ist schon integriert (40404). Dann erstellen wir die beiden Sockets: Für den Server // Creates a socket, but does not listen to the // connection var socket = Titanium.Network.Socket.createTCP({ host:ti.platform.address, 42

43 port:40404, accepted: function(e) { var sock = e.inbound; connectedsockets.push(sock); notificationslisten.text="accepted:" +sock.host+':'+sock.port; Ti.Stream.pump(sock, pumpcallback, 1024, true); socket.accept(acceptedcallbacks); }, closed: function(e) { notificationslisten.text="closed listener"; }, error: function(e) { Ti.UI.createAlertDialog({ title:"listener error: "+e.errorcode, message:e.error }).show(); } Für den Client // Create a socket, connect to another listening socket // locally, and write some data connectingsocket = Ti.Network.Socket.createTCP({ host:hostfield.value, port:"40404", connected:function(e) { // write some data, "Well, hello there!" is // written once when the //connection is established e.socket.write(ti.createbuffer({value:"well, hello there!"})); Ti.Stream.pump(e.socket,pumpCallbackConnect, 1024, true); notificationsconnect.text="connected"; }, error:function(e) { notificationsconnect.text="error ("+e.errorcode+"): "+e.error; }, closed:function(e) { notificationsconnect.text="closed CONNECTION TO: "+e.socket.host+":"+e.socket.port; } Danach muss der erste Socket für die Verbindung hören: socket.listen(), und der zweite verbinden: connectingsocket.connect(). Dann können wir die Kommunikation erstellen mit diesem Verlauf: 43

44 Abbildung 41: Verlauf der Kommunikation Abbildung 42: Die Funktion in Gesamtheit: Socket + Buffer + Fluss Im Programm können wir Objekte als stream und buffer beachten, für eine Kommunikation benötigt man Socket, Fluss (stream) und Buffer. Das ist ein Teil der Kommunikation Prozess. Auf die beiden Seite, der Client oder Server kann Informationen lesen oder schrieben. Auf der Client und Server gibt es ein Fluss. Diese beiden Geräte können einen Buffer erhalten oder diesen Buffer durch den Fluss senden. Der Buffer enthält die Information. Dies ist eine Erklärung: 44

45 Unterschiede zwischen ios und Android Es gibt keine Unterschiede Bonjour Service Der Bonjour Service soll es ermöglichen, dass sich zwei oder mehrere Smartphones automatisch gegenseitig entdecken. Vorraussetztung dafür ist jedoch, dass sie sich im selben WLAN befinden. Leider funktioniert der Bonjour Service bisher nur für ios. Auf Android bleibt lediglich die direkte Kommunikation über Sockets. Quellen: [SOCKET] [CLIENTSERVER] [LISTENER] [CONNECT] GPS (Titanium.Geolocation) Die Titanium API verfügt mehrere Möglichkeiten als mit der Geolocation zu arbeiten. In diesem Teil haben wir ein Programm geschaffen, der die Position des Benutzers entdecken kann und den Benutzer auf einer Karte lokalisiert Der Benutzer lokalisieren Abbildung 43: Geolocalisation - 1 Man hat zwei Tabs : Geolocation und Map. Geolocation ermöglicht den Benutzer zu lokalisieren. Es gibt zwei Label, der erste zeigt die aktuelle Position, eine Funktion wird benutzt an dem Start der Anwendung: 45

46 // GET CURRENT POSITION - THIS FIRES ONCE Titanium.Geolocation.getCurrentPosition(function(e){ if (!e.success e.error){ currentlocation.text = 'error: ' + JSON.stringify(e.error); Ti.API.info("Code translation: "+translateerrorcode(e.code)); alert('error ' + JSON.stringify(e.error)); return; } locatelongitude = e.coords.longitude; locatelatitude = e.coords.latitude; var altitude = e.coords.altitude; var heading = e.coords.heading; var accuracy = e.coords.accuracy; var speed = e.coords.speed; var timestamp = e.coords.timestamp; var altitudeaccuracy = e.coords.altitudeaccuracy; Ti.API.info('speed ' + speed); currentlocation.text = 'long:' + locatelongitude + ' lat: ' + locatelatitude; Titanium.API.info('geo - current location: ' + new Date(timestamp) + ' long ' + locatelongitude + ' lat + locatelatitude + ' accuracy ' + accuracy); ' Zur Lokalisierung des Benutzers wird das Modul Titanium.Geolocation verwendet. Wir können die Position entdecken mit Titanium.Geolocation.getCurrentPosition. Das ist möglich mit Hilfe eines Ereignis (hier e und das bedeutet der Start der Anwendung). Man erhält die Breite und Länger mit e.coords.latitude und e.coords.longitude. Schliesslich zeigen wir die Breite und Länge mit dem erste Label : currentlocation.text = 'long:' + locatelongitude + ' lat: ' + locatelatitude; Jetzt, wenn der Programm läuft, und die Postion wird geändert, eine andere Funktion wird benutzt: // EVENT LISTENER FOR GEO EVENTS - THIS WILL FIRE // REPEATEDLY (BASED ON DISTANCE FILTER) var locationcallback = function(e){ if (!e.success e.error) { updatedlocation.text = 'error:' + JSON.stringify(e.error); updatedlatitude.text = ''; updatedlocationaccuracy.text = ''; updatedlocationtime.text = ''; Ti.API.info("Code translation: "+translateerrorcode(e.code)); return; } locatelongitude = e.coords.longitude; 46

47 locatelatitude = e.coords.latitude; var altitude = e.coords.altitude; var heading = e.coords.heading; var accuracy = e.coords.accuracy; var speed = e.coords.speed; var timestamp = e.coords.timestamp; var altitudeaccuracy = e.coords.altitudeaccuracy; Titanium.Geolocation.distanceFilter = 100; //changed after first location event updatedlocation.text = 'long:' + locatelongitude; updatedlatitude.text = 'lat: '+ locatelatitude; updatedlocationaccuracy.text = 'accuracy:' + accuracy; updatedlocationtime.text = 'timestamp:' +new Date(timestamp); updatedlatitude.color = 'red'; updatedlocation.color = 'red'; updatedlocationaccuracy.color = 'red'; updatedlocationtime.color = 'red'; settimeout(function() { updatedlatitude.color = '#444'; updatedlocation.color = '#444'; updatedlocationaccuracy.color = '#444'; updatedlocationtime.color = '#444'; },100); Titanium.API.info('geo - location updated: ' + new Date(timestamp) + ' long ' + locatelongitude + ' lat locatelatitude + ' accuracy ' + accuracy); ' + }; Abbildung 44: Geolocalisation - 2 Der Prinzip ist fast gleich als die letzte Funktion aber diese Funtion wird auf einer Distance Filter basiert. Das bestimmt, wie oft ein Ereignis ausgelöst, basiert auf der Distanz das Gerät bewegt. Dieser Wert ist in Meter: Titanium.Geolocation.distanceFilter = 100; Wenn die Position geändert ist, der Label wird rot, z.b: updatedlatitude.color = 'red'; Und wir zeigen die geändert Position mit Hilfe des zweites Label. 47

48 Unterschiede zwischen ios und Android Wenn der Programm auf einem Gerät läuft, gitb es keine Unterschiede. Aber es gibt ein Unterschied mit den Android und ios Simulator. Der GPS funktioniert nicht mit dem Android Simulator: Abbildung 45: Geolocalisation Eine Map erstellen Es gibt nämlich mehrere Möglichkeiten mit der Karte, wir haben diese Funktionalitäten probiert: Anmerkungen hinzufügen Webseiten öffnen mit der Hilfe einer Anmerkung Automatisch Lokalisierung auf der Karte Eine Route hinzufügen Anmerkungen hinzufügen Man möchte eine Anmerkung hinzufügen, wie dieses Beispiel: 48

49 Abbildung 46: Anmerkung hinzufügen Zuerst soll man eine Karte erstellen mit mehreren Anmerkungen: //mapview of the application, centered on pinthibault var mymap = Titanium.Map.createView({ opacity:0.0, maptype: Titanium.Map.STANDARD_TYPE, //we can use HYBRID_TYPE, or SATELLITE_TYPE region: {latitude: , longitude: , latitudedelta: 0.3, longitudedelta: 0.3 }, annotations:[pinthibault,pineseo,pinhochschule], animate:true, height:heightmap, regionfit:true, userlocation:true, Wir estellen eine Karte mit Titanium.Map.createView, hier sagen wir, dass diese Karte keine Opazität hat. Und mit region können wir die Karte zentralisieren, hier in Ulm (Breite und Länge von Ulm). Die Anmerkungen sind in annotations hinzugefügt. Aber dann soll man diese drei Anmerkungen: pinthibault, pineseo, pinhochschule erstellen. Mit Titanium.Map.createAnnotation: //List of three pins for the mapiew var pinthibault = Titanium.Map.createAnnotation({ latitude: , longitude: , title:"belle Ile en Mer", subtitle:'bei Thibault', pinimage : "map-pin.png", rightbutton: 'gwenn_ha_du.png', animate:true, 49

50 myid:1 var pineseo = Titanium.Map.createAnnotation({ latitude: , longitude: , title:"groupe ESEO", subtitle:'grande école d\'ingénieurs généralistes', pinimage : "map-pin.png", rightbutton: 'eseo.png', animate:true, myid:2 var pinhochschule = Titanium.Map.createAnnotation({ latitude: , longitude: , title:"hochschule Ulm", subtitle:'campus Prittwitzstraße', pinimage : "map-pin.png", rightbutton: 'hsulm.png', animate:true, myid:3 Für die verschiedene Anmerkungen braucht man die Breite und Länge von diesen Standorten. Wir können Nachrichten hinzufügen wie: title, subtitle. Und auch ein Bild mit pinimage. In diesem Fall haben wir die Anmerkungen mit der Karte erstellen, es gibt ein andere Möglichkeit: mymap.addannotation(myannotation); Öffnen eine Webseite mit Hilfe einer Anmerkung Zum Beispiel, wenn man auf einem Bild einer Anmerkung klickt, wird eine Webseite geöffnet. Um diese Webseite zu öffnen ertstellen wir ein addeventlistener auf dem Bild der Anmerkung: //shows a functionality of the mapview, when you touch the rightbutton of an annotation //a specific website is opened mymap.addeventlistener('click',function(e){ Titanium.API.info(e.clicksource); Titanium.API.info(e.annotation.myid); if(e.annotation.myid=3 && e.clicksource=='rightbutton'){ Titanium.Platform.openURL(" } Der rightbutton beschreibt den Bild der Anmerkung, deshalb brauchen wir diese e.clicksource.um 50

51 eine Webseite zu öffnen benutzen wir Titanium.Platform.openURL Automatisch Lokalisierung auf einer Karte Man braucht einen Button, einen addeventlistener und eine Funktion, die fast die gleiche als die Geolocation Funktion des ersten Tab ist. Wir benutzen die Funktion Titanium.geolocation.getCurrentPosition. Der Prinzip ist, dass diese Funktion auf einem Ereignis (hier e) basiert wird. Diese Ereignis wird ausgelöst, wenn man auf dem Button Locate me klickt. Und wir erhalten die Breite und Länge mit e.coords. Dann können wir mit den Breite und Länge eine Anmerkung erstellen und regionfit von der Karte ändern: LocateButton.addEventListener('click', function() { Titanium.Geolocation.getCurrentPosition(function(e){ if (!e.success e.error){ currentlocation.text = 'error: ' + JSON.stringify(e.error); Ti.API.info("Code translation: "+translateerrorcode(e.code)); alert('error ' + JSON.stringify(e.error)); return; } locatelongitude = e.coords.longitude; locatelatitude = e.coords.latitude; Titanium.API.info('geo - location : long ' + locatelongitude + ' lat ' + locatelatitude); if(locatelatitude!=null && locatelongitude!=null){ var pinlocateme = Titanium.Map.createAnnotation({ latitude:locatelatitude, longitude:locatelongitude, title:"locate me!", subtitle:'you are here', pinimage : "map-pin.png", animate:true, mymap.addannotation(pinlocateme); var regionlocate = { latitude:locatelatitude, longitude:locatelongitude, animate:true, latitudedelta:0.1, longitudedelta:0.1}; mymap.hide(); mymap.setlocation(regionlocate); mymap.show(); } 51

52 Eine Route hinzufügen Das Prinzip ist eine Route zwischen zwei Standorte hinzufügen. Aber es gibt keine Möglichkeiten wie Google Maps, z.b zwei Standorte wählen und die Route ist dynamisch gezeichnet. Mit der Titanium API können wir nur eine Route Punkte pro Punkte zeichnen. points = [ {latitude:42.31,longitude:-71.11}, {latitude:42.32,longitude:-71.13}, {latitude:42.31,longitude:-71.22}, {latitude:42.28,longitude:-71.26} ] // route object var route = { name:"some name", points:points, color:"#00f", width:2 }; // add a route mymap.addroute(route); Zuerst ertstellen wir die verschiedene Punkte mit Breite und Länge in einer Tabelle. Dann erstellen diese Route, und sie wird mit der Tabelle point definiert. Wir können Eigenschaften wie name, color und width hinzufügen. Schliesslich fügen wir diese Route hinzu, mit mymap.addroute. Das Ergebnis: Abbildung 47: Eine Route 52

53 Hier können die vier verschiedene Punkte sehen. Unterschiede zwischen ios und Android Wir können Anmerkungen auf die beiden Plattformen hinzufügen. Wir können Bilder für Anmerkungen nur mit Android hinzufügen. Deshalb kann man nicht eine Webseite mit Hilfe einer Anmerkung mit ios öffnen. Mit der Lokalisierung ist es gleich mit Android oder ios Geräten, aber das funktioniert nicht mit dem Android Simulator, der GPS für den ios Simulator zeigt standardmässig San Francisco. Und wir können eine Route nur mit ios hinzufügen Soziale Netze Facebook Mit dieser Funktionalität werden wir ein Teil der Titanium API benutzen : Titanium.Facebook. Man muss innerhalb seiner Anwendung selbst Ti.Facebook.appid setzen, um die Facebook-Modul zu benutzen. Diese Eigenschaft ist nur für die Konfiguration unserer Anwendung, um den Login Prozess zu benutzen. Titanium.Facebook.appid = ; Wir sollen auch zwei Erlaubnis haben, publish_stream und read_stream, um die Facebook zu benutzen: Titanium.Facebook.permissions = ['publish_stream','read_stream']; Login/Logout In diesem Teil, der Benutzer kann sich mit Facebook anmelden oder nicht: Abbildung 48: Facebook Login 53

54 Zuerst erstellen wir diese Login Button (unteren Rand des letztes Bildes): // Login Button win.add(titanium.facebook.createloginbutton({ style:'wide', bottom:30 })); Und dann zwei EventListener für diese Button, um sich über Facebook anmelden oder abmelden : Titanium.Facebook.addEventListener('login', updateloginstatus); Titanium.Facebook.addEventListener('logout', updateloginstatus); Wenn der Benutzer verbunden oder nicht ist, bearbeiten wir den Login status : function updateloginstatus() { label.text = 'Logged In = Titanium.Facebook.loggedIn; } Bilder publizieren Mit der Titanium API haben wir auch die Möglichkeit Bilder auf Facebook zu publizieren. Man kann ein Bild von der Fotogalerie oder von einem lokalen Ordner wählen. Das Ergebnis ist gleich aber das Prinzip des Codes nicht. Um ein Bild von der Fotogalerie zu erhalten benutzen wir die Graph API und die REST API für ein Bild von einem lokal Ordner. Abbildung 49: Bilder mit Facebook publizieren 54

55 Diese beide API sind API von Facebook, nicht von Titanium. Der Kern des Facebook ist ein Social Graph, die Menschen und ihre Verbindungen zeigt. Die Graph Api stellt eine einfache, konsistente Sicht auf die Facebook Social Graph, gleichmäßig, die Objekte in der Graphik (zb Menschen, Fotos, Veranstaltungen, Seiten) und die Verbindungen zwischen ihnen (zb Freuden Beziehungen, gemeinsame Inhalte und Foto-Tags). Die Rest API ermöglicht uns, mit Facebook-Webseite programmatisch interagieren über HTTP-Requests. Bilder von FotoGalerie Wir haben gesehen, dass wir zwei Button für die zwei Möglichkeiten haben. Der erste für Bilder von der Fotogalerie heisst b1 in dem Code. Und wir estellen ein EventListener für jede Button. b1.addeventlistener('click', function() { Titanium.Media.openPhotoGallery({ success:function(event) { b1.title = 'Uploading Photo...'; var data = {picture: event.media}; Titanium.Facebook.requestWithGraphPath('me/photos', data, "POST", showrequestresult); }, cancel:function() { }, error:function(error) { }, allowediting:true Wir können die Fotogalerie mit Titanium.Media.openPhotoGallery öffnen. Dann benutzen eines Ereignis (hier event), das bedeutet, wenn man auf ein Bild in der Fotogalerie klickt. Wenn dieses Ereignis ausgelöst, erhalten wir diese Bild mit: var data = {picture: event.media}; Und dann publizieren wir diese Bild auf Facebook mit der Graph API: Titanium.Facebook.requestWithGraphPath('me/photos', data, "POST", showrequestresult); 55

56 Bilder von einem lokal Ordner Hier können wir nicht unsere Bild wählen. Das Bild ist in einem Ordner von dem Projektordner. Um das Bild zu finden benutzen wir Titanium.Filesystem.getFile: var f = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory, 'images', 'flower.jpg'); Wenn wir diese Bild erhalten habe, benutzen wir die Rest API, um das Bild zu publizieren: Titanium.Facebook.request('photos.upload', data, showrequestresult); Andererseits ist das prinzip gleich, wir haben ein andere EventListener: b2.addeventlistener('click', function() { b2.title = 'Uploading Photo...'; var f = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory, 'images', 'flower.jpg'); var blob = f.read(); var data = { caption: 'behold, a flower', picture: blob }; Titanium.Facebook.request('photos.upload', data, showrequestresult); Status publizieren Hier benutzen wir diese Graph API, und wir benötigen nämlich die publish_stream Erlaubnis: Abbildung 50: Status publizieren 56

57 Wir haben ein TextField erstellen, um der Status zu schreiben: var statustext = Ti.UI.createTextField({ top: 0, left: 10, right: 10, height: 40, hinttext: 'Enter your FB status' Ein button, um der Status zu publizieren: var statusbtn = Ti.UI.createButton({ title: 'Publish status with GRAPH API', top: 45, left: 10, right: 10, height: 40 Schliesslich, ein EventListener für diese Button, um der Graph API zu benutzen: statusbtn.addeventlistener('click', function() { Titanium.Facebook.requestWithGraphPath('me/feed', {message: statustext.value}, "POST", showrequestresult); Twitter Es gibt nämlich andere Soziale Netzwerk wie Twitter, aber keine API dafür. Wie können wir diese Sozial Netzwerk benutzen? Wir brauchen ein HTTP Client. Wenn der HTTP Client ertsellt ist, ist ein GET Methode angerufen, wie in PHP, um die Informationen von dem Benutzer zu haben (hier appcelerator) und um die API von Twitter zu benutzen. Zuerst erstellen wir den HTTP Client: var xhr = Ti.Network.createHTTPClient(); Dann benutzen wir die GET Methode: xhr.open("get"," json?screen_name="+screen_name); Und dann mit xhr.onload(), wir erholen die Informationen. Onload ermöglicht die Information. Diese Funktion ist eine Funktion von Titanium.Network.HTTPClient, sie ist angerufen, wenn der HTTP Client mit ohne Fehler geöffnet ist. Wenn es Fehler gibt, rufen wir onerror() an. xhr.onload = function() { try 57

58 { var tweets = eval('('+this.responsetext+')'); for (var c=0;c<tweets.length;c++){ var tweet = tweets[c].text; var user = tweets[c].user.screen_name; var avatar = tweets[c].user.profile_image_url; var created_at = prettydate(strtotime(tweets[c].created_at)); var bgcolor = (c % 2) == 0? '#fff' : '#eee'; Nachdem gibt es Code für Graphik (TableViewRow, ImageView)... Das Ergebnis: Abbildung 51: Appcelerator Tweat Unterschiede zwischen ios und Android Es gibt keine Unterschiede. 58

59 2.2.7 Medien (Titanium.Media) In diesem Teil benutzen wir am meisten Titanium.Media von der Titanium API. Was wir wollen machen ist, zb ein Bild/Foto von der Fotogalerie erhalten und ein Ton abspielen Fotos Das Prinzip ist, dass wir ein graues Rechteck haben. Und wir wollen dieses Rechteck mit einem Foto von der Fotogalerie bearbeiten. Zuerst erstellen wir dieses Rechteck (hier ist es ein ImageView) mit Titanium.UI.createImageView : var rectangle = Titanium.UI.createImageView({ height:200, width:250, top:20, left:10, backgroundcolor:'#999' Wenn man dieses Rechteck berührt, wird das Rechteck bearbeitet. Deshalb erstellen wir ein EventListener : imageview.addeventlistener('click',function(){... Dann öffnen wir die Fotogalerie mit Titanium.Media.openPhotoGallery: Titanium.Media.openPhotoGallery; Und um das Foto zu erhalten benutzen wir ein Ereignis (hier event). Wir benutzen event.mediatype, der ein Eigenschaft von Titanium.Media.Item ist. Wenn es ein Foto ist (event.mediatype == Ti.Media.MEDIA_TYPE_PHOTO), bearbeiten wir dieses Rechteck: if(event.mediatype == Ti.Media.MEDIA_TYPE_PHOTO) { rectangle.image = image; } 59

60 Code des EventListeners : rectangle.addeventlistener('click',function(){ Titanium.Media.openPhotoGallery({ success:function(event) { var croprect = event.croprect; var image = event.media; // set image view Ti.API.debug('Our type was: '+event.mediatype); if(event.mediatype == Ti.Media.MEDIA_TYPE_PHOTO) { rectangle.image = image; } else { // is this necessary? } Titanium.API.info('PHOTO GALLERY SUCCESS croprect.x ' + croprect.x + ' croprect.y ' + croprect.y + ' croprect.height ' + croprect.height + ' croprect.width ' + croprect.width); }, cancel:function() { }, error:function(error) { }, allowediting:true, popoverview:popoverview, arrowdirection:arrowdirection, mediatypes: [Ti.Media.MEDIA_TYPE_VIDEO,Ti.Media.MEDIA_TYPE_PHOTO] 60

61 Abbildung mit dem ios Similator: Das funktioniert natürlich nicht mit dem ios Simulator, es gibt standardmässig keine Fotos in der Fotogalerie. Abbildung 52: Photos im ios Simulator Ton abspielen Hier möchten wir ein Ton abspielen. Wir wollten ein Ton von der SD Karte abspielen. Aber es gibt keine Möglichkeiten mit der Titanium API. Heutzutage ist es praktisch für Smartphone, verfügbar Speicher zu haben. Vielleicht wäre es möglich mit eine Aktualisierung von Titanium API. Deshalb können wir nur ein Ton von dem Projektordner abspielen. Zuerst erstellen wir verschiedenen Button, um die Lektüre zu steuern: 61

62 Zuerst erstellen wir ein Ton mit Titanium.Media.createSound, das ermöglicht der Ton von dem ProjektOrdner zu benutzen: var sound = Titanium.Media.createSound(); sound.url='cricket.wav'; Das ist ein.wav Ton, das kann ein.mp3 oder.m4a sein. Es gibt nämlich ein EventListener für jede Button, zb mit play: play.addeventlistener('click', function() { sound.play(); play() ist eine Funktion von Titanium.Sound. Wir Benutzen Funktionen von Titanium.Sound für jede Button. ZB mit den Button Pause, pause() ; Stop, stop(). Das ist anders mit der Stärke, wir benutzen die Eigenschaft volume von Titanium.Sound : volumeup.addeventlistener('click', function() { if (sound.volume < 1.0) { sound.volume += 0.1; volumeup.title = 'Volume++ (' + sound.volume + ')'; volumedown.title = 'Volume--'; } Die Wert volume muss zwischen 0 und 1 sein. Wir können diese Wert er erhöhen oder verringern bei 0.1. Und wir bearbeiten den Label von dem Button. Wir können auch der Ton wieder abspielen mit looping. Man zeigt der looping des Tons auf den Button : looping.title. Und wenn man auf den Button klickt, wird der looping false oder true. looping.addeventlistener('click', function() { sound.looping = (sound.looping === false)?true:false; looping.title = 'Looping (' + sound.islooping() + ')'; Es gibt auch ein Progress Bar. Wir haben mit Titanium.UI.createProgressBar erstellt. Das funktioniert nur mit ios. Für diese Progress Bar brauchen wir ein Flex Space, wir haben ein Flexspace (sichtbar in blau am unteren Rand des folgendes Bildes) mit Ti.UI.iPhone.SystemButton.FLEXIBLE_SPACE. 62

63 Code : // // PROGRESS BAR TO TRACK SOUND DURATION // var flexspace = Titanium.UI.createButton({ systembutton:titanium.ui.iphone.systembutton.flexible_space var pb = Titanium.UI.createProgressBar({ min:0, value:0, width:200 if (Ti.Platform.name!= 'android') { win.settoolbar([flexspace,pb,flexspace]); } pb.show(); Das Ergebnis : Abbildung 53: Ton wird abgespielt Unterschiede zwischen Android und ios Der Progress Bar funktioniert nur mit ios. 63

64 2.3 Unterschiede zwischen ios und Android im Überblick In folgender Tabelle sind die, in diesem Kapitel ausgearbeiteten, Unterschiede noch einmal zusammen gefasst. Modul Unterschiede GUI AlertDialog Auf Android kann ein Dialog nicht mehr als drei Buttons enthalten. Button Auf dem ios müssen Höhen und Breitenangaben gesetzt werden. Das Attribut backgroundselectedimage hat auf Android keine Auswirkungen. Label Die standardmäßig eingestellte Textfarbe ist bei ios schwarz, bei Android hingegen weiß. Picker Unterschiedliche Darstellung, Funktionsweise aber identisch. ScrollView remove() funktioniert auf Android nicht, scrolltype gibt es nur für Android. Die Scroll-Richtung muss bei Android spezifiziert werden, ios unterstützt beide Richtungen gleichzeitig. Slider Anpassung mit Grafiken ist nur für ios möglich. Switch Unterschiedliche Darstellung, für Android gibt es klassische Checkboxen. TabGroup Bei Android ersetzt Tabgroup das aktuelle Fenster. Android stellt die Tableiste oberhalb der Tabs dar, ios unterhalb. TableView Keine Unterschiede. TextArea blur() funktioniert auf Android nicht. View Auf dem ios muss die top explizit auf 0 gesetzt werden. WebView Keine Unterschiede. Window Keine Unterschiede. TouchEvents Click Keine Unterschiede. Double Click Funktioniert weder unter Android noch auf dem ios. Single Tap Funktioniert auf dem ios nicht sehr zuverlässig. Double Tap Funktioniert auf dem ios nicht sehr zuverlässig. Twofinger Tap Funktioniert weder unter Android noch auf dem ios. Touch Start Keine Unterschiede. Touch Move Keine Unterschiede. Touch End Keine Unterschiede. Swipe Funktioniert bisher nur auf dem ios, Workarround für Android vorhanden. Datenbanken Keine Unterschiede. 64

65 WLAN BonjourService funktioniert nur für das ios. GPS Bilder für Markierungen und RegionFit funktionieren auf dem ios nicht. Facebook Keine Unterschiede. Twitter Keine Unterschiede. Musik ProgressBar für Audiowiedergabe funktioniert auf Android nicht. Bilder Keine Unterschiede. Für genauere Informationen zu den einzelnen Modulen sei hier auf den Abschnitt 2.2 verwiesen. 2.4 Adaptionen zwischen ios und Android 65

66 3 Teil III: Entwickeln einer App mit Titanium In dritten Teil dieser Arbeit geht es darum die Fähigkeiten von Titanium anhand einer funktionierenden Anwendung zu demonstrieren. Diese Anwendung soll mit Titanium entwickelt, und auf Android-, sowie ios Geräten lauffähig sein. Um weiterhin speziell den Zugriff auf hardware-nahe Elemente zu demonstrieren wurde die Kommunikation über WLAN als Teil der Anwendung definiert, folglich wird ein Multiplayermodus angestrebt. Dazu werden die bisher über Titanium gewonnen Erkenntnisse, bezüglich WLAN und anderen Bereichen angewendet. 3.1 Einführung - SET Entwickelt wird das Kartenspiel SET. [SET] Es handelt sich hierbei um ein Kartenspiel mit 81 Karten. Jede Karte ist einzigartig und zeichnet sich durch vier Merkmale aus. das Symbol auf der Karte die Anzahl der Symbole auf der Karte die Farbe des Symbols auf der Karte die Fläche des Symbols auf der Karte Jedes dieser Merkmale kann drei unterschiedliche Ausprägungen besitzen. Das Symbol kann ein Kreis, ein Rechteck oder eine Welle sein. Es können auf einer Karte ein, zwei oder drei Symbole enthalten sein. Die Farbe der Symbole auf einer Karte kann entweder rot, grün oder lila sein. Und die Fläche der Symbole kann entweder voll, leer oder ausgefüllt sein. Schließlich gilt noch, dass alle Symbole auf einer Karte stets die gleichen Ausprägungen besitzen müssen. Es können also nicht unterschiedliche Symbole auf einer Karte sein. Zu Beginn des Spieles werden die Karten gemischt und verdeckt auf einen Stapel gelegt. Anschließend werden die obersten zwölf Karten vom Stapel gezogen und offen auf der Spielfläche ausgelegt (Anordnung: 3x4 Karten). Es beginnt das eigentliche Spiel. Alle Mitspieler (theoretisch beliebig viele) suchen in den aufgedeckten Karten nach einem SET. Ein SET besteht aus drei Karten und besitzt folgende Eigenschaften: Alle Merkmale der drei Karten müssen entweder drei unterschiedliche Ausprägungen besitzen oder drei identische Ausprägungen besitzen. Findet ein Spieler ein SET, so darf er die drei Karten an sich nehmen und es werden drei neue Karten vom Kartenstapel aufgedeckt. Diese werden an die Stelle des gefundenen SET gelegt. Das Spiel endet wenn kein Spieler mehr in der Lage ist ein SET zu finden, oder der Kartenstapel nicht mehr ausreicht um das Spielfeld aufzufüllen. 3.2 Projektmanagement Dieses Projekt wird agil entwickelt. Die dabei verwendete Methode heißt Scrum. Bei agiler Softwareentwicklung geht es im Kern um ein iteratives Vorgehen damit auf Anforderungsänderungen schnell reagiert werden kann. [AGIL] 66

67 Heutzutage ist die bekannteste aller agilen Methoden Scrum. Durch eine einfache Struktur und klar definierte Rollen lassen sich die Scrum-Prinzipien einfach lernen und produktiv einsetzen. [SCRUM] Aus Kundensicht bietet Scrum den Vorteil, dass kein Pflichtenheft existieren muss. Der Kunde beschreibt am Anfang lediglich wenige Basisfunktionalitäten und das Projekt kann ohne Verzögerung beginnen. Wegen dem iterativen Vorgehen können neue Anforderungen während des Projektverlaufes jederzeit hinzugefügt werden. Weiterhin führt die Iteration dazu, dass Erfahrungen aus dem laufenden Projekt in den Entwicklungsprozess einfließen können. Außerdem wird nur dass entwickelt was tatsächlich von Nutzen ist. Auch für Entwickler bietet Scrum wesentliche Vorteile. Dadurch, dass ein Entwickler die Aufwände selbst abschätzen muss lernt er schließlich aus seinen eigenen Erfahrungen und ein erfahrenes Team kann so die Entwicklungsgeschwindigkeit besser einschätzen. Auch sprechen in agilen Projekten die Entwickler regelmäßig direkt mit den Anwendern. Dies führt dazu, dass die Entwickler das Produkt besser verstehen und gleichzeitig wächst auch das Verständnis der Anwender wenn die Entwickler mal eine Schätzung korrigieren müssen. Allerdings ist es auch nicht leicht eine agile Methode einzuführen. Oft müssen alte Gewohnheiten abgelegt werden und die neuen Methoden immer wieder überprüft werden. Aus diesem Grund sollte Agilität nur langsam eingeführt werden. [SCRUMVN] 3.3 Product Backlog Das Produkt Backlog ist eine priorisierte Liste, welche alles enthält was für das Produkt zu entwickeln ist. Im Produkt Backlog können auch Änderungsanforderungen übernommen werden. Vom Kunden gefordert war das Spiel SET welches gemäß den in Kapitel 3.1 erklärten Regeln umgesetzt werden soll. Zu Beginn des Spiels wird ein Menü gezeigt, welches dem Benutzer drei verschiedene Aktionen ermöglicht. Entweder entscheidet sich der Anwender für ein Spiel im Singleplayermodus oder für den Multiplayermodus, um gegen einen anderen Spieler zu spielen. Dabei ist es ihm möglich zu wählen ob er selbst ein Spiel eröffnen, oder einem anderen Spiel beitreten möchte. Jede dieser drei Varianten wird in den folgenden Abschnitten erklärt Singleplayermodus Im Singleplayermodus wird sofort ein Spiel gestartet. Auf dem Display wird das Spielfeld angezeigt, welches die ersten zwölf, vom Stapel gezogenen Karten enthält. Zusätzlich wird der aktuelle Punktestand angezeigt. Findet der Spieler ein SET, wird dieses gemäß den Regeln entfernt und durch drei neue Karten ersetzt. Bei jedem gefundenen SET wird außerdem der Punktestand um eins inkrementiert. Das Selektieren und Deselektieren der Karten wird durch farbliche Markierungen optisch hervor gehoben. Sind drei Karten selektiert, so wird überprüft ob ein SET gefunden wurde. Handelt es sich um ein SET, so werden die drei Karten kurz hervorgehoben und anschließend entfernt. Hat der Spieler kein valides SET markiert, werden die selektierten Karten automatisch deselektiert. Zusätzlich hat der Spieler im Singleplayermodus drei weitere Möglichkeiten. Er kann das Spiel jederzeit beenden, was jedoch erst nach einer erneuten Bestätigung erfolgt. Um herauszufinden ob es im aktuellen Zustand überhaupt noch ein SET gibt kann der Benutzer außerdem einen Button drücken. Dieser öffnet einen Dialog welcher dem Benutzer mit teilt ob es noch ein SET gibt. Sollte kein SET mehr vorhanden sein wird das Spiel beendet. Im Singleplayermodus kann der Spieler sich außerdem noch ein mögliches SET anzeigen lassen. 67

68 Wird der entsprechende Button gedrückt, so wird ein mögliches SET für kurze Zeit farbig hervorgehoben. Wiederrum gilt, wenn es kein SET gibt wird das Spiel beendet. Das Spiel kann außerdem durch jeden der Spieler beendet werden. Schließlich gibt es noch die Möglichkeit, dass alle Karten vom Spielstapel aufgebraucht sind. Auch dann wird das Spiel beendet Multiplayermodus Der Multiplayermodus ermöglicht zwei Alternativen. Zunächst muss ein Gerät ein Spiel erstellen, anschließend kann ein weiteres Gerät an diesem Spiel teilnehmen. Die genauen Schritte sind im Folgenden erklärt Spiel erstellen Wird ein neues Spiel erstellt, so wartet das Gerät zunächst darauf, dass sich ein Gegenspieler mit ihm verbindet. Dazu soll die IP des Spiel-Erstellers (Host) verwendet werden. Ist dies erfolgt, wird der Host benachrichtigt. Daraufhin kann er das Spiel starten An einem Spiel teilnehmen Wurde von einem anderen Gerät bereits ein Spiel eröffnet, kann man an diesem Spiel teilnehmen. Voraussetzung dazu ist die IP Adresse des Host-Gerätes, welche händisch eingetragen werden muss. Nach Eingabe der IP-Adresse kann sich der teilnehmende Spieler (Client) mit dem Host verbinden. War die Verbindung erfolgreich wird das Spiel anschließend vom Host gestartet. Der übrige Spielablauf ist für Client und Host identisch. Das Spiel läuft genau so ab wie in Kapitel beschrieben. Der Unterschied zum Multiplayermodus ist, dass die Spieler keine Möglichkeit besitzen sich ein SET anzeigen zu lassen. Außerdem wird neben der eigenen Punkteanzeige noch die Punktezahl des Gegners angezeigt. Für das Spiel gilt, wer ein SET zuerst findet, der bekommt auch die Punkte dafür. Am Spielende wird schließlich angezeigt wer das Spiel gewonnen hat. 68

69 3.3.3 Backlog Items Aus den Anforderungen aus Kapitel und wurden die Backlog Items, sowie deren Priorisierung gemäß Tabelle 8 abgeleitet. Backlog Item Priorität (Ʃ=1000) Erstellung der Grafiken für die Spielkarten. 120 Algorithmus für den Kartenstapel erstellen. 120 Algorithmus zur Überprüfung ob selektierte Karten ein SET ergeben. 120 Debuggen der Singleplayerfunktion. 100 Algorithmus zur Überprüfung ob es überhaupt noch ein SET gibt. 80 Debuggen der Logik welche ein Set finden soll. 60 Multiplayermodus integrieren. 200 Debuggen der Multiplayerfunktion. 100 Optional: Vibration bei gefundenem SET. 10 Darstellung des Gewinners bei Spielende. 30 Anleitung für das Spiel implementieren. 10 Funktion zum Anzeigen eines SETs im Singleplayer integrieren. 40 Möglichkeit zum Speichern von IP Adressen erstellen. 10 Tabelle 8: Backlog Items Einige Items wurden hier nur schwach priorisiert und aus diesem Grund als Optionales Feature behandelt. Die Priorisierung geschah in Zusammenarbeit mit dem Auftraggeber. 69

70 3.4 Das Spiel Startet ein Benutzer das Spiel SET auf seinem Smartphone, so öffnet sich ein Fenster gemäß Abbildung 54. Die drei Buttons spiegeln die in Kapitel 3.3 definierten Kernfunktionen wieder. Die Schaltfläche Set starten beginnt sofort ein neues Spiel im Einzelspielermodus. Die zwei anderen Schaltflächen sind für den Multiplayermodus zu verwenden. Sie können zum Spiel eröffnen, oder zum Spiel teilnehmen verwendet werden. Abbildung 54: SET - Startfenster Abbildung 55: Spielfeld im Einzelspielermodus Der Spielablauf für ein Singleplayerspiel beginnt mit dem Klick auf Set starten. Das Spielfeld, mit den ersten zwölf aufgedeckten Karten vom Kartenstapel wird gezeichnet (siehe Abbildung 55). Anschließend muss der Spieler reagieren und eine Karte mit dem Finger antippen. Dies startet einen Ablauf gemäß Abbildung 56. Abbildung 56: Ablauf beim Anklicken einer Karte im Singleplayermodus 70