Cross Platform Development und Cross Compiling mit PhoneGap

FOM Hochschule für Oekonomie & Management Essen
Berufsbegleitender Studiengang zum Bachelor of Science
5. Semester
Seminararbeit in „Content Management Systeme“
Cross Platform Development und Cross
Compiling mit PhoneGap
Betreuer: Prof. Jörg Muschiol
Autorin: Sarah Steffen
Matrikelnr.: 241593
Adresse: Wallstraße 24, 40878 Ratingen
Ratingen, den 09.01.2012

I
Inhaltsverzeichnis
1 Abkürzungsverzeichnis.......................................................................................................... 1
2 Tabellenverzeichnis ............................................................................................................... 1
3 Abbildungsverzeichnis ........................................................................................................... 2
4 Einleitung ............................................................................................................................... 2
4.1 Problemstellung und Ziel der Arbeit.............................................................................. 2
5 Cross Platform Development................................................................................................. 3
5.1 Das Mobile Web............................................................................................................ 3
5.2 Mobile App-Entwicklung................................................................................................ 5
6 PhoneGap.............................................................................................................................. 7
6.1 Hintergrundinformationen.............................................................................................. 7
6.2 Unterstützte Betriebssysteme ....................................................................................... 7
6.3 Verwendete Programmiersprachen .............................................................................. 7
6.4 Features ........................................................................................................................ 7
6.5 Konkurrenz und Alternativen......................................................................................... 8
6.5.1 Appcelerator Titanium ............................................................................................... 8
6.5.2 Red Foundry.............................................................................................................. 8
6.5.3 rhomobile................................................................................................................... 9
7 Cross-Compiling .................................................................................................................... 9
7.1 Definition ....................................................................................................................... 9
7.2 Beispiel: Wordpress Blog auf Android .......................................................................... 9
7.3 Ergänzung................................................................................................................... 11
8 Fazit ..................................................................................................................................... 11
8.1 Zusammenfassung...................................................................................................... 11
8.2 Ausblick....................................................................................................................... 12
9 Literaturverzeichnis.............................................................................................................. 12
10 Ehrenwörtliche Erklärung................................................................................................ 13
11 Anhang............................................................................................................................ 14
11.1 PhoneGap Features.................................................................................................... 14
11.2 Beispiel-App im ADV und Samsung Galaxy ............................................................... 15
11.3 Quelltext index.html der Beispiel-App ......................................................................... 17

1 Abkürzungsverzeichnis
4.1 Problemstellung und Ziel der Arbeit
1
1 Abkürzungsverzeichnis
ADT: Android Development Tools; Sammlung von Tools zur Entwicklung von Android Apps . 10,
11
AJAX: Asynchronous JavaScript and XML; Konzept zur asynchronen Datenübertragung
zwischen Browser und Server .......................................................................................... 10
APK: Android Application Package File; ausführbare Paketdatei zum Verteilen und Installieren
von Android-Programmen bzw. Apps............................................................................... 11
AVD: Android Virtual Device; Eclipse-gestütze Simulation eines Android-Gerätes zum Testen
von Apps ........................................................................................................................... 11
CSS: Cascading Stylesheets; deklarative Formatierungssprache für strukturierte Web-
Dokumente............................................................................................................ 7, 8, 9, 11
EDGE: Enhanced Data Rates for GSM Evolution; Technik zur Erhöhung der
Datenübertragungsrate bei GSM Standards wie GPRS..................................................... 3
GPRS: General Packet Radio Service; paketorientierter Dienst zur Datenübertragung in GSM-
und UMTS-Netzen .............................................................................................................. 3
HTML: Hypertext Markup Language; textbasierte Auszeichnungssprache zur Strukturierung von
Web-Dokumenten................................................................................................. 7, 8, 9, 10
J2EE: Java Platform, Enterprise Edition; spezialisierte Plattform für die transaktionsbasierte
Ausführung von Java-Programmen.................................................................................... 5
JAR: Java Archive; Archiv-Datei, die Java-Klassen enthält........................................................ 10
RAM: Random-Access-Memory; Arbeitsspeicher in Computern.................................................. 4
SDK: Software Development Kit; Sammlung von Entwicklungs-Tools................................... 5, 10
UMTS: Universal Mobile Telecommunications System; Mobilfunkstandard der dritten
Generation (3G).................................................................................................................. 3
XHTML: Extensible Hypertext Markup Language; HTML gemäß den Syntaxregeln von XML,
heutzutage Standard......................................................................................................... 10
XML: Extensible Markup Language; Auszeichnungssprache zur Darstellung hierarchisch
strukturierter Daten ........................................................................................................... 10
2 Tabellenverzeichnis
Tabelle 1: Unterschiede zwischen mobilem und Desktop-Web.................................................... 5
Tabelle 2: Smartphone-Betriebssysteme und –Sprachen (Allen, et al., 2010 S. 5) ..................... 6
Tabelle 3: Supported Features (Nitobi, 2011)............................................................................. 14

3 Abbildungsverzeichnis
2
3 Abbildungsverzeichnis
Abbildung 1: Die Beispiel-App im Android Virtual Device........................................................... 15
Abbildung 2: Die Beispiel-App im SAMSUNG Galaxy S I9000................................................... 16
4 Einleitung
Die Informationstechnologie ist heutzutage sowohl aus der Wirtschaft, als auch aus
dem Privatleben nicht mehr wegzudenken. Computer, IT-Systeme allgemein, sowie
das Internet bestimmten und koordinieren den Alltag. Der Papierkrieg etwa in Bü-
ros ist zwar immer noch nicht gebannt (sondern hat seit der „digitalen Revolution“
sogar zugenommen), dennoch ist es unverzichtbar geworden, Prozesse software-
technisch abzubilden oder auch zu ersetzen.
Besonders betroffen von diesen Entwicklungen ist das Bereitstellen und Abrufen
von Informationen. Zeitungen klagen über rückläufige Verkaufszahlen und Abon-
nements, während Online-Angebote exponentiell wachsen und mehr und mehr den
Markt bestimmen. Eine weitere Entwicklung der technischen Welt spielt hierbei
eine entscheidende Rolle: Der Siegeszug der mobilen Geräte. Tablet PCs und
Smartphones werden immer populärer, stellen aber dennoch nur einen kleinen Teil
der weltweit genutzten Mobilgeräte dar. In vielen Teilen der Welt sind „herkömmli-
che“ Mobiltelefone (sog. „feature phones“) immer noch der einzige Zugang zum
Internet, wie z.B. in weiten Teilen Afrikas, in denen kaum jemand einen PC besitzt.
Somit besteht die aktuelle Herausforderung der Informationsverarbeitung und –
bereitstellung darin, die im Internet veröffentlichten Inhalte für eben solche mobilen
Geräte zu optimieren und somit möglichst viele Konsumenten zu erreichen.
Die hauptsächliche Nutzung des Internets besteht heutzutage darin, (multimediale)
Inhalte bereit zu stellen und abzurufen. Ob es sich dabei nun um Börsenkurse oder
Boulevardnachrichten handelt, in jedem Fall müssen die Inhalte verwaltet und für
das Web aufbereitet, also mit einer entsprechenden Darstellung verbunden wer-
den. Die alle dazugehörenden Maßnahmen umfassende Aufgabe wird als Content
Management bezeichnet, und die Software, die sie übernimmt, als Content Ma-
nagement Systeme. Diese sind sowohl kommerziell als auch Open Source, also
unter freier Lizenz, erhältlich.

5 Cross Platform Development
5.1 Das Mobile Web
3
Die Fragestellung, wie Content Management hinsichtlich plattformübergreifender
Veröffentlichung von Inhalten auf mobilen Endgeräten realisiert werden kann, so-
wie Lösungsansätze dazu, sind Thema dieser Seminararbeit. Als Beispiel für einen
Lösungsansatz wird das Tool PhoneGap analysiert, und mit seiner Hilfe das soge-
nannte Cross Compiling (siehe Kapitel 7) an einem Beispiel demonstriert. Es folgen
ein zusammenfassendes Fazit und ein kritischer Ausblick, in dem vom jetzigen
Stand der Praxis aus betrachtet wird, wie es im Bereich Cross Media Publishing
weitergehen könnte.
5.1 Das Mobile Web
Die Applikationsentwicklung für mobile Endgeräte stellt Software-Entwickler vor
völlig neue Herausforderungen. Neben den technischen Bedingungen kann die
Begründung dafür auf die folgenden drei Ursachen zusammengefasst werden (vgl.
Frederick, et al., 2009 S. 4):
• Das Mobile Web ist völlig neu: nicht nur für herkömmliche Handys, auch für
Smartphones ist das Volumen von Datentransfer von Bedeutung. Drahtlos-
Verbindungen wie UMTS sind zur Zeit aus technischen Gründen mit einer
Volumenbegrenzung (in der Regel je nach Anbieter zwischen 200MB und
5GB im Monat) versehen, so dass jedes übertragene MB ins Gewicht fällt.
Alternativen wie GPRS/EDGE bieten aufgrund der geringen Bandbreite
kaum den nötigen Komfort zur adäquaten Nutzung des Web 2.0. Ein weite-
rer wichtiger Aspekt ist der Energieverbrauch. Anders als Heimcomputer,
die stets mit der Steckdose verbunden sind, werden Smartphones mit Akkus
betrieben, und so müssen Energiereserven wohlüberlegt eingeteilt und Akti-
vitäten abgewogen werden (z.B. telefonieren oder Musik hören, aber nicht
beides), um den Vorteil der Mobilität zu erhalten.
• Der Mobile Web User ist völlig neu: Nutzer von mobilen Endgeräten sitzen
nicht zu Hause am Schreibtisch wie Heim-PC Benutzer, sondern bewegen
sich frei, sodass der Standort plötzlich eine Rolle spielt und als Parameter
für Anwendungen genutzt werden kann. Mobile Nutzer sind auch zielgerich-
teter, da Smartphones, etc. eher für ergebnisorientierte Aufgaben - wie etwa
Navigation oder Auskunft - genutzt werden als zum ziellosen Herumsurfen,

5.1 Das Mobile Web
4
zum Teil aus den oben erwähnten Gründen. Hinzu kommt, dass mobile
Nutzer kostenbewusster sind als Heim-PC Nutzer.
• Der Mobile Web Browser ist völlig neu: Mobile Browser haben noch keine
lange Entwicklungsgeschichte hinter sich, so wie "traditionelle" Browser, bei
denen sich eine überschaubare Anzahl an Herstellern etabliert hat. Die Viel-
falt der mobilen Browser ist enorm und ihre "Kinderkrankheiten" erfordern
eine besondere Sensibilität der Programmierer: “Improperly formatted web
pages can have drastic effects on mobile devices, including crashing the
browser or resetting the device.” (Frederick, et al., 2009 S. 4)
Hinzu kommen die technischen Unterschiede, die unter anderem in den verfügba-
ren Ressourcen (Akkuleistung, RAM, Speicherplatz, etc.), der Bildschirmgröße und
den Herausforderungen bezüglich der Bedienung (z.B. Touchscreen-Bedienung
statt Maus und Tastatur) liegen.
Gail Rahn Frederick und Rajesh Lal haben in ihrem Buch "Beginning Smartphone
Web Development" folgende charakteristische Unterschiede des mobilen und des
Desktop-Web festgehalten (Frederick, et al., 2009 S. 6):
Mobile Web Desktop Web
Average Session
Length
2-3 minutes 10-15 minutes
Minimum Screen Size 90x60 800x600
Maximum Screen Size 240x400 for popular devices Unlimited
Browser Vendors 12+ and growing Two with market share over 5%
Browser Bugs Frequent. Permanent, except for
smartphones with updatable
OSes.
Rare and patchable
W3C Standards Spotty. Sometimes ignored or
challenged by mobile industry.
Mature and accepted
Markup Languages WML
CHTML
XHTML Basic
XHTML-MP
XHTML
HTML
XHTML, HTML
JavaScript and AJAX Not on 90% of mobile devices.
Available as ECMAScript-MP
and JavaScript. Document Ob-
ject Model (DOM) and supported
events vary. Proprietary APIs
Usually available

5.2 Mobile App-Entwicklung
5
are common.
Addressable Clients 3 billion mobile subscribers
worldwide
1 billion total notebooks, desk-
tops and servers
Tabelle 1: Unterschiede zwischen mobilem und Desktop-Web
Die oben zusammengefassten Fakten stellen eine Auswahl an Punkten dar, die ein
Programmierer sich bewusst machen sollte, bevor er in die mobile App-Entwicklung
einsteigt. Im folgenden Kapitel werden die Schwerpunkte dieser Problemstellung
näher erläutert.
Der Markt der mobilen Endgeräte unterscheidet sich von dem der Desktop PCs vor
allem dadurch, dass es hier eine deutlich größere Vielfalt an Herstellern von Be-
triebssystemen gibt. So haben sich im Bereich der Desktop PCs etwa Windows,
Mac OS und Linux durchgesetzt, im mobilen Sektor gibt es neben Android, iOS,
Symbian, Palm, Blackberry, etc. eine ganze Palette an verschiedenen Plattformen,
die für Entwickler durchaus nicht zu vernachlässigen sind. Dies liegt unter anderem
daran, dass für jeden Anwendungsbereich - sei es im Business- oder Freizeit- bzw.
Entertainmentsegment - laufend neue Systeme entwickelt werden: “Frequently, the
industry produces multiple platforms that essentially provide the same solutions for
different market segments.” (Allen, et al., 2010 S. 9)
Anwendungen für mobile Endgeräte müssen also plattformübergreifend („cross
platform“) entwickelt werden, um alle potentiellen Kunden erreichen zu können.
Entscheidend dabei sind nicht nur die unterschiedlichen technischen Gegebenhei-
ten der Zielgeräte, sondern auch die jeweils zu beachtenden Programmierkonven-
tionen. Diese beginnen bei der zu nutzenden Programmiersprache (z.B. Java, Ob-
jective C, C#); weiter geht es mit speziellen APIs für die mobile Entwicklung, z.B.
steht das umfangreiche J2EE-Paket nicht zur mobilen Entwicklung zur Verfügung:
“Besides the different languages, the software development kits (SDKs) and para-
digms for developing applications are different across each platform.” (Allen, et al.,
2010 S. 5). Es ergeben sich also Einschränkungen, die der Programmierer beach-
ten und kompensieren muss.
Die Programmiersprachen zur App-Entwicklung unter den wichtigsten mobilen Be-
triebssystemen sind im Folgenden aufgeführt:

6
OS Symbian
RIM
Blackberry
Apple
iPhone
Windows
Mobile
Google
Android
Palm
webOS
Language C++ Java Objective-C C# Java JavaScript
Tabelle 2: Smartphone-Betriebssysteme und –Sprachen (Allen, et al., 2010 S. 5)
Anders als bei der Entwicklung im PC-Segment hat der Entwickler nicht viel Frei-
heit bei der Wahl der Programmiersprache, sondern ist fest an die vom Betriebs-
system vorgegebene gebunden, wenn er sich nicht einschränken will: “While it is
possible to develop using other languages, typically there are drawbacks or limitati-
ons in doing so.” (Allen, et al., 2010 S. 5)
In der Welt der Desktop Computer gibt es die Unterscheidung zwischen Desktop-
Anwendungen und browserbasierten Anwendungen. Bei mobilen Geräten gibt es
analog dazu die Unterscheidung zwischen Web Apps und nativen Apps, die wie
folgt zu definieren ist:
• Eine Web App ist nicht auf dem Smartphone installiert, nicht im Android
Market, App Store, etc. verfügbar und nicht in Java bzw. einer Sprache die-
ser Familie geschrieben. (vgl. Stark, 2010 S. 1)
• Native Apps sind auf dem Gerät installiert. Sie haben Zugriff auf die Hard-
ware, sind in Java, C#, etc. geschrieben und im Android Market, App Store
o.ä. erhältlich. (vgl. Stark, 2010 S. 2)
Eine Web App ist also prinzipiell nichts anderes als eine im Browser geöffnete
Webseite, während native Apps Zugriff auf die Hardware gewähren, was dem Ent-
wickler erlaubt, die Vorteile eines Smartphones gegenüber eines PCs, wie Touch-
screen, Kamera, Positionsbestimmung, usw. voll auszuschöpfen. Leider sind native
Apps aus den zuvor erwähnten Gründen weitaus schwieriger zu entwickeln als
Web Apps, doch es gibt auch Kombinationsmöglichkeiten, die eine angemessene
Lösung darstellen können. So ist es durchaus üblich, die Applikation als Web App
zu gestalten und dann in ein natives Browser-Objekt (UIWebView control) einzubet-
ten, um so die Vorteile der nativen App abzugreifen, sich aber auf die simplere
Entwicklung einer Web App beschränken zu können. Im Folgenden werden einige
Tools diskutiert, die unter anderem dies ermöglichen.
Wie weiter oben erwähnt, hat die Entwicklung mobiler Apps viele Eigenheiten, die
es zu bewältigen gilt. “Where such dramatic challenges exist in developing across
multiple platforms, it is natural for third party cross-platform frameworks to emerge.”

6 PhoneGap
6.1 Hintergrundinformationen
7
(Allen, et al., 2010 S. 5), und eben eine solche Plattform wird im Folgenden be-
trachtet.
6 PhoneGap
6.1 Hintergrundinformationen
PhoneGap ist ein Open Source Projekt und somit privat, kommerziell, sowie in
Kombination beider Anwendungsfälle nutzbar. Ursprünglich entwickelt wurde das
PhoneGap Framework von der Firma Nitobi, die vor kurzem von Adobe aufgekauft
wurde. Allerdings umfasst die Community, die PhoneGap weiterentwickelt und das
Projekt stetig erweitert, inzwischen etliche Kollaborateure, darunter unter anderem
IBM, RIM und Microsoft. Die Community ist offen und transparent und hat das Pro-
jekt PhoneGap im Oktober 2011 der Apache Software Foundation beigesteuert,
sodass die zukünftige Entwicklung als Apache Projekt und unter der Apache Licen-
se, Version 2.0, stattfinden kann. (vgl. Nitobi, 2011)
6.2 Unterstützte Betriebssysteme
Mit PhoneGap lassen sich Apps für folgende mobile Betriebssysteme entwickeln:
Apple iOS, Google Android, Windows Phone 7, Blackberry OS, hp WebOS, Symbi-
an und Bada (Nitobi, 2011).
6.3 Verwendete Programmiersprachen
PhoneGap nutzt leichtgewichtige, web-orientierte Skript- und Markup-Sprachen;
konkret HTML, CSS, und JavaScript. Aktuell sind dies die Versionen HTML5 und
CSS3, welche beide bei weitem noch nicht in vielen Browsern unterstützt werden,
aber bereits jetzt wichtige Standards setzen. Der Entwickler muss sich somit nicht
mit "schwergewichtigen" Sprachen und Frameworks wie PHP, Java / JSF und ASP
/ .NET auseinandersetzen.
6.4 Features
Das Besondere an PhoneGap ist, dass es sich komplett auf offene, etablierte
Standards (HTML, JavaScript und CSS) stützt und PhoneGap Apps somit ebenso
Standard-konform sind; das bedeutet, dass ihre Funktionsfähigkeit in Browsern

6 PhoneGap
6.5 Konkurrenz und Alternativen
8
auch für die Zukunft gesichert ist, und vor allem das Erscheinungsbild einheitlich
ist: “By actually using Web UI controls, the implementation of the user interface can
be created with a single source that renders and behaves appropriately across plat-
forms.” (Allen, et al., 2010 S. 10)
Prinzipiell ist es somit eine Web-Plattform, und es schlägt die Brücke zwischen na-
tiven Apps und Web-Formaten mittels JavaScript ("PhoneGap is a web platform
that exposes native mobile device apis and data to JavaScript." (Nitobi, 2011)).
6.5 Konkurrenz und Alternativen
Natürlich ist PhoneGap nicht das einzige Tool zur mobilen App-Entwicklung auf
dem Markt, auch hier hat sich eine gewisse Vielfalt entwickelt. Im Folgenden wer-
den drei größere Konkurrenten von PhoneGap vorgestellt:
6.5.1 Appcelerator Titanium
Titanium von Appcelerator ist der bekannteste und am weitesten verbreitete Kon-
kurrent von PhoneGap. Wie dieses ist es ein Open Source Projekt und bietet dem
Nutzer die Möglichkeit, Apps mit Web-Sprachen wie Javascript, HTML, CSS, Py-
thon, Ruby, und PHP zu entwickeln (vgl. Appcelerator, 2011). Im Grunde ist die
Funktionalität sehr ähnlich, und die Entscheidung für eines der beiden Tools hängt
bei komplexeren Projekten von deren genauen Anforderungen ab; bei einfachen
Projekten besteht kein relevanter Unterschied.
6.5.2 Red Foundry
Red Foundry ist keine Open Source Lösung, sondern ein kommerzielles Produkt,
bietet aber neben verschiedenen Preisstufen auch ein (eingeschränktes) kostenlo-
ses Modell an. Während es laut der Hersteller-Website auch möglich sein soll,
Apps ohne Code und nur mit Klicks zu erstellen, bietet Red Foundry viele entwick-
lungsbegleitende Services an, wie z.B. einen Online App-Builder, umfangreiche
App Analytics, Push Notification, etc. (vgl. Red Foundry, 2011) – die meisten aller-
dings nur in den kostenpflichtigen Modellen. Obwohl es sich um ein sehr umfang-
reiches und kraftvolles Tool handelt, welches für kommerzielle Projekte durchaus
geeignet ist, kann es preislich natürlich nicht mit den Open Source Lösungen mit-
halten. Hier entscheidet sich die Wahl des Tools also an den vorhandenen finanzi-
ellen Mitteln, bzw. am Bedarf der vielen Extras die Red Foundry zu bieten hat, wel-
che allerdings wohl nur bei großen Projekten sinnvoll sind.

7 Cross-Compiling
7.1 Definition
9
6.5.3 rhomobile
rhomobile war eines der ersten Frameworks für die Entwicklung mobiler Applikatio-
nen und ist ein Open Source Projekt. Es dient zur Entwicklung nativer Apps und
bietet sogar einen Service (RhoHub) zur mobilen Entwicklung in der Cloud (vgl.
Rhomobile, 2011). Für ambitionierte und größere Projekte, die eine echte native
App erfordern, ist rhomobile also geeigneter als Frameworks wie PhoneGap oder
Titanium, die lediglich die Entwicklung von in native Browser-Controls eingebette-
ten Web-Inhalten ermöglichen.
7 Cross-Compiling
7.1 Definition
Ein Cross-Compiler erzeugt Code bzw. ausführbare Dateien für andere Plattformen
als die, auf der er selbst ausgeführt wird. Sinnvoll ist der Einsatz von Cross-
Compilern etwa bei Geräten, auf denen das Kompilieren selbst nicht möglich ist
(z.B. Mikrochips); aber eben auch im Bereich des Mobile Computing, denn kaum
ein Entwickler wird direkt auf einem Smartphone programmieren – aus technischen
und aus ergonomischen Gründen.
Im Prinzip ist Cross-Compiling also die Kernfunktion von PhoneGap, welches diese
mithilfe von Java und JavaScript realisiert. Der Entwickler erstellt eigentlich nur
noch HTML-Inhalte (ggf. zusätzlich mit JavaScript und CSS), während PhoneGap
diese im Hintergrund in eine App einbettet, die auf der Compiler-fremden Plattform
– in diesem Fall Android – installiert werden kann.
7.2 Beispiel: Wordpress Blog auf Android
Für den praktischen Teil der Analyse des Tools PhoneGap soll eine Android App
entwickelt werden, die dem User einen schnellen Überblick über die neusten Posts
eines Wordpress-Blogs verschafft. Als Beispiel wurde der eigene Blog des Autors
(http://twenty-flight-rock.co.uk/) gewählt, die App soll jedoch für Wordpress-Blogs
generell funktionieren. Zielplattform für die Beispiel-App ist Android 2.2, da hierfür
am ehesten ein reales Testgerät zur Verfügung stand.
Der Get Started Guide der PhoneGap Homepage bietet einen guten Ansatzpunkt
für das Projekt, eine "Hello World"-App steht schon nach wenigen Schritten und
ebenso wenigen Minuten.

7 Cross-Compiling
7.2 Beispiel: Wordpress Blog auf Android
10
Zunächst wird eine möglichst aktuelle Version der Entwicklungsumgebung Eclipse
benötigt (die Entwicklung ist auch ohne Eclipse möglich, mit Eclipse ist es jedoch
komfortabler), mindestens Version 3.4; im Folgenden wird die aktuelle Version E-
clipse Indigo verwendet. Eclipse muss nun durch das Android Development Tools
(ADT) Plug-In erweitert werden, ebenso ist eine Installation des Android Software
Development Kit (SDK) nötig, beides ist ohne viel Aufwand und detaillierte Kennt-
nisse schnell erledigt.
Es folgt die Installation von PhoneGap selbst. Im Projekt wird die aktuelle Version
1.3.0 verwendet. Das Archiv enthält sieben Ordner für die jeweiligen Plattformen;
der Inhalt des Android-Ordners besteht im Wesentlichen aus einer JAR- und einer
JavaScript-Datei, die manuell in das Projektverzeichnis kopiert werden müssen (die
JAR-Datei in den Ordner /libs und die JS-Datei in den Ordner assets/www/, welcher
die Web-Ressourcen des Projekts enthält). Es folgen einige Anpassungen an der
Projekt-Datei AndroidManifest.xml sowie der Hauptklasse der Applikation (in die-
sem Fall nicht Main.java sondern App.java) um aus dem Standard Android-Projekt
ein PhoneGap-Projekt zu machen. Mehr ist nicht nötig, um die Cross Compiling
Funktion von PhoneGap zu nutzen.
Durch die Installation des ADT Plug-Ins kann in Eclipse ein Projekt vom Typ Andro-
id Projekt erstellt werden, welches bereits eine index.html Datei im Verzeichnis as-
sets/www/ enthält, die den Startpunkt beim späteren Aufrufen der App bildet. Der
PhoneGap Get Started Guide fährt nun mit dem Einfügen von HTML-Quelltext zum
Anzeigen von "Hello World" fort, stattdessen soll aber der Inhalt des Blogs ange-
zeigt werden. Dazu wird der von Wordpress automatisch generierte RSS Feed
(http://twenty-flight-rock.co.uk/feed/) genutzt, der mit JavaScript über ein AJAX-
Request ausgelesen und in ein DIV innerhalb der index.html geschrieben wird (als
Basis dazu wurde ein AJAX-Script genutzt, das auf http://www.daniweb.com/web-
development/javascript-dhtml-ajax/threads/192183 gepostet wurde. Dieses Script
wurde für die Zwecke der App modifziert.). Da die Funktion, die den Inhalt des
Feeds in den Quelltext schreibt, die Funktion getElementsByTagName nutzt, um
durch die XML-Struktur zu navigieren und Inhalte auszulesen, kann so prinzipiell
jede XML- oder XHTML-Seite ausgelesen werden, es muss also nicht zwingend ein
RSS Feed sein. Um zu gewährleisten, dass die App für jeden Blog funktioniert, der
RSS Feeds unterstützt, ist es an dieser Stelle jedoch sinnvoller eben darauf zu-
rückzugreifen. Steht kein Feed zur Verfügung, muss der Quelltext der App indivi-
duell auf die auszulesende Webseite angepasst werden.

8 Fazit
7.3 Ergänzung
11
Das ADT Plug-In stellt dem Entwickler die Nutzung von Android Virtual Devices
(AVD) zur Verfügung, in denen Apps getestet werden können. Es können ver-
schiedene Android Versionen und Geräte-Typen (sowohl Smartphones als Tablets)
simuliert werden, Systemparameter und Hardware-Eigenschaften wie Bildschirm-
auflösung oder Arbeitsspeicher können ebenso festgelegt werden. Für die Ausfüh-
rung auf einem realen Android Gerät kann das Projekt in Eclipse als ausführbare
.apk-Datei exportiert werden. Dazu wird es mit dem Keystore (ein Depot von Si-
cherheitszertifikaten) debug.keystore signiert, da es sich nur um eine Testanwen-
dung und nicht um ein kommerzielles Projekt für den Android Market handelt.
Die Ausgabe der Wordpress-Blog-App (nach Hinzufügen einiger CSS Formatierun-
gen) im AVD ist in Abbildung 1 zu sehen, die ausgeführte . apk-Datei im Smartpho-
ne Samsung Galaxy S I9000 in Abbildung 2; der Quelltext dazu ist im Anhang ver-
merkt.
7.3 Ergänzung
Diese Beispiel-App ist angesichts des geringen Projektumfangs recht oberflächlich.
Es werden lediglich bereits veröffentlichte Inhalte aus dem Web gezogen und um-
formatiert, was angesichts des gesteckten Ziels durchaus ausreichend ist. In die-
sem Fall wäre eine reine Web-App, deren Inhalte direkt auf dem Server mobil-
gerecht formatiert werden, sinnvoller (da es sich hier jedoch nur um ein methodi-
sches Beispiel handelt, kann darüber hinweggesehen werden). Im Fall von Word-
press gibt es eine ganze Reihe an Plug-Ins, die eine mobil-gerechte Form der Blog-
Ausgabe ermöglichen. Allgemeiner formuliert wäre die naheliegendste Alternative
zur Umformatierung bestehender Inhalte mit PhoneGap die Nutzung von direkt im
das Content Management angebotenen Tools.
8 Fazit
8.1 Zusammenfassung
Der kurze Ausflug in die Welt der mobilen App-Entwicklung hat gezeigt, dass eine
oberflächliche und funktional durchaus ausreichende Lösung hinsichtlich Cross
Media Publishing schnell zusammengestellt ist. Ganzheitliche und umfassendere
Ansätze allerdings erfordern verglichen mit entsprechenden Desktop-Applikationen
einen erheblich höheren Aufwand und stellen den Programmierer vor komplexe

9 Literaturverzeichnis
8.2 Ausblick
12
Problematiken. Dennoch ist das Erreichen und Zufriedenstellen der mobilen Nutzer
essentiell im Schritthalten mit der technischen Entwicklung, denn "Wer nicht mit der
Zeit geht, geht mit der Zeit" (F. Schiller). Unternehmen, vor allem jedoch Informati-
onsdienste sowie Anbieter medialer Online-Inhalte, sollten sich also definitiv der
Herausforderung stellen, ihren Kunden bzw. Nutzern diese Inhalte in einer dem
technischen Stand der Zeit entsprechenden Form darzubieten.
8.2 Ausblick
In Zukunft wird das mobile Web sicherlich weiter an Bedeutung im Alltag wie in der
Business-Welt gewinnen und es werden weitere interessante Entwicklungen statt-
finden. Allgemein betrachtet wird wahrscheinlich vor allem die Vielfalt an internetfä-
higen Endgeräten und auch an Darstellungsformaten steigen, wodurch das Pro-
zessfeld des Cross Media Publishing zunehmend ins Mittelfeld des Bereiches Con-
tent Management rücken wird. Ausgehend vom Prinzip der Trennung von Inhalt
und Darstellung scheint der Trend weiter in Richtung der Aufspaltung und Differen-
zierung der Darstellung in verschiedene Ausgabeformen zu gehen, um eben dieser
Vielfalt gerecht zu werden.
9 Literaturverzeichnis
Allen, Sarah, Graupera, Vidal and Lundrigan, Lee. 2010. Pro Smartphone Cross-Platform
Development: IPhone, Blackberry, Windows Mobile and Android Development and
Distribution. New York : Apress, 2010. ISBN: 1430228687.
Appcelerator. 2011. Appcelerator Titanium. http://www.appcelerator.com/. [Online]
Appcelerator Inc., 2011. [Cited: 12 26, 2011.]
Frederick, Gail Rahn and Lal, Rajesh. 2009. Beginning Smartphone Web Development:
Building Javascript, CSS, HTML and Ajax-Based Applications for IPhone, Android, Palm
Pre, Blackberry, Windows Mobile and Nokia S60. New York : Apress, 2009. ISBN:
143022620X.
Nitobi. 2011. PhoneGap. http://www.phonegap.com. [Online] Adobe Systems Inc., 2011. [Cited:
12 25, 2011.]
Red Foundry. 2011. Red Foundry. http://www.redfoundry.com/. [Online] Red Foundry Inc.,
2011. [Cited: 12 26, 2011.]
Rhomobile, Inc. 2011. Rhomobile. http://rhomobile.com/. [Online] Motorola Solutions, 2011.
[Cited: 12 26, 2011.]
Stark, Jonathan. 2010. Building Android Apps with HTML, CSS, and JavaScript. Sebastopol,
CA : O'Reilly Media, 2010. ISBN: 1449383262.

10 Ehrenwörtliche Erklärung
8.2 Ausblick
13
10 Ehrenwörtliche Erklärung
Hiermit versichere ich, dass die vorliegende Arbeit von mir selbstständig und ohne
unerlaubte Hilfe angefertigt worden ist, insbesondere dass ich alle Stellen, die wört-
lich oder annähernd wörtlich aus Veröffentlichungen entnommen sind, durch Zitate
als solche gekennzeichnet habe. Ich versichere auch, dass die von mir eingereich-
te schriftliche Version mit der digitalen Version übereinstimmt. Weiterhin erkläre
ich, dass die Arbeit in gleicher oder ähnlicher Form noch keiner anderen Prüfungs-
behörde vorgelegen hat. Ich erkläre mich damit nicht einverstanden, dass die Ar-
beit der Öffentlichkeit zugänglich gemacht wird. Ich erkläre mich damit einverstan-
den, dass die Digitalversion dieser Arbeit zwecks Plagiatsprüfung auf die Server
externer Anbieter hoch geladen werden darf. Die Plagiatsprüfung stellt keine Zur-
verfügungstellung für die Öffentlichkeit dar.
Ratingen, den 09.01.2012
(Ort, Datum) (Eigenhändige Unterschrift)

11 Anhang
11.1 PhoneGap Features
14
11 Anhang
11.1 PhoneGap Features
iPhone/
iPhone3G
iPhone3GS
andnewer
Android
Blackberry
OS4.6-4.7
Blackberry
OS5.x
Blackberry
OS6.0+
hpWebOS
Windows
Phone7
Symbian
Bada
Accelerometer
Camera
Compass
Contacts
File
Geolocation
Media
Network
Notification
(alert)
Notification
(sound)
Storage
Tabelle 3: Supported Features (Nitobi, 2011)

11 Anhang
11.2 Beispiel-App im ADV und Samsung Galaxy
15
Abbildung 1: Die Beispiel-App im Android Virtual Device

11 Anhang
16
Abbildung 2: Die Beispiel-App im SAMSUNG Galaxy S I9000

11 Anhang
11.3 Quelltext index.html der Beispiel-App
17
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Test Page</title>
<style type="text/css">
html,body {
background-color: black;
border: none;
color: white;
font-family: "Trebuchet MS", Trebuchet, Verdana, Sans-Serif;
height: auto;
min-height: 380px;
min-width: 240px;
text-align: center;
vertical-align: baseline;
width: auto;
-moz-border-radius: 6px;
-khtml-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
input label {
display: block;
}
input {
margin-top: .200em;
}
h2 {
border-bottom: 1px solid #708090;
border-top: 1px solid #708090;
font-family: "Trebuchet MS", Trebuchet, Verdana, Sans-Serif;
font-size: 12pt;
text-shadow: 2px 1px 3px #333333;
line-height: 2ex;
margin-top: 3em;
min-height: 2ex;
padding: 1em;
white-space: nowrap;
border-radius: 6px;
line-height: 2ex;
background: rgb(184, 225, 252); /* Old browsers */
background: -moz-linear-gradient(top, rgba(184, 225, 252, 1) 0%,
rgba(169, 210, 243, 1) 10%, rgba(144, 186, 228, 1) 25%,
rgba(144, 188, 234, 1) 37%, rgba(144, 191, 240, 1) 50%,
rgba(107, 168, 229, 1) 51%, rgba(162, 218, 245, 1) 83%,
rgba(189, 243, 253, 1) 100% ); /* FF3.6+ */

11 Anhang
18
background: -webkit-gradient(linear, left top, left bottom, col-
or-stop(0%, rgba(184,
225, 252, 1) ), color-stop(10%, rgba(169, 210, 243, 1) ),
color-stop(25%, rgba(144, 186, 228, 1) ),
color-stop(37%, rgba(144, 188, 234, 1) ),
color-stop(50%, rgba(144, 191, 240, 1) ),
color-stop(51%, rgba(107, 168, 229, 1) ),
color-stop(83%, rgba(162, 218, 245, 1) ),
color-stop(100%, rgba(189, 243, 253, 1) ) ); /*
Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(184, 225, 252, 1)
0%,
rgba(169, 210, 243, 1) 10%, rgba(144, 186, 228, 1) 25%,
rgba(144, 188, 234, 1) 37%, rgba(144, 191, 240, 1) 50%,
rgba(107, 168, 229, 1) 51%, rgba(162, 218, 245, 1) 83%,
rgba(189, 243, 253, 1) 100% ); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(184, 225, 252, 1) 0%,
rgba(169, 210, 243, 1) 10%, rgba(144, 186, 228, 1) 25%,
rgba(144, 188, 234, 1) 37%, rgba(144, 191, 240, 1) 50%,
rgba(107, 168, 229, 1) 51%, rgba(162, 218, 245, 1) 83%,
rgba(189, 243, 253, 1) 100% ); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(184, 225, 252, 1) 0%,
rgba(169, 210, 243, 1) 10%, rgba(144, 186, 228, 1) 25%,
rgba(144, 188, 234, 1) 37%, rgba(144, 191, 240, 1) 50%,
rgba(107, 168, 229, 1) 51%, rgba(162, 218, 245, 1) 83%,
rgba(189, 243, 253, 1) 100% ); /* IE10+ */
background: linear-gradient(top, rgba(184, 225, 252, 1) 0%,
rgba(169, 210, 243, 1) 10%, rgba(144, 186, 228, 1) 25%,
rgba(144, 188, 234, 1) 37%, rgba(144, 191, 240, 1) 50%,
rgba(107, 168, 229, 1) 51%, rgba(162, 218, 245, 1) 83%,
rgba(189, 243, 253, 1) 100% ); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#b8e1fc',
endColorstr='#bdf3fd', GradientType=0 ); /* IE6-9 */
}
a:link {
color: #9ad;
text-decoration: none;
}
a:visited {
color: #9ad;
text-decoration: none;
}
a:active,a:hover {
color: #9ad;
text-decoration: underline;
}
div {
border: none;
margin: 0%;
padding: 0%;
}
div#main {
margin: 0% auto;
text-align: left;
height: 90%;
width: 98%;

11 Anhang
19
border-radius: 6px;
}
div.tube {
border: 2px solid #ccc;
margin: 1% auto 1% auto;
padding: 1.200em;
border-radius: 6px;
}
div#blog-header {
border-radius: 6px;
background-color: #535252;
background-image:
url(http://twenty-flight-
rock.co.uk/graphics/header_app.jpg);
}
h2#blog-title {
margin: auto;
text-align: center;
font: bold 13pt 'Trebuchet MS', Trebuchet, Verdana, Sans-serif;
letter-spacing: 0.2em;
text-transform: uppercase;
text-shadow: 4px 3px 5px #333;
border: 0px none;
border-bottom: 2px solid #2f2f2f;
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.65) 0%,
rgba(0, 0, 0, 0) 100% ); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, col-
or-stop(0%, rgba(0, 0
, 0, 0.65) ), color-stop(100%, rgba(0, 0, 0, 0) ) );
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.65) 0%,
rgba(0, 0, 0, 0) 100% ); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0, 0, 0, 0.65) 0%,
rgba(0, 0, 0, 0) 100% ); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.65) 0%,
rgba(0, 0, 0, 0) 100% ); /* IE10+ */
background: linear-gradient(top, rgba(0, 0, 0, 0.65) 0%,
rgba(0, 0, 0, 0) 100% ); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColor-
str='#a6000000',
endColorstr='#00000000', GradientType=0 ); /* IE6-9 */
}
div#blog-description {
border-radius: 6px;
font-size: 10pt;
padding: 10px;
background-color: #535252;
border-top: 1px solid #535252;
}

11 Anhang
20
a.link-title:link {
color: #fff;
}
a.link-title:visited {
color: #fff;
}
a.link-title:active, a.link-title:hover {
color: #fff;
}
</style>
<script type="text/javascript">
var loadRSSFeeds, getRSSFeeds;
var rssData;
getRSSFeeds = function() {
if ((rssData.readyState === 4) || (rssData.readyState ===
"complete")) {
div = ((document.getElementById) ? document
.getElementById("content") : docu-
ment.all.content);
feeds = rssDa-
ta.responseXML.getElementsByTagName("rss")[0];
tnodes = "";
tnodes += "<div id='blog-header'><h2 id='blog-
title'>"
+
feeds.getElementsByTagName("title")[0].childNodes[0].nodeValue
+ "</h2>n";
tnodes += "<div id='blog-description'>"
+
feeds.getElementsByTagName("description")[0].childNodes[0].nodeValue
+ "</div></div><br />n";
tnodes += "Latest posts:";
for ( var x = 1; x < 10; x++) {
tnodes += "<a class='link-title'
href='"+feeds.getElementsByTagName("link")[x].childNodes[0].nodeValue+
"'><h2>"
+
feeds.getElementsByTagName("title")[x].childNodes[0].nodeValue
+ "</h2></a>n";
tnodes += "<div>"
+
feeds.getElementsByTagName("description")[x].childNodes[0].nodeValue
+ "<br /></div>n";
}
div.innerHTML = tnodes;
}
};
rssData = null;
if (window.XMLHttpRequest) {
rssData = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
rssData = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
rssData = new ActiveXObject("Msxml2.XMLHTTP");
}
}

11 Anhang
21
if (rssData !== null) {
rssData.onreadystatechange = getRSSFeeds;
rssData.open("GET", "http://twenty-flight-
rock.co.uk/feed/", true);
rssData.send(null);
} else {
alert("nYour browser does not support AJAX Request!");
}
</script>
</head>
<body>
<div id="main">
<div class="tube">
<div id="content"></div>
</div>
</div>
</body>
</html>

Cross Platform Development und Cross Compiling mit PhoneGap

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Cross Platform Development und Cross Compiling mit PhoneGap

Ähnlich wie Cross Platform Development und Cross Compiling mit PhoneGap (20)

Cross Platform Development und Cross Compiling mit PhoneGap