App-Entwicklung für die Cross-Plattform - eee

App-Entwicklung für die Cross-Plattform - eee
App-Entwicklung für die Cross-Plattform
von
Tobias Reinke
Thibault Guégan
Betreuung:
Prof. Dr. M. von Schwerin
Inhaltsverzeichnis
1 Teil I: Überblick.................................................................................................................................4
1.1 Einleitung...................................................................................................................................4
1.2 App-Entwicklung.......................................................................................................................5
1.2.1 Apps für Android................................................................................................................6
1.2.2 Apps für iOS.......................................................................................................................7
1.3 App-Entwicklung für die Cross-Plattform.................................................................................7
1.3.1 Sencha Touch.....................................................................................................................7
1.3.2 Titanium Studio..................................................................................................................8
1.3.2.1 Unterstützung weiterer Plattformen...........................................................................8
1.3.2.2 Installationsanleitung..................................................................................................9
2 Teil II: Vertiefung Titanium.............................................................................................................13
2.1 Einführung Titanium................................................................................................................13
2.1.1 Neues Projekt erstellen.....................................................................................................14
2.1.2 Projektaufbau...................................................................................................................16
2.1.3 Hello World......................................................................................................................17
2.2 Die Programmierschnittstelle (API)........................................................................................20
2.2.1 GUI (Titanium.UI)...........................................................................................................22
2.2.1.1 AlertDialog...............................................................................................................22
2.2.1.2 Button.......................................................................................................................23
2.2.1.3 Label.........................................................................................................................24
2.2.1.4 Picker........................................................................................................................25
2.2.1.5 ScrollView................................................................................................................27
2.2.1.6 Slider........................................................................................................................28
2.2.1.7 Switch.......................................................................................................................29
2.2.1.8 TabGroup..................................................................................................................29
2.2.1.9 TableView.................................................................................................................31
2.2.1.10 TextArea.................................................................................................................31
2.2.1.11 View........................................................................................................................32
2.2.1.12 WebView................................................................................................................32
2.2.1.13 Window..................................................................................................................33
2.2.2 TouchEvents.....................................................................................................................33
2.2.2.1 Click (click)..............................................................................................................34
2.2.2.2 Double Click (dbclick).............................................................................................34
2.2.2.3 Single Tap (singletap)...............................................................................................34
2.2.2.4 Double Tap (doubletap)............................................................................................34
2.2.2.5 Twofinger Tap (twofingertap)..................................................................................34
2.2.2.6 Touch Start (touchstart)............................................................................................34
2.2.2.7 Touch Move (touchmove)........................................................................................34
2.2.2.8 Touch End (touchend)..............................................................................................35
2.2.2.9 Swipe (swipe)...........................................................................................................35
2.2.3 Datenbanken (Titanium.Database)...................................................................................38
2.2.4 WLAN (Titanium.Network).............................................................................................40
2.2.4.1 Netzwerkstatus überprüfen.......................................................................................40
2.2.4.2 Sockets......................................................................................................................43
2.2.4.3 Bonjour Service........................................................................................................46
2.2.5 GPS (Titanium.Geolocation)............................................................................................46
2.2.6 Soziale Netze....................................................................................................................54
2.2.7 Medien (Titanium.Media)................................................................................................60
Tobias Reinke, Thibault Guégan
2
2.3 Unterschiede zwischen iOS und Android im Überblick..........................................................65
2.4 Adaptionen zwischen iOS und Android...................................................................................66
2.5 Troubleshooting.......................................................................................................................66
3 Teil III: Entwickeln einer App mit Titanium...................................................................................68
3.1 Einführung - SET.....................................................................................................................68
3.2 Projektmanagement.................................................................................................................69
3.3 Product Backlog.......................................................................................................................69
3.3.1 Singleplayermodus...........................................................................................................69
3.3.2 Multiplayermodus............................................................................................................70
3.3.2.1 Spiel erstellen...........................................................................................................70
3.3.2.2 An einem Spiel teilnehmen.......................................................................................70
3.3.3 Backlog Items..................................................................................................................71
3.4 Spielablauf...............................................................................................................................72
3.4.1 Singleplayermodus...........................................................................................................72
3.4.2 Multiplayermodus............................................................................................................74
4 Zusammenfassung...........................................................................................................................77
Tobias Reinke, Thibault Guégan
3
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 mitunter die Möglichkeit
Anwendungen (Apps) für Smartphones zu entwickeln und zu vertreiben.
Anschließend wird auf eine Problematik hingewiesen, mit der die Entwickler häufig konfrontiert
werden. Sie müssen sich entscheiden für welches Betriebssystem, der Smartphones, 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 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 Emails schreiben.
Weitere Anwendungsmöglichkeiten sind in Tabelle 1 aufgeführt.
Anwendung
Beispiele
Kommunikationszentrale
Mobiltelefon, SMS, Webbrowser, E-Mail, 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
Tobias Reinke, Thibault Guégan
4
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 ist, hat der Absatz von Smartphones in Deutschland im letzten Jahr
stark zugenommen. 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 einem 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 von den Jahren 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.
Tobias Reinke, Thibault Guégan
5
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 entwicklungsfreundlicher und kostengünstiger, wenn eine Anwendungen nur
einmal programmiert werden muss.
1.2.1 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
Tobias Reinke, Thibault Guégan
6
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]
1.2.2 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 1.2.1 ) und iOS
(Abschnitt 1.2.2 ) 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.
1.3.1 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 Sensoren und native Dienste, wie die Verwaltung der 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.
Tobias Reinke, Thibault Guégan
7
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.
1.3.2.1 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.
Tobias Reinke, Thibault Guégan
8
1.3.2.2 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 2.7.2 –
32 bit) herunter geladen werden: http://www.python.org/download/
Zu beachten ist, dass Python in das Verzeichnis installiert wird, welches in Punkt 1.3.2.2 empfohlen
wurde.
Tobias Reinke, Thibault Guégan
9
Git
Git ist eine freie Software zur verteilten Versionsverwaltung von Dateien und wird für die
Beispielapplikation KitchenSink (von Titanium) benötigt.
Unter http://git-scm.com/download muss msysGit für Windows herunter 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 - 32
Tobias Reinke, Thibault Guégan
10
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 1.6.
http://www.oracle.com/technetwork/java/javase/downloads/index.html
Android SDK Tool
Das Android SDK kann unter http://developer.android.com/sdk/index.html 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 - 2
Tobias Reinke, Thibault Guégan
11
Titanium Studio
Unter folgendem Link http://preview.appcelerator.com/studio/ kann die aktuelle Version von
Titanium Studio runter geladen werden. Durch einen Doppelklick wird der Installationsassistent
gestartet.
Tobias Reinke, Thibault Guégan
12
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, dass 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 in dem während dem Kompilieren
Debug-Informationen und Fehlermeldungen zu finden sind.
Oben im Projekt Explorer befindet sich eine Toolbar, die 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.
Tobias Reinke, Thibault Guégan
13
Abbildung 12: Titanium Studio
2.1.1 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 dem man den
Projektname, die App Id, die 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 die
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 schon mit den zuvor eingegebenen Werten (bei der Projekterstellung) belegt
ist.
Tobias Reinke, Thibault Guégan
14
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 aufmerksame 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.
Aufgrunddessen, dass 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 1.7.5 verwendet.
Tobias Reinke, Thibault Guégan
15
Abbildung 15: Die tiapp.xml Datei
2.1.2 Projektaufbau
Das neu erstellte Projekt aus Kapitel 2.1.1 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 2.1.1 ) 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 gibt es 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
die 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.
Tobias Reinke, Thibault Guégan
16
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 2.1.3 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.
2.1.3 Hello World
Kompiliert und startet man das in Kapitel 2.1.1 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 2.2.1.8 noch detaillierter erklärt wird.
Tobias Reinke, Thibault Guégan
17
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. Sie unterscheiden sich durch ein Textlabel. 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
(Abbildung 37 zeigt die TabGroup im iOS Simulator mit den fehlenden Grafiken).
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({
Tobias Reinke, Thibault Guégan
18
icon:'KS_nav_views.png',
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)
die 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.
Tobias Reinke, Thibault Guégan
19
2.2 Die Programmierschnittstelle (API)
Titanium stellt zur App Entwicklung eine API bereit. Diese API ermöglicht es Programmierern auf
bestimmte Funktionen von Titanium zuzugreifen. Abbildung 18 erklärt das Prinzip der API. Die
rechte Seite der Grafik stellt die vielen unterschiedlichen Endgeräte dar, die Titanium unterstützt.
Jedes dieser Geräte stellt eine definierte Menge von Funktionen bereit. Aufgabe der API ist es diese
Funktionen, unabhängig von dem Zielgerät, in standardisierter Form zur Verfügung zu stellen (linke
Seite der Grafik). Titanium bietet eine Schnittstelle in JavaScript. Aus diesem Grund werden
Anwendungen in JavaScript entwickelt.
Abbildung 18: Funktionsweise der API
So kann beispielsweise über einen standardisierten Aufruf ein typisches Element einer Anwendung
erstellt und gestaltet werden. Im Folgenden wird dies Anhand eines GUI-Elementes, einem
Window, 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 19.
Tobias Reinke, Thibault Guégan
20
Abbildung 19: Einfaches Fenster
(window)
Diese und weitere Funktionen sind in der API von Titanium enthalten. [API] Theoretisch sollte
jedes Modul auf beiden Betriebssystemen gleichermaßen funktionieren. Dies wird im Folgenden
genauer untersucht.
Tobias Reinke, Thibault Guégan
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 zur Verfügung, die den Zugriff auf derartige Elemente
ermöglicht. Die wichtigsten Elemente aus Titanium.UI werden hier vorgestellt.
2.2.1.1 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 20: 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();
Tobias Reinke, Thibault Guégan
22
Der zugehörige Dialog ist in Abbildung 21 zu sehen.
Abbildung 21: Normaler Dialog
Anhand des Attributes buttonNames lassen sich auch noch zusätzliche Buttons definieren.
ButtonNames: ['Choice 1', 'Choice 2', 'Choice 3'],
Abbildung 22: 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.
2.2.1.2 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'
});
Tobias Reinke, Thibault Guégan
23
Dem Button kann ein Eventlistener hinzugefügt werden. Zum Beispiel vom Typ click. Für weitere
Informationen zu Eventlistener wird hier auf Kapitel 2.2.2 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. Die Erste legt das Bild des Buttons im
Normalzustand, die Zweite 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.
2.2.1.3 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'
});
Tobias Reinke, Thibault Guégan
24
2.2.1.4 Picker
Mit dem Picker kann man den Benutzer die Möglichkeit geben zwischen mehreren Eingabewerten
auszuwählen. Der folgende Code erzeugt einen Picker mit dem Beispieldatensatz gemäß den
Abbildungen 23 bis 25.
var picker = Titanium.UI.createPicker();
var data = [];
data[0]=Ti.UI.createPickerRow({title:'Bananas'});
data[1]=Ti.UI.createPickerRow({title:'Strawberries'});
data[2]=Ti.UI.createPickerRow({title:'Mangos'});
data[3]=Ti.UI.createPickerRow({title:'Grapes'});
picker.add(data);
Die Auswahlmöglichkeiten des Pickers müssen in einem Array hinterlegt werden. Jeder
Arrayeintrag ist ein Objekt vom Typ Titanium.UI.PickerRow. Mit der Methode add() wird das
Array dem Picker zugewiesen.
Der Picker wird auf Android und iOS unterschiedlich dargestellt. Bei Android wird dem Benutzer
ein Dropdownmenü mit einem voreingestellten Wert angezeigt. (Abbildung 23) Durch einem Klick
auf das Menü öffnet sich ein Fenster mit allen Auswahlmöglichkeiten (Abbildung 24) und erlaubt
so dem Nutzer zu wählen.
Abbildung
23:
Android Picker
Abbildung 24: Auswahlmenü des Android
Pickers
Tobias Reinke, Thibault Guégan
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.
Ist der gewünschte Wert eingestellt, soll er auch
wieder ausgelesen werden können. Im
folgenden Codeabschnitt wird der aktuelle Wert
des Pickers ausgelesen und ein ein Label
geschrieben. Verwendet wird hier ein
Eventlistener vom Typ change. Er wird immer
dann ausgeführt wenn sich der Wert des Pickers
ändert.
Abbildung 25: iOS Picker (Spinner)
picker.addEventListener('change', function(e) {
label.text = 'value: ' + data[e.rowIndex].title;
});
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 dem Maximal- und dem Minimalwert des Datepickers. Ein dritter Zeitstempel
wird erstellt, um dem Picker einen Startwert zu geben. Die Attribute top und left beschreiben den
Abstand des Objektes nach oben und nach links.
Tobias Reinke, Thibault Guégan
26
Unter Android werden, wie in Abbildung 26 zu sehen, Jahr, Monat und Tag angezeigt. Diese
können dann mit den entsprechenden Plus- und Minustasten eingestellt werden.
Abbildung 26: Android DatePicker
iOS verwendet hier ebenfalls den bereits vorgestellten Spinner. (Abbildung 27)
Abbildung 27: iOS DatePicker (Spinner)
Android bietet jedoch die Möglichkeit alle Picker in Spinner umzuwandeln. Dazu muss dem Picker
lediglich das Attribut useSpinner auf true gesetzt werden. Dadurch erhalten Android Nutzer den
Spinner aus Abbildung 28.
Abbildung
(Spinner)
28:
Android
DatePicker
2.2.1.5 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:
Tobias Reinke, Thibault Guégan
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 (vom Typ Titanium.UI.View) 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 ist entweder horizontal oder vertikal möglich. Auf dem iOS, wo scrollType nicht
gesetzt werden kann, können diese Funktionen standardmäßig auch kombiniert werden.
2.2.1.6 Slider
Die grundlegenden Funktionen des Sliders (siehe Abbildung
29) funktionieren auf Android und iOS gleichermaßen.
Die Attribute min und max legen den minimalen und
Abbildung 29: 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 29 darstellt. Mit highlightedThumbImage kann schließlich ein Bitmap gesetzt
werden, das 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
instanziiert) 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.
Tobias Reinke, Thibault Guégan
28
2.2.1.7 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 30 und 31
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 32 und 33.
Abbildung 30: Android
Switch aktiviert
Abbildung
32:
iOS
Switch
aktiviert
Abbildung 31: Android
Switch deaktiviert
Abbildung
33:
iOS
Switch
deaktiviert
Android stellt außerdem noch die klassischen Checkboxen (Abbildungen 34 und 35) 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 35: Android
Checkbox aktiviert
Abbildung 34: Android
Checkbox deaktiviert
2.2.1.8 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:
Tobias Reinke, Thibault Guégan
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, das
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);
Um die TabGroup anzuzeigen musst schließlich 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 dem heraus die
TabGroup geöffnet wurde. 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 36), auf dem iOS wird diese unterhalb angezeigt (siehe Abbildung
37).
Abbildung 36: Android TabGroup
Tobias Reinke, Thibault Guégan
Abbildung 37: iOS TabGroup
30
2.2.1.9 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.
2.2.1.10 TextArea
Mit folgendem Code lässt sich ein Textfeld erstellen, das 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.
Tobias Reinke, Thibault Guégan
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.
2.2.1.11 View
View ist ein Container, der verwendet werden kann um mehrere Elemente 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'
});
2.2.1.12 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. In dem WebView wird automatisch die Webseite
geladen, die dem url Attribut übergeben wurde.
var webView1 = Titanium.UI.createWebView({
url: 'http://www.google.de'
});
Alternativ kann dem url Attribut auch ein lokaler Pfad zu einem HTML Dokument oder einer PDF
übergeben werden.
Tobias Reinke, Thibault Guégan
32
2.2.1.13 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.
Tobias Reinke, Thibault Guégan
33
2.2.2 Touch Events
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: " +
e.source.title);
}
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. Wichtig ist der
Übergabeparameter der Funktion. Es wird ein Objekt übergeben, das Informationen über das
aufgetretenen Ereignis enthält.
Neben click gibt es noch einige andere Ereignisse auf die ein Element reagieren kann. Die
wichtigsten sind hier im Folgenden erläutert.
2.2.2.1 Click (click)
Das Click-Event wird ausgelöst, wenn das entsprechende Element angeklickt, beziehungsweise mit
dem Finger angetippt wird. Die zugehörige Funktion besitzt einen Parameter mit folgenden
Eigenschaften:
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
2.2.2.2 Double Click (dbclick)
Dieses Event funktioniert weder unter Android noch auf dem iPhone.
2.2.2.3 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.
Tobias Reinke, Thibault Guégan
34
Die Eigenschaften sind zum Click-Event identisch.
Leider funktioniert das Single Tap Event auf dem iOS nicht sehr zuverlässig.
2.2.2.4 Double Tap (doubletap)
Das Double-Tab-Event wird ausgelöst, wenn der Bildschirm zweimal kurz angetippt wird.
Die Eigenschaften sind zum Click-Event identisch.
Leider funktioniert das Double Tap Event auf dem iOS nicht sehr zuverlässig.
2.2.2.5 Twofinger Tap (twofingertap)
Dieses Event funktioniert weder unter Android noch auf dem iPhone.
2.2.2.6 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.
2.2.2.7 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.
2.2.2.8 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.
2.2.2.9 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.
* @param view The view that should be made swipeable.
* @param allowVertical Whether or not vertical swipes
* (up and down) are allowed; default is false.
* @param 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) {
Tobias Reinke, Thibault Guégan
35
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) {
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 + '!');
});
Tobias Reinke, Thibault Guégan
36
win.add(Ti.UI.createLabel({
text: 'Welcome to the Swipe for Android workaround +
vertical swipes!', textAlign: 'center',
touchEnabled: false
}));
win.open();
Es 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 wurde 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);
globalPoint
ein Objekt mit den Eigenschafen x
Bildschirmkoordinaten des Events enthalten
und
y,
welche
die
absoluten
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
Tobias Reinke, Thibault Guégan
37
2.2.3 Datenbanken (Titanium.Database)
Anwendungen auf Android und iOS Smartphones können eigenen Datenbanken verwalten. Es
handelt sich hierbei um SQLight Datenbanksysteme. [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, die einen Rückgabewert liefern, wie zum Beispiel SELECT, 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. Der Spaltenname kann mit der Methode
fieldName(index) ausgelesen werden.
Tobias Reinke, Thibault Guégan
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.
Tobias Reinke, Thibault Guégan
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.
2.2.4.1 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:
Tobias Reinke, Thibault Guégan
40
Abbildung 38: 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.
Tobias Reinke, Thibault Guégan
41
Abbildung 39: Start der Anwendung mit iOS
Wenn das Gerät nicht angeschlossen ist:
Abbildung 40: Das Gerät ist nicht angeschlossen
Tobias Reinke, Thibault Guégan
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.
2.2.4.2 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=127.0.01) 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 (E-Mail senden), 110 für POP3 (E-Mails
erhalten).
Sockets sind Endpunkte der Kommunikation zwischen Prozessen. Eine Schnittstelle durch jede
Prozessen kann senden/erhalten Informationen. Hier ist ein Diagramm:
Abbildung 41: 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,
Tobias Reinke, Thibault Guégan
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:
Tobias Reinke, Thibault Guégan
44
Abbildung 42: Verlauf der Kommunikation
Abbildung 43: 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:
Tobias Reinke, Thibault Guégan
45
Unterschiede zwischen iOS und Android
Es gibt keine Unterschiede.
2.2.4.3 Bonjour Service
Der Bonjour Service soll es ermöglichen, dass sich zwei oder mehrere Smartphones automatisch
gegenseitig entdecken. Voraussetzung 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]
2.2.5 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.
2.2.5.1 Der Benutzer lokalisieren
Abbildung 44: 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:
Tobias Reinke, Thibault Guégan
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. Schließlich 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;
Tobias Reinke, Thibault Guégan
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);
' +
};
Der Prinzip ist fast gleich als die letzte Funktion aber diese
Funktion 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.
Abbildung 45: Geolocalisation – 2
Tobias Reinke, Thibault Guégan
48
Unterschiede zwischen iOS und Android
Wenn der Programm auf einem Gerät läuft, gibt es keine Unterschiede. Aber es gibt ein Unterschied
mit den Android und iOS Simulator. Der GPS funktioniert nicht mit dem Android Simulator:
Abbildung 46: Geolocalisation - 3
2.2.5.2 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
2.2.5.2.1 Anmerkungen hinzufügen
Man möchte eine Anmerkung hinzufügen, wie dieses Beispiel:
Tobias Reinke, Thibault Guégan
49
Abbildung 47: 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: 47.3563789,
longitude: -3.241771,
latitudeDelta: 0.3,
longitudeDelta: 0.3
},
annotations:[pinThibault,pinESEO,pinHochschule],
animate:true,
height:heightMap,
regionFit:true,
userLocation:true,
});
Wir erstellen 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:47.3563789,
longitude:-3.241771,
title:"Belle Ile en Mer",
subtitle:'Bei Thibault',
pinImage : "map-pin.png",
rightButton: 'gwenn_ha_du.png',
animate:true,
myid:1
Tobias Reinke, Thibault Guégan
50
});
var pinESEO = Titanium.Map.createAnnotation({
latitude:47.462407,
longitude:-0.546248,
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:48.409092,
longitude:9.996121,
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);
2.2.5.2.2 Ö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 erstellten 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("http://www.hs-ulm.de/")
}
});
Der rightButton beschreibt den Bild der Anmerkung, deshalb brauchen wir diese e.clicksource.Um
eine Webseite zu öffnen benutzen wir Titanium.Platform.openURL.
Tobias Reinke, Thibault Guégan
51
2.2.5.2.3 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();
}
});
Tobias Reinke, Thibault Guégan
52
2.2.5.2.4 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 erstellten 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. Schließlich fügen wir diese Route hinzu, mit myMap.addRoute.
Das Ergebnis:
Abbildung 48: Eine Route
Hier können die vier verschiedene Punkte sehen.
Tobias Reinke, Thibault Guégan
53
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äßig San Francisco. Und wir können eine Route nur mit iOS hinzufügen.
2.2.6 Soziale Netze
2.2.6.1 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 = „134793934930“;
Wir sollen auch zwei Erlaubnis haben, publish_stream und read_stream, um die Facebook zu
benutzen:
Titanium.Facebook.permissions =
['publish_stream','read_stream'];
2.2.6.1.1 Login/Logout
In diesem Teil, der Benutzer kann sich mit Facebook anmelden oder nicht:
Abbildung 49: Facebook Login
Zuerst erstellen wir diese Login Button (unteren Rand des letztes Bildes):
Tobias Reinke, Thibault Guégan
54
// 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;
}
2.2.6.1.2 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 50: Bilder mit Facebook
publizieren
Diese beide API sind API von Facebook, nicht von Titanium. Der Kern des Facebook ist ein Social
Tobias Reinke, Thibault Guégan
55
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 (z.B. Menschen,
Fotos, Veranstaltungen, Seiten) und die Verbindungen zwischen ihnen (z.B. 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 heißt b1 in dem Code. Und wir erstellen 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);
Tobias Reinke, Thibault Guégan
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);
});
2.2.6.1.3 Status publizieren
Hier benutzen wir diese Graph API, und wir benötigen nämlich die
publish_stream Erlaubnis:
Abbildung 51: Status
publizieren
Tobias Reinke, Thibault Guégan
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
});
Schließlich, 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);
});
2.2.6.2 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 erstellt 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","http://api.twitter.com/1/statuses/user_timeline.
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
{
Tobias Reinke, Thibault Guégan
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 52: Appcelerator Tweat
Unterschiede zwischen iOS und Android
Es gibt keine Unterschiede.
Tobias Reinke, Thibault Guégan
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.
2.2.7.1 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;
}
Tobias Reinke, Thibault Guégan
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]
});
Tobias Reinke, Thibault Guégan
61
Abbildung mit dem iOS Simulator:
Das funktioniert natürlich nicht mit dem iOS Simulator, es gibt
standardmäßig keine Fotos in der Fotogalerie.
Abbildung 53: Photos im iOS
Simulator
2.2.7.2 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:
Zuerst erstellen wir ein Ton mit Titanium.Media.createSound, das ermöglicht der Ton von dem
Tobias Reinke, Thibault Guégan
62
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.
Code:
Tobias Reinke, Thibault Guégan
63
// 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 54: Ton wird abgespielt
Unterschiede zwischen Android und iOS
Der Progress Bar funktioniert nur mit iOS.
Tobias Reinke, Thibault Guégan
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
Auswirkungen.
keine
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.
Touch Events
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.
Tobias Reinke, Thibault Guégan
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
Um auf die noch vorhandenen Unterschiede der einzelnen API Modulen reagieren zu können ist es
oftmals nötig zur Laufzeit zu wissen auf welcher Plattform die App ausgeführt wird. Dies kann mit
dem Zugriff auf Titanium.Platform.osname ermittelt werden. Der nachfolgende Code ermöglicht es
beispielsweise zwischen Androidgeräten, dem iPhone und dem iPad zu unterscheiden und somit
unterschiedlichen Code auszuführen.
if(Ti.Platform.osname=="android"){
// Android spezifischer Code
} else if(Ti.Platform.osname=='iphone') {
// iPhone spezifischer Code
} else if(Ti.Platform.osname=='ipad') {
// iPad spezifischer Code
}
Mit dieser Technik ist es beispielsweise möglich ein Menü für Android einzufügen. Da auf iOS
Geräten der (androidspezifische) Code für das Menü nicht auftauchen darf. Dies würde zu einem
Programmabsturz führen.
2.5 Troubleshooting
Die Entwicklung mit Titanium gestaltet sich, speziell für Einsteiger, oftmals als trickreich.
Besonders weil sich Titanium noch in der Entwicklungsphase befindet und daher die
Dokumentation nur rudimentär vorhanden ist.
Plötzlich auftretende Kompilierfehler, die keiner bestimmten Ursache zu zuordenbar sind, können
leider vorkommen. Zunächst solle der Kompiliervorgang erneut gestartet werden. Oftmals ist der
Fehler dann bereits verschwunden.
Ein Kompilierfehler der Form:
'invalid method (createSwitch) passed to UIModule'
tritt ebenfalls gelegentlich auf. Dabei kann es sich auch um eine andere Funktion (Text zwischen
den Klammern) handeln. Möglich wären zum Beispiel auch createTabGroup, createOptionDialog
und Ähnliches.
Beheben lässt sich der Fehler durch den Aufruf des Befehls Project > Clean in Titanium. So wird
Tobias Reinke, Thibault Guégan
66
Titanium gezwungen temporäre Daten zu löschen und alle Dateien des Projektes neu zu
kompilieren (kompilieren dauert anschließend länger als gewohnt).
Sollten weiterhin Ungereimtheiten bei bestimmten API Modulen auftreten, ist es ein guter Weg die
aktuelle Beschreibung der API von der Titanium Webseite ([API]) zu durchsuchen. Ist hier keine
Lösung zu finden, empfiehlt es sich im Forum ([FORUM]) weiter zu suchen. Oftmals wurden
Probleme bereits besprochen und mögliche Workarrounds empfohlen.
In manchen Fällen ist schließlich einfach zu akzeptieren, dass Titanium derzeit keine Möglichkeit
bereitstellt eine Funktion zu implementieren. Bluetooth wurde beseispielsweise von Titanium bisher
komplett ignoriert. Jedoch wird an der Weiterentwicklung von Titanium gearbeitet, was daran zu
erkennen ist, dass im Verlauf dieses Projektes zwei neue Versionen des Titanium SDKs erschienen
sind.
Leider kann auch das Erscheinen einer neuen Version des SDKs zu Problemen führen. Das Spiel
SET (siehe Kapitel 3 ) wurde beispielsweise mit der SDK Version 1.7.5 entwickelt. Mit der neueren
Version 1.8.x funktioniert es jedoch nicht mehr einwandfrei.
Tobias Reinke, Thibault Guégan
67
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
hardwarenahe 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
Abbildung 55: SET
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.
Tobias Reinke, Thibault Guégan
68
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]
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 das 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. 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, die 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. Es soll gemäß den in Kapitel 3.1 erklärten Regeln
umgesetzt werden.
Zu Beginn des Spiels wird ein Menü gezeigt, das 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.
3.3.1 Singleplayermodus
Im Singleplayermodus wird sofort ein Spiel gestartet. Auf dem Display wird das Spielfeld
angezeigt, das 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
Tobias Reinke, Thibault Guégan
69
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, der dem Benutzer mitteilt, 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.
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 den Spieler beendet werden. Schließlich gibt es noch die
Möglichkeit, dass alle Karten vom Spielstapel aufgebraucht sind. Auch dann wird das Spiel
beendet.
3.3.2 Multiplayermodus
Der Multiplayermodus ermöglicht zwei Alternativen. Zunächst muss ein Spieler ein Spiel erstellen,
anschließend kann ein weitere Spieler an diesem Spiel teilnehmen. Die genauen Schritte sind im
Folgenden erklärt.
3.3.2.1 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.
3.3.2.2 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
3.3.1 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.
Tobias Reinke, Thibault Guégan
70
3.3.3 Backlog Items
Aus den Anforderungen aus Kapitel 3.3.1 und 3.3.2 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, die 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.
Tobias Reinke, Thibault Guégan
71
3.4 Spielablauf
Startet ein Benutzer das Spiel SET auf seinem Smartphone, so öffnet sich ein Fenster gemäß
Abbildung 56. 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 56: SET - Startfenster
Abbildung 57: Spielfeld
Einzelspielermodus
im
3.4.1 Singleplayermodus
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 wie es in Abbildung 57 zu
sehen ist (die gelb eingefärbte Karte demonstriert wie eine selektierte Karte aussieht). Anschließend
muss der Spieler reagieren und eine Karte mit dem Finger antippen. Dies startet einen Ablauf
gemäß Abbildung 58.
Tobias Reinke, Thibault Guégan
72
Abbildung 58: Ablauf beim Anklicken einer Karte im Singleplayermodus
Abhängig davon ob die Karte zuvor selektiert oder deselektiert war, wird sie nun deselektiert oder
selektiert. Wurde die Karte selektiert folgt eine Überprüfung, ob derzeit drei Karten selektiert sind.
Ist dies der Fall, so werden diese drei Karten überprüft ob sie nach den Spielregeln aus 3.1 ein SET
ergeben. Wurde kein SET entdeckt, so wird die Selektion aufgehoben und die Aktivität beendet.
Ergänzen die drei selektierten Karten sich jedoch zu einem SET, so wird der Punktestand
inkrementiert, die Karten werden durch neue vom Stapel ersetzt und die Selektion wird entfernt.
Anschließend ist der Ablauf beendet bis wieder eine Karte selektiert wird.
Neben diesem Spielablauf hat der Benutzer noch drei weitere Möglichkeiten mit dem Spiel zu
interagieren. Er kann überprüfen, ob im aktuellen Spiel noch ein SET möglich ist. Zusätzlich kann
er sich dieses SET im Spielfeld anzeigen lassen. Und verständlicher Weise kann der Spieler das
Spiel auch vorzeitig beenden. Diese Funktionen können je nach Zielsystem auf unterschiedliche Art
vom Benutzer aufgerufen werden.
Androidgeräte stellen zwei Tasten gemäß Abbildung 59 bereit.
Links in der Grafik befindet sich die Zurück-Taste, die es
ermöglicht das Spiel, nach einer Rückfrage, zu beenden.
Die Rechte Schaltfläche in Abbildungen 59 ist
die Menütaste. Sie öffnet nach Betätigung ein
Menü, wie in Abbildung 60 zu sehen. Dieses
Menü bietet die bereits angesprochenen
Möglichkeiten nach einem SET zu suchen und
dieses dann anzeigen zu lassen.
Weil es diese Schaltflächen (Zurück und Menü)
bei iPhones nicht gibt, muss sich hier anders
beholfen werden. Wie in Abbildung zu sehen
wird hier die für das iOS übliche Toolbar
verwendet.
Tobias Reinke, Thibault Guégan
Abbildung 59: Android Tasten
Abbildung 60: Menü auf einem Androidgerät
Abbildung 61: iOS Toolbar im Singleplayermodus
73
3.4.2 Multiplayermodus
Im Multiplayermodus gibt es einen Host (er erstellt das Spiel) und einen Client (er nimmt an dem
Spiel teil). Dies entspricht den unteren beiden Schaltflächen in Abbildung 56.
Der Ablauf beim Erstellen eines Multiplayerspiels setzt vorraus, dass es einen Host und einen Client
gibt. Diese verhalten sich so wie es in Abbildung 63 gezeigt ist.
Abbildung 62: Spielaufbau im Multiplayermodus
Ausgangssituation ist, dass der Host ein Spiel erstellt und der Client an diesem Spiel teilnehmen
möchte. Hat der Host das Spiel erstellt, wartet er auf eine Clientanfrage. Ein Client kann unter
Zuhilfenahme der IP des Hosts eine Verbindung herstellen. Daraufhin wartet der Client auf den
Spielbeginn.
Ist die Verbindungsanfrage beim Host eingeganen, kann dieser das Spiel starten. Infolgedessen
können beide, Host und Client, das Spielfeld zeichnen und so das Spiel beginnen.
Die Aktionen, welche beim auswählen einer Karte ablaufen sind umfangreicher als im
Singleplayermodus, da hier unterschieden werden muss ob der Host oder der Client agiert.
Abbildung 65 verdeutlicht den Ablauf beim Selektieren einer Karte.
Zu Beginn wird, wie im Singleplayermodus der Zustand der angewählten Karte überprüft und die
Selektion invertiert. Wurde die Karte selektiert, folgt eine Überprüfung ob insgesammt drei Karten
selektiert sind. Ist dies korrekt, wird überprüft ob diese drei Karten ein SET ergeben. Ergänzen sie
sich nicht zu einem SET wird die Selektion aufgehoben und der Ablauf ist zu Ende.
Wurde jedoch ein SET gefunden erfolgt ein anderer Ablauf als im Singleplayermodus. Hat der
Host-Spieler das SET entdeckt, so benachrichtigt er den Client, aktualisiert seine Punkteanzeige
(ein SET gibt einen Punkt) und ersetzt die Karten durch drei Neue vom Kartenstapel. Abschließend
wird noch die Selektion entfernt, dann ist der Ablauf beendet.
Sollte jedoch der Client ein SET finden, so schickt er eine Nachricht mit den selektierten Karten an
Tobias Reinke, Thibault Guégan
74
den Host. Der überprüft die empfangene Nachricht und benachrichtigt den Client, aktualisiert die
Punkteanzeige und ersetzt die Karten.
Die Anfrage vom Client muss überprüft werden, um die Situation zu vermeiden in der genau dann
eine Anfrage vom Client eintrifft, wenn der Host die selben Karten bereits gefunden hat. Folglich
hat in diesem Speziellen Fall der Host einen Vorteil, da sein SET gezählt wird, das vom Client
jedoch nicht.
Abbildung 63: Ablauf beim Anklicken einer Karte im Multiplayermodus
In Abbildung 65 wird schließlich der Ablauf beim Client beschrieben wenn er von dem Host
benachrichtigt wird, dass ein SET gefunden wurde. Empfängt der Client eine Nachricht, so
überprüft er zunächst ob das übertragenen SET von ihm selbst oder von dem Host gefunden wurde.
Entsprechend erhöht er den Punktestand von Client oder Host. Anschließend wird das gefundene
SET durch die Karten ersetzt welche vom Host in der Nachricht mit gesendet wurden.
Abbildung 64: Ablauf von SET ersetzen beim Client
Tobias Reinke, Thibault Guégan
75
Im Multiplayermodus kann das Spiel auf vier verschiedene Arten beendet werden. Abbildung 65
stellt diese dar.
Beendet der Host das Spiel, so benachrichtigt er den Client und zeigt das Spielergebnis an.
Anschließend wird das Spiel auf der Seite des Hosts beendet. Analog verhält es sich wenn der
Client das Spiel beendet. Auch er benachrichtigt den Host und zeigt das Ergebnis an bevor er das
Spiel beendet.
Abbildung 65: Ablauf beim Beenden des Spieles im Multiplayermodus
Die Reaktion des Spielpartners nachdem das Spiel beendet wurde ist in Abbildung 66 gezeigt. Er
wartet zunächst auf den Befehl zum Beenden, wird dieser empfangen, so wird das Ergebnis des
Spiels ausgegeben und anschließend das Spiel beendet.
Abbildung 66: Ablauf von Client und Host wenn sie zum Beenden aufgefordert werden
Eine weitere Möglichkeit das Spiel zu beenden besteht darin, dass kein weiteres SET mehr möglich
ist. Keine drei Karten der zwölf aufgedeckten passen folglich mehr zusammen. In diesem Fall
schickt das Gerät, welches diesen Zustand als erstes erkennt eine Nachricht gemäß den Abbildungen
65 und 66 an den Spielpartner und beendet somit das Spiel.
Der letzte Fall der das Spiel beendet, tritt ein wenn der Kartenstapel (81 Karten) aufgebraucht ist.
Dies kann nur der Host erkennen, da er die Kontrolle über das Spiel besitzt. Wieder benachrichtigt
er den Client und zeigt den Entstand an bevor er das Spiel beendet.
Tobias Reinke, Thibault Guégan
76
4 Zusammenfassung
Grundlage dieser Arbeit ist die zunehmende Verbreitung von Smartphones. Sie auf die
Funktionenvielfalt der Geräte zurück zuführen ist. Um ein Smartphone mit zusätzlichen Funktionen
zu erweitern werden Anwendungen (Apps) auf dem Gerät installiert. Das Entwickeln dieser
Anwendungen setzt eine Entscheidung für ein bestimmtes Zielsystem vorraus. Um diese Selektion
zu vermeiden wird die Plattformunabhänige App-Entwicklung angestrebt. Titanium bietet eine
Lösung an, welche es ermöglicht Anwendungen zu entwicklen, die auf den beiden häufigsten
Plattformen, Android und iOS, lauffähig sind.
Das grundlegende Prinzip von Titanium, eine Anwendung in JavaScript in die jeweilige native
Sprache zu übersetzen, wurde erklärt. Zusätzlich wurde für andere Entwickler die sich mit Titanium
beschäftigen eine Installationsanleitung erstellt. Sie soll ihnen den Einstieg erleichtern. Auch eine
Einführung in die Entwicklung mit Titanium wurde erstellt.
Schließlich wurde die von Titanium bereitgestellte API untersucht und die einzelnen Module
getestet. Fast alle der untersuchten Module weisen allerdings je nach Zielplattform Unterschiede in
Darstellung und Funktion auf. Diese Unterschiede wurden ausführlich dokumentiert.
Abschließend wurde eine Anwendung mit Titanium entwickelt. Umgesetzt wurde das Kartenspiel
SET. Um die WLAN-Funktionalität von Titanium zu demonstrieren besitzt dieses Spiel einen
Multiplayermodus. Dieser ermöglicht es, dass zwei Geräte, welche sich im selben WLAN Netz
befinden, gegeneinander spielen können.
Diese Anwendung wurde einmal entwickelt und ist mit den beiden wichtigsten Plattformen
(Android und iOS) kompatibel. Sie demonstriert auf diese Weise die Kompetenz von Titanium.
Tobias Reinke, Thibault Guégan
77
Quellenangaben
BITKOM :
http://www.bitkom.org/de/presse/66442_65897.aspx
SMART :
http://de.wikipedia.org/wiki/Smartphone
AVD :
http://developer.android.com/guide/developing/devices/index.html
XCODE :
https://developer.apple.com/library/ios/#referencelibrary/GettingStarted/URL_Tools_for_iPhone_O
S_Development/_index.html#//apple_ref/doc/uid/TP40007593
SENCHA :
http://www.sencha.com/products/touch/
CT201016 :
Oliver Lau, Autonomie, c't, 2010,Heft 16
INST :
http://wiki.appcelerator.org/display/guides/Installing+on+Windows+7
SVN :
http://subversion.apache.org/
ICON :
http://developer.appcelerator.com/question/31981/icons-of-tabbars-andbackground-image-not-showing-on-android-simulator
RGB :
http://developer.appcelerator.com/question/40631/list-of-colourscolors
API :
http://developer.appcelerator.com/apidoc/mobile/latest
SWIPE :
https://gist.github.com/841075
SQLIGHT :
http://developer.appcelerator.com/apidoc/mobile/latest/Titanium.Databasemodule
SQL :
http://de.wikibooks.org/wiki/Einf%C3%BChrung_in_SQL
SOCKET :
https://github.com/appcelerator/KitchenSink/blob/master/Resources/examples/sockets.js
CLIENTSERVER :
https://github.com/appcelerator/KitchenSink/blob/master/Resources/examples/socket_server_client.
js
LISTENER :
https://github.com/appcelerator/KitchenSink/blob/master/Resources/examples/socket_listener.js
CONNECT :
https://github.com/appcelerator/KitchenSink/blob/master/Resources/examples/socket_connect.js
FORUM :
http://developer.appcelerator.com/questions/newest
SET :
http://de.wikipedia.org/wiki/Set!
AGIL :
http://www.it-agile.de/wasistagilesoftwareentwicklung.html
SCRUM :
http://www.it-agile.de/scrum.html
SCRUMVN :
http://www.it-agile.de/agilevorteile.html
Tobias Reinke, Thibault Guégan
78
Abbildungsverzeichnis
Abbildung 1: Absatz und Umsatz Prognose für Smartphones in Deutschland [BITKOM].................5
Abbildung 2: Marktanteil 2009 [SMART]...........................................................................................6
Abbildung 3: Marktanteil 2010 [SMART]...........................................................................................6
Abbildung 4: Marktanteil 2011 [SMART]...........................................................................................6
Abbildung 5: Funktionsprinzip Titanium.............................................................................................8
Abbildung 6: Git Installation - 1........................................................................................................10
Abbildung 7: Git Installation - 3........................................................................................................10
Abbildung 8: Git Installation - 2........................................................................................................10
Abbildung 9: Android SDK Installation - 1........................................................................................11
Abbildung 10: Android SDK Installation - 2......................................................................................11
Abbildung 11: Titanium - Login.........................................................................................................13
Abbildung 12: Titanium Studio..........................................................................................................14
Abbildung 13: Erstellung eines neuen Projektes – Schritt 1..............................................................14
Abbildung 14: Erstellung eines neuen Projektes – Schritt 2.............................................................15
Abbildung 15: Die tiapp.xml Datei....................................................................................................16
Abbildung 16: Aufbau eines Titanium Projektes................................................................................17
Abbildung 17: Hello World Anwendung von Titanium.....................................................................18
Abbildung 18: Funktionsweise der API.............................................................................................20
Abbildung 19: Einfaches Fenster (window).......................................................................................21
Abbildung 20: Einfacher Dialog........................................................................................................22
Abbildung 21: Normaler Dialog.........................................................................................................23
Abbildung 22: Erweiterter Dialog......................................................................................................23
Abbildung 23: Android Picker............................................................................................................25
Abbildung 24: Auswahlmenü des Android Pickers............................................................................25
Abbildung 25: iOS Picker (Spinner)..................................................................................................26
Abbildung 26: Android DatePicker....................................................................................................27
Abbildung 27: iOS DatePicker (Spinner)...........................................................................................27
Abbildung 28: Android DatePicker (Spinner)....................................................................................27
Abbildung 29: Slider..........................................................................................................................28
Abbildung 30: Android Switch aktiviert............................................................................................29
Abbildung 31: Android Switch deaktiviert.........................................................................................29
Abbildung 32: iOS Switch aktiviert...................................................................................................29
Abbildung 33: iOS Switch deaktiviert...............................................................................................29
Abbildung 34: Android Checkbox deaktiviert...................................................................................29
Abbildung 35: Android Checkbox aktiviert.......................................................................................29
Abbildung 36: iOS TabGroup.............................................................................................................30
Abbildung 37: Android TabGroup......................................................................................................30
Abbildung 38: Start der Anwendung..................................................................................................41
Abbildung 39: Start der Anwendung mit iOS....................................................................................42
Abbildung 40: Das Gerät ist nicht angeschlossen..............................................................................42
Abbildung 41: Sockets im Netzwerk..................................................................................................43
Abbildung 42: Verlauf der Kommunikation.......................................................................................45
Abbildung 43: Die Funktion in Gesamtheit: Socket + Buffer + Fluss...............................................45
Abbildung 44: Geolocalisation - 1.....................................................................................................46
Abbildung 45: Geolocalisation – 2.....................................................................................................48
Abbildung 46: Geolocalisation - 3.....................................................................................................49
Abbildung 47: Anmerkung hinzufügen..............................................................................................50
Abbildung 48: Eine Route..................................................................................................................53
Tobias Reinke, Thibault Guégan
79
Abbildung 49: Facebook Login..........................................................................................................54
Abbildung 50: Bilder mit Facebook publizieren................................................................................55
Abbildung 51: Status publizieren.......................................................................................................57
Abbildung 52: Appcelerator Tweat.....................................................................................................59
Abbildung 53: Photos im iOS Simulator............................................................................................62
Abbildung 54: Ton wird abgespielt....................................................................................................64
Abbildung 55: SET.............................................................................................................................68
Abbildung 56: SET - Startfenster.......................................................................................................72
Abbildung 57: Spielfeld im Einzelspielermodus................................................................................72
Abbildung 58: Ablauf beim Anklicken einer Karte im Singleplayermodus.......................................73
Abbildung 59: Android Tasten...........................................................................................................73
Abbildung 60: Menü auf einem Androidgerät....................................................................................73
Abbildung 61: iOS Toolbar im Singleplayermodus...........................................................................73
Abbildung 62: Spielaufbau im Multiplayermodus.............................................................................74
Abbildung 63: Ablauf beim Anklicken einer Karte im Multiplayermodus........................................75
Abbildung 64: Ablauf von SET ersetzen beim Client........................................................................75
Abbildung 65: Ablauf beim Beenden des Spieles im Multiplayermodus.........................................76
Abbildung 66: Ablauf von Client und Host wenn sie zum Beenden aufgefordert werden................76
Tobias Reinke, Thibault Guégan
80
Tabellenverzeichnis
Tabelle 1: Mögliche Anwendungen für Smartphones..........................................................................4
Tabelle 2: Wichtige Pfade für die Installation......................................................................................9
Tabelle 3: Erweiterung der Pfad Umgebungsvariablen........................................................................9
Tabelle 4: Java Home Umgebungsvariable..........................................................................................9
Tabelle 5: Android SDK Umgebungsvariable......................................................................................9
Tabelle 6: Eigenschaften eines Click-Events......................................................................................34
Tabelle 7: Angepasste Eigenschaften eines swipe-Events..................................................................37
Tabelle 8: Backlog Items....................................................................................................................71
Tobias Reinke, Thibault Guégan
81
Was this manual useful for you? yes no
Thank you for your participation!

* Your assessment is very important for improving the work of artificial intelligence, which forms the content of this project

Download PDF

advertisement