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)...........................................................................................................21
2.2.1.1 AlertDialog...............................................................................................................21
2.2.1.2 Button.......................................................................................................................22
2.2.1.3 Label.........................................................................................................................23
2.2.1.4 Picker........................................................................................................................24
2.2.1.5 ScrollView................................................................................................................26
2.2.1.6 Slider........................................................................................................................27
2.2.1.7 Switch.......................................................................................................................28
2.2.1.8 TabGroup..................................................................................................................28
2.2.1.9 TableView.................................................................................................................30
2.2.1.10 TextArea.................................................................................................................30
2.2.1.11 View........................................................................................................................31
2.2.1.12 WebView................................................................................................................31
2.2.1.13 Window..................................................................................................................32
2.2.2 TouchEvents.....................................................................................................................32
2.2.2.1 Click (click)..............................................................................................................33
2.2.2.2 Double Click (dbclick).............................................................................................33
2.2.2.3 Single Tap (singletap)...............................................................................................33
2.2.2.4 Double Tap (doubletap)............................................................................................33
2.2.2.5 Twofinger Tap (twofingertap)..................................................................................33
2.2.2.6 Touch Start (touchstart)............................................................................................33
2.2.2.7 Touch Move (touchmove)........................................................................................33
2.2.2.8 Touch End (touchend)..............................................................................................34
2.2.2.9 Swipe (swipe)...........................................................................................................34
2.2.3 Datenbanken (Titanium.Database)...................................................................................37
2.2.4 WLAN (Titanium.Network).............................................................................................39
2.2.4.1 Netzwerkstatus überprüfen.......................................................................................39
2.2.4.2 Sockets......................................................................................................................42
2.2.4.3 Bonjour Service........................................................................................................45
2.2.5 GPS (Titanium.Geolocation)............................................................................................45
2.2.6 Soziale Netze....................................................................................................................53
2.2.7 Medien (Titanium.Media)................................................................................................59
Tobias Reinke, Thibault Guégan
2
2.3 Unterschiede zwischen iOS und Android im Überblick..........................................................64
2.4 Adaptionen zwischen iOS und Android...................................................................................65
3 Teil III: Entwickeln einer App mit Titanium...................................................................................66
3.1 Einführung - SET.....................................................................................................................66
3.2 Projektmanagement.................................................................................................................66
3.3 Product Backlog.......................................................................................................................67
3.3.1 Singleplayermodus...........................................................................................................67
3.3.2 Multiplayermodus............................................................................................................68
3.3.2.1 Spiel erstellen...........................................................................................................68
3.3.2.2 An einem Spiel teilnehmen.......................................................................................68
3.3.3 Backlog Items..................................................................................................................69
3.4 Umsetzung...............................................................................................................................69
3.5 Das Spiel..................................................................................................................................69
4 Zusammenfassung...........................................................................................................................69
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 mit unter die Möglichkeit
Anwendungen (Apps) für Smartphones zu entwickeln und zu vertrieben.
Anschließend wird auf eine Problematik hingewiesen mit der die Entwickler häufig konfrontiert
werden. Sie müssen sich entscheiden für welches Betriebssysteme sie entwickeln wollen und sind
somit gezwungen einen Teil der Zielgruppe von vornherein auszuschließen. Titanium Studio zeigt
eine Alternative dazu auf. Mit diesem Framework ist es möglich plattformunabhängig zu
entwickeln. Im Anschluss folgt eine Installationsanleitung, welche bei der Einrichtung von Titanium
Studio auf einem Windows 7 System helfen soll.
Der zweite Teil des Berichts gibt Informationen über das Entwickeln mit JavaScript und vertieft
sich anschließend in das Programmieren mit Titanium. Dabei werden die wichtigsten Module der
von Titanium bereitgestellten API erläutert. Weiterhin werden hier auch alle erarbeiteten
Unterschiede, sowie mögliche Adaptionen, zwischen den Plattformen Android und iOS aufgelistet.
Im abschließenden Teil dieser Arbeit wird mit Titanium eine App entwickelt. Realisiert wird ein
Spiel, welches den Namen SET trägt. Dieses Spiel funktioniert auf Android sowie dem iOS
gleichermaßen wobei jedoch nur ein Entwicklungsprozess durchschritten wurde, nicht wie bisher
üblich eine Entwicklung pro Zielplattform. Weiterhin verfügt das Spiel über einen
Mehrspielermodus, der die WLAN Tauglichkeit von Titanium demonstriert.
1.1 Einleitung
Ein Smartphone ist ein Mobiltelefon welches, verglichen mit herkömmlichen Geräten, mehr
Funktionalität besitzt. In der heutigen Zeit besitzen immer mehr Menschen ein derartiges Gerät.
Inzwischen werden Smartphones nicht mehr nur zum Telefonieren oder SMS schreiben verwendet,
sie dienen schon längst als MP3 Player oder als mobiler Datenspeicher für Bilder, Videos und
anderen elektronischen Daten.Außerdem kann man mit ihnen im Internet surfen, seine Termine
verwalten und 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 hat der Absatz von Smartphones in Deutschland im letzten Jahr
stark zugenommen. Und die Prognose für 2011 liefert ein erneutes Wachstum um 39 Prozent.
[BITKOM]
Abbildung 1: Absatz und Umsatz Prognose für Smartphones in
Deutschland [BITKOM]
Auf Smartphones lassen sich meist so genannte Apps installieren, welche den Funktionsumfang des
Gerätes enorm erweitern können. Apps sind Programme die auf dem Gerät laufen und bestimmte
Aufgaben erfüllen. Dabei können sie auf Funktionen des Mobiltelefons zugreifen und so zum
Beispiel Kontaktdaten manipulieren, oder Sensorwerte auslesen und interpretieren.
Infolgedessen hat sich ein, inzwischen großer, Markt für Apps entwickelt. Nachteilig ist, dass die
Endgeräte der unterschiedlichen Anbieter auch mit unterschiedlichen Betriebssystemen ausgestattet
sind. Aus diesem Grund kann eine App nur auf dem Gerät installiert werden, dass ein zum App
passendes Betriebssystemen enthält.
1.2 App-Entwicklung
Nach [SMART] sind die derzeit wichtigsten Hersteller für Smartphone Betriebssystemen Symbian,
Android, RIM, Apple iOS und Windows Mobile. Auf den Abbildungen 2 bis 4 ist der Marktanteil
dieser Hersteller für die Jahre 2009 bis 2011 zu sehen.
Es ist zu erkennen, dass fast alle Hersteller Marktanteile verloren haben. Einzig Google Android
und Apple iOS konnten ihre Anteile steigern.
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 Entwickler-freundlicher 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 wie Sensoren und native Dienste wie Kontaktdaten und Ähnliches ist hier nur
beschränkt möglich. [SENCHA]
Zu guter Letzt benötigen Anwendungen welche mit Sencha Touch entwickelt wurden eine
Internetverbindung, da es sich hier ja eigentlich um eine Webseite handelt.
Titanium Studio hingegen, bietet eine umfangreiche API für die Verwendung von nativen Diensten
an. Auch der Zugriff auf Sensoren ist hier über die API möglich.
Weiterhin ist bei Titanium kein zusätzliches Tool notwendig um eine vertriebsreife Anwendung zu
erstellen.
Aufgrund dessen wurde in dieser Arbeit nicht Sencha Touch, sondern Titanium genauer untersucht
und evaluiert.
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) runter 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 runter geladen und installiert
werden. Bei der Installation sollten die Einstellungen gemäß folgenden Screenshots (Abbildung 6
bis 7) übernommen werden.
Abbildung 6: Git Installation - 1
Abbildung 7:
8: Git Installation - 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 das sich ein Benutzer zunächst registriert. Die Registrierung ist kostenlos,
erfordert allerdings eine Internetverbindung. Aus diesem Grund ist auch eine Verwendung von
Titanium ohne Internetverbindung nicht möglich. Dies ist nicht zu verwechseln mit der
entwickelten Anwendung, welche später auch ohne Internetverbindung auf dem Smartphone
lauffähig ist.
Nach dem Login öffnet sich das User Interface wie in Abbildung 12 zu sehen. Die
Benutzeroberfläche ist in drei wichtige Bereiche aufgeteilt.
Der Projekt Explorer auf der linken Seite beinhaltet alle vorhandenen Projekte. Über die
Baumstruktur kann so jedes Projektverzeichnis durchsucht werden. In dem großen Fenster rechts
oben werden die JavaScript Dateien dargestellt welche den Source-Code der Anwendungen
enthalten. Rechts unten befindet sich das Consolenfenster wo während dem Kompilieren DebugInformationen und Fehlermeldungen zu finden sind.
Oben im Projekt Explorer befindet sich eine Toolbar, welche es (abhängig vom Betriebssystem)
ermöglicht das Programm im Anrdoid bzw. iOS Debugger auszuführen oder auf ein gewünschtes
Zielgerät zu laden.
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 welchem man den
Projektname, die App Id, die zu Version des Titanium SDK und die möglichen Zielplattformen
auswählen kann.
Abbildung 13: Erstellung eines neuen Projektes – Schritt 1
Mit dem Button Finish wird das Projekt schließlich erstellt. Darauf öffnet sich eine XML Datei
welche wichtige Informationen über das Projekt enthält. Der Name dieser Datei ist immer
tiapp.xml. Um die XML Datei leichter lesen zu können gibt es hier, wie in Abbildung 15 zu sehen,
eine Eingabemaske, welche bereits mit den zuvor eingegebenen Werten (bei der Projekterstellung)
belegt ist.
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 aufmerksamen Leser fragt sich hier, warum Mobile Web ausgegraut, also nicht anwählbar ist.
Mobile Web wird erst in einer höheren Version von dem Titanium SDK unterstützt. Weil diese neue
Version vom Titanium SDK (1.8.x) erst im Laufe dieser Arbeit erschienen ist und weil das neue
SDK nicht hundert prozentig abwärtskompatibel ist, wird in dieser Arbeit nur die Version 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 befinden sich Grafiken die speziell für
eine Plattform hinterlegt werden können. So ist es dem Nutzer möglich je nach Endgerät eine
andere Grafik zu laden und somit das jeweilige Erscheinungsbild anzupassen.
Verständlicherweise soll es auch gemeinsame Grafiken geben, da ja eine Anwendung angestrebt ist
welche sich auf beiden Plattformen gleich verhält. Dafür können Grafiken auch ausserhalb der
bereits vordefinierten Verzeichnisse abgelegt werden. Auch das Erstellen neuer Ordner und
Unterordner stellt kein Problem dar. Lediglich bei der Referenzierung muss darauf Rücksicht
genommen werden. Hier sind relative Pfade, beginnend beim Ort der ausführenden Datei, zu
verwenden.
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 detailierter 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, welche sich durch ein Textlabel unterscheiden. Genau genommen müssten in
Abbildung 17 auf den Schaltflächen Tab1 und Tab2 jeweils eine Grafik zu sehen sein. Im Android
Simulator (in dem Abbildung 17 erstellt wurde) werden die Grafiken jedoch nicht angezeigt. Dieser
Fehler ist bereits bekannt, eine Lösung dafür gibt es derzeit aber noch nicht. [ICON] Auf dem
Endgerät werden die Icons jedoch ordnungsgemäß angezeigt.
Der folgende Code ist in der Datei app.js enthalten.
// this sets the background color of the master
// UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');
// create tab group
var tabGroup = Titanium.UI.createTabGroup();
// create base UI tab and root window
var win1 = Titanium.UI.createWindow({
title:'Tab 1',
backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({
icon:'KS_nav_views.png',
Tobias Reinke, Thibault Guégan
18
title:'Tab 1',
window:win1
});
var label1 = Titanium.UI.createLabel({
color:'#999',
text:'I am Window 1',
font:{fontSize:20,fontFamily:'Helvetica Neue'},
textAlign:'center',
width:'auto'
});
win1.add(label1);
// create controls tab and root window
var win2 = Titanium.UI.createWindow({
title:'Tab 2',
backgroundColor:'#fff'
});
var tab2 = Titanium.UI.createTab({
icon:'KS_nav_ui.png',
title:'Tab 2',
window:win2
});
var label2 = Titanium.UI.createLabel({
color:'#999',
text:'I am Window 2',
font:{fontSize:20,fontFamily:'Helvetica Neue'},
textAlign:'center',
width:'auto'
});
win2.add(label2);
// add tabs
tabGroup.addTab(tab1);
tabGroup.addTab(tab2);
// open tab group
tabGroup.open();
In der ersten Codezeile wird mit Titanium.UI.setBackgroundColor('#000'); die Hintergrundfarbe
des aktuellen Fensters auf Schwarz gesetzt. Statt dem hier verwendeten RGB Code können auch
Schlüsselworte wie red, green, black und ähnliche verwendet werden, empfohlen werden jedoch
Farbwerte nach dem Schema #RGB oder #RRGGBB. [RGB]
Mit Titanium.UI.createTabGroup(); wird anschließend eine neue TabGroup erstellt. Für diese
TabGroup werden anschließend mehrere Objekte erstellt. Zwei unterschiedliche Fenster (Window)
welche zur leichteren Unterscheidung zwei verschiedene Label enthalten und zwei Tabs. Die Tabs
beinhalten den Titel der in der TabGroup dargestellt wird sowie das Icon, welches im Simulator
leider nicht angezeigt wird.
Diese Objekte werden mit der Methode add(...) der TabGroup hinzufügt. Abschließend wird die
TabGroup noch mit open() sichtbar gemacht.
Tobias Reinke, Thibault Guégan
19
2.2 Die Programmierschnittstelle (API)
Titanium stellt zur zur App Entwicklung einer API bereit. Diese API ermöglicht es Programmierern
auf bestimmte Funktionen von Titanium zuzugreifen. So kann beispielsweise über einen
standardisierten Aufruf ein typisches Element einer Anwendung erstellt und gestaltet werden. Im
Folgenden wird dies Anhand eines einfachen Fensters erklärt.
Die meisten Apps benötigen ein Fenster in dem sie ihre Oberfläche (Formularelemente und
ähnliches) darstellen können. Dieses Fenster kann mit dem nachfolgendem Code erstellt werden
(dieser Aufruf ist bereits aus dem Hello-World Beispiel aus Kapitel 2.1 bekannt).
var w = Titanium.UI.createWindow({
backgroundColor:'#336699'
});
w.open();
Wird dieses Fenster anschließend mit der Methode open() geöffnet so erhält man ein Fenster gemäß
Abbildung 18.
Abbildung 18: Einfaches Fenster
(window)
Diese und weitere Funktionen sind in der API von Titanium enthalten. [API] Theoretisch solle jedes
Modul auf beiden Betriebssystemen gleichermaßen funktionieren. Dies wird im Folgenden genauer
untersucht.
Tobias Reinke, Thibault Guégan
20
2.2.1 GUI (Titanium.UI)
Das grafische Benutzerinterface (engl: graphical userinterface) wird oft als GUI abgekürzt. Gemeint
sind damit grafische Elemente wie Buttons, Radioboxen, Schieberegler, Textfelder und ähnliches.
Titanium stellt eine Klasse Titanium.UI zu Verfügung welche den Zugriff auf derartige Elemente
ermöglicht.
Die wichtigsten Elemente aus Titanium.UI werden hier vorgestellt.
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 19: Einfacher Dialog
Statt obiger Kurzschreibweise kann auch ein Objekt vom Typ AlertDialog in einer Variablen
gespeichert werden. Dies hat den Vorteil, dass dem Dialog so auch ein Eventlistener hinzugefügt
werden kann. So kann je nach Benutzereingabe unterschiedlich reagiert werden. Der Code sieht
dann folgendermaßen aus:
var dialog = Titanium.UI.createAlertDialog({
title: 'Hello',
message: 'This is a normal alert.',
buttonNames: ['OK', 'Cancel']
});
dialog.addEventListener('click', function(e) {
if(e.index==0) {
// OK
} else if(e.index==1) {
// Cancel
}
});
dialog.show();
Tobias Reinke, Thibault Guégan
21
Der zugehörige Dialog ist in Abbildung 20 zu sehen.
Abbildung 20: Normaler Dialog
Anhand des Attributes buttonNames lassen sich auch noch zusätzliche Buttons definieren.
ButtonNames: ['Choice 1', 'Choice 2', 'Choice 3'],
Abbildung 21: Erweiterter Dialog
Auf Android kann so ein Dialog jedoch nicht mehr als drei Buttons enthalten. Zusätzlich
angegebene Elemente werden einfach nicht angezeigt.
Auf dem iOS werden die Buttons nicht wie in den Screenshots nebeneinander, sondern
untereinander angeordnet. Aus diesem Grund können hier mehr Buttons eingefügt werden.
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
22
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'. Erstere legt das Bild des Buttons im
Normalzustand und zweitere das Bild im Moment des Klickens fest.
Zu beachten ist wiederum, dass die Eigenschaft 'backgroundSelectedImage' auf Android keine
Auswirkungen hat.
Wichtig ist die Zuweisung von Höhe und Breite der Schaltfläche, weil iOS sonst die Fläche des
Elements auf Null setzt und somit nicht darstellt.
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
23
2.2.1.4 Picker
Mit dem Picker kann man den Benutzer zwischen mehren Eingabewerten auswählen zu lassen. Der
folgenden Code erzeugt einen Picker mit dem Beispieldatensatz gemäß den Abbildungen 22 bis 24.
var picker = Titanium.UI.createPicker({
top: 0,
left: 0
});
var data = [];
data[0]=Ti.UI.createPickerRow({title:'Bananas',custom_it
em:'b'});
data[1]=Ti.UI.createPickerRow({title:'Strawberries',cust
om_item:'s'});
data[2]=Ti.UI.createPickerRow({title:'Mangos',custom_ite
m:'m'});
data[3]=Ti.UI.createPickerRow({title:'Grapes',custom_ite
m:'g'});
picker.add(data);
Der Picker wird auf Android und iOS unterschiedlich dargestellt. Bei Android wird dem Benutzer
ein Dropdownmenü mit einem voreingestellten Wert angezeigt. (Abbildung 22) Durch einem Klick
auf das Menü öffnet sich ein Fenster mit allen Auswahlmöglichkeiten (Abbildung 23) und erlaubt
so dem Nutzer zu wählen.
Abbildung 22:
Android Picker
Abbildung 23: Auswahlmenü des Android
Pickers
Tobias Reinke, Thibault Guégan
24
Das iOS stellt den Picker als Spinner dar. Der Benutzer hat hier die Möglichkeit an einem Rad zu
drehen und so den gewünschten Wert einzustellen.
Abbildung 24: iOS Picker (Spinner)
DatePicker
Eine Spezialform des Pickers ist der DatePicker. Er wurde speziell darauf angepasst ein Datum zu
bestimmen. Der nötige JavaScript Code ist im Folgenden aufgelistet.
var minDate = new Date();
minDate.setFullYear(2000);
minDate.setMonth(0);
minDate.setDate(1);
var maxDate = new Date();
maxDate.setFullYear(2020);
maxDate.setMonth(11);
maxDate.setDate(31);
var value = new Date();
var picker_date = Titanium.UI.createPicker({
type: Titanium.UI.PICKER_TYPE_DATE,
minDate:minDate,
maxDate:maxDate,
top: 0,
left: 0,
value:value
});
Es werden zuerst zwei Objekte vom Typ Date erzeugt und auf verschiedene Zeitpunkte gesetzt.
Diese entsprechen den Maximal- und dem Minimalwert des Datepickers. Ein dritter Zeitstempel
wird erstellt um dem Picker einen Startwert zu geben.
Unter Android werden, wie in Abbildung 25 zu sehen, Jahr, Monat und Tag angezeigt. Diese
können dann mit den entsprechenden Plus- und Minustasten eingestellt werden.
Tobias Reinke, Thibault Guégan
25
Abbildung 25: Android DatePicker
iOS verwendet hier ebenfalls den bereits vorgestellten Spinner. (Abbildung 26)
Abbildung 26: iOS DatePicker (Spinner)
Android bietet jedoch die Möglichkeit alle Picker in Spinner um zu wandeln. Dazu muss dem
Picker lediglich das Attribut useSpinner auf true gesetzt werden. Dann erhalten Android Nutzer den
Spinner aus Abbildung 27.
Abbildung 27: Android DatePicker
(Spinner)
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
26
var scrollView = Titanium.UI.createScrollView({
width: 100,
height: 300,
contentWidth: 'auto',
contentHeight: 'auto',
top: 0,
showVerticalScrollIndicator: true,
showHorizontalScrollIndicator: true,
layou: 'vertical'
});
Mit der Methode add() können dem Objekt schließlich Kindobjekte hinzugefügt werden. Mit
remove() sollten diese auch wieder zu entfernen sein. Dies funktioniert jedoch leider mit Android
nicht. Das Thema ist im Forum sehr wohl bekannt, aber bisher wurde keine Lösungsvorschläge
genannt.
Ein weiterer Unterschied zwischen Android und iOS besteht in der Eigenschaft scrollType. Diese
kann nur bei Android verwendet werden. Sie beschreibt die Richtung in der gescrollt werden kann.
Auf Android gibt es hier nur die Möglichkeit horizontal oder vertikal. Auf dem iOS, wo scroll Type
nicht gesetzt werden kann, können diese Funktionen standardmäßig auch kombiniert werden.
2.2.1.6 Slider
Die grundlegenden Funktionen des Sliders (siehe Abbildung
28) funktionieren auf Android und iOS gleichermaßen.
Die Attribute min und max legen den minimalen und
Abbildung 28: Slider
maximalen Wert des Sliders fest. Mit value kann der aktuelle
Wert des Sliders eingestellt werden. Die Höhenangabe darf in diesem Fall auch auf dem iOS mit
auto belegt werden. Das Attribut thumb beschreibt den Pfad zu dem Bild welches den Runden
Knopf in Abbildung 28 darstellt. Mit highlightedThumbImage kann schließlich ein Bitmap gesetzt
werden, welches nur angezeigt wird wenn das ScrollView gerade verändert wird.
Der change-Listener wird immer dann ausgeführt wenn der Slider seinen Wert verändert. In der
Funktion wird der Wert des Sliders ausgelesen, gerundet und in ein Label (im Code nicht
vorhanden) geschrieben.
var slider = Titanium.UI.createSlider({
min:0,
max:10,
value:5,
width:200,
height:'auto',
thumb: 'images/slider_thumb.png',
highlightedThumbImage:'images/chat.png'
});
slider.addEventListener('change',function(e) {
lbl.text = 'Value = ' + Math.round(e.value);
});
Die Anpassung mit eigenen Grafiken (thumb und highlightedThumbImage), wie im Codebeispiel zu
sehen, ist jedoch nur auf dem iOS möglich.
Tobias Reinke, Thibault Guégan
27
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 29 und 30
gezeigt dar. Ein Button mit einer grünen Lampe welche nur leuchtet wenn der Schalter aktiviert
wurde. iOS wiederum verwendet dazu einen Schieberegler der entweder den Wert 0 oder 1
annehmen kann. Siehe dazu Abbildung 31 und 32.
Abbildung 29: Android
Switch aktiviert
Abbildung
31: iOS
Switch
aktiviert
Abbildung 30: Android
Switch deaktiviert
Abbildung
32: iOS
Switch
deaktiviert
Android stellt außerdem noch die klassischen Checkboxen (Abbildungen 33 und 34) zur Verfügung.
Mit der Eigenschaft style kann das Aussehen somit angepasst werden.
style:Titanium.UI.Android.SWITCH_STYLE_CHECKBOX,
style:Titanium.UI.Android.SWITCH_STYLE_TOGGLEBUTTON,
Abbildung 34: Android
Checkbox aktiviert
Abbildung 33: Android
Checkbox deaktiviert
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
28
var tab1 = Titanium.UI.createTab({
icon: 'KS_nav_views.png',
title: 'Tab 1',
window: win1
});
Neben dem Titel und einem Icon kann einem Tab schließlich ein Fenster zugewiesen werden,
welches wiederum zunächst erstellt werden muss.
var win1 = Titanium.UI.createWindow({
title:'Tab 1',
layout: 'vertical',
backgroundColor:'#fff'
});
Schließlich wird das Tab noch der TabGroup zugewiesen.
tabGroup.addTab(tab1);
Und um die TabGroup anzuzeigen musst noch die Methode open() ausgeführt werden.
tabGroup.open();
Erwähnenswert ist außerdem noch die Methode setActiveTab(). Ihr kann man entweder einen Index
oder ein Objekt (Titanium.UI.Tab) übergeben. Das übergebene Tab wird somit geöffnet.
Öffnet man unter Android eine TabGroup, so ersetzt diese das Fenster aus der heraus man die
TabGroup geöffnet hat. Folglich wird der Befehl tabGroup.close() nicht das zuvor geöffnete Fenster
zum Vorschein bringen, sondern die Activiy beenden.
Auch das Aussehen der TabGroup ist von der Zielplattform abhängig. Android zeigt die Tableiste
oberhalb der Tabs an (Abbildung ), auf dem iOS wird diese unterhalb angezeigt (siehe Abbildung ).
Abbildung 35: Android TabGroup
Tobias Reinke, Thibault Guégan
Abbildung 36: iOS TabGroup
29
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 welches länger als eine Zeile sein kann, es
werden dann automatisch Umbrüche eingefügt. Die Abmessungen lassen sich wie üblich mit den
Eigenschaften width und height bestimmen.
Ist editable auf true gesetzt, so kann der Inhalt der TextArea vom Benutzer verändert werden,
andernfalls nicht. Mit value wird der Text in die TextArea geschrieben. Das Attribut font erhält ein
Objekt welches Informationen über Schriftgröße, -art und Schriftstärke beinhaltet. Die Schriftfarbe
kann man mit dem Attribut color bestimmen. Die Ausrichtung des Textes ist mit dem Attribut
textAlign auf linksbündig gesetzt. Und schließlich wurde hier ein Rahmen um das Textfeld gelegt.
Die letzten drei Attribute bestimmen Rahmenbreite, Rahmenfarbe und den Radius an den Ecken des
Rahmens.
Tobias Reinke, Thibault Guégan
30
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 welcher verwendet werden kann um mehrere Element relativ zueinander zu
positionieren. Dabei kann dem View die Eigenschaft layout mit horizontal oder vertical gesetzt
werden. Dadurch werden die mit add() zugefügten Kindelemente nebeneinander oder untereinander
angeordnet.
Dem Container können weiterhin Höhen- und Breitenangaben übergeben werden. Außerdem
können Hintergrund-, Rahmenfarbe und Rahmenbreite angegeben werden (backgroundColor,
borderColor, borderWidth...).
var mainView = Titanium.UI.createView({
backgroundColor: 'black',
width:200,
height: 200,
borderRadius: 10,
layout: 'vertical'
});
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 welcher automatisch den Webseite lädt welche mit
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
31
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.
2.2.2 TouchEvents
Allen GUI Elementen können anhand der Methode addEventListener() verschiedene Listener
mitgegeben werden. Diese Listener warten auf spezielle Ereignisse und führen dann die registrierte
Funktion aus.
Zum besseren Verständnis folgt hier der Code für einen Button mit einem click Event.
var button = Titanium.UI.createButton({
title: 'Hallo',
});
button.addEventListener('click', myListener);
function myListener(e) {
Titanium.API.info("You clicked the button");
}
Zuerst wird ein neuer Button mit dem String Hallo als Titel definiert. Anschließend wird dem
Button mit der Methode addEventListener() ein Listener zugewiesen.
Der Listener reagiert auf Click-Ereignise, was durch das Schlüsselwort click definiert wird. Der
zweite Übergabeparameter ist die Funktion die ausgeführt werden soll wenn das Ereignis eintritt.
Im letzten Teil des Codeabschnitts wird diese Funktion schließlich definiert.
Neben click gibt es noch einige andere Ereignisse auf die ein Element reagieren kann. Die
wichtigsten sind hier im Folgenden erläutert.
Tobias Reinke, Thibault Guégan
32
2.2.2.1 Click (click)
Das Click-Event wird ausgelöst wenn das entsprechende Element angeklickt, beziehungsweise mit
dem Finger an getippt wird. Die zugehörige Funktion muss einen Übergabeparameter besitzen
welcher folgende Eigenschaften besitzt:
globalPoint
ein Objekt mit den Eigenschafen x und y, welche die absoluten
Bildschirmkoordinaten des Events enthalten
source
das Objekt welches das Event ausgelöst hast
type
der Name des Events
x
X-Koordinate des Events, relativ zum auslösenden Objekt
y
Y-Koordinate des Events, relativ zum auslösenden Objekt
Tabelle 6: Eigenschaften eines Click-Events
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.
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 an getippt 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.
Tobias Reinke, Thibault Guégan
33
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) {
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) {
Tobias Reinke, Thibault Guégan
34
return;
}
// now fire the event off so regular 'swipe'
// handlers can use this!
end.direction = isHorizontal ? ((dx < 0) ?
'left' : 'right') : ((dy < 0) ? 'up' :
'down');
end.type = 'swipe';
view.fireEvent('swipe', end);
});
}
/**
* Now call the function on our window, and we'll enable
* vertical swipes while we're at it.
*/
makeSwipeable(win, true);
/**
* Now add a regular event listener for "swipe". It will
* work cross platform!
*/
win.addEventListener('swipe', function(evt) {
alert('Swiped ' + evt.direction + '!');
});
win.add(Ti.UI.createLabel({
text: 'Welcome to the Swipe for Android workaround +
vertical swipes!', textAlign: 'center',
touchEnabled: false
}));
win.open();
Dabei wird zunächst das Event Touch-Start verwendet um die Startposition der Bewegung fest zu
stellen. Anschließend meldet das Touch-End-Event den Endpunkt der Bewegung und berechnet so
die zurückgelegte Strecke, sowie die Richtung der Wischbewegung.
Wenn daraus (mit einer gewissen Toleranz) eine horizontale oder vertikale Bewegung erkannt wird,
werden die Übergabeparameter des Touch-End-Events um einen String der die Wischrichtung
enthält erweitert. Zusätzlich wird der Event-Typ überschrieben.
Mit den neuen Parametern wird dann ein neues Event vom Type swipe ausgelöst.
Nachdem dies getan ist kann das Element wie gewohnt mit einem EventListener versehen werden.
Die übergebenen Parameter enthalten in diesem Fall zusätzlich zu den bisher bekannten Werten
noch die Richtung des Wischens (siehe Tabelle 7);
Tobias Reinke, Thibault Guégan
35
globalPoint
ein Objekt mit den Eigenschafen x und y, welche die absoluten
Bildschirmkoordinaten des Events enthalten
source
das Objekt welches das Event ausgelöst hast
type
der Name des Events (swipe)
x
X-Koordinate des Events, relativ zum auslösenden Objekt
y
Y-Koordinate des Events, relativ zum auslösenden Objekt
direction
ein String welcher die Wischrichtung beschreibt (up, down, left oder right)
Tabelle 7: Angepasste Eigenschaften eines swipe-Events
Tobias Reinke, Thibault Guégan
36
2.2.3 Datenbanken (Titanium.Database)
Anwendungen auf Android und iOS Smartphones können eigenen Datenbanken verwalten. Es
handelt sich hierbei um SQLight Datenbanken. [SQLIGHT] Mit Titanium kann auch auf diese
Datenbanken zugegriffen werden. Das entsprechende Paket in der API findet sich unter
Titanium.Database. Mit dem Befehl
var db = Titanium.Database.open('my_db');
wird die Datenbank my_db zurückgegeben und in der Variable db gespeichert. Sollte noch keine
Datenbank mit diesem Namen existieren, wird automatisch eine Neue angelegt.
Ist die Datenbank schließlich verfügbar können die bekannten SQL Befehle verwendet werden
(Siehe dazu in [SQL]). Anhand der Methode execute() kann beispielsweise eine neue Tabelle
angelegt werden.
db.execute('CREATE TABLE IF NOT EXISTS my_table (ID INTEGER,
NAME TEXT)');
Falls die Tabelle my_table noch nicht vorhanden ist wird sie angelegt. Sie enthält die Spalten ID
vom Typ Integer und NAME vom Type Text.
Nachdem die Interaktion mit der Datenbank abgeschlossen ist sollten die Ressourcen wieder
freigegeben werden um den Arbeitsspeicher nicht unnötig zu belasten. Dies geschieht mit der
Methode
db.close()
Nach diesem Funktionsaufruf ist das Objekt db ungültig und kann nicht mehr verwendet werden.
Bei SQL Befehlen, wie zum Beispiel SELECT, welche einen Rückgabewert liefern kann dieser mit
folgender Form aufgefangen werden:
var rows = db.execute('SELECT * FROM my_table');
Die somit erhaltenen Datensätze in rows können mit einer Schleife durchlaufen werden.
while (rows.isValidRow()) {
var my_id = rows.field(0);
var my_name = rows.fieldByName('NAME');
rows.next();
}
Mit rows.next() wird dabei zum nächsten Datensatz in der Tabelle gewechselt. Die einzelnen
Spalten können entweder über den Index (beginnend bei 0), oder mit der Methode
fieldByName('NAME') ausgelesen werden.
Tobias Reinke, Thibault Guégan
37
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
38
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
39
Abbildung 37: Start der Anwendung
Man bemerkt, dass der Label mit dem Code oben implementiert ist. Wann das Gerät angemeldet ist,
man erhält: „online: JA“ und der Typ (NONE, WIFI, LAN oder mobil) ist abhängig von dem
Netzwerk. Mit diesem Beispiel, wir arbeiten mit dem Simulator, der Typ ist nur mobile oder NONE.
Tobias Reinke, Thibault Guégan
40
Abbildung 38: Start der Anwendung mit iOS
Wenn das Gerät nicht angeschlossen ist:
Abbildung 39: Das Gerät ist nicht angeschlossen
Tobias Reinke, Thibault Guégan
41
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 40: Sockets im Netzwerk
Das Programm:
Hier werden wir nicht alle Zeile des Codes, aber die wichtige Funktionen und den Verlauf des
Programms.
Zuerst, um die Verbindung zu initialisieren. Wir müssen die Verbindung konfigurieren. Der Port ist
schon integriert (40404). Dann erstellen wir die beiden Sockets:
Für den Server
// Creates a socket, but does not listen to the
// connection
var socket = Titanium.Network.Socket.createTCP({
host:Ti.Platform.address,
Tobias Reinke, Thibault Guégan
42
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
43
Abbildung 41: Verlauf der Kommunikation
Abbildung 42: Die Funktion in Gesamtheit: Socket + Buffer + Fluss
Im Programm können wir Objekte als „stream“ und „buffer“ beachten, für eine Kommunikation
benötigt man Socket, Fluss (stream) und Buffer. Das ist ein Teil der Kommunikation Prozess. Auf
die beiden Seite, der Client oder Server kann Informationen lesen oder schrieben. Auf der Client
und Server gibt es ein Fluss. Diese beiden Geräte können einen Buffer erhalten oder diesen Buffer
durch den Fluss senden. Der Buffer enthält die Information. Dies ist eine Erklärung:
Tobias Reinke, Thibault Guégan
44
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. Vorraussetztung dafür ist jedoch, dass sie sich im selben WLAN befinden.
Leider funktioniert der Bonjour Service bisher nur für iOS. Auf Android bleibt lediglich die direkte
Kommunikation über Sockets.
Quellen: [SOCKET] [CLIENTSERVER] [LISTENER] [CONNECT]
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 43: Geolocalisation - 1
Man hat zwei „Tabs“: Geolocation und Map. Geolocation ermöglicht den Benutzer zu lokalisieren.
Es gibt zwei Label, der erste zeigt die aktuelle Position, eine Funktion wird benutzt an dem Start der
Anwendung:
Tobias Reinke, Thibault Guégan
45
// GET CURRENT POSITION - THIS FIRES ONCE
Titanium.Geolocation.getCurrentPosition(function(e){
if (!e.success || e.error){
currentLocation.text = 'error: ' +
JSON.stringify(e.error);
Ti.API.info("Code translation:
"+translateErrorCode(e.code));
alert('error ' + JSON.stringify(e.error));
return;
}
locateLongitude = e.coords.longitude;
locateLatitude = e.coords.latitude;
var altitude = e.coords.altitude;
var heading = e.coords.heading;
var accuracy = e.coords.accuracy;
var speed = e.coords.speed;
var timestamp = e.coords.timestamp;
var altitudeAccuracy = e.coords.altitudeAccuracy;
Ti.API.info('speed ' + speed);
currentLocation.text = 'long:' + locateLongitude + '
lat: ' + locateLatitude;
Titanium.API.info('geo - current location: ' + new
Date(timestamp) + ' long ' + locateLongitude + ' lat
+ locateLatitude + ' accuracy ' + accuracy);
});
'
Zur Lokalisierung des Benutzers wird das Modul Titanium.Geolocation verwendet. Wir können die
Position entdecken mit Titanium.Geolocation.getCurrentPosition. Das ist möglich mit Hilfe eines
Ereignis (hier „e“ und das bedeutet der Start der Anwendung). Man erhält die Breite und Länger mit
e.coords.latitude und e.coords.longitude. Schliesslich zeigen wir die Breite und Länge mit dem erste
Label : currentLocation.text = 'long:' + locateLongitude + ' lat: ' + locateLatitude;
Jetzt, wenn der Programm läuft, und die Postion wird geändert, eine andere Funktion wird benutzt:
// EVENT LISTENER FOR GEO EVENTS - THIS WILL FIRE
// REPEATEDLY (BASED ON DISTANCE FILTER)
var locationCallback = function(e){
if (!e.success || e.error) {
updatedLocation.text = 'error:' +
JSON.stringify(e.error);
updatedLatitude.text = '';
updatedLocationAccuracy.text = '';
updatedLocationTime.text = '';
Ti.API.info("Code translation:
"+translateErrorCode(e.code));
return;
}
locateLongitude = e.coords.longitude;
Tobias Reinke, Thibault Guégan
46
locateLatitude = e.coords.latitude;
var altitude = e.coords.altitude;
var heading = e.coords.heading;
var accuracy = e.coords.accuracy;
var speed = e.coords.speed;
var timestamp = e.coords.timestamp;
var altitudeAccuracy = e.coords.altitudeAccuracy;
Titanium.Geolocation.distanceFilter = 100;
//changed after first location event
updatedLocation.text = 'long:' + locateLongitude;
updatedLatitude.text = 'lat: '+ locateLatitude;
updatedLocationAccuracy.text = 'accuracy:' +
accuracy;
updatedLocationTime.text = 'timestamp:' +new
Date(timestamp);
updatedLatitude.color = 'red';
updatedLocation.color = 'red';
updatedLocationAccuracy.color = 'red';
updatedLocationTime.color = 'red';
setTimeout(function() {
updatedLatitude.color = '#444';
updatedLocation.color = '#444';
updatedLocationAccuracy.color = '#444';
updatedLocationTime.color = '#444';
},100);
Titanium.API.info('geo - location updated: ' + new
Date(timestamp) + ' long ' + locateLongitude + ' lat
locateLatitude + ' accuracy ' + accuracy);
' +
};
Abbildung 44: Geolocalisation - 2
Der Prinzip ist fast gleich als die letzte Funktion aber diese
Funtion wird auf einer „Distance Filter“ basiert. Das bestimmt,
wie oft ein Ereignis ausgelöst, basiert auf der Distanz das Gerät
bewegt. Dieser Wert ist in Meter:
Titanium.Geolocation.distanceFilter = 100;
Wenn die Position geändert ist, der Label wird rot, z.B:
updatedLatitude.color = 'red'; Und wir zeigen die geändert
Position mit Hilfe des zweites Label.
Tobias Reinke, Thibault Guégan
47
Unterschiede zwischen iOS und Android
Wenn der Programm auf einem Gerät läuft, gitb es keine Unterschiede. Aber es gibt ein Unterschied
mit den Android und iOS Simulator. Der GPS funktioniert nicht mit dem Android Simulator:
Abbildung 45: Geolocalisation - 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
48
Abbildung 46: Anmerkung hinzufügen
Zuerst soll man eine Karte erstellen mit mehreren Anmerkungen:
//mapview of the application, centered on pinThibault
var myMap = Titanium.Map.createView({
opacity:0.0,
mapType: Titanium.Map.STANDARD_TYPE, //we can use
HYBRID_TYPE, or SATELLITE_TYPE
region: {latitude: 47.3563789,
longitude: -3.241771,
latitudeDelta: 0.3,
longitudeDelta: 0.3
},
annotations:[pinThibault,pinESEO,pinHochschule],
animate:true,
height:heightMap,
regionFit:true,
userLocation:true,
});
Wir estellen eine Karte mit Titanium.Map.createView, hier sagen wir, dass diese Karte keine
Opazität hat. Und mit region können wir die Karte zentralisieren, hier in Ulm (Breite und Länge
von Ulm). Die Anmerkungen sind in annotations hinzugefügt. Aber dann soll man diese drei
Anmerkungen: pinThibault, pinESEO, pinHochschule erstellen. Mit
Titanium.Map.createAnnotation:
//List of three pins for the mapiew
var pinThibault = Titanium.Map.createAnnotation({
latitude:47.3563789,
longitude:-3.241771,
title:"Belle Ile en Mer",
subtitle:'Bei Thibault',
pinImage : "map-pin.png",
rightButton: 'gwenn_ha_du.png',
animate:true,
Tobias Reinke, Thibault Guégan
49
myid:1
});
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 ertstellen wir ein addEventListener auf dem Bild der Anmerkung:
//shows a functionality of the mapview, when you touch the
rightButton of an annotation
//a specific website is opened
myMap.addEventListener('click',function(e){
Titanium.API.info(e.clicksource);
Titanium.API.info(e.annotation.myid);
if(e.annotation.myid=3 && e.clicksource=='rightButton'){
Titanium.Platform.openURL("http://www.hs-ulm.de/")
}
});
Der rightButton beschreibt den Bild der Anmerkung, deshalb brauchen wir diese e.clicksource.Um
Tobias Reinke, Thibault Guégan
50
eine Webseite zu öffnen benutzen wir Titanium.Platform.openURL.
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
51
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 ertstellen wir die verschiedene Punkte mit Breite und Länge in einer Tabelle. Dann erstellen
diese Route, und sie wird mit der Tabelle point definiert. Wir können Eigenschaften wie name,
color und width hinzufügen. Schliesslich fügen wir diese Route hinzu, mit myMap.addRoute.
Das Ergebnis:
Abbildung 47: Eine Route
Tobias Reinke, Thibault Guégan
52
Hier können die vier verschiedene Punkte sehen.
Unterschiede zwischen iOS und Android
Wir können Anmerkungen auf die beiden Plattformen hinzufügen. Wir können Bilder für
Anmerkungen nur mit Android hinzufügen. Deshalb kann man nicht eine Webseite mit Hilfe einer
Anmerkung mit iOS öffnen. Mit der Lokalisierung ist es gleich mit Android oder iOS Geräten, aber
das funktioniert nicht mit dem Android Simulator, der GPS für den iOS Simulator zeigt
standardmässig San Francisco. Und wir können eine Route nur mit iOS hinzufügen.
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 48: Facebook Login
Tobias Reinke, Thibault Guégan
53
Zuerst erstellen wir diese Login Button (unteren Rand des letztes Bildes):
// Login Button
win.add(Titanium.Facebook.createLoginButton({
style:'wide',
bottom:30
}));
Und dann zwei EventListener für diese Button, um sich über Facebook anmelden oder abmelden :
Titanium.Facebook.addEventListener('login', updateLoginStatus);
Titanium.Facebook.addEventListener('logout', updateLoginStatus);
Wenn der Benutzer verbunden oder nicht ist, bearbeiten wir den Login status :
function updateLoginStatus() {
label.text = 'Logged In = Titanium.Facebook.loggedIn;
}
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 49: Bilder mit Facebook
publizieren
Tobias Reinke, Thibault Guégan
54
Diese beide API sind API von Facebook, nicht von Titanium. Der Kern des Facebook ist ein Social
Graph, die Menschen und ihre Verbindungen zeigt. Die Graph Api stellt eine einfache, konsistente
Sicht auf die Facebook Social Graph, gleichmäßig, die Objekte in der Graphik (zB Menschen,
Fotos, Veranstaltungen, Seiten) und die Verbindungen zwischen ihnen (zB Freuden Beziehungen,
gemeinsame Inhalte und Foto-Tags). Die Rest API ermöglicht uns, mit Facebook-Webseite
programmatisch interagieren über HTTP-Requests.
Bilder von FotoGalerie
Wir haben gesehen, dass wir zwei Button für die zwei Möglichkeiten haben. Der erste für Bilder
von der Fotogalerie heisst b1 in dem Code. Und wir estellen ein EventListener für jede Button.
b1.addEventListener('click', function() {
Titanium.Media.openPhotoGallery({
success:function(event)
{
b1.title = 'Uploading Photo...';
var data = {picture: event.media};
Titanium.Facebook.requestWithGraphPath('me/photos', data,
"POST", showRequestResult);
},
cancel:function()
{
},
error:function(error)
{
},
allowEditing:true
});
});
Wir können die Fotogalerie mit Titanium.Media.openPhotoGallery öffnen. Dann benutzen eines
Ereignis (hier event), das bedeutet, wenn man auf ein Bild in der Fotogalerie klickt. Wenn dieses
Ereignis ausgelöst, erhalten wir diese Bild mit:
var data = {picture: event.media};
Und dann publizieren wir diese Bild auf Facebook mit der Graph API:
Titanium.Facebook.requestWithGraphPath('me/photos', data,
"POST", showRequestResult);
Tobias Reinke, Thibault Guégan
55
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 50: Status
publizieren
Tobias Reinke, Thibault Guégan
56
Wir haben ein TextField erstellen, um der Status zu schreiben:
var statusText = Ti.UI.createTextField({
top: 0, left: 10, right: 10, height: 40,
hintText: 'Enter your FB status'
});
Ein button, um der Status zu publizieren:
var statusBtn = Ti.UI.createButton({
title: 'Publish status with GRAPH API',
top: 45, left: 10, right: 10, height: 40
});
Schliesslich, ein EventListener für diese Button, um der Graph API zu benutzen:
statusBtn.addEventListener('click', function() {
Titanium.Facebook.requestWithGraphPath('me/feed', {message:
statusText.value}, "POST", showRequestResult);
});
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 ertsellt ist, ist
ein GET Methode angerufen, wie in PHP, um die Informationen von dem Benutzer zu haben (hier
appcelerator) und um die API von Twitter zu benutzen.
Zuerst erstellen wir den HTTP Client:
var xhr = Ti.Network.createHTTPClient();
Dann benutzen wir die GET Methode:
xhr.open("GET","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
57
{
var tweets = eval('('+this.responseText+')');
for (var c=0;c<tweets.length;c++){
var tweet = tweets[c].text;
var user = tweets[c].user.screen_name;
var avatar =
tweets[c].user.profile_image_url;
var created_at =
prettyDate(strtotime(tweets[c].created_at));
var bgcolor = (c % 2) == 0 ? '#fff' : '#eee';
Nachdem gibt es Code für Graphik (TableViewRow, ImageView)...
Das Ergebnis:
Abbildung 51: Appcelerator Tweat
Unterschiede zwischen iOS und Android
Es gibt keine Unterschiede.
Tobias Reinke, Thibault Guégan
58
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
59
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
60
Abbildung mit dem iOS Similator:
Das funktioniert natürlich nicht mit dem iOS
Simulator, es gibt standardmässig keine Fotos in
der Fotogalerie.
Abbildung 52: Photos im iOS
Simulator
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:
Tobias Reinke, Thibault Guégan
61
Zuerst erstellen wir ein Ton mit Titanium.Media.createSound, das ermöglicht der Ton von dem
ProjektOrdner zu benutzen:
var sound = Titanium.Media.createSound();
sound.url='cricket.wav';
Das ist ein .wav Ton, das kann ein .mp3 oder .m4a sein.
Es gibt nämlich ein EventListener für jede Button, zB mit play:
play.addEventListener('click', function()
{
sound.play();
});
play() ist eine Funktion von Titanium.Sound. Wir Benutzen Funktionen von Titanium.Sound für
jede Button. ZB mit den Button Pause, pause() ; Stop, stop().
Das ist anders mit der Stärke, wir benutzen die Eigenschaft volume von Titanium.Sound :
volumeUp.addEventListener('click', function()
{
if (sound.volume < 1.0)
{
sound.volume += 0.1;
volumeUp.title = 'Volume++ (' + sound.volume + ')';
volumeDown.title = 'Volume--';
}
});
Die Wert volume muss zwischen 0 und 1 sein. Wir können diese Wert er erhöhen oder verringern
bei 0.1. Und wir bearbeiten den Label von dem Button.
Wir können auch der Ton wieder abspielen mit looping. Man zeigt der looping des Tons auf den
Button : looping.title. Und wenn man auf den Button klickt, wird der looping false oder true.
looping.addEventListener('click', function()
{
sound.looping = (sound.looping === false)?true:false;
looping.title = 'Looping (' + sound.isLooping() + ')';
});
Es gibt auch ein Progress Bar. Wir haben mit Titanium.UI.createProgressBar erstellt. Das
funktioniert nur mit iOS. Für diese Progress Bar brauchen wir ein Flex Space, wir haben ein
Flexspace (sichtbar in blau am unteren Rand des folgendes Bildes) mit
Ti.UI.iPhone.SystemButton.FLEXIBLE_SPACE.
Tobias Reinke, Thibault Guégan
62
Code :
//
// PROGRESS BAR TO TRACK SOUND DURATION
//
var flexSpace = Titanium.UI.createButton({
systemButton:Titanium.UI.iPhone.SystemButton.FLEXIBLE_SPACE
});
var pb = Titanium.UI.createProgressBar({
min:0,
value:0,
width:200
});
if (Ti.Platform.name != 'android') {
win.setToolbar([flexSpace,pb,flexSpace]);
}
pb.show();
Das Ergebnis :
Abbildung 53: Ton wird abgespielt
Unterschiede zwischen Android und iOS
Der Progress Bar funktioniert nur mit iOS.
Tobias Reinke, Thibault Guégan
63
2.3 Unterschiede zwischen iOS und Android im Überblick
In folgender Tabelle sind die, in diesem Kapitel ausgearbeiteten, Unterschiede noch einmal
zusammen gefasst.
Modul
Unterschiede
GUI
AlertDialog
Auf Android kann ein Dialog nicht mehr als drei Buttons enthalten.
Button
Auf dem iOS müssen Höhen und Breitenangaben gesetzt werden.
Das Attribut backgroundSelectedImage hat auf Android keine
Auswirkungen.
Label
Die standardmäßig eingestellte Textfarbe ist bei iOS schwarz, bei Android
hingegen weiß.
Picker
Unterschiedliche Darstellung, Funktionsweise aber identisch.
ScrollView
remove() funktioniert auf Android nicht, scrollType gibt es nur für Android.
Die Scroll-Richtung muss bei Android spezifiziert werden, iOS unterstützt
beide Richtungen gleichzeitig.
Slider
Anpassung mit Grafiken ist nur für iOS möglich.
Switch
Unterschiedliche Darstellung, für Android gibt es klassische Checkboxen.
TabGroup
Bei Android ersetzt Tabgroup das aktuelle Fenster. Android stellt die
Tableiste oberhalb der Tabs dar, iOS unterhalb.
TableView
Keine Unterschiede.
TextArea
blur() funktioniert auf Android nicht.
View
Auf dem iOS muss die top explizit auf 0 gesetzt werden.
WebView
Keine Unterschiede.
Window
Keine Unterschiede.
TouchEvents
Click
Keine Unterschiede.
Double Click
Funktioniert weder unter Android noch auf dem iOS.
Single Tap
Funktioniert auf dem iOS nicht sehr zuverlässig.
Double Tap
Funktioniert auf dem iOS nicht sehr zuverlässig.
Twofinger Tap
Funktioniert weder unter Android noch auf dem iOS.
Touch Start
Keine Unterschiede.
Touch Move
Keine Unterschiede.
Touch End
Keine Unterschiede.
Swipe
Funktioniert bisher nur auf dem iOS, Workarround für Android vorhanden.
Datenbanken
Keine Unterschiede.
Tobias Reinke, Thibault Guégan
64
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
Tobias Reinke, Thibault Guégan
65
3 Teil III: Entwickeln einer App mit Titanium
In dritten Teil dieser Arbeit geht es darum die Fähigkeiten von Titanium anhand einer
funktionierenden Anwendung zu demonstrieren. Diese Anwendung soll mit Titanium entwickelt,
und auf Android-, sowie iOS Geräten lauffähig sein. Um weiterhin speziell den Zugriff auf
hardware-nahe Elemente zu demonstrieren wurde die Kommunikation über WLAN als Teil der
Anwendung definiert, folglich wird ein Multiplayermodus angestrebt.
Dazu werden die bisher über Titanium gewonnen Erkenntnisse, bezüglich WLAN und anderen
Bereichen angewendet.
3.1 Einführung - SET
Entwickelt wird das Kartenspiel SET. [SET] Es handelt sich hierbei um ein Kartenspiel mit 81
Karten. Jede Karte ist einzigartig und zeichnet sich durch vier Merkmale aus.
•
•
•
•
das Symbol auf der Karte
die Anzahl der Symbole auf der Karte
die Farbe des Symbols auf der Karte
die Fläche des Symbols auf der Karte
Jedes dieser Merkmale kann drei unterschiedliche Ausprägungen besitzen. Das Symbol kann ein
Kreis, ein Rechteck oder eine Welle sein. Es können auf einer Karte ein, zwei oder drei Symbole
enthalten sein. Die Farbe der Symbole auf einer Karte kann entweder rot, grün oder lila sein. Und
die Fläche der Symbole kann entweder voll, leer oder ausgefüllt sein.
Schließlich gilt noch, dass alle Symbole auf einer Karte stets die gleichen Ausprägungen besitzen
müssen. Es können also nicht unterschiedliche Symbole auf einer Karte sein.
Zu Beginn des Spieles werden die Karten gemischt und verdeckt auf einen Stapel gelegt.
Anschließend werden die obersten zwölf Karten vom Stapel gezogen und offen auf der Spielfläche
ausgelegt (Anordnung: 3x4 Karten).
Es beginnt das eigentliche Spiel. Alle Mitspieler (theoretisch beliebig viele) suchen in den
aufgedeckten Karten nach einem SET. Ein SET besteht aus drei Karten und besitzt folgende
Eigenschaften:
Alle Merkmale der drei Karten müssen entweder
• drei unterschiedliche Ausprägungen besitzen
oder
• drei identische Ausprägungen besitzen.
Findet ein Spieler ein SET, so darf er die drei Karten an sich nehmen und es werden drei neue
Karten vom Kartenstapel aufgedeckt. Diese werden an die Stelle des gefundenen SET gelegt.
Das Spiel endet wenn kein Spieler mehr in der Lage ist ein SET zu finden, oder der Kartenstapel
nicht mehr ausreicht um das Spielfeld aufzufüllen.
3.2 Projektmanagement
Dieses Projekt wird agil entwickelt. Die dabei verwendete Methode heißt Scrum.
Bei agiler Softwareentwicklung geht es im Kern um ein iteratives Vorgehen damit auf
Anforderungsänderungen schnell reagiert werden kann. [AGIL]
Tobias Reinke, Thibault Guégan
66
Heutzutage ist die bekannteste aller agilen Methoden Scrum. Durch eine einfache Struktur und klar
definierte Rollen lassen sich die Scrum-Prinzipien einfach lernen und produktiv einsetzen. [SCRUM]
Aus Kundensicht bietet Scrum den Vorteil, dass kein Pflichtenheft existieren muss. Der Kunde
beschreibt am Anfang lediglich wenige Basisfunktionalitäten und das Projekt kann ohne
Verzögerung beginnen. Wegen dem iterativen Vorgehen können neue Anforderungen während des
Projektverlaufes jederzeit hinzugefügt werden.
Weiterhin führt die Iteration dazu, dass Erfahrungen aus dem laufenden Projekt in den
Entwicklungsprozess einfließen können. Außerdem wird nur dass entwickelt was tatsächlich von
Nutzen ist.
Auch für Entwickler bietet Scrum wesentliche Vorteile. Dadurch, dass ein Entwickler die Aufwände
selbst abschätzen muss lernt er schließlich aus seinen eigenen Erfahrungen und ein erfahrenes Team
kann so die Entwicklungsgeschwindigkeit besser einschätzen.
Auch sprechen in agilen Projekten die Entwickler regelmäßig direkt mit den Anwendern. Dies führt
dazu, dass die Entwickler das Produkt besser verstehen und gleichzeitig wächst auch das
Verständnis der Anwender wenn die Entwickler mal eine Schätzung korrigieren müssen.
Allerdings ist es auch nicht leicht eine agile Methode einzuführen. Oft müssen alte Gewohnheiten
abgelegt werden und die neuen Methoden immer wieder überprüft werden. Aus diesem Grund sollte
Agilität nur langsam eingeführt werden. [SCRUMVN]
3.3 Product Backlog
Das Produkt Backlog ist eine priorisierte Liste, welche alles enthält was für das Produkt zu
entwickeln ist. Im Produkt Backlog können auch Änderungsanforderungen übernommen werden.
Vom Kunden gefordert war das Spiel SET welches gemäß den in Kapitel 3.1 erklärten Regeln
umgesetzt werden soll.
Zu Beginn des Spiels wird ein Menü gezeigt, welches dem Benutzer drei verschiedene Aktionen
ermöglicht. Entweder entscheidet sich der Anwender für ein Spiel im Singleplayermodus oder für
den Multiplayermodus, um gegen einen anderen Spieler zu spielen. Dabei ist es ihm möglich zu
wählen ob er selbst ein Spiel eröffnen, oder einem anderen Spiel beitreten möchte. Jede dieser drei
Varianten wird in den folgenden Abschnitten erklärt.
3.3.1 Singleplayermodus
Im Singleplayermodus wird sofort ein Spiel gestartet. Auf dem Display wird das Spielfeld
angezeigt, welches die ersten zwölf, vom Stapel gezogenen Karten enthält. Zusätzlich wird der
aktuelle Punktestand angezeigt. Findet der Spieler ein SET, wird dieses gemäß den Regeln entfernt
und durch drei neue Karten ersetzt. Bei jedem gefundenen SET wird außerdem der Punktestand um
eins inkrementiert.
Das Selektieren und Deselektieren der Karten wird durch farbliche Markierungen optisch hervor
gehoben. Sind drei Karten selektiert, so wird überprüft ob ein SET gefunden wurde. Handelt es sich
um ein SET, so werden die drei Karten kurz hervorgehoben und anschließend entfernt.
Hat der Spieler kein valides SET markiert, werden die selektierten Karten automatisch deselektiert.
Zusätzlich hat der Spieler im Singleplayermodus drei weitere Möglichkeiten. Er kann das Spiel
jederzeit beenden, was jedoch erst nach einer erneuten Bestätigung erfolgt. Um herauszufinden ob
es im aktuellen Zustand überhaupt noch ein SET gibt kann der Benutzer außerdem einen Button
drücken. Dieser öffnet einen Dialog welcher dem Benutzer mit teilt ob es noch ein SET gibt. Sollte
kein SET mehr vorhanden sein wird das Spiel beendet.
Im Singleplayermodus kann der Spieler sich außerdem noch ein mögliches SET anzeigen lassen.
Tobias Reinke, Thibault Guégan
67
Wird der entsprechende Button gedrückt, so wird ein mögliches SET für kurze Zeit farbig
hervorgehoben. Wiederrum gilt, wenn es kein SET gibt wird das Spiel beendet.
Das Spiel kann außerdem durch jeden der Spieler beendet werden. Schließlich gibt es noch die
Möglichkeit, dass alle Karten vom Spielstapel aufgebraucht sind. Auch dann wird das Spiel
beendet.
3.3.2 Multiplayermodus
Der Multiplayermodus ermöglicht zwei Alternativen. Zunächst muss ein Gerät ein Spiel erstellen,
anschließend kann ein weiteres Gerät an diesem Spiel teilnehmen. Die genauen Schritte sind im
Folgenden erklärt.
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
68
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 welche ein Set finden soll.
60
Multiplayermodus integrieren.
200
Debuggen der Multiplayerfunktion.
100
Optional:
Vibration bei gefundenem SET.
10
Darstellung des Gewinners bei Spielende.
30
Anleitung für das Spiel implementieren.
10
Funktion zum Anzeigen eines SETs im Singleplayer integrieren.
40
Möglichkeit zum Speichern von IP Adressen erstellen.
10
Tabelle 8: Backlog Items
Einige Items wurden hier nur schwach priorisiert und aus diesem Grund als Optionales Feature
behandelt. Die Priorisierung geschah in Zusammenarbeit mit dem Auftraggeber.
Tobias Reinke, Thibault Guégan
69
3.4 Das Spiel
Startet ein Benutzer das Spiel SET auf seinem Smartphone, so öffnet sich ein Fenster gemäß
Abbildung 54. Die drei Buttons spiegeln die in Kapitel 3.3 definierten Kernfunktionen wieder. Die
Schaltfläche Set starten beginnt sofort ein neues Spiel im Einzelspielermodus. Die zwei anderen
Schaltflächen sind für den Multiplayermodus zu verwenden. Sie können zum Spiel eröffnen, oder
zum Spiel teilnehmen verwendet werden.
Abbildung 54: SET - Startfenster
Abbildung 55: Spielfeld im
Einzelspielermodus
Der Spielablauf für ein Singleplayerspiel beginnt mit dem Klick auf Set starten. Das Spielfeld, mit
den ersten zwölf aufgedeckten Karten vom Kartenstapel wird gezeichnet (siehe Abbildung 55).
Anschließend muss der Spieler reagieren und eine Karte mit dem Finger antippen. Dies startet einen
Ablauf gemäß Abbildung 56.
Abbildung 56: Ablauf beim Anklicken einer Karte im Singleplayermodus
Tobias Reinke, Thibault Guégan
70
Abhänig 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 57 bereit. Links in der Grafik befindet sich die
Zurück-Taste, welche es ermöglicht das Spiel, nach einer Rückfrage, zu beenden.
Abbildung 57: Android Tasten
Die Rechte Schaltfläche in Abbildungen 57 ist die Menütaste, welche nach Betätigung ein Menü
wie in Abbildung 58 zu sehen, öffnet. Dieses Menü bietet die Möglichkeit
Abbildung 58: Menü auf einem Androidgerät
wurde in Abbildung grafisch dargestellt. Der Spieler startet das Spiel mit der Schaltfläche Set
starten.
Tobias Reinke, Thibault Guégan
71
4 Zusammenfassung
Grundlage dieser Arbeit ist die zunehmende Verbreitung von Smartphones, welche 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, welches 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, welche ihnen den Einstieg erleichtert. Auch eine
Einführung in die Entwicklung mit Titanium ist vorhanden.
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
72
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
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
73
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: Einfaches Fenster (window).......................................................................................20
Abbildung 19: Einfacher Dialog........................................................................................................21
Abbildung 20: Normaler Dialog.........................................................................................................22
Abbildung 21: Erweiterter Dialog......................................................................................................22
Abbildung 22: Android Picker............................................................................................................24
Abbildung 23: Auswahlmenü des Android Pickers............................................................................24
Abbildung 24: iOS Picker (Spinner)..................................................................................................25
Abbildung 25: Android DatePicker....................................................................................................26
Abbildung 26: iOS DatePicker (Spinner)...........................................................................................26
Abbildung 27: Android DatePicker (Spinner)....................................................................................26
Abbildung 28: ScrollView..................................................................................................................27
Abbildung 29: Android Switch aktiviert............................................................................................28
Abbildung 30: Android Switch deaktiviert.........................................................................................28
Abbildung 31: iOS Switch aktiviert...................................................................................................28
Abbildung 32: iOS Switch deaktiviert...............................................................................................28
Abbildung 33: Android Checkbox deaktiviert...................................................................................28
Abbildung 34: Android Checkbox aktiviert.......................................................................................28
Abbildung 35: Android TabGroup......................................................................................................29
Abbildung 36: iOS TabGroup.............................................................................................................29
Abbildung 37: Start der Anwendung..................................................................................................40
Abbildung 38: Start der Anwendung mit iOS....................................................................................41
Abbildung 39: Das Gerät ist nicht angeschlossen..............................................................................41
Abbildung 40: Sockets im Netzwerk..................................................................................................42
Abbildung 41: Verlauf der Kommunikation.......................................................................................44
Abbildung 42: Die Funktion in Gesamtheit: Socket + Buffer + Fluss...............................................44
Abbildung 43: Geolocalisation - 1.....................................................................................................45
Abbildung 44: Geolocalisation - 2.....................................................................................................47
Abbildung 45: Geolocalisation - 3.....................................................................................................48
Abbildung 46: Anmerkung hinzufügen..............................................................................................49
Abbildung 47: Eine Route..................................................................................................................52
Abbildung 48: Facebook Login..........................................................................................................53
Tobias Reinke, Thibault Guégan
74
Abbildung 49: Bilder mit Facebook publizieren................................................................................54
Abbildung 50: Status publizieren.......................................................................................................56
Abbildung 51: Appcelerator Tweat.....................................................................................................58
Abbildung 52: Photos im iOS Simulator............................................................................................61
Abbildung 53: Ton wird abgespielt....................................................................................................63
Tobias Reinke, Thibault Guégan
75
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