smart developer Ein Code für alle (Vorschau)

DVD
Mit DVD: SDKs für Android,
Bada, MeeGo, Qt und Symbian!
Bada: Wave II im TEst,
Die Eigene App mit
Gesichtserkennung
Alles zum Thema mobile betriebssysteme
neues magazin!
Ein Code
für alle
Programmieren Sie plattformunabhängig
mit html5 & Co.
HTML5-Apps mit PhoneGap und Jo
Monkey Coder für Android und iOS
Enterprise Generation Language
Praxis
MeeGo-Entwicklung
Meistern Sie die ersten
Schritte für Ihre MeeGo-App
Workshop
WP7-Spiele
So entwickeln Sie Games für
Windows Phone 7 mit XNA
im test
Ideos X5
Günstiger Android-
Allrounder von Huawei
Entwicklung
Android-Workshops: Nützliche Tools
und Programmieren mit BRisa UPnP
www.smart-developer.DE
IM TEST
Dell Venue Pro
WP7-Phone mit Tastatur
Open-GL ES
Schreiben Sie mit OpenGL ES und
unserem Workshop coole 3D-Apps
für Android-Smartphones
5 SDKs
auf DVD
Filesharing
mit dem iPad
So nutzen Sie das
Filesharing-Feature
unter iOS von Apple
Benchmarks
Acht Benchmark-
Programme für
Android und iOS,
die Sie kennen sollten
Desire HD
Android-
Handy mit
riesigem
Display
ActionScript
Programmieren Sie
Ihre erste App fürs
BlackBerry PlayBook
02 / 2011
Deutschland EUR 7,90
A EUR 8,70 - BeNeLux EUR 9,25
CH sfr 15,80 - E / I EUR 10,25
4 192182 907904 02

Virtualisierung
Die besten Virtualisierer und die
Features ihrer Produkte im Vergleich:
• VMware
• Hyper-V
• Oracle VM
• Citrix Xen Server
• Qemu
• ConVirt
• OpenQRM
• Red Hats RHEV
• KVM
• Novell
• Proxmox
Große
Technical Review
Marktstudie
Powered by
www.admin-magazin.de
ADMIN
Netzwerk & Security
© Dmitry Sunagatov, Fotolia.und Diego Alíes, 123RF
Mehr als
500 Stunden
Recherche, Tests
und Vergleiche
für nur
98 Euro
und andere
Leseprobe mit 10 Seiten unter
www.admin-magazin.de/tr-studie

Service
Editorial
Marcel Hilzinger,
Chefredakteur
Willkommen bei Smart Developer
Friedliche
Coexistenz
Sehr geehrte Leserinnen und Leser,
vor gut drei Monaten schrieb ich mein erstes
Editorial für Smart Developer zum Thema
Tablets, Apple und Android. Rückblickend
lässt sich daraus ein Schluss ziehen: Der
Smartphone-Markt ist unheimlich spannend!
In den vergangenen Monaten hat unter anderem
Microsoft Skype übernommen und sich
mit Nokia zusammengeschlossen, sich das
Xoom als Ladenhüter herausgestellt und RIM
endlich sein PlayBook zum Verkauf freigegeben.
Google hat zudem seinen Musikdienst
gestartet und will in Zukunft
mit den großen Telcos und
Hardware-Anbietern für eine
einheitlichere Android-Plattform
sorgen.
Als Smartphone-Fan findet
man das alles ganz toll und
spannend, schließlich tut
sich etwas. Als Entwickler
stellt sich hingegen die
Frage: wo investieren, welche
Plattform und welche
Technik wird sich durchsetzen?
Glaubt man den Schätzungen einiger Analysten,
dann wird – neben dem aktuell dominanten
Android – Windows Phone 7 der
große Aufsteiger der kommenden 12 bis 24
Monate [1]. Doch sieht man sich Statistiken
der gleichen Analysten vom vergangenen
Jahr an, dann zeigt sich schnell, was solche
Langzeitprognosen taugen.
Welche Technik?
Auch bei den Frameworks stellt sich die
Frage nach dem Wohin: soll man sich auf
eine oder zwei Plattformen konzentrieren
und dafür native Apps entwickeln oder doch
lieber einen plattformunabhängigen Ansatz
wählen? Einige mögliche Antworten darauf
gibt ihnen der aktuelle Schwerpunkt im Heft.
Besonders spannend finde ich das Phone-
Gap-Projekt, da es native und HTML5-Anwendungen
unterstützt.
Haben Sie sich bis jetzt auf eine Plattform
konzentriert, dann werfen Sie doch mal
einen Blick auf unsere Workshops zu Android,
Bada, Windows Phone 7 und webOS.
Gerade bei den Mauerblümchen Bada und
webOS könnte sich in Naher Zukunft einiges
tun, da bei Samsung der Sprung auf Bada 2.0
ansteht und HP mit
„Dem Nutzer
ist es egal,
ob eine App
nativ oder in
HTML5 ist!“
webOS 3.0 als zusätzlicher
Player in
den Tablet-Market
einsteigt. Bei den
noch relativ jungen
mobilen Betriebssystemen
genießen Sie
als Entwickler
zudem den Vorteil,
dass der Nutzer sich
nicht zwischen Hunderten
von Anwendungen entscheiden muss,
sondern vielleicht nur Sie eine App für den
gewünschten Zweck bereitstellen. Stimmt die
Qualität, dann dürfen Sie für die App auch
ruhig ein paar Euro verlangen.
Nun wünsche ich gute Unterhaltung mit
der aktuellen Ausgabe von Smart Deve loper
und hoffe, dass Sie das Heft nützlich finden.
Möchten Sie Smart Developer regelmäßig
lesen, dann empfehle ich Ihnen unser Jahresabo
für 27 Euro oder für 24 Euro als PDF:
http:// www. smart‐developer. de/ Abo
Mit smarten Grüßen,
Marcel Hilzinger
Infos
[1] Marcel Hilzinger:
„Widersprüchliche Zahlen –
Analysten legen Schätzungen
zum Smartphone-Markt
2015 vor“,
http:// www. smart‐developer.​
de/ Online/ News/​
Widerspruechliche‐Zahlen
smart-developer.de 02/2011 3

Smart Developer
Inhalt
Mobile Entwicklung und Trends
38
Wave II: Das
Samsung-Handy
tritt in die Fußstapfen des
bisher erfolgreichsten Bada-
Smartphones.
Service
3 Editorial
6 News
98 Impressum und
Vorschau
12
HTML5: Mit Jo und
PhoneGap entwickeln
Sie HTML5-Anwendungen für
Android, iOS und weitere
Plattformen.
Schwerpunkt
12 Jo & PhoneGap
HTML5-Programmierung mit
nativer Code-Unterstützung.
20 Monkey Coder
Die neue Programmiersprache
sorgt für plattformübergreifende
Anwendungen.
24 Mobile Grundlagen
Diese Tipps sollten Entwickler
mobiler Apps beachten.
28 EGL von IBM
Auch Großrechner mögen
Smartphones dank EGL.
Hardware
32 Dell Venue Pro
Wie gut ist das Windows Phone 7?
34 Motorola Defy
Kann das Android-Handy wirklich so
viel einstecken?
36 Huawei Ideos X5
Günstiges Mittelklasse-Smartphone
von Huawei mit Android 2.2.1.
37 Desire HD
Echt großes
Display.
38 Wave II
Das neue
Bada-Handy
von Samsung
4
02/2011 smart-developer.de

Smart Developer
72
ActionScript: Mit
der Programmiersprache
von Adobe
schreiben Sie schnell Apps
für das PlayBook.
Inhalt
24
Für alle: So machen
Sie Ihre App für alle
Plattformen fit.
20 Monkey:
Die plattformunabhängige
Sprache
macht HTML5, C++, C#,
Java und mehr.
Praxis
40 iPad-Apps für Sysadmins
Diese fünf Tools erleichtern Ihre
Arbeit auf dem iPad.
44 Gmote-Fernbedienung
Steuern Sie Ihren PC mit Android.
47 MeeGo-Einführung
So funktioniert das MeeGo-Projekt
und die MeeGo-Software.
50 BRisa UPnP
Einstieg in die UPnP-
Programmierung mit Qt.
Entwicklung
54 iOS-Filesharing
So tauschen Sie Dateien zwischen
iTunes und einem iPad aus.
60 Windows-Phone-7-Spiele
Einsteigerworkshop zur WP7-Entwicklung
mit XNA.
Entwicklung
66 Bada-Gesichtserkennung
So setzen Sie die Face-Recognition-Funktion
des SDK ein.
72 PlayBook-Programmierung
Einstieg in ActionScript.
78 WebOS Ares
Programmieren im Browser.
84 Android und OpenGL ES
Die ersten Schritte in 3D.
90 Android-Werkzeuge
Tools jenseits des offiziellen SDKs
Power User
94 WebOS 2.1
Die Neuerungen von webOS 2.1,
so funktioniert das Upgrade.
96 Benchmarks
Mit diesen Programmen messen
Sie die Smartphone-Leistung
Wichtige
Information!
Auf der DVD
Aufgrund eines verlagsinternen
Produktionsfehlers stimmen die
Angaben auf dem DVD-Label
nicht mit dem Inhalt der DVD
überein. Insbesondere fehlt das
auf dem DVD-Label angekündigte
Java-OpenBook vom Galileo-Verlag.
Wir liefern das Buch auf der
Heft-DVD von Smart Developer
03/2011 nach.
Folgende SDKs finden Sie auf der
DVD: Android Level 10 und 11,
Bada 1.2, MeeGo 1.2, Qt-Nokia
1.0.2, Symbian^3 v09
smart-developer.de 02/2011 5

NEWS
Aktuelles
Mobile
News
higyou, 123RF
Xoom startet in den
USA verhalten
Android Ice Cream
Sandwich
motorola.com
Das erste Android-Tablet mit Android 3.0
ist seit Ende April nun auch in Deutschland
erhältlich, im Mai soll ein Update auf Version
3.1 folgen. Zunächst gibt es das Xoom
in der 3G-Version exklusiv
bei der deutschen
Telekom, ab
August sollen es auch
andere Händler anbieten
dürfen. Laut Motorola
hat man vom
10-Zoll-Tablet in den
USA rund 250 000
Stück verkauft, Zahlen
aus Europa liegen
noch keine vor. Inzwischen
haben auch
Das Xoom legte in den USA einen eher verhaltenen Start hin Sony Ericsson und
und ist jetzt auch in Europa verfügbar.
HTC ihre Pläne für 10-
Zoll-Android-Tablets
angekündigt, andere Hersteller wie Acer
und Asus sind bereits mit entsprechenden
Geräten auf dem asiatischen Markt.
Wie bereits angekündigt will Google die
Codebasis von Android 2.x und 3.x wieder
zusammenführen, um für eine einheitliche
Plattform zu sorgen. Auf der Hausmesse
Google I/O hat man nun den Codenamen
der nächsten großen Android-Version bekanntgegeben:
Ice Cream Sandwich. Über
die geplanten Features gibt es noch keine
Infos, das Release ist für Q4 geplant.
Die nächste größere Android-Version trägt den
Codenamen Ice Cream Sandwich.
Facebook macht mobil
Jeder dritte Beitrag auf Facebook
stammt mittlerweile von mobilen
Endgeräten, zeigt eine aktuelle Analyse
von 70.000 Datensätzen durch
Hubspot-Mitarbeiter Dan Zarrella,
einem der führenden Social-Media-
Experten in den USA. Der untersuchte
Datensatz umfasste dabei einfache
Statusmeldungen und geteilte
Links, Fotos und Videos. Bei der mobilen
Nutzung führend ist die mobile
Website m. facebook. com, die für
18,78 Prozent aller Beiträge genutzt
wurde. Die Facebook-Apps für Android,
iPhone und Blackberry kommen
auf jeweils über 4 Prozent. Insgesamt
wurden 32,69 Prozent der
Beiträge mobil veröffentlicht.
Dass Social Media ein wichtiger
Wachstumstreiber des Mobile Webs
ist, zeigt auch eine aktuelle Studie
von Comscore: In England wuchs die
Zahl der Menschen, die täglich Social
Media mit ihren Smartphones oder
Tablets nutzen, binnen eines Jahres
um 80 Prozent auf 7,9 Mio.
Buchtipp
Unter dem Titel HTML5-
Apps für iPhone und Android
haben Markus Spiering
und Sven Haiges beim
Franzis-Verlag ein umfassendes
Handbuch zur mobilen
Entwicklung mit
HTML5, JavaScript und
PhoneGap für die plattformübergreifende
Entwicklung veröffentlicht. Das Buch
umfasst rund 350 Seiten, enthält zahlreiche
Schwarz-Weiß-Abbildungen und kostet 30
Euro. Eine Download-Version für 20 Euro ist
ebenfalls verfügbar.
6 02/2011 smart-developer.de
powered by

NEWS
Aktuelles
Sony Ericsson
Neue Xperia Minis von Sony Ericsson
Sony Ericsson legt seine Androiden
Xperia Mini und Xperia Mini
Pro neu auf: Sie enthalten nun Android
2.3, eine HD-Kamera mit 5
Megapixeln und einen 1 Gigahertz-Prozessor.
Zugleich haben
sie nur Scheckkartengröße und
sind damit die kleinsten Smartphones
der Welt.
Sieht gleich aus wie der Vorgänger, bringt
aber deutlich mehr Leistung mit: das neue
Xperia Mini Pro.
Gratis Windows-Phone-7-Workshops
Microsoft verlängert seine Workshops für angehende Windows-Phone-7-Programmierer
mit vier neuen Workshops im Juni. Für Interessierte stehen in
Bad Homburg, Unterschleißheim, Köln und Hamburg je 150 Plätze bereit. Die
Teilnahme ist gratis, allerdings bei Firmen auf zwei Personen pro Unternehmen
beschränkt. Detaillierte Informationen zu den Terminen und zum Programm
gibt es unter http://bit.ly/kUXcDR.
Location-based
Services boomen
Locationgate hin oder her: Das Geschäft
mit den standortbasierten Diensten läuft
gut. Location-based Services (LBS) werden
für immer mehr Werbungtreibende und
Einzelhändler relevanter, das zeigen gleich
zwei frische Meldungen: Zum einen nutzt
bereits jeder fünfte Werbekunde von Madvertise
die Möglichkeit, mittels Orts-Targeting
gezielt bestimmte Nutzer des Mobile
Web anzusprechen. Zum anderen zeigt die
Managementberatung Mücke, Sturm &
Company in einer Studie, dass Locationbased
Services die Lücke zwischen E-Commerce
und stationärem Handel schließen
können. Bei dem mobilen Werbenetzwerk
von Madvertise ist die Nachfrage nach Location-based
Advertising (LBA) bei Werbekunden
allein in den vergangenen drei Monaten
um 50 Prozent gestiegen, unter anderem
haben MyTaxi und die E-Plus Tochter
Gettings dort bereits entsprechend ausgestattete
Kampagnen gebucht.
1. Lernen Sie!
Ja, „training-on-the-job“, oft praktiziert, aber nicht
überzeugend. Denn die Kollegen haben nie Zeit
für echte Erklärungen, außerdem werden „Neue“
sofort von dem vereinnahmt, was im Unternehmen
schon seit Ewigkeiten tradiert wird. Warum gibt's
seit 2000 Jahren Schulen und Universitäten?
„LERNEN“ ist eine vollwertige Tätigkeit, auf die
man sich konzentrieren muß, die man nicht 'mal
eben so nebenbei tun kann, und die immer auch
eine Prise „Erneuerung“ beinhalten sollte!
2. Ineffiziente Arbeit nicht akzeptieren!
Je spezialisierter Sie arbeiten, desto weniger
echte, fachliche Kollegen haben Sie in Ihrem eigenen
Unternehmen. Wir stellen deshalb Gruppen
zusammen, in denen Sie neben hilfsbereiten
Kollegen mit ähnlichen Kenntnissen an IHREM
Projekt arbeiten. Und ständig ist ein fachlicher Berater
anwesend.
„Guided Coworking“ nennen wir das, und es
könnte DIE Lösung für so manches Projekt sein,
das in Ihrer Firma „hakt“.
3. Hintergrund
Wer den riesigen OpenSource-Baukasten schnell
beherrschen muß, geht zu einer unserer über 100
Schulungen. Wer das bereits kann, aber schneller
mit seinen Projekten vorankommen will, der
kommt mit seiner Arbeit zum Guided Coworking.
Wir sind eine der erfolgreichsten Schulungseinrichtungen
im gesamten Bereich „OpenSource“
- sowohl für Admins, als auch für Entwickler.
Siehe www.linuxhotel.de
powered by:
smart-developer.de 02/2011 7

NEWS
Aktuelles
iPhone 4 nun auch in Weiß
Nachdem die Gerüchte schon lange ein weißes iPhone voraussagten,
stellte Apple im Mai das helle iPhone ohne große Ankündigung
vor. Angeblich traten bei der Produktion des hellen Gehäuses
Probleme mit der Kamera und dem Lichtsensor auf, wodurch
sich die Auslieferung verzögerte. Einigen Berichten im Internet
zufolge, soll Apple aber auch das Design angepasst haben,
um die Empfangsprobleme, die bei den ersten iPhone-4-Modellen
auftraten, zu verhindern. Das weiße iPhone kostet bei Apple in
der 16- GByte-Variante 629 Euro, die 32-GByte-Version schlägt mit
739 Euro zu Buche. Somit unterscheiden sich die Preise nicht vom
schwarzen iPhone.
Beim weißen iPhone 4 hat sich nicht nur die Farbe geändert.
Neue BlackBerrys mit BB OS 7.0
Nokia baut ab
rim.com
RIM hat auf seiner Hausmesse BlackBerry World in Orlando zwei
neue Smartphones mit der neuen BlackBerry-Version OS 7.0
vorgestellt. Beim neuen Bold-Flaggschiff 9900 (bzw. 9930 mit
CDMA-Support) kommt ein 1,2 GHz schneller Single-Core-Prozessor
zum Einsatz, das Gerät verfügt zudem über 8 GByte internen
Speicher und NFC-Fähigkeiten. Der 2,8-Zoll-Touchscreen
löst weiterhin mit 640 x 480 Pixeln auf, soll sich aber
durch eine Liquid-Graphics-Technik deutlich besser bedienen
lassen. Obwohl das neue BlackBerry OS auf den ersten
Blick wie der Vorgänger aussieht, soll sich unter der
Haube einiges geändert haben. Benutzer aktueller Black-
Berry-Geräte müssen auf OS 7.0 verzichten, da ein Upgrade
von BB OS 6 auf OS 7.0 nicht geplant sei.
RIM legt den klassischen BlackBerry mit einer neuen OS-Version
und einem verbesserten Display neu auf.
Nokias Konzernumbau und Schwenk
auf Windows Phone 7 kostet weitere
2.000 Menschen ihren Arbeitsplatz: Die
Programmierer für Symbian und
MeeGo sind bislang bei Subunternehmern
wie Tieto, Digia und Ixonos beschäftigt.
Damit verlieren insgesamt
6.000 Menschen ihre Jobs. Gleichzeitig
müssen die Finnen den Handy-Thron
in Europa an Samsung abgeben. Die
Koreaner verkauften im abgelaufenen
Quartal auf dem alten Kontinent erstmals
mehr Mobiltelefone als die Finnen,
so Marktforscher IDC. Demnach
kam Samsung auf 29 Prozent Marktanteil
und Nokia auf 28 Prozent.
Amazon mit Android-Tablet
Buchtipp
Der Onlinehändler Amazon macht offenbar
Ernst mit seinen Plänen für
ein eigenes Android-Tablet, über die
schon seit Wochen spekuliert wird,
und wird dieses laut dem Fachdienst
„Digitimes“ im zweiten Halbjahr
2011 auf den Markt bringen. Der taiwanesische
Auftragsfertiger Quanta
hat demnach bereits einen Auftrag
im Wert von 3,5 Mrd. Dollar für die
Produktion des neuen Tablets erhalten.
In Spitzenzeiten sollen 700 000
bis 800 000 Einheiten pro Monat produziert
werden. Quanta ist in der
Branche bereits als Hersteller des
BlackBerry-Tablets PlayBook bekannt,
hat auch einen Tablet-Auftrag
von Sony erhalten und rechnet sich
zudem große Chancen für ein Mandat
von Lenovo aus. Ein weiterer Lieferant
soll dem Bericht zufolge E-Ink
Holdings sein, ein langjähriger Partner,
der bereits die Display-Technologie
für Amazons E-Reader Kindle geliefert
hat. E-Ink soll demnach ein
Display mit „Advanced Fringe Field
Switching“ liefern – das soll den Displayinhalt
auch bei stärker Sonneneinstrahlung
gut leserlich machen:
ein Feature, das bereits den aktuellen
Kindle positiv von Apples iPad unterscheidet.
Schon seit Wochen halten
sich hartnäckig Berichte, wonach
Amazon ein Tablet mit Android plant
– schließlich hatte Amazon erst vor
wenigen Wochen einen eigenen App
Store für Android eröffnet und einen
Cloud-Musikdienst gestartet.
Als Einstiegslektüre für angehende iPhone-
Entwickler bietet sich das Buch Einstieg in Objective-C
2.0 und Cocoa von Kai Surendorf und
Markus Hardt aus dem Galileo-Verlag an. Auch
wenn sich das rund 500 Seiten dicke Hardcover-Buch
mit zahlreichen Schwarz-Weiß-Abbildungen
in erster Linie um den Einstieg in die
Sprache Objective-C und die grafische Programmierung
für Mac
OS X kümmert, bietet
es auf rund 50 Seiten
auch einen guten Startpunkt
für eigene Apps
in Cocoa Touch. Der
„Einstieg in Objective-C
2.0 und Cocoa“ kostet
30 Euro und ist
für 25 Euro auch
als Download
erhältlich.
8 02/2011 smart-developer.de
powered by

NEWS
Aktuelles
Google mit Music Beta in der Cloud
Google kehrt zu seinen Wurzeln zurück und startet mit Music Beta einen neuen
Cloud-Dienst. Music Beta stellt dem Anwender Speicherplatz für bis zu 20 000
Songs zur Verfügung, die man sich auf das Smartphone oder den Rechner streamen
lassen kann. Der Dienst ist vorerst gratis, allerdings auf die USA beschränkt
und nur über eine Einladung
nutzbar.
Ursprünglich wollte Google
einen kompletten Musik-
Service mit Online-Shop
und Streaming-Lösung anbieten.
Da man sich aber mit
den großen Playern im Musikgeschäft
nicht einigen
konnte, hat Google nun diesen
Weg ohne Online-Shop
gewählt. Wann Music Beta
nach Europa kommt, steht
Der neue Cloud-Service startet in den USA via Einladung. noch nicht fest.
Groupon: Deals in Echtzeit
Groupon startet in den USA den neuen Dienst Groupon Now!, der seinen Nutzern
erstmals ermöglicht, erworbene Gutscheine sofort einzulösen und nicht frühestens
am nächsten Tag. Händler und Gastronomen können ihre mobilen Kampagnen
auf Wunsch gezielt so aussteuern, dass die Angebote nur zu besuchsschwachen
Zeiten offeriert werden. Fürs Erste ist der neue Service nur in Chicago
verfügbar, doch dürfte er bald auf weitere Orte und Länder ausgeweitet werden.
Mit Groupon Now! schließt der Gutscheindienst eine Lücke zwischen seinem
Standard-Angebot, das durch die Aushändigung des Gutscheins erst am nächsten
Tag noch keine absolut spontanen Käufe unterwegs ermöglicht, und Diensten
wie Foursquare, die Gutscheine gegen Checkins herausgeben.
Galaxy S II
auf Rekordjagd
Nachdem Samsung alleine in Korea innerhalb
einer Woche rund 200 000 Exemplare seines
neuen Android-Flaggschiffs Galaxy II verkaufen
konnnte, stellt das neue Android-Handy
nun auch bei den weltweiten Bestellungen
neue Maßstäbe: Über 3 Millionen Vorbestellungen
seines neuen Smartphones sollen laut
Samsung bis Mitte Mai eingegangen sein,
über 10 Millionen Geräte will Samsung vom
Galaxy S II bis Ende des Jahres verkaufen.
Einen weiteren Rekord hält Samsung auch bei
der Bereitstellung des Android-Quellcodes:
Die rund 130 MByte umfassende ZIP-Datei
enthält neben dem Kernel-Quellcode von Gingerbread
inklusive Build-Anleitung auch das
zugehörige Plattform-Archiv und steht unter
http:// opensource. samsung. com zum freien
Download bereit.
Das neue Android-Flaggschiff von
Samsung erfreut sich einer sehr großen
Nachfrage.
samsung.com
Apple ist am
meisten wert
Der Markenwert von Apple stieg binnen
eines Jahres um 84 Prozent auf
153,3 Mrd Dollar, so das neue BrandZ-
Ranking der Agentur Millward Brown.
Kontrahent Google gibt damit die Führung
des Rankings ab und landet mit
reichlich Abstand und 111,4 Mrd Dollar
Markenwert auf Platz 2.
Mobile Werbung
nicht beliebt
Mobile Werbung wird von Deutschen
nur dann akzeptiert, wenn sie für ihre
Nutzung belohnt werden, ergibt die
Studie „A Global Consumer View on
Mobile Advertising“ von InMobi und
Comscore. Da 34 Prozent der Befragten
sagen, sie würden nicht auf Werbung
reagieren, mit der sie persönlich
angesprochen werden, rät InMobi
Werbungtreibenden im deutschen
Markt dazu, eher Markenwerte und
Angebote zu transportieren als gezielt
Menschen zum Beispiel durch ortsbezogene
Daten anzusprechen. Das ist
besonders kniffelig dadurch, da InMobi-Forscher
Surag Patel bei der Studie
gleichzeitig erkannt hat, dass eine Art
von Belohnung eigentlich hilft, die Akzeptanz
von Mobile Advertising zu erhöhen:
Die Verbraucher „wollen mehr
Werbeangebote, bei denen sie Geld
sparen können“, so Patel. Als Gegenleistung
würden sie aber auch interessante
Informationen über neue Produkte
oder Marken durchaus zu schätzen
wissen.
Insgesamt lehnen 56 Prozent der deutschen
Bevölkerung Werbung auf dem
Handy ab. 37 Prozent sorgen sich
dabei um ihre Privatsphäre, 19 Prozent
halten mobile Werbung schlicht für
unangenehm. Nur 30 Prozent der befragten
Verbraucher mögen hingegen
mobile Werbung. Damit hinkt die Akzeptanz
von Mobile Advertising in
Deutschland anderen europäischen
Ländern hinterher: EU-weit schätzen
50 Prozent mobile Reklame, in den
USA sind es sogar 63 Prozent und in
Asien 69 Prozent.
powered by:
smart-developer.de 02/2011 9

ADMIN-MAgAzIN
für ALLe IT-AdmInISTrAToren
von WIndoWS und LInux
AdmIn erscheint alle zwei
monate und bietet IT-Admins:
■ Schwerpunktthemen zu
Storage, Backup, netzwerk,
monitoring, virtualisierung
und Security
■ Howtos und Tutorials für alle
IT-Administratoren von Linux,
Windows und unix
■ Hilfe bei der täglichen
Systemverwaltung
heterogener netze
TesTen sie Admin
im mini-Abo!
Lesen Sie 2 Ausgaben für
zusammen nur 9,80 E!
2 Hefte
NUR
e9,80
So können Sie beStellen:
• Web: www.admin-magazin.de/abo
• Telefon 07131 / 2707 274 • fax 07131 / 2707 78 601
• e-mail: abo@admin-magazin.de • Shop: Shop.Linuxnewmedia.de
Gleich hier bestellen:
www.admin-magazin.de/
miniabo
Abovorteile
• Preisvorteil gegenüber Kioskkauf
• kostenlose & sichere Zustellung
• Zustellung vor dem offiziellen
verkaufstermin
Globusillustration: Rafa Irusta Machin, 123RF

SIe wolleN keIN Heft MeHr verpASSeN?
Abonnieren sie Admin im Prämienabo!
Lesen Sie das AdmIn-magazin für
nur E 49,90 im Jahr statt E 58,80
im einzelkauf am Kiosk!
Als Prämie erhalten Sie einen Yubikey
www.admin-magazin.de/jahresabo
sichern sie sich
ihren gratis YubikeY!
Sicher unterwegs: uSB-Crypto-Key für einmal-
Passwörter mit AeS-128. funktioniert ohne spezielle Treiber
mit allen Betriebssystemen. Weitere Applikationen unter www.yubico.com
JetZt auch
als PDF und/oder
als Online-archiv
erhältlich!
Mehr inFOrMatiOnen unter
www.aDMin-MagaZin.De
Jetzt beStellen:
versandkostenfrei!
• www.admin-magazin.de/einzelheft
• Telefon 07131 / 2707 274 • fax 07131 / 2707 78 601
• e-mail: abo@admin-magazin.de • Shop: Shop.Linuxnewmedia.de

Schwerpunkt
HTML5 mit Jo und PhoneGap
Plattformübergreifende Entwicklung mit Jo und PhoneGap
Hallo Jo
Mit gängigen Webtechnologien wie HTML,
JavaScript und CSS lassen sich mobile Apps
erstellen, die sich hinter nativen Anwendungen
nicht verstecken müssen. Dabei können
Programmierer auf eine ganze Reihe von
Java Script-Libraries zurückgreifen, die das
Entwickeln plattformübergreifender Apps
wesentlich erleichtern. Roy Sutton
higyou, 123RF
PhoneGap [1] ist eine
JavaScript-Library, die
zwischen Hardware und
Java Script-Apps eine Abstraktionsebene
einfügt. Allerdings handelt
es sich dabei um keine GUI-Library;
PhoneGap könnte man vielmehr als eine Art
Vermittlungsschicht bezeichnen, mit deren
Hilfe Apps auf native Funktionen von Mobiltelefonen
zugreifen können, darunter GPS,
Beschleunigungssensor und Kamera. Programmierer,
die PhoneGap einsetzen, können
eine HTML5-App so modifizieren, dass
sie auf verschiedenen Geräten einsetzbar ist.
Jo stellt sich vor
Jo [2] ist eine schlanke, plattformübergreifende
GUI-Library, hinter der
der Autor Dave Balmer steckt. Jo ist
Open-Source-Software (BSD-Lizenz)
und auf GitHub verfügbar [3]. Die
Bibliothek zeichnet sich dadurch aus,
dass sie kompakt ist und man sich
schnell einarbeiten kann; außerdem arbeitet
sie hervorragend mit Phone-
Gap zusammen, wobei es kaum
Überschneidungen beim Funktionsumfang
gibt. Mit Jo können
Entwickler Apps programmieren,
die auf Endgeräten installiert werden,
aber die Library kann auch auf einem
Webserver eingesetzt werden, um
dort Webseiten für Mobilgeräte
bereitzustellen. Obwohl Jo noch
in den Kinderschuhen steckt,
zeigt die Software jede Menge Zukunftspotenzial.
Das gilt auch für unser Beispielprojekt,
das Sie nun gleich programmieren.
Spuren sammeln
Beim Nachprogrammieren einer App namens
Footprints, die den Standort des Anwenders
aufzeichnet und in einer Datenbank abspeichert,
können Sie sich mit einigen Funktionen
beider Libraries vertraut machen. Mithilfe
dieser App zeichnen Sie zum Beispiel
Koordinaten punktuell auf oder lassen die
App in regelmäßigen Abständen Ihren Standort
abfragen und speichern.
Im Laufe dieses Programmierprojektes lernen
Sie drei der Funktionen von PhoneGap
näher kennen: SQL-Datenbanken, lokale
Speicherung und GPS. Darüber hinaus macht
Sie der Artikel mit einigen der UI-Widgets
und Hilfsfunktionen von Jo vertraut.
Und das Beste daran ist: Weil Sie bei diesem
Projekt plattformübergreifend programmieren,
können Sie für den Test Ihrer App
sogar Browser auf WebKit-Basis (Safari oder
Chrome) verwenden. Es ist praktisch, während
des Programmierens auf die Entwicklerkonsole
eines Desktop-Browsers Zugriff zu
haben, falls etwas schiefgeht und man den
Code auf Fehler überprüfen muss.
Vorbereitung
Bevor es richtig losgehen kann, müssen Sie
erst einmal Ihre Entwicklungsumgebung vorbereiten.
Laden Sie sich zunächst die neuesten
Versionen von Jo und PhoneGap herun-
12
02/2011 smart-developer.de

Schwerpunkt
HTML5 mit Jo und PhoneGap
ter und folgen Sie den Anweisungen, um
PhoneGap für Ihre jeweilige Plattform zu installieren.
(Es gibt für jede Plattform eine eigene
Seite mit Informationen für Neueinsteiger
[4]; nutzen Sie die Test-App, um sicherzustellen,
dass die Installationsumgebung
korrekt eingerichtet wurde.)
Um Jo zu installieren, müssen Sie nur die
nötigen Dateien an den passenden Ort kopieren.
Erstellen Sie im entsprechenden www-Verzeichnis
Ihres mobilen Betriebssystems einen
Ordner namens jo und kopieren Sie dann die
Datei jo.js aus dem Unterordner js, den Sie
in Jos Installationsverzeichnis finden, direkt
dort hinein. Kopieren Sie dann den gesamten
Ordner css ins Verzeichnis jo in Ihrem Projektverzeichnis.
Zu guter Letzt müssen Sie noch die Datei
index.html abändern, um das Jo-Framework
und die zugehörigen CSS-Dateien einzubinden.
Wenn Sie schon einmal am Editieren
sind, können Sie auch gleich eine Datei hinzufügen,
in der Ihr Programmcode sowie die
Daten aus dem Google Maps API [5] gespeichert
werden, sodass Sie die gespeicherten
Standorte auf einer Karte abbilden können.
Fügen Sie im Abschnitt HEAD den Code aus
Listing 1 hinzu, außerdem müssen die beiden
folgenden Codezeilen in den Startup-Abschnitt
Ihres Betriebssystems eingefügt werden
(beispielsweise in die Funktion
onDevice Ready).
jo.load();
App.init();
Erstellen Sie im Anschluss eine leere Datei
namens main.js.
Planen der App
Da wir eine eher „klassische“ App erstellen
wollen, fangen wir mit dem Hauptmenü-
Bildschirm (oder Karte) mit drei Menüelementen
an: Track (Standort Aufzeichnen),
Saved Prints (Abgespeicherte Routen) und
Options (Optionen). Beim Nachprogrammieren
jedes Menüelements werden Sie jeweils
ein anderes Jo-Widget kennenlernen. Wäre
dies hier kein Programmierprojekt, dann
wäre es wohl am sinnvollsten, wenn Ihre
App gleich nach dem Hochfahren den Track-
Bildschirm, d.h. den Bildschirm mit der
Standort-Aufzeichnungsfunktion, zeigen
würde, da Anwender wahrscheinlich diese
Funktion als Erstes ausprobieren wollen.
Sie können sich Ihre App so vorstellen,
dass jede einzelne ihrer Funktionen eine
Karte in einem Stapel darstellt. Dieser Ansatz
funktioniert bei Jo sehr gut. Jede Jo App
wird als joScreen dargestellt, der die BODY-
Elemente des Browsers abstrahiert. Apps
können dem Bildschirm joCard-Elemente
hinzufügen. JoCards werden über einen
joStack (oder joStackScroller) verwaltet,
außerdem können Programmierer mittels
dieser Elemente push- und pop-Methoden
auf die aktiven Karten anwenden.
Für jede der drei oben beschriebenen
Funktionen müssen Sie Karten erstellen.
Aber zunächst brauchen Sie eine Struktur, in
die Ihre Karten eingebettet werden können.
Das App-Skelett
Sicherlich wollen Sie den globalen Namespace
von JavaScript nicht unnötig verschmutzen.
Deswegen ist es am besten, den
App-Code in ein Objekt zu verpacken und
mittels des Module Pattern alle „Innereien“
der App dort einzubetten, sodass kein anderer
JavaScript-Code darauf zugreifen kann.
Wenn Sie die Programmzeilen aus Listing
2 zu der Datei main.js hinzufügen, erstellen
Sie damit ein App-Objekt mit ein paar internen
Daten (die Sie später noch brauchen
werden) und Funktionen. Nachdem Sie dann
Ihren joScreen erstellt haben, wird alles, was
Sie auf dem Bildschirm platzieren, auch auf
allen anderen Bildschirmen der App sichtbar
sein. Wenn Sie joNavbar verwenden, wird
damit auf allen App-Bildschirmen eine Titelleiste
eingeblendet, außerdem ein plattformspezifischer
Back-Button (bei webOS-Apps
wird beispielsweise die gängige Zurück-Geste
benutzt). Der Befehl return am Schluss gibt
alle Daten und Funktionen zurück, die Sie
außerhalb Ihres Objektes zur Verfügung stellen
wollen. In diesem Fall geben Sie nur die
init-Funktion selbst zurück, da dadurch alle
anderen von Ihnen benötigten Prozesse angestoßen
werden.
Die Menü-Karte
Bei Jo steht Ihnen ein äußerst einfach zu benutzendes
Menü-Widget zur Verfügung namens
joMenu. Um ein joMenu zu erstellen,
müssen Sie dem Widget ein Objekt-Array
übergeben, das die Menüoptionen und IDs
enthält. Die Klickevents im Menü werden abgefangen
und über die ID der gewählten Option
wird dann die entsprechende Karte ge-
Listing 1: index.html wird erweitert
smart-developer.de 02/2011 13

Schwerpunkt
HTML5 mit Jo und PhoneGap
Abb. 1: So sieht das Hauptmenü im
iOS-Betriebssystem aus.
Listing 2: main.js-Skelett
var App = (function() {
var stack;
var scn;
var self;
var db;
var prefsRecord;
function init() {
var menu, navbar;
triggert. Am Schluss wird dann die neue
Karte zum Kartenstapel für Ihren Bildschirm
hinzugefügt. Später werde ich noch genauer
auf den Aufruf joCache eingehen.
Wenn Sie diese App nun testen, werden
Sie feststellen, dass das Menü funktioniert
und Sie auf die einzelnen Menüoptionen klicken
können. Abbildung 1 zeigt, wie das
Hauptmenü nun aussehen sollte. Da den einzelnen
Karten noch kein Inhalt zugewiesen
wurde, sind die Optionen leer. Wenn Sie
nach der Auswahl eines Menüpunktes zum
Hauptmenü zurücknavigieren, wird Ihnen
auffallen, dass der vorher gewählte Menüpunkt
nach wie vor ausgewählt ist. Um diesen
Fehler zu beheben, fügen Sie folgende
Programmzeile in Ihren Code ein:
main.activate = function()
{ menu.deselect(); };
scn = new joScreen(new joContainer([
navbar = new joNavbar(),
stack = new joStackScroller()
Und zwar genau an der Stelle, bevor Sie mittels
der Push-Methode das Element main in
den Stack einfügen.
Den Standort aufzeichnen
Im Codeabschnitt main wird joCache aufgerufen;
dieser Aufruf wurde bislang noch nicht
genauer erklärt. Jo verfügt über eine Funktion,
die es dem Programmierer erlaubt, die
]).setStyle({position: "absolute", top: "0", left: "0", bottom: "20px", right:
"0"})
);
self = this;
Erstellung von Widgets solange zu verzögern,
bis sie tatsächlich benötigt werden.
Wenn Sie auf joCache zurückgreifen, steigern
Sie die Ausführungsgeschwindigkeit Ihrer
Applikationen und senken auch den Speicherverbrauch,
da Sie Steuerungselemente
erst dann instanziieren, wenn sie auch gebraucht
werden. Sobald ein Widget (oder ein
Widget-Set) erzeugt wurde, bleibt es bestehen,
bis es wieder benötigt wird.
Die Track-Funktion soll eine Karte zeigen,
auf der der aktuelle Standort des Anwenders
und zwei Schaltflächen zu sehen sind, mit
deren Hilfe die „Fußspuren“ gespeichert werden
(eine Taste für eine Einzelaufnahme,
eine weitere Taste für die Intervall-Aufzeichnung).
Verwenden Sie eine joToolbar, um
diese Schaltflächen dauerhaft am unteren
Bildschirmrand zu platzieren. Optimalerweise
nutzen Sie für die paarweise Anordnung
die joFlexrow. Sie verteilt alle Inhalte
gleichmäßig über die gesamte Display-Breite.
Fügen Sie den Programmcode aus Listing 4
genau unter dem main-Aufruf ein.
Bei Google Maps wird ein DIV-Element benötigt,
damit darin das Kartenmaterial abgelegt
werden kann. Mit etwas Inline-Kosmetik
füllt das Karten-DIV den gesamten Bildschirm
aus. Mittels des Aufrufs setTitle
wird der Titel für die Karte gesetzt, der in der
Kopfleiste erscheint, wenn diese Karte aktiv
ist. Wie man sieht, wird dieser Aufruf an das
Ende eines anderen Aufrufs gehängt, nämlich
an den Call, mit dem die neue joCard erstellt
wird. Bei Jo wird sehr häufig auf diese
Art von Methodenverkettung zurückgegriffen,
wodurch Programmierer viele Aufrufe in
kompakter Weise durchführen können.
Wenn Sie die App nun Probe fahren, sehen
Sie, dass die Track-Funktion nun schon zumindest
teilweise funktioniert. Am unteren
Listing 3: Menü-Karte
var main = new joCard([
menu = new joMenu([
{ title: "Track", id: "track" },
{ title: "Saved Prints", id:
"saved" },
{ title: "Options", id: "options" }
])
]).setTitle("Footprints");
}
menu.selectEvent.subscribe(function(id) {
return {
stack.push(joCache.get(id));
"init": init
});
}
}());
stack.push(main);
14
02/2011 smart-developer.de

Schwerpunkt
HTML5 mit Jo und PhoneGap
Bildschirmrand sind zwei Schaltflächen zu
sehen und das DIV Element Map loading…
ist ebenfalls vorhanden. Wenn Sie Google
Maps mit den beiden Schaltflächen verknüpfen,
erhalten Sie einen Einblick in die Möglichkeiten
der Geo-Dienste von PhoneGap.
Fügen Sie den Code aus Listing 5 vor dem
return-Statement ein. Die ersten beiden Abschnitte
enthalten Code zum Aktivieren und
Deaktivieren von Funktionen auf der Karte.
Diese werden automatisch aufgerufen, wenn
eine Karte gezeigt oder verborgen wird.
Im activate-Code können Sie Google
Maps mit dem Karten-DIV-Element, das Sie
vorher erstellt haben, verknüpfen und einige
Grundeinstellungen durchführen. Der Aufruf
navigator.geolocation.getCurrentPosition,
übrigens eine PhoneGap-Methode, liest erwartungsgemäß
die aktuellen GPS-Koordinaten
des Gerätes aus und gibt sie an die Funktion
success zurück, was bewirkt, dass die
Karte in der Displaymitte den derzeitigen
Standort des Anwenders anzeigt. Interessanterweise
funktioniert dies auch bei Desktop-
Browsern ziemlich gut.
Der Codeabschnitt deactivate stellt sicher,
dass die regelmäßige Abfrage des aktuellen
Standorts eingestellt wird. Über den Aufruf
clearWatch wird die wiederkehrende Sammlung
von GPS-Daten beendet; Sie werden
sich damit näher befassen, wenn Sie den
Code für onTrack schreiben.
Die nächsten zwei Programmzeilen verknüpfen
mittels des subscribe-Befehls das
Betätigen der Tasten mit den entsprechenden
Events. Als Nächstes geht es um den Programmcode
für onSnapshot und onTrack. Die
Listing 4: Aufsetzen der Karte
joCache.set("track", function() {
var trackButton, snapButton, toolbar;
letzte Zeile speichert eine Kopie des track-
Button, damit Sie ihn auch von innerhalb des
Codes von onTrack referenzieren können.
Der Bildschirm der Track-Funktion sollte nun
wie bei Abbildung 2 aussehen.
Durchgängiges Tracking
PhoneGap bietet eine Funktion, um regelmäßig
GPS-Events zu registrieren und darauf zu
reagieren. Dadurch können Sie intervallweise
Ihre Koordinaten abrufen und diese Daten in
einer Datenbank speichern. Fügen Sie dazu
den Code von Listing 6 unter die init-Funktion
in das App-Objekt ein.
Die Funktion onTrack überprüft das aktuelle
Label des trackButton, um festzustellen,
ob die Aufzeichnung des Anwenderstandortes
gestartet oder gestoppt werden soll. Wenn
der Tracking-Prozess gestartet werden soll,
ändert sie das Label auf "Stop" und weist
PhoneGap an, in regelmäßigen Abständen
Updates zu senden. Wenn die Aufzeichnung
des Standortes bereits läuft, ändert die Funktion
das Label und ruft clearWatch auf, um
den GPS-Abfrageprozess zu stoppen.
Listing 5: webService1Success
Abb. 2: Die Track-Funktion unserer
App mit den zwei Buttons.
self.trackCard.activate = function() {
if(!self.trackCard.mapActivated) {
var latlng = new google.maps.LatLng(‐34.397, 150.644);
var myOptions = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
self.map = new google.maps.Map(document.getElementById("map"),
myOptions);
self.trackCard.mapActivated = true;
}
navigator.geolocation.getCurrentPosition( function(position) {
self.trackCard = new joCard([
var point = new google.maps.LatLng(position.coords.latitude, position.coords.
longitude);
new joContainer('Map
loading...').setStyle({position:
"absolute", top: "0", left: "0", bottom:
"0", right: "0"}),
};
self.map.setCenter(point);
}, gpsFailure);
toolbar = new joToolbar([
new joFlexrow([trackButton = new
joButton("Start"),
self.trackCard.deactivate = function() {
if(self.trackCard.trackButton.getData() === "Stop") {
self.trackCard.trackButton.setData("Start");
snapButton = new
joButton("Single")])
])
]).setTitle("Track");
};
navigator.geolocation.clearWatch(self.trackCard.watchID);
}
snapButton.selectEvent.subscribe(onSnapshot, self);
return self.trackCard;
});
trackButton.selectEvent.subscribe(onTrack, self);
self.trackCard.trackButton = trackButton;
smart-developer.de 02/2011 15

Schwerpunkt
HTML5 mit Jo und PhoneGap
Abb. 3: Der Bildschirm mit den
gespeicherten Routen (Saved Prints).
Listing 6: GPS-Funktionen
Die Funktion addFootprint richtet Marker
auf der Karte ein. Dabei verwendet sie die
GPS-Koordinaten, die entweder durch die in
regelmäßigen Abständen durchgeführte GPS-
Abfrage geliefert werden oder von getCurrentPosition
stammen. Aus diesen Daten erstellt
sie den neuen Marker und richtet die
Karte so aus, dass der Marker in der Displaymitte
positioniert wird.
Die Funktion gpsFailure greift auf Jos
Benachrichtigungsfunktion zurück und zeigt
eine Popup-Warnung im Display, falls kein
GPS-Signal verfügbar ist oder wenn der Anwender
den GPS-Zugang gesperrt hat.
function onTrack() {
if(self.trackCard.trackButton.getData() === "Start") {
self.trackCard.trackButton.setData("Stop");
self.trackCard.watchID = navigator.geolocation.watchPosition(
addFootprint, gpsFailure, { frequency: self.frequency, enableHighAccuracy:
true, maximumAge: 3000 });
}
else {
self.trackCard.trackButton.setData("Start");
Speichern von Daten
Die reine Darstellung der Route per GPS,
während der Anwender sich fortbewegt, ist
nur eingeschränkt sinnvoll. Es wäre praktisch,
wenn man die Route zur späteren Verwendung
abspeichern könnte. Glücklicherweise
unterstützen die meisten Mobilbrowser
das Speichern von HTML5-Daten per SQLite.
PhoneGap stellt dem Anwender dazu eine
konsistente Oberfläche zur Verfügung, mit
deren Hilfe im Abschnitt window auf SQL-
Funktionen zugegriffen werden kann. Zunächst
müssen Sie eine Datenbank erstellen,
in der Sie Ihre Routen abspeichern. Fügen Sie
dann den entsprechenden Code in die Track-
Funktion ein, um die Routen in der Datenbank
zu speichern. Kopieren Sie die folgende
Zeile in Ihren Code, gleich nachdem der Bildschirm
erstellt wird in init:
initDB();
Fügen Sie außerdem den Variablen am Anfang
von App folgende Deklaration hinzu:
var db;
Fügen Sie dann den Code aus Listing 7
hinzu. Die Funktion initDB öffnet die Verbindung
zur Datenbank und erstellt die Tabelle,
in der die Route gespeichert wird. Um die
Daten in der Datenbank zu speichern, kopieren
Sie den Code aus Listing 8 in App unterhalb
der vorherigen Funktionen ein und
fügen die folgende Zeile an das Ende der
addFootprint-Funktion:
addDBTrack(position);
Weitere Informationen zu SQL-Datenbanken
in HTML5 finden Sie auf der Webseite
HTML5 Doctor [6].
Listing 7: initDB
function initDB() {
if (!window.openDatabase) {
scn.alert("Database not supported on this
platform!");
} else {
}
}
navigator.geolocation.clearWatch(self.trackCard.watchID);
db = window.openDatabase("footprints",
"1.0", "Footprints Database", 1000000);
function onSnapshot() {
db.transaction(function(transaction) {
}
navigator.geolocation.getCurrentPosition( addFootprint, gpsFailure);
transaction.executeSql('CREATE TABLE IF NOT
EXISTS prints(id INTEGER PRIMARY KEY,' +
'lat REAL,' +
function addFootprint(position) {
var point = new google.maps.LatLng(position.coords.latitude, position.coords.
longitude);
'long REAL,' +
'timestamp INTEGER);', [],
dbNullHandler, dbErrorHandler);
});
var marker = new google.maps.Marker({position: point, map: self.map});
self.map.setCenter(point);
}
}
}
function gpsFailure() {
scn.alert("GPS Error","Unable to get a GPS fix");
}
function dbNullHandler() { }
function dbErrorHandler(e) { }
16
02/2011 smart-developer.de

Schwerpunkt
HTML5 mit Jo und PhoneGap
Wenn Sie den Wert NULL in das ID-Feld eintragen,
wird der Wert des Feldes automatisch
inkrementell erhöht. Die anderen Informationen
werden einfach vom Positionsobjekt abgeleitet.
Man sollte sich jedoch bewusst sein,
dass PhoneGap die Zeitstempel auf den verschiedenen
Plattformen auf unterschiedliche
Weise abgleicht. Sie sollten also vorher testen,
was für ein Zeitstempel zurückgegeben
wird, damit Sie sich überlegen können, wie
Sie die Information am besten in ein Date-
Objekt umwandeln können.
Abbildung der Routen
Nun, da Sie die Route des Nutzers abspeichern
können, brauchen Sie einen Bildschirm,
auf dem Sie die gespeicherten Routen
anzeigen können. Obwohl Sie diese Information
wahrscheinlich auch gerne auf
einer Karte abbilden würden, würde Ihnen
dadurch die Gelegenheit entgehen, ein weiteres
Jo-Widget kennenzulernen. Auf dem
Bildschirm Saved Prints (Abgespeicherte
Routen) sollten Sie die gesammelten Routen
in Form einer joList anzeigen. Fügen Sie den
Code aus Listing 9 zur Funktion init hinzu.
Wenn joCache die Setup-Funktion für den
Bildschirm mit den gespeicherten Routen
aufruft, muss zunächst die Karte erstellt werden,
die dargestellt wird. Wie Sie sehen,
muss dazu nur die Liste hinzugefügt werden,
die Sie mit Daten füllen wollen, außerdem
müssen Sie den Titel für die Karte festlegen.
Als Nächstes muss die Liste mit Daten aus
der Datenbank befüllt werden, und zwar
immer dann, wenn die Karte aktiviert wird.
Diese Daten werden in einem Objekt zurückgegeben,
allerdings handelt es sich dabei um
kein Array, obwohl es ähnlich strukturiert
ist. Sie müssen jedes einzelne Element iterieren
und es in einem Array platzieren, damit
die Daten in der Liste dargestellt werden
können.
Listing 8: addDBTrack
function addDBTrack(position) {
if(db !== undefined) {
Zu guter Letzt muss die Liste auch abgebildet
werden. joList dient hier als Hilfsfunktion,
die Sie benutzen können, um die Daten darstellungsgerecht
aufzubereiten. Nach Abschluss
der vorbereitenden Maßnahmen wird
die Funktion formatItem aufgerufen, wobei
das unbearbeitete Element aus dem Array
und der Indexwert des Elements als Argumente
dienen. Das Array, das weiter oben erstellt
wurde, enthält ein Objekt mit Eigenschaften
für jedes der Felder der Tabelle. Mithilfe
dieser Felder entnehmen Sie die Daten
und befüllen einen String. Schließlich übergeben
Sie den String an den Parent der Liste
formatItem, um ihn Jos Stilelementen entsprechend
zu formatieren. Abbildung 3 zeigt
unsere App mit den gespeicherten Routen
unter webOS.
Optionen
Der letzte Menüpunkt ermöglicht es dem Benutzer,
die Häufigkeit der Standortabfrage
festzulegen. Für den Optionen-Bildschirm
benötigen Sie zwei Jo-Funktionen sowie
Listing 9: Saved Prints (Abgespeicherte Routen)
joCache.set("saved", function() {
var trackList;
var card = new joCard([
trackList = new joList(),
]).setTitle("Saved Prints");
Abb. 4: Abfrage-Intervall im Optionsmenü
einstellen.
card.activate = function() {
if(db) {
db.transaction(function(transaction) {
transaction.executeSql('SELECT * from prints', [],
function(tx, results) {
var i, ary = [];
for(i = 0; i < results.rows.length; i++) {
ary[i] = results.rows.item(i);
}
trackList.setData(ary);
}, dbErrorHandler);
});
}
}
db.transaction(function(transaction) {
transaction.executeSql('INSERT INTO prints
(id, lat, long, timestamp) ' + 'VALUES
(NULL, ' + position.coords.latitude + ', '
+ position.coords.longitude + ', ' +
position.timestamp + ');', [],
dbNullHandler, dbErrorHandler);
trackList.formatItem = function(data, index) {
var display = data.id + "‐ Lat: " + data.lat + ", Long: " + data.long + ' ‐‐ '
+ data.timestamp;
return joList.prototype.formatItem.call(this, display, index);
}
});
}
return card;
}
});
smart-developer.de 02/2011 17

Schwerpunkt
HTML5 mit Jo und PhoneGap
Abb. 5:
Die Footprints-App
unter
An droid.
Roy Sutton
Roy Sutton ist App-Entwickler,
Blogger und begeisterter
webOS-Nutzer. Er hat schon mobile
Anwendungen entwickelt,
als der Begriff noch gar nicht
existierte. Mehr von Roy Sutton
können Sie auf dieser Webseite
lesen: http:// www.​
webOSroundup. com. Sutton ist
Administrator von http://​
webOS101. com, ein webOS-Wiki
auf Community-Basis. Auf Twitter
ist Roy Sutton unter dem
Namen @Pre101 zu finden.
Infos
[1] PhoneGap:
http:// www. phonegap. com
[2] Jo: http:// joapp. com
[3] Jo download:
https:// github. com/​
davebalmer/ jo
[4] PhoneGap Get Started page:
http:// www. phonegap. com/​
start
[5] Google Maps API:
http:// code. google. com/ apis/​
maps/ documentation/​
javascript/
[6] HTML5 Doctor:
http:// html5doctor. com/​
introducing‐web‐sqldatabases
einen weiteren HTML5-Speichermechanismus.
Bei PhoneGap wird das W3C Web Storage
API über window.localStorage eingebunden.
Damit steht dem Programmierer ein
einfacher Schlüssel/​Wert-Speicher zur Verfügung,
der zur Sicherung von App-Einstellungen
mehr als ausreicht. Um die Schnittstelle
zwischen Jos Widgets und dem Speicherort
einfacher zu gestalten, können Sie auf Jos
joRecord-Objekt zurückgreifen. joRecord enthält
eine eventgesteuerte Methode, um verschiedene
Jo Widgets an Daten zu binden.
Fügen Sie die folgende Programmzeile unterhalb
des Aufrufs initDB ein:
initPrefs();
Fügen Sie dann den Code initPrefs und
seine Helferfunktion (Listing 10) in App ein.
In diesem Code-Abschnitt geht es um die
Vorgabedaten für Ihre datenbezogenen Widgets
(nur eines in diesem Fall); danach können
Sie die Funktionen load und save erstellen.
Nachdem Sie diese Funktionen erstellt
haben, können Sie die gespeicherten Einstellungen
laden und danach die Funktion set-
Frequency aufrufen. Nun erstellen Sie den
Optionen-Bildschirm, indem Sie den Code
aus Listing 11 in die Funktion init einfügen.
Dieser Code erzeugt ein einfaches Auswahl-Widget,
mit dessen Hilfe der Anwender
einen Eintrag aus einer statischen Liste von
Werten auswählt. Wenn der Nutzer eine der
Auswahlmöglichkeiten zum Festlegen des
Abfrageintervalls antippt, sollte der Bildschirm
ähnlich wie in Abbildung 4 aussehen.
Ausprobieren der App
Sie sollten nun über eine voll funktionsfähige,
wenn auch etwas schmucklose App
verfügen. Mithilfe von PhoneGap sollten Sie
in der Lage sein, die App auf einer Reihe von
Listing 10: initPrefs
function initPrefs() {
prefsRecord = new joRecord({
frequency: 2
});
prefsRecord.load = function() {
var data;
data = window.localStorage.
getItem("frequency");
if(data !== null) {
prefsRecord.setProperty("frequency",
data);
}
}
prefsRecord.save = function() {
verschiedenen Geräten zum Laufen zu bringen.
Jedes Gerät hat seine Eigenheiten, Sie
sollten sich also vorher kundig machen, welche
Grundkonfiguration für jedes Gerät benötigt
wird. Sobald die Konfiguration steht,
folgen Sie den Schritten im Abschnitt Vorbereitung,
um die projektspezifischen Einstellungen
vorzunehmen. Danach können Sie
main.js hineinkopieren und von index.html
aus aktivieren. Abbildung 5 zeigt die App auf
dem Android-Betriebssystem.
Fazit
Mithilfe des Jo-Frameworks lassen sich Apps
erstellen, ohne dazu Unmengen an HTMLund
CSS-Code von Hand editieren zu müssen.
PhoneGap macht es möglich, die App für
mehrere mobile Endgeräte (sowie einige
Browser) gleichzeitig zu entwickeln. In diesem
Artikel habe ich einige Widgets vorgestellt,
die Jo anbietet, und Möglichkeiten aufgezeigt,
wie diese gemeinsam innerhalb einer
App verwendet werden können, um auf diese
Weise ein positives Anwendererlebnis zu erzeugen.
Jo bietet aber noch viel mehr. Ich
hoffe, dieser Artikel hat Sie dazu angeregt, einige
dieser Optionen weiterzuverfolgen und
sich neue anzusehen.
● ● ●
Listing 11: Optionen
joCache.set("options", function() {
var card = new joCard([
new joLabel("Tracking frequency
(minutes)"),
new joSelect(["10", "20", "30", "40", "50",
"60"], prefsRecord.link("frequency"))
]).setTitle("Options");
return card;
});
window.localStorage.setItem("frequency",
prefsRecord.getProperty("frequency"));
setFrequency();
}
prefsRecord.load();
setFrequency();
}
function setFrequency() {
self.frequency = (prefsRecord.
getProperty("frequency") + 1) * 10 * 60000;
}
18
02/2011 smart-developer.de

Linux-Magazin
ACADEMY
... wir qualifizieren Ihre Mitarbeiter!
IT Trainings Online
Linux und Open Source
Nutzen Sie die Vorteile
der Linux-Magazin Academy!
✓
✓
✓
✓
✓
Kompetent: Unsere Dozenten sind ausge wiesene
Profis mit lang jähriger Schulungserfahrung.
Flexibel: Der Schulungsteilnehmer lernt, wann,
wo und sooft er möchte.
Kosteneffizient: Nutzen Sie Einsparungen
gegenüber Vor-Ort-Schulungen.
Übersichtlich: Die komfortable Web- Oberfläche
zeigt gleich zeitig den Trainer und dessen
Arbeitsfläche
Individuell: Jeder Teilnehmer folgt seinem eigenen
Lerntempo.
Trainingspakete:
Monitoring mit Nagios
• WordPress 3.0
www.lpi.org
LPIC-1- / LPIC-2-Training
IT-Sicherheit Grundlagentraining
OpenOffice – Arbeiten mit Vorlagen
Was Teilnehmer über die
Linux-Magazin Academy sagen:
„Mit den Videos haben Sie ins Schwarze
getroffen. Es gibt nichts Vergleichbares.“
„Eine hervorragende Anleitung zum
praktischen Arbeiten“
Testen Sie unsere Demovideos:
academy.linux-magazin.de/demo
Präsentiert von:
www.linux-magazin.de
www.linuxhotel.de
Weitere Infos: academy.linux-magazin.de

Schwerpunkt
MonkeyCoder
Monkey, die Multiplattform-Sprache
Die Affen
sind los…
Mit Monkey wurde erst vor Kurzem eine neue Multiplattform-Programmiersprache
veröffentlicht. Sie verspricht, mit einer Codebase, HTML5-,
Flash-, Android-, iOS-, XNA-, Windows, Mac und Linux-Anwendungen zu
erstellen. Hört sich genial an, ist es auch. Jochen Heizmann
Cheng En Lim, 123RF
Um eine große Anzahl von Plattformen
zu bedienen, verfolgt Monkey
den Ansatz, Code der Quellsprache
in Code der Zielplattform
zu übersetzen. Anschließend wird der erzeugte
Code an die nativen Tools der Ziel-
Plattform weitergereicht (siehe Abbildung 1).
Das heißt die entsprechenden SDKs müssen
korrekt eingerichtet sein.
Die Idee dahinter hört sich sehr vielversprechend
an, da man damit seine Anwendung
ohne Mehraufwand auf Mobile Phones,
Tablets, Desktop-PCs und Videospiele-Konsolen
bringen kann. Was hinten herausfällt,
sind native Applikationen. Dadurch haben
die Programme oftmals eine bessere Performance
als Code, der auf einer VM ausgeführt
wird oder Scriptsprachen, die interpretiert
werden müssen.
Lasst uns eine Sprache
sprechen!
Monkey ist eine High-Level-Programmiersprache
mit OOP-Features, die ihre Wurzeln
in Basic hat. An manchen Stellen haben die
Macher auch von Java abgekupfert. Klassen,
generische Klassen, abstrakte Klassen und
Vererbung gehören zum Sprachumfang. Interfaces
oder Mehrfachvererbung unterstützt
die Programmiersprache dagegen nicht. Die
Sprache selbst ist case-sensitive.
Monkey als Sprache ist gewöhnungsbedürftig.
Ein Beispiel: Ähnlich den Packages
in Java lässt sich Code in Module unterteilen.
An anderen Stellen kann das Modul mit der
Import-Anweisung integriert werden. So
weit, so gut: Mit den Schlüsselwörtern Public
und Private ist es möglich, einer Member-Variable
eine Sichtbarkeit zuzuweisen
(Protected gibt es im Übrigen nicht.). Dies
stellt sicher, auf welche Eigenschaften, Methoden
oder Funktionen der Entwickler von
außerhalb des Moduls Zugriff hat. Innerhalb
der Datei darf jedoch von anderen Codeabschnitten
auf die geschützten Variablen zugegriffen
werden. Die Sichtbarkeit gilt also nur
für fremde Dateien.
Auch mag die Basic-ähnliche Syntax auf
den ersten Blick für Java- oder C/​C++-Entwickler
etwas unschön wirken. Statt geschweifter
Klammern gibt es einfache Blöcke
im Stil von
If Expression Then ..... End
Somit ähnelt Monkey eher einer Scriptsprache
wie zum Beispiel Lua. Monkey ist jedoch
statisch typisiert, und ermöglicht es zudem,
viele Fehler bereits zur Übersetzungszeit zu
erkennen.
Die Schnittstelle nach
draußen
Mithilfe externer Deklarationen wird Code
der Zielplattform mit Monkey verheiratet. Im
Gegensatz zur Ehe von Mann und Frau, gibt
es mit Monkey keine Verständigungsprobleme.
Kurz gesagt: Der emsige Entwickler
greift direkt aus Monkey heraus auf plattformspezifischen
Code zu. Nützlich – speziell
für Performance-Optimierungen oder um
externe APIs anzubinden.
20
02/2011 smart-developer.de

Schwerpunkt
MonkeyCoder
Abb. 1: Monkey übersetzt Code in unterschiedliche Zielsprachen, um diese an den zuständigen Compiler
und an SDK-Tools weiterzureichen.
Beim Build-Prozess wird nur ein bestimmter,
in Kommentar-Annotations eingeschlossener
Abschnitt im Zielcode ersetzt (sofern die
Zielcode-Datei schon vorhanden ist). Das ist
praktisch, da man so den generierten Quellcode
erweitern oder verändern kann, ohne
dass die Änderungen bei jedem Übersetzen
verlorengehen.
Die API
Out of the Box kommt Monkey mit zwei Modulen
daher: Monkey und Mojo. Während
Abb. 2: Die mitgelieferte IDE von Monkey fällt leider etwas spartanisch aus und dürfte XCode- oder Silverlight-Entwickler nicht gerade begeistern.
smart-developer.de 02/2011 21

Schwerpunkt
MonkeyCoder
Abb. 3: Jungle Ide für Windows macht das Entwickeln mit Monkey deutlich angenehmer und intuitiver. Aktuell
gibt es die IDE zu einem Preis von 65 Euro mit einer Lizenz auf Lebzeiten.
Listing 1: Hello World in Monkey
Strict
Import mojo
Import monkey
Class MyFirstApp Extends App
Field x:Int
Field y:Int
Method OnCreate:Int()
SetUpdateRate(30)
Return 1
End
Method OnUpdate:Int()
x = MouseX()
y = MouseY()
Return 1
End
Monkey die Sprachgrundlagen bildet (Arrayund
String-Funktionen, Listen, Mathematik,
usw.) bekommen wir mit Mojo ein einfaches
Framework zum Erstellen von Multimedia-
Anwendungen an die Hand. Ein Grafik-Modul,
Funktionen, um Sounds und Musik abzuspielen,
sowie ein Input-Modul, um Benutzereingaben
auszulesen, gehören ebenfalls
zum Lieferumfang.
Method OnRender:Int()
Cls
DrawText("Hallo Welt!", x, y)
Return 1
End
Method OnLoading:Int()
Cls
DrawText("Loading...", 0, 0)
Return 1
End Method
End
Function Main:Void()
New MyFirstApp
End
Monkey bemüht sich darum, alles so einfach
wie möglich zu halten. Dadurch ist die Sprache
schnell verständlich. Die manchmal nötige
Abstraktion muss dann allerdings der
Programmierer schaffen. Die stetig wachsende
Community hat auch schon einiges an
freien Zusatzmodulen zur Verfügung gestellt.
Der Dokumentation hätte etwas mehr Aufmerksamkeit
des Entwicklers gut getan. Dennoch
ist sie für den Einstieg und die zentralen
Fragen ausreichend: Eine verständliche
Einführung und Übersicht ist auf der Projektseite
[1] verfügbar, genauso wie eine API-Dokumentation,
die mit der IDE verlinkt ist.
Im Editor oder im Jungle
Womit wir zu der mitgelieferten Entwicklungsumgebung
kommen, die leider nicht
überzeugen kann. Es handelt sich lediglich
um einen etwas erweiterten Editor. Dieser
bietet weder Auto-Completion noch Syntax-
Highlighting von eigenen Klassen, Methoden
oder Funktionen. Entwickler Marc Sibly hat
bereits Nachbesserung angekündigt: Ein
zweites Eclipse, XCode oder Visual Studio
wird aber sicher nicht entstehen.
Zumindest für Windows-Systeme gibt es
eine Third-Party-IDE, die auf .NET basiert
und sich wirklich sehen lassen kann: Jungle.
Sie bietet alles, was man sich von einer erwachsenen
Entwicklungsumgebung wünscht
und kostet in der günstigsten Version gerade
mal 30 Euro. Mac-User gucken aber in die
22
02/2011 smart-developer.de

Schwerpunkt
MonkeyCoder
Abb. 4: Dank Monkey ist das Spiel Impact auf mehreren Plattformen lauffähig. Den Quellcode zum Spiel finden
Sie auf der Smart-Developer-Heft-DVD und im Internet.
Röhre. Sie müssen warten und hoffen, dass
da noch etwas Besseres nachkommt. Doch
wie sieht denn nun eine typische Monkey-
Anwendung aus?
Vorhang auf!
Den Klassiker „Hallo Welt“ in Monkey zeigt
Listing 1. Wir beginnen ganz unten: Den Einstiegspunkt
eines jeden Monkey-Programmes
bildet die Main-Funktion. In unserem Beispiel
erstellen wir hier eine Instanz unserer
Klasse MyFirstApp, die wir von mojo.App abgeleitet
haben.
Diese enthält zwei Variablen vom Typ Integer.
Außerdem haben wir einige Methoden
überschrieben. Initialisierungen nehmen wir
in OnCreate vor: Mit SetUpdateRate(30) erstellen
wir einen Timer, welcher die OnUpdate-Methode
dreißigmal pro Sekunde aufruft.
Wenn wir dies nicht tun, wird OnUpdate
nicht automatisch ausgeführt.
Alternativen
HAXE [3] bietet einen ähnlichen Ansatz wie
Monkey, benutzt jedoch für unterschiedliche
Targets spezialisierte Libraries. So ist es in der
Theorie zwar auch möglich mehrere Plattformen
zu bedienen, allerdings ist der Anwendungszweck
doch eher der, für eine vorher
ausgewählte Ziel-Plattform zu entwickeln. Vorteil:
In einer Webanwendungen wird für Frontund
Backend die gleiche Sprache verwendet.
Allerdings, sind vor allem die Bibliotheken für
mobile Endgeräte noch sehr experimentell.
Auch Java [4] ist sehr beliebt, wenn es darum
geht, verschiedene Plattformen zu bedienen.
Java gelingt dies durch eine Virtual Machine,
die auf der Zielplattform läuft. Dies ist auf den
meisten Handys, Desktop-Systemen und im
Browser möglich. Darüber hinaus bietet Java
einen riesigen Funktionsumfang und ist sauber
aufgebaut.
Das Corona-Framework [5] bietet die Möglichkeit
unter Mac OS X und Windows für Android
und iOS mit Lua und einer sehr guten, umfangreichen
API zu entwickeln.
Apropos OnUpdate: Hier platzieren wir auch
die komplette Programmlogik. Wir speichern
die Pixel-Koordinaten der Maus in unsere
beiden Klassen-Variablen.
Schließlich leeren wir das Display in On-
Render und zeichnen den Text „Hallo Welt“.
Stopp, da fehlt doch noch etwas! Das Laden
von Ressourcen, zum Beispiel Bildern, erfolgt
asynchron. So lange ein Ladevorgang
aktiv ist, wird anstatt OnRender OnLoading
aufgerufen.
Zu guter Letzt hat sich sicherlich der eine
oder andere Leser gewundert, was die Zeile
Strict am Programmbeginn zu bedeuten
hat. Monkey’s Sprachdefinition erlaubt eigentlich
diverse Shortcuts. Beispielsweise
müssen Sie keine Variablen-Typen oder Return-Statements
angeben. In dem Fall sind
Variablen automatisch vom Typ Integer. Auch
Return-Statements generiert der Compiler automatisch.
Im Strict-Modus dagegen ist die
Definition strenger. Die oben angesprochenen
Dinge müssen angegeben werden, ansonsten
beschwert sich der Compiler. Jeder
Entwickler kann sich so für seinen bevorzugten
Modus entscheiden.
Damit hat man das Grundgerüst einer Anwendung
zusammen. Damit der Einstieg
noch etwas leichter fällt, befindet sich auf
der Heft-DVD (und im Internet auf GitHub
[2]) der Quellcode eines kompletten in Monkey
programmierten Spiels, der zum Studieren
und Experimentieren einlädt. Sollten Sie
das Spiel weiterentwickeln, freut sich die Redaktion
über eine Zusendung. Wir veröffentlichen
den Code dann sehr gerne auf einer
der nächsten DVDs.
● ● ●
Monkey im Überblick
Monkey-Website: www.monkeycoder.co.nz
Lizenz-Kosten: Kostenlos für HTML5, 120 USD
für weitere Targets (HTML5, Flash, iOS, Android,
XNA, Windows, Mac, Linux)
Jungle-Website: www.jungleide.com
Lizenz-Kosten: 65 Euro Plattform: Windows
Der Autor
Jochen Heizmann ist Spiele-Entwickler
bei Gameforge, einem
der führenden Publisher und Entwickler
für browser- und clientbasierte
Massive-Multiplayer-
Spiele. Daneben enwickelt und
veröffentlicht er auf seiner Website
www. intermediaware. com
Indie- und Casual-Games für unterschiedliche
Plattformen. Sein
Entwickler-Blog findet sich ebenfalls
unter der genannten URL.
Infos
[1] Projekt-Webseite: http://​
www. monkeycoder. co. nz
[2] Beispielapp im Quellcode:
https:// github. com/​
JochenHeizmann
[3] Haxe: www. haxe. org
[4] Java:
http:// www. java. com/ de/
[5] Corona: www. anscamobile.​
com/ corona/
smart-developer.de 02/2011 23

Schwerpunkt
Mobile Business Apps
Mobile Business Apps für mehrere Gerätetypen
Weichen
stellen
Viele Firmen stehen vor der Aufgabe, ihre Unternehmensdaten und
Business-Anwendungen zu jeder Zeit und von überall aus erreichbar zu
machen. Um möglichst vielen Gerätetypen gerecht zu werden, eignen
sich dazu am besten webbasierte Anwendungen. Worauf man dabei
achten muss, zeigt dieser Artikel. Roman Bucher
unitedplanet.com
Geschäftsdaten unterwegs abzurufen
und zu bearbeiten, gehört
heute zu den täglichen Aufgaben
vieler Mitarbeiter. Verschiedene
Endgeräte wie iPhone, BlackBerry, Android-
Geräte oder Tablet-PCs stellen aber an die
Bedienung und Darstellungsweise zum Teil
sehr unterschiedliche Anforderungen. Um
die Daten und Applikationen trotzdem einheitlich
bereitzustellen, bieten sich webbasierte
Lösungen an. Im Folgenden soll ein
Überblick über die wichtigsten Punkte gegeben
werden, die Entwickler bei der Umsetzung
beachten sollten, damit alle Anwender
danach ein auf ihr Gerät optimiertes Verhalten
der App genießen können.
Default Delivery Context
Ausgangspunkt eines jeden Projektes sollte
der von der W3C Mobile Web Best Practices
Working Group (BPWG) empfohlene Default
Delivery Context (DDC) sein. Hierbei handelt
es sich um Mindestanforderungen, welche
an die mobile Anwendung und das Layout
gestellt werden. Die Einhaltung dieser Vorgaben
stellt sicher, dass die gewünschten Inhalte
auch auf älteren und/​oder technisch
beschränkteren Geräten in einer für den Anwender
lesbaren Form dargestellt werden
können. Features, die diesen Mindestanforderungen
genügen, sind beispielsweise die
Verwendung der Bildformate JPEG oder GIF
89a sowie character encoding in UTF-8. Das
maximale Datenvolumen einer mobilen
Applikationsseite sollte 20 KByte nicht überschreiten.
Darüber hinaus sollten keinerlei
Skriptsprachen wie zum Beispiel JavaScript
eingesetzt und Style-Elemente nur auf Basis
von CSS Level 1 verwendet werden. Beachtet
man diese Punkte bei der Erstellung einer
mobilen Applikation, steht dieser schon einmal
ein Grundgerüst an Funktionalität zur
Verfügung, das den technischen Voraussetzungen
aller Geräte genügt.
Progressive Enhancement
Darauf aufbauend lassen sich unter Einsatz
der Methode des Progressive Enhancement
anschließend detailliertere und umfassen-
24
02/2011 smart-developer.de

Schwerpunkt
Mobile Business Apps
Abb. 1: iPhone Ansichtsseite mit Navigationselementen
im Kopf der Seite und der Datumseingabe über
das Spinning-Wheel.
dere Anforderungen realisieren. Hierbei können
dann technische Stärken und Fähigkeiten
einzelner Geräte miteinbezogen werden.
So erhalten die Nutzer der mobilen Applikation
ein „besseres“ bzw. „funktionaleres“ Erlebnis
als es mit den beschränkten Funktionalitäten
des DDC möglich ist. Realisiert werden
können diese Erweiterungen beispielsweise
mit JavaScript und Flash, über die Beachtung
größerer Displays und höherer Auflösungen
sowie die Verwendung von Style-
Elementen auf Basis von CSS Level 2 oder 3.
User-Agent-Header
Wird die Applikation um derartige Funktionalitäten
erweitert, ist es wichtig sicherzustellen,
dass die Endgeräte den für sie gedachten
Inhalt aufrufen. Solche gerätespezifischen
Weichen lassen sich am einfachsten
über den User-Agent-Header realisieren.
Bei diesen Headern handelt es sich um einfache
Kennungen, die ein auf einen Inhalt
zugreifender Client – wie beispielsweise ein
Webbrowser – sendet. Diese Kennungen enthalten
zudem Informationen über das Client-
Betriebssystem, Softwareversionen und so
weiter. Listing 1 zeigt zum Beispiel den
User-Agent-Header von Firefox 4.0 und der
iPhone-Version von Safari. Im ersten der beiden
Beispiele ist der User-Agent-String des
Desktop-Browsers Mozilla Firefox 4 zu
sehen. Der zweite String identifiziert einen
User-Agent des Safari Mobile Browsers eines
Apple iPhone 4. Da diese Header mit einer
Vielzahl an Schlüsselwörtern (zum Beispiel
iPhone, Android oder BlackBerry) gefüllt
sind, lassen sich die Strings auf diese
Begriffe hin analysieren. Somit lässt sich
feststellen, um welchen zugreifenden Client
es sich aktuell handelt und es können
Weichen hinsichtlich technischer Features,
spezieller Layouts oder Bedienkonzepte
realisiert werden. So kann jedem Client der
für ihn bestimmte Inhalt zur Verfügung
gestellt werden.
Wichtig ist hierbei jedoch nicht nur die
Suche nach dem Vorkommen bestimmter
Schlüsselwörter, sondern ebenfalls die Suchreihenfolge
sowie die richtige Auswahl der
Begriffe, nach denen gesucht werden soll.
Beispielsweise macht die Suche nach dem
Schlüsselwort „Mobile“ nur an solchen Stellen
Sinn, an denen zwischen einem Desktopund
einem mobilen Layout unterschieden
werden soll. Eine detailliertere Unterscheidung
nach der Art des mobilen Endgerätes,
zum Beispiel ob es sich um ein BlackBerry-
Gerät oder ein iPhone handelt, ist hierbei
nicht möglich. Für eine solche Unterscheidung
müssen andere Begriffe wie iPhone,
BlackBerry oder Android gewählt werden.
Look-and-Feel anpassen
Die automatische Erkennung des eingesetzten
Gerätetyps ist auch deshalb notwendig,
um die jeweiligen Anforderungen bezüglich
des Look-and-Feel dieses Typs zu erfüllen. So
sollten Entwickler zum Beispiel beachten,
dass iPhone-Apps die Darstellung vorhandener
Daten normalerweise über Listen realisieren
und sich die Navigationselemente wie
zum Beispiel Back-Buttons im Kopfbereich
der Seite befinden. Eingaben von Datumsoder
Zeitwerten sollten nicht über eine numerische
Tastatur, sondern mithilfe eines
Spinning Wheels möglich sein.
Spezielle Bedienung
Oftmals wird beim Entwickeln für mobile
Endgeräte nicht oder nur ungenügend beachtet,
dass Smartphones und Tablet-PCs andere
Bedienkonzepte zugrunde liegen, wie man
sie von Desktop-PCs gewohnt ist. Einem Benutzer
stehen hier nicht wie üblich Tastatur
Listing 1: User-Agent-Header
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0) Gecko/20100101 Firefox/4.0
Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0 like Mac OS X; en‐us) AppleWebKit/532.9 (KHTML,
like Gecko) Version/4.0.5 Mobile/8A293 Safari/6531.22.7
smart-developer.de 02/2011 25

Schwerpunkt
Mobile Business Apps
und Maus zur Verfügung, sondern die Interaktion
erfolgt über Gesten mit den Fingern.
Auf diesen Umstand ist bereits während des
Applikationsdesigns einzugehen.
Der Benutzer sollte dabei in möglichst wenigen
Schritten und mit möglichst wenig Interaktion
an sein Ziel — die gewünschten Informationen
— gelangen. Dies kann zum
Beispiel dadurch erreicht werden, dass er in
einer Liste verschiedene Werte zur Auswahl
bekommt, anstatt zu verlangen, einen Wert
manuell einzugeben.
Zu vermeidende Elemente
Ebenfalls ist es sinnvoll, auf spezielle Elemente
und Funktionen zu verzichten, die
zwar im Desktopumfeld weitverbreitet sind,
jedoch im mobilen Umfeld unbedingt vermieden
werden sollten. Hierzu zählen unter
anderem die Weiterleitung beziehungsweise
das Öffnen von Popups und Weiterleitungen
mit target="_blank". Bereits bei Desktop-
Browsern ist diese Art der Benutzerführung
schwer zu handhaben. Auf mobilen Geräten
ist dies jedoch nochmals sehr viel schwieriger,
da viele Geräte Popups gar nicht erst unterstützen.
Doch selbst wenn solch eine Unterstützung
vorhanden ist, sorgen mehrere
Bildschirmebenen auf einem Mobil-Display
in der Regel für eine komplizierte Handhabung
und sollten deshalb vermieden werden.
Weiterhin beliebt sind auch HTML-Frames,
um mehrere HTML-Dokumente in einer Ansicht
zusammenzufassen und so eine anwendungsähnliche
Oberfläche zu schaffen. Abgesehen
davon, dass viele mobile Geräte
Frames nicht unterstützen, führt diese Art
der Aufbereitung einer Ansicht im mobilen
Umfeld zu unzähligen Problemen: Oft funktioniert
der Zurück-Button nicht oder nicht
wie gewünscht, auch Lesezeichen anzulegen,
ist meist nicht möglich. Zudem wird die
Suche nach Inhalten erschwert und es entstehen
Sicherheitsprobleme, da nicht immer direkt
zu sehen ist, wenn verschiedene Frames
aus verschiedenen Quellen stammen.
Verzichten sollten Sie auch auf Spacer-Gifs,
also auf Grafiken, die lediglich dazu dienen,
Inhalte an bestimmten Positionen zu platzieren.
Diese Grafiken erhöhen nicht nur die
Anzahl an Requests, sondern verursachen
unter Umständen auch höhere Kosten. Für
jedes hinterlegte Bild muss beim Aufruf des
Inhalts bzw. der Seite ein weiterer Request
abgesetzt werden. Höhere Latenzzeiten und
ein höheres Datenaufkommen sind die Folge.
Deshalb sollte stattdessen auf Cascading
Style Sheets (CSS) zurückgegriffen werden.
Damit lassen sich Platzierungen durch Definition
in einer zentralen Datei realisieren,
was die Anzahl an Requests minimiert und
eine saubere und fehlerresistentere Seitenstruktur
zur Folge hat.
Durch den Einsatz von CSS kann zudem
auf Layout-Tabellen verzichtet werden. Dadurch
erspart man sich unerwünschte und
meist nicht vorhersehbare Seiteneffekte:
Wird beispielsweise eine Tabelle vollständig
dargestellt und überschreitet sie eine gewisse
Breite, müssen Benutzer horizontal und vertikal
scrollen, um Inhalte anzusehen. Diese
Art der Navigation ist gerade bei einem mobilen
Endgerät äußerst umständlich und
sollte deshalb vermieden werden. Ebenfalls
kann es passieren, dass der verwendete
Browser die Tabelle beim Überschreiten der
Displaybreite umbricht und die fehlenden
Spalten in einer neuen Zeile einfügt. Diese
clientseitige und geräte- sowie softwareabhängige
Transformation ist nicht vorhersehbar
und geht somit zulasten der Übersichtlichkeit.
Außerdem vergrößert sich durch die
Verwendung von Tabellen der zugrunde liegende
HTML-Code erheblich, was zu einem
unsauberen Code und erhöhtem Datenvolumen
führt. Durch die Verwendung von CSS
können diese Effekte vermieden werden.
Semantisches HTML
Um eine Aufblähung des Codes zu vermeiden,
sollte man sich bei der Umsetzung von
Seiten und Layouts nicht nur auf das rein optische
Ergebnis konzentrieren. Vielmehr
sollte man darauf achten, dass die drei für
ein gutes Ergebnis notwendigen „Säulen“ Inhalt,
Design und Struktur strikt voneinander
getrennt bleiben und auf alle drei Punkte in
gleichem Maße Wert gelegt wird. Im Hinblick
auf die Struktur sollte man zudem beachten,
dass das zugrunde liegende Konstrukt an
HTML-Elementen eine gesunde und möglichst
semantische Struktur besitzt. Doch
was genau ist darunter zu verstehen?
Das World Wide Web stellt eine riesige
Masse an Inhalten und Information bereit.
Diese Daten stehen innerhalb des WWW
normalerweise jedoch in keinerlei Beziehung
zueinander. Das WWW bietet lediglich eine
Art Präsentationsplattform, die die erfassten
Daten darstellt.
Um Inhalte tatsächlich als solche zu erkennen
und erfasste Daten entsprechend deuten
zu können, entwickelte Tim Berners-Lee (der
„Erfinder“ des WWW) das Konzept des Semantic
Web. Dieses beruht darauf, dass das
Internet aus Daten besteht, die direkt oder
indirekt von Maschinen interpretiert und verarbeitet
werden können. Ein Punkt, der als
26
02/2011 smart-developer.de

Schwerpunkt
Mobile Business Apps
Baustein der Vision vom semantischen Web
angesehen werden kann, ist semantisches
HTML. Die Idee des semantischen HTML
lässt sich am besten an einem einfachen Beispiel
erläutern: Der folgende Codeabschnitt
zeigt zweimal den Text Semantic HTML.
Beide Darstellungen unterscheiden sich innerhalb
eines Browsers optisch nicht voneinander
– bezüglich ihrer Erzeugung in HTML
sind sie jedoch grundlegend verschieden.
Dies sieht man, wenn man den zugrunde liegenden
Code einmal näher betrachtet:
Semantic
HTML
Semantic HTML
Die Formatierung der ersten Überschrift
wurde manuell vorgenommen. Hierbei wurden
die Schriftgröße sowie die Formatierung
für den Text angegeben. Bei dieser Art der
Textformatierung ist es nicht möglich, die
Überschrift als solche zu interpretieren. Da
über HTML nur eine optische, aber keine inhaltliche
Struktur erzeugt wurde, können
weder Suchmaschinen noch Screenreader die
Relevanz und Struktur des Inhalts (die eigentlich
beabsichtigte Überschrift) erkennen.
Die zweite Überschrift wurde dagegen mit
dem HTML-Tag erzeugt. Zwar ergibt
sich hierdurch das gleiche optische Ergebnis,
jedoch kennzeichnet dieses Tag den im folgenden
Element enthaltenen Text eindeutig
als Überschrift. Suchmaschinen und Screenreader
können so den Inhalt deuten, zuordnen
und entsprechend interpretieren. Zudem
besitzen praktisch alle mobilen Endgeräte
ein Standard-Rendering, um beispielsweise
bei abgeschaltetem CSS oder fehlenden technischen
Möglichkeiten ein Mindestmaß an
HTML-Darstellung von Standardtags wie
zu gewährleisten. Das hört sich jetzt relativ
trivial an, ist aber bei der Umsetzung
ein sehr wichtiger Punkt.
Unterstützende Software
Diese Punkte gilt es zu beachten, wenn man
Applikationen entwickeln will, die auf verschiedenen
mobilen Endgeräten laufen sollen.
Mittlerweile gibt es jedoch auch eine
Reihe an Softwareprodukten, welche die Entwicklung
mobiler Applikationen unterstützen.
Im Bereich Business Software ermöglichen
dies unter anderem die beiden Portallösungen
Microsoft SharePoint (http://​
sharepoint. microsoft. com) und Intrexx von
United Planet (http:// www. intrexx. com).
Abb. 2: Intrexx passt den Code der Web-Anwendung
so gut wie möglich an die Zielplattform an.
Bei Intrexx werden die Entwickler mithilfe
von Assistenten bei der Erstellung mobiler
Applikationen und Layouts unterstützt. Anstatt
zu programmieren, werden bei dieser
Software mobile Applikationsseiten mithilfe
eines Seitenassistenten erstellt. Der Entwickler
wählt hierbei über eine GUI die Zielplattform
(Geräte mit oder ohne WebKit-Browser),
die anzuzeigenden Daten sowie die gewünschten
Navigationselemente aus. Anschließend
wird die Seite automatisch generiert.
Bereitgestellt werden die ausgewählten
Optionen innerhalb einer XML-Struktur. Alle
später relevanten Eigenschaften – wie zum
Beispiel die Verwendung der richtigen und
semantisch aussagekräftigen HTML-Elemente
(zum Beispiel für Überschriften
der ersten Ebene, und für Auflistungen)
– sind an dieser Stelle bereits definiert.
Korrekte Labels für Eingabe- oder Ansichtsfelder
werden automatisch erstellt. Die
für mobile Geräte notwendigen Stilklassen
werden ebenfalls automatisch gesetzt, um
nach einer User-Agent-Filterung das korrekte
Layout bereitzustellen. Dieses XML wird in
einem weiteren Schritt mithilfe von XSL in
VM/​HTML-Dateien transformiert.
Die Ergebnisse dieser Transformation können
anschließend direkt im mobilen Webbrowser
aufgerufen werden. Die fertigen mobilen
Applikationsseiten verwenden CSS,
sind mit einer semantischen HTML-Struktur
ausgestattet und verzichten auf Layouttabellen,
Spacer-GIFs und Frames. So entstehen
optisch ansprechende Webapplikationen für
verschiedene mobile Endgeräte – optimiert
für das jeweilige Gerät und mit den typischen
Schaltflächen und Logiken.
● ● ●
Der Autor
Roman Bucher befasste sich in
seinem Studium der Informatik
insbesondere mit Java-Programmierung.
Er arbeitet heute als
technischer Autor beim Portalsoftwarehersteller
United Planet.
Als Bindeglied zwischen der
Entwicklung und dem Support
erstellt er Dokumentationen und
Codebeispiele für Kunden und ist
darüber hinaus in der Qualitätssicherung
tätig. In diesem Rahmen
erarbeitete er unter anderem ein
umfassendes Arbeitspapier, das
sich mit der Erstellung mobiler
Business Applikationen befasst.
smart-developer.de 02/2011 27

Schwerpunkt
Enterprise Generation Language
Smartphone-Apps mit IBM EGL
Für Groß
und Klein
Auf den ersten Blick gibt es zwischen einem System-Z-Großrechner und
einem iPhone kaum Gemeinsamkeiten. Trotzdem lassen sich beide
Systeme mit einer Programmiersprache bedienen. Das Rezept heißt
Enterprise Generation Language und stammt von IBM. Joachim Sieber
Mit freundlicher Genehmigung von Apple
ibm.com
Trotz zunehmendem Einsatz von
Standardsoftware und umfangreichen
Entwicklungen neuer Individualsoftware
sind viele Unternehmen
nach wie vor auf ihre Altsysteme (Legacy)
angewiesen. Diese binden teilweise
große Teile des IT-Budgets und verhindern
die radikale Veränderung von Geschäftsprozessen.
In vielen Unternehmen besteht die
Legacy-Welt aus einer Vielzahl von gewachsenen
Systemen diverser Hersteller, vom
Mainframe bis zum einfachen PC von der
Stange. Oft arbeiten diese zudem auf unterschiedlichen
Plattformen und verfügen über
verschiedene Sprachen und Datenhaltungssysteme.
So benötigt jede Umgebung ihre eigenen
Spezialisten und Werkzeuge. Die
Integ ration in eine moderne und serviceorientierte
Architektur ist deshalb mit großem
Aufwand verbunden.
Vorteile von EGL
EGL wurde dazu geschaffen, diese Probleme
zu beheben. Details zur Enterprise Generation
Language finden Sie im Kasten „Was ist
EGL?“ Die größtenVorteile sind:
• Die gesamte Entwicklung mobiler Applikationen
– vom Backend Service bis zum
Frontend UI – geschieht in EGL. Es besteht
somit kein Bedarf an JavaScript- oder anderen
Fertigkeiten.
• Entwicklung und Bereitstellung einer einzigen
Applikation, die alle User unterstützt,
unabhängig von der benutzten mobilen
Plattform.
• Einfacher Zugriff auf vorhandene RPGoder
Cobol-Businesslogik, die mit EGL einfach
wiederverwendet werden kann.
28
02/2011 smart-developer.de

Schwerpunkt
Enterprise Generation Language
Durch die Vielzahl der eingebauten Schnittstellen
ist es für den Entwickler relativ einfach,
ohne tiefere Kenntnis der Legacy-Technologien
Anwendungen in moderne Softwarearchitekturen
zu integrieren.
Einstieg über Eclipse
Neben vielen Schnittstellen, lässt sich auch
die EGL-Entwicklungsumgebung selbst bei
Bedarf als Plugin zu bestehenden Eclipsebasierten
Entwicklungsumgebungen für System
z und System i installieren. Entwickler
können somit zwischen verschiedenen Sichten,
zum Beispiel für Legacy-Programmierung
in Cobol, RPG und anderen, Java-Programmierung
und EGL-Programmierung, wechseln.
Da sich EGL auch leicht von Entwicklern
erlernen lässt, die sich nicht mit der technischen
Komplexität einer Java-Anwendung belasten
wollen, ist EGL nebenbei auch noch ein
verbindendes Element zwischen Legacy-Programmierern
und Java-Programmierern.
Für die Ausführung von EGL-Programmen
stehen verschiedene Generierungsoptionen
zur Verfügung. Als Standard erzeugt die
Enterprise Generation Language Java-Code,
der auf beliebigen Plattformen ablauffähig
ist. Optional lässt sich auch schneller Native
Code für System z und System i erzeugen.
Damit EGL sich gut im Markt etablieren
kann, hat IBM vor einigen Monaten eine
kostenlose Version von EGL verfügbar gemacht:
die EGL Community Edition [1].
EGL steht unter einer freien Lizenz. Anfang
Juni letzten Jahres hat IBM zudem ein
Eclipse-Projekt gestartet, quasi als Alternative
zur Java-Programmierung [2]. Die EGL
Development Tools stellen somit eine freie
Entwicklungsumgebung für EGL inklusive
Parser, Compiler und Code-Generatoren
bereit. Auch die Sprache selbst – inklusive
Syntax – ist Open Source.
Mobile Web Edition
Seit Januar dieses Jahres gibt es eine erste
Erweiterungsbibliothek für das Entwickeln
mobiler Applikationen [3]. Die Library liefert
den Entwicklern Steuerungselemente, um
Web Applikationen für Smartphones oder
Tablets zu entwickeln, die das Erscheinungsbild
einer nativen iOS oder Android-Applikation
annehmen können. Sie unterstützt dabei
folgende Widgets:
• DojoMobileView
• DojoMobileList
• DojoMobileListCategory
Was ist EGL?
Speziell für die Plattformen System z und System
i hat IBM mit der Enterprise Generation
Language (EGL) ein Entwicklungswerkzeug geschaffen,
über das sich die Administration von
Legacy-Systemen vereinfachen lässt. Im
Wesentlichen besteht EGL aus zwei Komponenten:
Die erste Komponente ist eine serviceorientierte
Programmiersprache mit einer Vielzahl
von integrierten Schnittstellen zu Legacy-Anwendungen
sowie zu Diensten, Benutzerschnittstellen
und J2EE-Umgebungen. Die
zweite Komponente besteht aus einer Eclipsebasierten
Entwicklungsumgebung. Sie bringt
Werkzeuge und Wizards zur Lösung von Integrationsaufgaben
mit.
Eine EGL-Anwendung besteht aus vier Schichten:
der Datenbankzugriffsschicht, der Business
Logik, dem Controller und dem User Interface.
Jede dieser Schichten bietet eine Reihe von
Schnittstellen sowohl zu Legacy-Anwendungen,
als auch zu modernen J2EE- oder Web-
Anwendungen. So lassen sich über die Datenbankschicht
gemischt sowohl relationale Datenbanken
(DB2, Informix, Oracle, SQL-Server,
MySQL) als auch ältere Datenhaltungssysteme
(VSAM, IMS/​DB, DB2/​400, ADABAS) in einfacher
Weise ansprechen. Auf Ebene der Business
Logik und des Controllers lassen sich verschiedene
Programmiersprachen (Java, Cobol,
RPG, PL1, EGL, C, JCL, OCL, etc.), Transaktionsmonitore
(CICS, IMS) und Services (Webservices,
Restservices, RPC) einbinden. Als Benutzeroberfläche
stehen RichClient (Web2.0 mit
JavaScript), JSF, AJAX und Green Screen (5250
und 3270) zur Verfügung, wobei für mobile und
RUI-Anwendungen JavaScript zum Einsatz
kommt. EGL eignet sich nicht nur für trockene
Materien: Auch Spiele lassen sich realisieren.
Abb. 1: Schematische Übersicht der Möglichkeiten
der Enterprise Generation Language.
smart-developer.de 02/2011 29

Schwerpunkt
Enterprise Generation Language
Abb. 2: Der EGL Service Client Wizard unterstützt Sie beim Anlegen eines neuen Projektes.
Abb. 3: Per Drag & Drop richten Sie die grafische Oberfläche ein.
• DojoMobileListItem
• DojoMobileTabContainer
• DojoMobileTab
• DojoMobileSwitch
• DojoMobileButton
Um eine Beispielanwendung zu erstellen, benötigen
Sie Eclipse mit RBD (EGL) als Entwicklungsumgebung
und einen Applikationserver
(Tomcat). Im Folgenden zeigt der Artikel
anhand einer Beispielanwendung von
IBM, wie Sie eine App erstellen, die den Zins
für eine Hypothek berechnet.
Dazu legen Sie zunächst in der relationalen
Datenbank (RDB) unter dem Namen
„Zinsberechnung“ ein neues EGL-RUI-Projekt
an. Die benötigte WebService-WSDL-Datei
CallRPGAmortize.wsdl übernehmen Sie
dazu aus dem fertigen IBM-Beispielprojekt,
das Sie im Quellcode unter [4] herunterladen
können. Nun starten Sie den EGL Service
Client Wizard, welcher automatisch das
Interface mit den dazugehörigen Variablen
anlegt (Abbildung 2).
Im nächsten Schritt legen Sie einen neuen
EGL RUI Handler mit dem Namen Sample-
Calculate an und ziehen die benötigten Elemente
(dazu gehören TextLabel, DojoCurrencyTextBox,
DojoMobileSwitch, DojoMobileButton
und weitere) per Drag & Drop auf
die neue Oberfläche (Abbildung 3). Speichern
Sie anschließend die grafische Oberfläche
unter dem Namen FormGrid.
Im letzten Schritt
geht es nun ans eigentliche
Programmieren.
So soll der Zinsrechner
beim Drücken
des Buttons die Funktion
BerechnungsButton_onClick
aufrufen
und über callLocal-
Service() die Zinsen
per JavaScript berechnen.
Für einen serverbasierten
Berechnungsvorgang
über
den RPG-WebService
rufen Sie die Funktion
callRpgService() auf,
als Callback-Funktion
des WebServices dient
displayResultsRPG().
30
02/2011 smart-developer.de

Schwerpunkt
Enterprise Generation Language
Der Autor
Joachim Sieber arbeitet bei der
Firma PKS Software GmbH als
Manager Techsales. Sie erreichen
Herrn Sieber unter der
E-Mail-Adresse sieber@pks. de.
Infos
Abb. 4: Der Quellcode der hier vorgestellten Beispielanwendung.
Schließlich ermittelt die Anwendung aus den
erhaltenen Werten über Amortize() den gewünschten
Zins. Um das Aussehen der App
auf verschiedenen Plattformen muss sich der
Entwickler nicht kümmern, das erledigt EGL
automatisch. Die fertige mobile
EGL-Webapplikation können Sie
sich unter [5] in Aktion ansehen
und testen.
Fazit
Mit EGL sind die Entwickler imstande,
eine mobile Web-Applikation
schnell zu entwickeln, die wie
eine native mobile Applikation
aussieht. EGL eignet sich dabei besonders
gut für Firmen und Anwender,
die zum Teil Uralt-Anwendungen
ins mobile Zeitalter übernehmen
möchten. Wer neugierig
geworden ist und mehr erfahren
möchte, besucht einfach das EGL-Café, den
Treffpunkt der EGL-Community [6]. Hier finden
Sie auch am schnellsten Antwort, falls
Sie bei der Programmierung mit EGL auf
Prob leme stoßen.
● ● ●
Abb. 5: Die fertige Anwendung unter iOS und Android (rechts).
[1] EGL Community Edition:
https:// www. ibm. com/​
developerworks/​
mydeveloperworks/ wikis/​
home/ wiki/ W75c8733d99bb_
4d55_9ee8_4dbc8c56ebee/​
page/ EGL%20Community%20Edition?
lang=en
[2] EGL-Eclipse-Projekt:
http:// www. eclipse. org/​
proposals/ egl/
[3] EGL Mobile Dokumentation:
https:// www. ibm. com/​
developerworks/​
mydeveloperworks/ files/​
form/ anonymous/ api/ library/
da00a47c‐46a4‐4a0e‐9656‐26
2b7af8305c/ document/​
84fa749f‐a446‐4bb8‐90fcb64b2ff444d9/
media/​
EGL%20Mobile%20Web%20
V070. pdf
[4] Beispielprojekt von IBM:
https:// www. ibm. com/​
developerworks/​
mydeveloperworks/ blogs/ 3e
2b35ae‐d3b1‐4008‐adee‐2b3
1d4be5c92/ entry/ exploring_
the_mobile_mortgage_
app1? lang=en
[5] Beispielanwendung in Aktion:
http:// vpn. pks. de/​
MobileMortgage/ index‐en_
US. html
[6] EGL-Café:
https:// www. ibm. com/​
developerworks/ rational/​
community/ cafe/ egl. html
smart-developer.de 02/2011 31

Hardware
Dell Venue Pro
dell.com
Dell Venue Pro mit Windows Phone 7
Starkes
Stück
Big is beautiful haben sich die Designer bei Dell wohl gesagt,
als sie ihr erstes Smartphone mit Windows Phone 7 entworfen
haben. Das Resultat heißt Venue Pro und macht in praktisch
allen Bereichen eine gute Figur. Marcel Hilzinger
Wer ein Smartphone mit Windows
Phone 7 und einer Hardware-Tastatur
suchte, musste
sich hierzulande recht lange
gedulden. Seit April gibt es nun immerhin
zwei Modelle: das hier vorgestellte Dell
Venue Pro im Stil eines Palm Pre und das
HTC 7 Pro mit seitlich ausziehbarer Tastatur.
Das Venue Pro besitzt eine komplette Quertz-
Tastatur mit einer Sondertaste für [ä] und
[é], die sich nach unten ausfahren lässt und
wahlweise als Displaytastatur für die Texteingabe
zur Verfügung steht.
Der offizielle Preis bei Dell Deutschland
beträgt inklusive Versandkosten 550 Euro,
günstiger gibt es das Smartphone zurzeit nur
bei Amazon (490 Euro, Stand Mai 2011). Falls
Sie das Gerät bei Dell bestellen, erhalten Sie
für lediglich 9 Euro Aufpreis einen Support
mit zwei Jahren Abholservice vor Ort.
Die Hardware
Das Venue Pro liegt sehr gut in der Hand.
Das hängt unter anderem damit zusammen,
dass es mit einem Gewicht von knapp 200 g
sehr schwer und zudem auch 1,5 cm dick ist.
Das Design erinnert mit dem abgerundeten
Rücken und der schräg angeschnittenen Unterkante
auf den ersten Blick an das Xperia
X10 von Sony Ericsson, das Venue Pro bringt
allerdings eine nach unten ausziehbare Hardware-Tastatur
mit. An der Verarbeitung gibt
es kaum etwas auszusetzen. Einzig die hintere
Abdeckung, unter der sich der
1400-mAh-Akku und der SIM-Kartenslot befinden,
könnte etwas stabiler gebaut sein.
Wie die meisten seiner WP7-Artgenossen
verzichtet auch das Venue Pro auf einen
Micro-SD-Kartenslot, obwohl ursprünglich
ein solcher geplant war und auch eine entsprechende
Aussperrung vorhanden ist [2].
Sie müssen also mit den integrierten 8 GByte
Speicher auskommen.
Zu den Stärken des Venue Pro gehören
neben der wirklich sehr guten Tastatur mit
einem angenehmen Schiebemechanismus
und Beleuchtung das 4,1-Zoll große
AMOLED-Display und die eingebaute 5-Megapixel-Kamera.
Das Display ist gleichmäßig
ausgeleuchtet und sorgt für sehr kräftige und
leuchtende Farben. Die Kamera macht auch
bei etwas schlechterer Beleuchtung noch
recht gute Bilder und nimmt Videos mit einer
maximalen Auflösung von 720p auf. Allerdings
eignet sie sich im 720p-Modus mehr
für gemütliche Dokumentarfilme. Sobald Sie
schnelle Schwenks durchführen oder ein sich
schnell bewegendes Motiv filmen möchten,
reicht die Rechenpower nicht mehr aus. Gut
gefiel uns auch die Schnellkamera-Funktion
von Windows Phone 7: Halten Sie den Auslöser
für rund eine Sekunde gedrückt, dann
schaltet sich automatisch die Kamera ein. Im
Unterschied zu anderen mobilen Betriebs-
32
02/2011 smart-developer.de

Hardware
Dell Venue Pro
systemen funktioniert dies bei
WP7 auch im Standby, Sie müssen
das Venue Pro dazu nicht
erst entsperren.
Die Hardwaretastatur verfügt
über einen angenehmen Druckpunkt
und lässt sich auch einhändig
auf- und zuschieben.
Die einzelnen Tasten sind leicht
gewölbt, allerdings nicht so
stark wie bei einem BlackBerry.
Die Hintergrundbeleuchtung
schaltet sich bei Dunkelheit
automatisch ein und stört nicht
mit zu grellen Tasten.
dell.com
Die Software
Zur vorinstallierten Software
gibt es nichts Besonderes zu berichten,
da Dell — wie sämtliche
anderen Hersteller auch —
aktuell an die strengen Vor gaben von Microsoft
gebunden ist. Somit unterscheidet sich
das Windows Phone 7 auf dem Dell Venue
Pro in praktisch keiner Weise von einem
WP7 bei Samsung, LG oder HTC. Da Dell
auch keinerlei zusätzliche Programme vorinstalliert
hat, könnte man quasi von einem
Vanilla Windows Phone 7 sprechen.
Das Testgerät von Dell Deutschland erreichte
uns mit der Firmware-Version
7.0.7355.0, die wir dann über Zune auf Version
7.0.7392.0 aktualisierten. Das Update
von Anfang Mai enthält neben den neuen
Features des „März-Update“ (Copy & Paste,
Verbesserungen im Market Place) auch einen
Sicherheitspatch für den Browser, der die
beim Anbieter Comodo gestohlenen Zertifikate
als nicht vertrauenswürdig erklärt.
Kritikpunkte
Negativ aufgefallen sind in den Tests die
Lautsprecher des Venue Pro und die Lautstärkeregelung.
So fällt die Qualität der eingebauten
Stereo-Speaker, die sich an der Unterkante
des Smartphones befinden, im Vergleich
zu anderen WP7-Handys deutlich ab.
Zudem kann man die Speaker so laut schalten,
dass man praktisch nur noch Lärm registriert,
keine Musik mehr. Das wäre nicht weiter
tragisch, allerdings lässt sich die Lautstärke
auch via Kopfhörer über die Maßen
aufdrehen, sodass Sie bei maximaler Lautstärke
bereits nach kurzer Zeit mit einem Gehörschaden
rechnen müssen. Da das Venue
Pro sich in erster Linie an Business-Kunden
richtet, kann man diesen Umstand verschmerzen,
bei einem Consumer-Gerät
müsste Dell hier klar nachbessern.
Abb. 1: Anstelle des Smiley und der .com-Taste wären [ö] und [ü] für
die deutschsprachige Kundschaft praktischer.
Für ein Business-Smartphone würden wir
uns zudem eine kleine Änderung bei der Tastatur
wünschen: So bringt diese zwar eine eigene
Taste mit, um Smileys einzugeben und
für die Erweiterung .com, das @-Zeichen
müssen Sie aber über eine Kombination mit
[Fn] eingeben (Abbildung 1). Auch [ö] und
[ü] wären für die deutsche Version praktisch.
In Kombination mit den Vorschlägen auf dem
Touchscreen lassen sich aber auch Wörter
mit Umlauten recht flott schreiben, zudem
können Sie sich die [Fn]-Funktion sparen,
indem Sie eine Taste einfach länger gedrückt
halten. Verzichten müssen Sie hingegen auf
eine [ß]-Taste.
Wie bei den meisten Smartphones mit großem
Display gehört auch beim Venue Pro die
Akkulaufstärke nicht zu den herausragenden
Eigenschaften des Dell-Handys. Einen Arbeitstag
hält das Venue Pro durch, viel mehr
liegt auch bei relativ extensiver Nutzung
ohne WLAN nicht drin.
Fazit
Durch seine Bauweise als Slider hebt sich
das Venue Pro von Dell klar von der restlichen
Windows-Phone-7-Konkurrenz ab.
Auch hinsichtlich der Verarbeitung und Ausstattung
des Handys gibt es mit Ausnahme
der fehlenden Lautstärkebeschränkung keine
kritischen Negativpunkte. Allerdings hätte
Dell mit einer leicht flacheren Bauweise und
etwas weniger Gewicht ein echtes Top-Handy
launchen können. So bleibt es bei einem
nicht ganz günstigen aber soliden Arbeitsgerät.
Dank des Alleinstellungsmerkmals wird
Dell den für Windows-Phone-7-Geräte doch
recht hohen Preis von rund 500 Euro für eine
Weile halten können.
● ● ●
Infos
[1] Produktseite:
http:// www. dell. com/ de/​
unternehmen/ p/​
mobile‐venue‐pro/ pd
[2] Micro-SD-Kartenslot:
http:// www. engadget. com/​
2010/ 11/ 10/ dell‐venue‐pro‐ha
s‐a‐microsd‐card‐slot‐youll‐j
ust‐need‐to‐void/
smart-developer.de 02/2011 33

Hardware
Motorola Defy
Im Test: Outdoor-Handy Motorola Defy
Hart im
Nehmen
motorola.com
Defy heißt so viel wie „trotzen“ oder „herausfordern“. Das trifft das
derzeitige Alleinstellungsmerkmal des Gerätes ziemlich genau:
Motorolas Defy ist nicht nur äußerst robust und leistungsstark,
sondern auch provozierend günstig. Thomas Leichtenstern
Abb. 1: Abdeckungen an der USBund
Audiobuchse verhindern das
Eindringen von Flüssigkeit und Staub.
Bereits im September letzten
Jahres stellte Motorola das
Outdoor-Handy Defy [1]
vor. In heutigen Zeitmaßstäben
gerechnet, gehört es damit inzwischen
beinahe schon zum alten Eisen. Allerdings
wartet das Smartphone mit Attributen
auf, mit denen es zum Dauerbrenner avancieren
könnte. Es bietet nämlich teilweise
einzigartige Ausstattungsmerkmale zum derzeit
unschlagbaren Preis von etwa 250 Euro.
Strapazierfähig
Laut Herstellerangaben entspricht das
Android-Smartphone der Schutzklasse IP67.
Die sieht nicht nur einen vollständigen
Staubschutz vor, sondern garantiert auch,
dass das Eindringen von Wasser bei zeitweiligem
Eintauchen vermindert wird. Dafür
spendierte Motorola den physikalischen
Schnittstellen Gummistöpsel, der sie gegen
Eindringen von Fremdkörpern schützt (Abbildung
1). Darüber hinaus besteht das Display
aus kratzunempfindlichem Gorillaglas,
das auch mal eine Rutschpartie über den Asphalt
unbeschadet überlebt. Da es auch heftigere
Stöße und Stürze klaglos übersteht, ist
es derzeit wohl das robusteste Smartphone
auf dem Markt. Das fällt schon beim Öffnen
des Gehäusedeckels auf, der wegen der
Gummidichtung deutlich strammer sitzt als
bei den meisten anderen Smartphones.
Da die Entwickler mehr die Funktionalität
in den Fokus stellten, leidet die Ästhetik ein
wenig: Einen Schönheitspreis gewinnt das
Handy sicherlich keinen, dafür erweist es
sich als sehr alltagstauglich und bietet praktisch
die gleichen Ausstattungsmerkmale wie
deutlich teurere Konkurrenten.
Die Hardware
Das Kernstück des Smartphones ist die CPU
OMAP3610 von Texas Instruments mit einer
Taktung von 800 MHz. Im Vergleich zur Konkurrenz,
die inzwischen mit einem GHz und
mehr aufwartet, klingt das nicht besonders
viel, jedoch hängt das Phone mit 1026 Punkten
im Benchmark mit Quadrant-Standard-
Edition [2] diverse Vertreter mit schnelleren
CPUs deutlich ab [3]. So erreichten das
Nexus One und HTC Desire gerade einmal
500 Punkte. Das liegt nicht zuletzt an der
verbauten PowerVR SGX 530 GPU im Defy,
die das Darstellen von Grafiken übernimmt.
Das zeigt sich auch im Alltag: Praktisch alle
Anwendungen starten ohne große Verzögerung
und laufen flüssig.
Auch speichertechnisch ist das Defy bestens
gerüstet. So wartet es mit 500 MByte
RAM (Arbeitsspeicher) und 2 GByte ROM
(Datenspeicher) auf, wovon das System etwa
800 MByte belegt. Der Micro-SD-Einschub,
der sich im Batteriefach befindet, nimmt Karten
bis zu einer Kapazität von 32 GByte auf,
eine 2-GByte-Karte liefert Motorola mit.
Auch wenn es optisch anders wirkt, ist das
Display mit 3,7 Zoll (9,5 cm) Diagonale so
groß wie das des HTC Desire. Mit einer Auflösung
von 480 x 854 Pixeln zeigt es auch filigranere
Bilder noch gestochen scharf und
unverpixelt an. Im Test zeigte die Anzeige
auch bei Sonnenlicht kaum Schwächen.
34
02/2011 smart-developer.de

Hardware
Motorola Defy
Dank des eingebauten Helligkeitssensors
passt das Gerät die Displaybeleuchtung automatisch
ans Umgebungslicht an.
Zum Kontakt mit der Außenwelt setzt Motorola
löblicherweise auf die gängigen Standards:
Eine 3,5-mm-Klinke bietet sich als
Anschluss für Head-Set und Kopfhörer an,
die Micro-USB-Buchse verbindet das Phone
mit dem PC oder Ladegerät.
Sehr gute Ergebnisse erzielt das Smartphone
beim Telefonieren. Zum einen wartet
es mit einem sehr guten Empfangsteil auf,
zum anderen unterdrücken diverse Filter
wirkungsvoll Fremdgeräusche. Das erweist
sich vor allem dann als großer Vorteil, wenn
Sie das Gerät beispielsweise während einer
Autofahrt im Freisprechmodus betreiben.
Einer der Schwachpunkte fast aller Smartphones
ist die kurze Akkulaufzeit. Das Defy
macht hier keine Ausnahme. Obwohl es mit
einer Leistung von 1540 mAh einen vergleichsweise
starken Akku mitbringt, geht
ihm bei intensiver Nutzung nach 10-12 Stunden
die Puste aus. Wie bei den meisten
Android-Smartphones lässt sich über das
Ausschalten der automatischen Synchronisation
die Laufzeit verlängern, sodass Wenigtelefonierer
auf bis zu drei Tage kommen.
Im Test überraschte die Qualität der integrierten
5-MPixel-Kamera: Sie produzierte
auch bei schlechteren Lichtverhältnissen
noch vergleichsweise gute Bilder. Der eingebaute
Blitz überzeugt jedoch nicht. Bereits in
einer Entfernung von mehr als einem Meter
verpufft seine Wirkung. Dafür eignet er sich
mit der im Google Market erhältlichen App
DroidLight prima als LED-Taschenlampe.
Die Software
Motorola liefert das Gerät mit der nicht mehr
zeitgemäßen Android-Version 2.1 aus, verspricht
aber für das zweite Quartal 2011 ein
Update auf 2.2. Eine weitere Versionserhöhung
bietet der Konzern aber voraussichtlich
nicht an. Wie sämtliche Motorola-Handys
setzt auch das Defy auf die Oberfläche Motoblur.
Über die Vor- und Nachteile berichteten
wir bereits im Testbericht zum Milestone 2 in
der Ausgabe 01/​2011 von Smart Developer
[4]. Der damit verbundene Online-Account
erfordert zunächst eine Registrierung, danach
synchronisiert ein Dienst regelmäßig
die Adressdaten und erlaubt im Verlustfall
das Löschen der persönlichen Daten vom
Gerät. Der Service von Motorola stößt bei einigen
Anwendern auf Kritik, so stört zum
Beispiel das gelegentliche Ruckeln beim
Blättern zwischen den virtuellen Desktops.
Zudem erfordern die meisten Android-
Abb. 2: Motorolas webbasiertes Phone Portal ermöglicht es unter anderem, per Web-Browser
Einstellungen am Handy zu ändern und Kontakte zu im- oder exportieren.
Dienste neben dem Motorola-Account auch
einen Google-Account, der praktisch dieselben
Daten übers Netz synchronisiert. Abhilfe
gegen Motoblur schaffen diverse Apps, etwa
Go Launcher EX [5].
Allerdings bietet Motorola auch durchaus
sinnvolle Zusatzprodukte – allen voran die
App G3 Mobile Hotspot. Sie verwandelt das
Telefon in einen WLAN-Hotspot, über den
Sie beispielsweise mit Ihrem Laptop im Internet
surfen. Im Test funktionierte der Verbindungsaufbau
problemlos. Allerdings benötigt
das Gerät in diesem Modus sehr viel Energie.
Zum Verwalten des Phones via PC bietet Motorola
zudem die App Phone Portal. Sie stellt
als Verbindungsmöglichkeit zur webbasierten
Verwaltungsoberfläche (Abbildung 2)
WLAN oder USB bereit.
Der Zugriff auf die Konfiguration im USB-
Modus Portal und Tools setzt eine auf dem
Rechner installierte Software voraus. Unter
Windows geschieht dessen Setup automatisch
beim ersten Einstecken des Smartphones.
Sie ermöglicht es auch, das Handy
als Modem über diese Schnittstelle zu nutzen.
Für Linux fehlen die benötigten Treiber.
Fazit
Das Defy erweist sich nicht nur als ausgesprochen
robust, sondern auch als sehr performant.
Dank der Auflösung von 480 x 854
Pixeln eignet sich das Display auch zum
Spielen und Betrachten von Bildern. Alles in
allem ist das Smartphone ein klasse Allrounder
und bietet mit einem Preis von etwa 250
Euro das mit Abstand beste Preis-/Leistungsverhältnis
unter den Androiden.
● ● ●
Infos
[1] Motorola Defy:
http:// www. motorola. com/​
Consumers/​DE‐DE/
Consumer‐Productsand‐Services/​Mobile‐
Phones/ MOTOROLA‐
DEFY‐DE‐DE? localeId=22
[2] Quadrant-Standard-Edition-
Benchmark:
http:// www. appbrain. com/​
app/​quadrant‐standard‐edition/
com. aurorasoftworks.​
quadrant. ui. standard
[3] Quadrant-Standard-Edition
Benchmark-Ergebnisse:
http:// www. androidpit. de/ de/​
android/ forum/ thread/​
406478/ Defy‐Power
[4] Milestone-2-Testbericht:
Marcel Hilzinger, „Aufs
Wichtigste konzentriert –
Milestone 2 von Motorola“,
Smart Developer 01/​2011,
S. 40.
[5] Go Launcher Ex:
https:// market. android. com/​
details? id=com. gau. go.​
launcherex
smart-developer.de 02/2011 35

Hardware
HTC Desire HD
htc.com
Im Test: HTC Desire HD
Voll fett
Das Desire HD gehört trotz neu angekündigter HTC-Smartphones
weiterhin zu den bestausgestatteten Androiden von
HTC. Wir haben das 4,3-Zoll-Smartphone getestet. Marcel Hilzinger
Info
[1] Produktseite:
http:// www. htc. com/ de/​
product/ desirehd/​
specification. html
Das Desire HD kam in die Smart-
Developer-Redaktion mit der Original-Firmware
und Android 2.2.
Ein Check für Updates zeigte,
dass Android 2.2.1 als OTA-Update verfügbar
ist (Buildnummer 1.84.207.2). Diese Firmware
spielten wir denn auch für diesen Test
ein. Das im Mai ausgelieferte Update auf
Android 2.3 war leider im Testzeitraum
Mitte April noch nicht verfügbar.
Erster Eindruck: großartig
Das Desire HD gehört mit seinen Abmessungen
von 6,8 x 12,3 cm und einem Gewicht
von gut 160 g zu den Boliden unter den
An droid-Smartphones. Es liegt angenehm in
der Hand, die Größe ist aber nicht jedermanns
Sache. Das 4,3-Zoll-Display ist gut
ausgeleuchtet und der stark spiegelnde
Touchscreen reagiert flott auf Eingaben.
Neben dem obligatorischen Einschaltknopf
und den vier Android-Tasten verfügt das
Desire HD über eine Wippe für die Lautstärkeregelung.
Die Hardwaretasten stehen
praktisch nicht vor, was zwar das versehentliche
Drücken verhindert, aber oft
auch die Bedienung etwas erschwert. Das
Desire HD verfügt über 786 MByte RAM
und 1,5 GByte internen Speicher, der sich
per Micro-SD-Karte um maximal 32
GByte erweitern lässt. Aktuell (Stand:
Mai 2011) kostet das Android-Smartphone
im Internet knapp 400 Euro.
Besser als die anderen
Neben dem schön großen Display
macht das Desire HD auch als
Audioplayer eine sehr gute Figur.
Dazu hat HTC das Smartphone mit
Dolby Mobile und SRS-WOW-Support
ausgestattet, wobei vor allem die
SRS-Klangverbesserung für ein
überzeugendes Klangvolumen sorgt.
Auch die 8-Megapixelkamera weiß
mit scharfen Aufnahmen und einem recht
brauchbaren Xeon-Blitz zu gefallen. Bei
Videos unterstützt das Desire HD maximal
720 p (Aufnahme und Playback).
Die Benutzeroberfläche HTC Sense weicht
in zahlreichen Bereichen von einem Standard-Android
ab. HTC hat dabei aber sehr
viele nützliche Features eingebaut. Dazu gehört
unter anderem die internationale Tastatur,
die neben der ausgewählten Primärsprache
bei der Texteingabe auch eine zweite
Sprache beherrscht. Dabei kennt das Desire
HD fast alle europäischen Sprachen. Auch
bei den vorinstallierten Anwendungen kann
das HTC Desire gegenüber der Konkurrenz
mit dem E-Book-Reader „Leser“, dem Twitter-Client
„Peep“, dem HTC-Hub und dem
Song-Erkennungstool SoundHound punkten.
Die Akkulaufzeit betrug in Tests mit gemischter
Nutzung rund 24 Stunden, die nötigen
14 bis 16 Stunden für Vieltelefonierer
hält das Desire HD in jedem Fall durch.
Kritikpunkte
An der Qualität der eingebauten Kamera gibt
es nichts zu kritisieren, aber das Objektiv
hebt sich rund drei Milimeter vom Gehäuserücken
ab, wodurch das Desire HD nicht
flach aufliegt und man stets Angst hat, das
Objektiv zu zerkratzen. Wenn Sie Ihr Smartphone
in einem Case benutzen, dann dürfte
das nicht weiter stören, in den Tests fiel die
Lage der Kamera aber mehrfach negativ auf.
Ebenfalls höchstens die Note „genügend“
bekommt das Desire HD bei der Tonqualität
von Videoaufnahmen. An der Gesprächsqualität
gibt es hingegen nichts auszusetzen, am
Mikrofon an sich kann die schwache Tonqualität
also nicht liegen.
Die Displaysperre von HTC Sense muss
man in der Grundeinstellung nach unten
ziehen, um den Bildschirm freizuschalten.
Wer sein Handy in der Hosentasche trägt,
wird so beim Klingeln sehr oft den Anruf
bereits dadurch entgegennehmen, dass er
das Smartphone aus der Tasche zieht.
Fazit
Wer große Smartphones mag, der wird am
Desire HD von HTC Gefallen finden. HTC
gehört zudem zu den Herstellern mit der
besten Update-Strategie, sodass man beim
Kauf relativ sicher sein kann, auch in den
Genuss der kommenden Android-Versionen
zu kommen. Wer die Oberfläche HTC Sense
nicht mag, findet im Android Market genügend
alternative Launcher, HTC Sense gehört
aber mit Sicherheit zu den besten grafischen
Oberflächen für Android.
● ● ●
36
02/2011 smart-developer.de

Hardware
Huawei Ideos X5
Im Test: Ideos X5 alias U8800 von Huawei
Made
in China
Chinesische Firmen liefern seit Jahren erstklassige Komponenten für
Smartphones. Da liegt es nahe, auch eigene Produkte auf den
Markt zu bringen, wie es Huawei mit dem X5 tut. Marcel Hilzinger
huawei.com
Das Huawei U8800 [1] mit dem
Namen Ideos X5 kostet im Internet
rund 230 Euro (Stand Mitte
Mai). Zu den Stärken des Mittelklasse-Smartphones
gehört sein Design und
das mit 800 x 480 Pixeln auflösende, berührungsempfindliche
3,7-Zoll-Display.
With Google
Das U8800 bringt die volle Android-Experience
mit. Der Market, GMail und weitere
Google-Anwendungen sind bereits vorinstalliert.
Einige Änderungen hat Huawei aber
dennoch vorgenommen. So befinden sich auf
dem Handy ein halbes Dutzend vorinstallierte
Apps, darunter ein Dateimanager, der
E-Book-Reader Aldiko und die Augmented-
Reality-App Layar, aber auch weniger nützliche
wie die vorinstallierten Spiele-Teaser.
Das U8800 setzt auf Android 2.2 Froyo und
Kernel 2.6.32.9. Auf unserem Testgerät, das
wir von 20:20mobile [2] als Leihstellung erhielten,
war Android in Version 2.2.1 mit der
Buildnummer B1315SP01 und der Custom-
ROM-Version C253D001 installiert. Ein Update
auf Android 2.3 ist eher unwahrscheinlich,
Custom-ROMs fanden wir aktuell keine.
Stärken und Schwächen
Das Gehäuse fühlt sich hochwertig an und
die Hardwaretasten für die Lautstärkeregelung
und den Einschaltknopf machen ebenfalls
einen soliden Eindruck. Einzig die Batteriefachabdeckung
könnte aus etwas hochwertigerem
Material bestehen, nicht nur aus
gummiertem Kunststoff. Dennoch bringt das
Handy knapp 140 g auf die Waage. Der 800
MHz schnelle Prozessor und die verbaute
CPU sorgen zwar für ausreichend Grafikleistung,
bei den Multimedia-Eigenschaften
kann das X5 aber nur bedingt punkten. So
fiel die 5-Megapixel-Kamera in den Tests
durch etwas flaue Farben und eindeutig zu
hohem Rauschen selbst bei gut belichteten
Aufnahmen negativ auf. Das Objektiv steht
zudem wie beim Desire HD knapp 2 mm vor.
Der integrierte Lautsprecher bietet ebenfalls
nur eine befriedigende Leistung.
Probleme hatte unser Testgerät auch mit
der Akkuleistung. Nach einer Komplettladung
am Vorabend war am nächsten Tag der
Akku gegen Mittag schon zu über 50 Prozent
leer, ohne dass wir am X5 irgendetwas gemacht
hätten. Um 16 Uhr schaltete sich das
Huawei-Smartphone dann nach einer kurzen
Meldung automatisch aus. Mit diesem Problem
steht das U8800 nicht alleine da, denn
im Internet gibt es diverse Berichte über sehr
kurze Laufzeiten bei Androiden, die in der
Regel durch fehlerhafte Apps verursacht
werden. Allein aufgrund der Parameter
(3,7-Zoll-Display, 1500 mAh-Akku und 800-
MHz CPU) müsste das U8800 einen kompletten
Arbeitstag gut überstehen. Offi ziell
gibt Huawei eine Standby-Zeit von bis zu
440 Stunden an.
Harte Konkurrenz
Zum aktuellen Preis gehört das Ideos X5 klar
zu den günstigsten Android-Smartphones
mit einem hochauflösenden Display und
Quadband-Support. Auch optisch macht das
U8800 einen guten Eindruck. Im direkten
Vergleich mit dem Motorola Defy muss es
sich aber geschlagen geben, da das Motorola-
Handy zum gleichen Preis besser verarbeitet
ist und Mitte Mai das lang erwartete Update
auf Android 2.2.1 erhalten hat.
● ● ●
Infos
[1] Produktseite:
http:// www. huaweidevice.​
com/ worldwide/​
productFeatures. do?​
pinfoId=2914&​
directoryId=3902&​
treeId=3606
[2] Vertrieb in Deutschland:
http:// www. 2020mobile. de/
smart-developer.de 02/2011 37

Hardware
Samsung Wave II
Samsung Wave II GT-S8530 im Test
Guter
Preis
Mit dem ersten Wave schickte Samsung
zu einem günstigen Preis sein erstes
Flaggschiff mit Bada auf den Smartphone-Markt.
Wir haben uns das
Nachfolgemodell Wave II alias S8530
angeschaut. Marcel Hilzinger
samsung.com
Auf den ersten Blick unterscheiden
sich die beiden Wave-Smartphones
von Samsung kaum. Einzig
die etwas anders gestaltete
Menütaste unten in der Mitte verrät, um welches
Wave es sich handelt. Da wir auch
schon das GT-S8500 im Test hatten [1], fiel
beim ersten Kontakt allerdings das Gewicht
des Wave II auf. Mit knapp 140 g ist es gut
20 g schwerer als sein Vorgänger. Verantwortlich
dafür ist das mit 3,7 Zoll etwas größere
Abb. 1: Bei der neuen Bada-Version lassen sich Wortvorschläge deutlich einfacher auswählen,
zudem bietet sie auch den Swype-Klon „T9 Trace“ als Eingabemethode an.
Display (das S8500 verfügt nur über einen
3,3-Zoll-Touchscreen). Abgesehen davon hat
sich im Inneren nicht viel verändert. Als CPU
kommt weiterhin der hauseigene Hummingbird-Prozessor
von Samsung (ARM Cortex-
A8) mit der SGX-540-Grafikeinheit zum Einsatz,
sodass das Wave II die gleiche Leistung
bringt wie sein Vorgänger.
Samsung bewirbt das neue Wave auch mit
Bluetooth-3.0-Support. Laut einigen Testberichten
im Internet bietet der verbaute Adapter
aber keinerlei Performance-Vorteile gegenüber
einem Bluetooth-2.1-Gerät.
Streitpunkt Display
Am neuen Display des Wave II scheiden sich
die Geister. Es ist zwar deutlich größer als
der 3,3-Zoll-Touchscreen des S8500,
Samsung verwendet dazu aber „nur“ die Super-LCD
genannte Technik, während beim
Wave S8500 ein Super-AMOLED-Screen zum
Einsatz kommt. Beim Vergleich der beiden
Displaytechniken fällt dann auch auf, dass
das Wave II zwar den größeren Bildschirm
besitzt, die Farben darauf aber etwas weniger
brillant sind als beim ersten Wave.
Neben diesem relativ geringen Unterschied
benötigt das größere Display aber auch mehr
Strom, sodass wir in den Tests mit dem
Wave II auf eine etwas kürzere Akkulaufzeit
38
02/2011 smart-developer.de

Hardware
Samsung Wave II
kamen als noch mit dem Vorgängermodell.
Da die Auflösung bei beiden Touchscreens
800 x 480 Pixel beträgt, bringt das Wave II
also nicht wirklich einen Vorteil gegenüber
dem Wave S8500, abgesehen davon, dass
sämtliche Inhalte etwas größer erscheinen.
Bada 1.2
Während das Wave I auch aktuell noch mit
einer älteren Bada-Version ausgeliefert wird
und Sie das Update über die Software Kies
vornehmen müssen, kommt das neue Wave
II mit Bada 1.2. Revolutionäre Neuerungen
bringt die aktuelle Version allerdings keine,
Samsung hat aber unter anderem die Tastatur
verbessert und den Browser etwas flotter
gemacht. So beherrscht das Keyboard nun
„T9 Trace“. Dabei handelt es sich praktisch
um eine Kopie der Swype-Tastatur. Die Treffergenauigkeit
auf Deutsch ist ziemlich hoch
und lässt sich mit Übung und dem Hinzufügen
eigener Wörter noch deutlich steigern.
Beim Browser hat Samsung ein Update auf
Dolfin 2.2 (WebKit 533.1) durchgeführt, das
für geringe Performance-Verbesserungen
sorgt. Allerdings benötigt der Browser jetzt
noch mehr Platz auf dem Display für Bedienelemente,
da sich die untere Menüleiste
nicht mehr verbergen lässt. Zudem unterstützt
er weiterhin nur eine veraltete Version
von Flash Lite, sodass nicht sämtliche Flashbasierten
Webseiten korrekt erscheinen.
Ebenfalls geändert hat Samsung bei der
neuen Bada-Version den Zugriff auf das
Smartphone via PC. In der Grundeinstellung
meldet sich das Handy stets als MTP-Gerät
an, was für eine optimale Zusammenarbeit
Abb. 2: Die Bedienelemente des Dolfin-Browsers nehmen sehr viel Platz ein. Die URL-Zeile
erscheint zudem bei jeder Berührung des Displays, also auch beim Scrollen.
mit Kies sorgt. Möchten Sie hingegen die
USB-Massenspeicherfunktion nutzen, müssen
Sie dazu vor jeder Verbindung eine entsprechende
Einstellung vornehmen. Speichern
lässt sich diese nicht. Das bedeutet auf
der einen Seite eine Vereinfachung, weil
nicht bei jeder Verbindung ein Auswahldialog
erscheint. Andererseits kompliziert es die
Nutzung, falls Sie das Smartphone überwiegend
als Massenspeicher einsetzen.
Fazit
Zu einem Preis von unter 250 Euro ist das
Wave II in jedem Fall eine Empfehlung wert.
Sein größter Vorteil gegenüber dem gleich
teuren Wave S8500 ist aber auch sein größter
Nachteil: das neue Display. Ein Upgrade vom
Wave auf das Wave II lohnt sich nicht. ● ● ●
Infos
[1] Wave S8500 im Test:
http:// www. smart‐developer.​
de/ Online/ Artikel/​
Im‐Test‐Samsung‐Wave‐GT‐
S8500‐mit‐Bada
[2] Wave S8530 Produktseite:
http:// samsung. de/ de/​
Privatkunden/ Mobil/​
Mobiltelefone/ Style/​
samsungwaveii/​
GT‐S8530BAADBT/ detail.​
aspx

Praxis
App Shopper
Diese fünf iPad-Apps sind Pflicht für Entwickler
Smart
Shopping
Egal, ob Sie auf Reisen sind, gerade zu Ihrem Lieblingscafé schlendern,
in einem Konferenzraum schwitzen oder einfach nur gemütlich auf der
Couch liegen: Mit einem iPad und ausgewählten Apps können Sie auf
schweres Arbeitsgerät verzichten. Joe Brockmeier
Ints Vikmanis
Angesichts der wahren Explosion
an Applikationen für das iPad
sollte man meinen, dass es Dutzende
großartiger Apps für Entwickler
geben müsste. Also nicht nur Spiele,
Musik, eBooks und andere Unterhaltungsmedien,
sondern Apps, die das iPad tatsächlich
zum Arbeitsgerät umfunktionieren.
Schnell
stellt sich heraus,
dass es gar
nicht so einfach ist, gute, produktivitätssteigernde
Apps für Entwickler zu finden. Man
beachte, dass ich das Wort gut bewusst verwende.
Die iOS-Plattform ist übersät mit unzähligen
Anwendungen, die angeblich dieses
und jenes leisten – allerdings hält sich der
tatsächliche Leistungsumfang beziehungsweise
die Eignung für den angeführten
Zweck meist sehr in Grenzen.
So gewappnet habe ich mich aufgemacht,
fünf Applikationen zu finden, auf die kein
Entwickler verzichten sollte. Nicht nur Apps,
um Code zu schreiben, denn dazu braucht
man ja eigentlich nur eine, sondern Anwendungen,
die sich auch in der Praxis als hilfreich
erwiesen haben und jedem Entwickler,
der zusammen mit einem Team an einem
Projekt arbeitet, das Leben erleichtern. Nur
als Hinweis – ich habe mich dabei nicht auf
bestimmte Programmiersprachen oder ‐sparten
eingeschossen, daher sollten die vorgestellten
Tools für alle Programmierer von Interesse
sein, unabhängig davon, ob man an
Web-Anwendungen oder Objective-C-Projekten
für die iOS-Plattform arbeitet oder sich
mit Lisp-Programmierung auf dem iPad beschäftigt.
Textastic
Das wichtigste Tool, das jeder Entwickler
braucht, ist ein guter Texteditor. Obwohl ich
zum Bearbeiten von Textdateien gerne auf
Vim zurückgreife, gibt es keine Version für
das iPad. Anstatt ein Terminal auf dem iPad
aufzumachen, um sich über die Shell in
einen Rechner einzuloggen, auf dem Vim
40 smart-developer.de

Praxis
App Shopper
Abb. 1: Der Editor Textastic im Einsatz.
läuft, probieren Sie doch einmal Textastic
aus. Textastic ist ein einfacher Texteditor
(kein IDE an sich) mit Zusatzfunktionen wie
Syntaxhervorhebung, Dropbox-Anbindung
sowie Unterstützung für das Teilen von Dateien
per WebDAV oder iTunes.
Ich werde mich wohl nie richtig daran gewöhnen,
große Textmengen über die virtuelle
iPad-Tastatur einzugeben. Will man nur
kurz eine URL oder eine schnelle Twitter-
Nachricht eingeben, ist das kein Problem,
für längere Texte, HTML oder jede Art von
Programmiercode ist die Bildschirmtastatur
jedoch nicht geeignet. Textastic unterstützt
glücklicherweise externe Bluetooth-Tastaturen,
man muss also nicht zum Profi-Tipper
auf der virtuellen Tastatur werden, um an
Textastic seine Freude zu haben.
Die Syntaxhervorhebung ist eine weitere
wichtige Funktion, auf die viele Entwickler
bei einem Editor nicht verzichten wollen,
egal, ob am Desktop-Rechner oder auf dem
iPad. Textastic bietet diese Funktion für mehr
als 80 Programmiersprachen an, von C bis
XML. Was die Entwicklung von Web-Apps
betrifft, unterstützt Textastic HTML, CSS,
JavaScript, Perl, PHP, Python sowie Java. Die
Syntax-Definitionen bezieht der Editor aus
dem Fraise-Projekt, ein Texteditor auf dem
Mac, der sich bei vielen Programmierern
(mich selbst eingeschlossen) großer Beliebtheit
erfreut.
Muss man oft Code zwischen iPad und PC
hin- und herschieben, erleichtert die Anbindung
an den Webdienst Dropbox beziehungsweise
das Teilen von Dateien per
iTunes die Arbeit. Über den in Textastic integrierten
WebDAV-Server kann man Dateien
vom iPad auch einfach "absaugen".
Das Einzige, was bei Textastic fehlt, ist die
Unterstützung für SSH/​SFTP, außerdem bleiben
auch Programme zur Versionsverwaltung
wie Git oder Subversion außen vor. Obwohl
die Dropbox-Anbindung für meine
Zwecke ausreichend ist, will nicht jeder
seine Dateien diesem Webdienst anvertrauen.
Tatsächlich kann es je nach Projekt
nötig sein, auf ein Code-Repository auf Git-
Hub oder auf ein firmeneigenes Subversion-
Repository zurückzugreifen. Dann macht der
Einsatz von Textastic natürlich nicht viel
Sinn. Aufgrund des Preises von unter 10 Euro
(Textastic kostet nur 7,99 Euro) sollte man
die Erwartungen jedoch nicht zu hoch
schrauben. Zumindest dachte ich das, bevor
ich einen Blick auf die Textastic-Webseite geworfen
hatte [1]. Das Update auf Version 2.1
(zum Zeitpunkt, als dieser Artikel verfasst
wurde, war das Update noch nicht erschienen)
soll angeblich Unterstützung für SFTP
und FTPS (FTP over SSL) enthalten. Wenn
die Textastic-Macher nun noch Tastenkombinationen
wie bei Vi unterstützen würden…
Laden Sie sich Textastic im App Store herunter
und/​oder besuchen Sie die Unternehmens-Webseite
im Internet.
iMockups
Brauchen Sie Hilfe bei der Erstellung einer
Benutzeroberfläche? Können Sie nicht einmal
ein Strichmännchen ohne eine Vorlage
zeichnen? Dann könnte iMockups für Sie von
Interesse sein [2].
Mit dem iMockups-App für das iPad können
Sie Design-Mockups für iOS und Web-
Applikationen erstellen, um mithilfe dieser
Entwürfe im Team zu einem Konsens zu gelangen
und dann auf dieser Basis in die Produktion
zu starten. Die mit der App gebauten
Mockups sind nicht übermäßig detailliert,
aber ausreichend, um zu demonstrieren, was
die Benutzeroberfläche leisten soll, um danach
in die eigentliche Produktionsphase
überzugehen.
Der Präsentationsmodus der iMockups-Applikation
ermöglicht es Ihnen, Ihrem Chef die
Ergebnisse Ihrer Arbeit näherzubringen oder
Ihre Teamkollegen an Ihrer kreativen Vision
teilhaben zu lassen, ohne gleich die Powerpoint-Keule
zu schwingen. Darüber hinaus
können Sie Ihre Mockups im PNG- oder Balsamiq-Format
exportieren, das heißt, Sie
haben die Möglichkeit, eine schnelle Skizze
als Arbeitsgrundlage auf Ihrem iPad zu erstellen
und diese dann in Balsamiq unter
Mac, Windows oder Linux weiterzuverarbei-
Abb. 2: Codeauswahl in Textastic.
smart-developer.de 02/2011 41

Praxis
App Shopper
Abb. 3: Die Funktion Finden-und-Ersetzen in Textastic.
Abb. 4: Einrichten des WebDAV-Servers
bei Audiotorium.
Abb. 5: Aufzeichnen mit der App
Audiotorium.
ten. (Für Balsamiq wird jedoch die Adobe-
Air-Laufzeitumgebung benötigt, daher besteht
keine Aussicht, dass dieses Programm
in naher Zukunft auf das iPad portiert wird).
Ebenfalls erwähnenswert ist, dass iMockups
das parallele Arbeiten an mehreren Projekten
unterstützt, was die Verwaltung der
dazugehörigen Dokumente vereinfacht. Die
Projektansicht erleichtert die Arbeit mit mehreren
Seiten und gibt einen guten Überblick
über jedes einzelne Projekt. Außerdem
schont iMockups mit dem moderaten Preis
von 5,49 Euro den Geldbeutel.
Audiotorium Notes
In den meisten beruflichen Situationen ist es
ein großer Vorteil, wenn man in der Lage ist,
sich sinnvolle Notizen zu machen, egal, ob
man als Software-Entwickler oder als Journalist
arbeitet. Besonders trifft dies auf Design-
Meetings zu, wo die Ideen nur so sprühen,
an die man sich allerdings später wieder in
allen Einzelheiten erinnern muss. Sie wollen
Ihren Chef wahrscheinlich nur ungern um
zwei Uhr morgens anrufen, während Sie eine
Programmier-Nachtschicht einlegen, nur
weil Sie nicht in der Lage waren, sich während
des Meetings die notwendigen Einzelheiten
zu notieren.
Um nicht in eine solche unangenehme
Lage zu geraten, können Sie auf Audiotorium
Notes für das iPad [3] zurückgreifen. Mit dieser
App können Sie sich händisch mit der
Bildschirmtastatur Notizen machen oder ein
Audioprotokoll des Meetings aufzeichnen
und es später transkribieren lassen. Sie
haben richtig gehört – Sie können während
des Meetings auf Ihrem Notizblock Männchen
malen und haben trotzdem eine verlässliche
Aufzeichnung dessen, was besprochen
wurde, ohne auch nur eine einzige
Notiz gemacht zu haben. Es versteht sich
von selbst, dass Sie vorher einen Testlauf
durchführen sollten, um sicherzustellen,
dass das iPad die Stimmen auch gut einfängt,
bevor Sie sich ausschließlich auf die
Audioaufzeichnung verlassen.
Was hat Audiotorium Notes sonst noch auf
dem Kasten? Die App unterstützt TextExpander-Tastaturkürzel,
sodass man sich viel
Schreiberei sparen kann, indem man TextExpander-Bausteine
anlegt.
Sobald Sie Notizen und Tonaufzeichnungen
gespeichert haben, können Sie dem iPad
die Daten über die integrierte Dropbox-Anbindung
beziehungsweise den eingebauten
WebDAV-Server entlocken. Sobald der Web-
DAV-Server gestartet wurde, können Sie auf
sämtliche auf Ihrem iPad gespeicherten Notizen
über den Web-Browser Ihrer Wahl zugreifen.
Man beachte, dass dieser Server nur
dann aktiv ist, wenn Sie ihn explizit aufrufen,
das heißt, er läuft nicht ständig im Hintergrund.
Das kann von Nachteil sein, wenn
man gleichzeitig an mehreren Aufgaben arbeitet,
zugleich wird dadurch aber auch vermieden,
dass Ihre Aufzeichnungen dauerhaft
per Netzwerk zugänglich sind.
Das Beste an der App ist ihr Preis. Audiotorium
Notes kostet nur 3,99 Euro. Von der
Firma AppApps, die hinter Audiotorium
Notes steckt, ist darüber hinaus für 1,59 Euro
eine Anwendung namens Notorium Notes
erhältlich ohne Audiofunktion. Allerdings
kann man bei diesem Preisniveau getrost
noch die 2,40 Euro für die Audioaufzeichnungsfunktion
drauflegen.
Mocha VNC
Manchmal geht es einfach nicht ohne Zugriff
auf einen PC. Wenn Sie Ihr iPad mit einem
PC verbinden wollen, gibt es dafür verschiedene
Möglichkeiten, aber die günstigste und
kompatibelste Lösung heißt VNC. Genauer
gesagt, Mocha VNC.
Es gibt jede Menge Remote-Desktop-Anwendungen
im App Store. Ich habe mich aus
drei Gründen für Mocha VNC entschieden.
Erstens, Mocha VNC funktioniert mit jedem
PC, der mit VNC kompatibel ist. Das heißt,
unabhängig davon, ob auf Ihrem PC Windows,
Linux oder Mac OS X installiert ist
(oder Sie ein Multi-Boot-System verwenden),
Sie sollten auf jeden Fall eine Verbindung
mittels Mocha VNC herstellen können. Für
all diese Betriebssysteme sind VNC-Server
42
02/2011 smart-developer.de

Praxis
App Shopper
verfügbar, die gut mit Mocha VNC zusammenarbeiten
sollten – es wurden Praxistests
unter Windows mit RealVNC, TightVNC und
UltraVNC durchgeführt sowie mit Apples
Screen-Sharing-Tool für Mac OS X.
Oft haben Anwendungen im App Store den
Nachteil, dass Applikationen, für die man
bereit wäre, Geld auszugeben, vor dem Kauf
nicht getestet werden können. Mocha VNC
ist mir auch deswegen sympathisch, weil
eine abgespeckte Programmversion (Mocha
VNC Lite) erhältlich ist, die man kostenlos
installieren und testen kann. Die "Lite"-Version
verfügt nicht über den vollen Funktionsumfang
(es fehlt beispielsweise die Unterstützung
für Tastaturkürzel), aber man kann
damit die Leistungsfähigkeit der Software
testen und sicherstellen, dass die App mit
dem eigenen VNC-Server kompatibel ist.
Und drittens mag ich Mocha VNC, weil die
App hält, was sie verspricht, und das für
kleines Geld. Bei einem Kostenpunkt von
4,99 Euro ist Mocha VNC auch für Privatpersonen
erschwinglich.
Eine Alternative wäre das Programm Log-
MeIn Ignition, das sowohl für das iPhone als
auch für das iPad erhältlich ist. Diese App
eignet sich eher für Rechnersysteme, die sich
hinter einer Firewall befinden, außerdem
sind die Kosten wesentlich höher. Bei einem
Preis von 23,99 Euro würde ich zuerst einmal
Mocha VNC austesten und erst dann den
Einsatz von LogMeIn Ignition erwägen,
wenn der Funktionsumfang von Mocha VNC
nicht ausreicht.
Weitere Informationen zu Mocha VNC finden
Sie auf der Hersteller-Webseite [4]. Das
Unternehmen hat einige weitere Lösungen
rund um VNC in seinem Portfolio, nicht nur
für das iPad, sondern auch für die verschiedensten
Mobilgeräte.
OmniGraffle
Als Letztes sollten Sie unbedingt einen Blick
auf OmniGraffle werfen, falls Sie Diagramme
oder andere Grafiken erstellen wollen. Dieses
Programm ist der Mercedes-Benz unter den
iPad-Tools – eigentlich ist es auch der Mercedes-Benz
unter den Tools für Mac OS X. Die
Firma OmniGroup bringt schon seit Jahren
erstklassige Tools für die Mac-Plattform auf
den Markt.
OmniGraffle macht dabei keine Ausnahme.
Man kann damit innerhalb kürzester Zeit
wundervolle Diagramme auf dem iPad gestalten
und sie entweder als PDF beziehungsweise
PNG exportieren oder auch im proprietären
OmniGraffle-Format, um sie später auf
dem heimischen Rechner weiterzubearbeiten
(immer natürlich unter der Annahme, dass
Sie OmniGraffle auch auf dem Desktop-Rechner
benutzen). Die Auswahl an integrierten
Schablonen ist riesig und es ist wirklich kinderleicht,
mit OmniGraffle auf dem iPad zu
arbeiten.
Sie haben die volle Kontrolle über wirklich
jedes einzelne Detail jeder Formvorlage – angefangen
von der Farbe über die Schriftarten
bis hin zu der Elementgestaltung und so weiter.
Die Anwendung ist gut auf das Arbeiten
mit den Fingern oder mit einem Stift ausgelegt
und stellt jede Menge Tools für schnelles
Arbeiten bereit. Wenn man von schnellem
Arbeiten spricht – OmniGraffle verfügt auch
über einen Freihand-Zeichenmodus, mit dem
man Skizzen entwerfen kann, bevor man
sich für einen bestimmten Entwurf entscheidet.
Daher ist das Tool hervorragend für
Mindmaps und zum Visualisieren von Gedankengängen
geeignet, bevor man sich an
die Gestaltung einer professionell aussehenden
Grafik macht. Unabhängig davon, ob Sie
UML-Diagramme zur Darstellung des Kontrollflusses
oder Diagramme für Präsentationen
oder zur Veröffentlichung erstellen wollen
– OmniGraffle ist das Tool der Wahl.
Ich kann dies im Brustton der Überzeugung
behaupten, da ich mich lange nach Alternativen
umgesehen habe, bevor ich mich
für OmniGraffle entschieden und meine Kreditkarte
gezückt habe. Wie gesagt, diese App
ist der Mercedes-Benz unter den iPad-Tools
und dies schlägt sich auch im Preis nieder.
OmniGraffle für das iPad kostet stramme
39,99 Euro. Es ist jammerschade, dass die
OmniGroup keine „Lite“-Version anbietet
oder zumindest eine Version, die Anwender
vor dem Kauf testen können, denn der Preis
für das Programm wirkt — zumindest im
Vergleich mit anderen iPad-Apps — enorm
abschreckend.
Wenn Sie OmniGraffle nicht kennen, verlassen
Sie sich nicht allein auf meine Empfehlung.
Schauen Sie auf der OmniGroup-
Webseite [5] vorbei, prüfen Sie den Funktionsumfang
und sehen Sie sich einige der
Videos an, die OmniGraffle im Praxiseinsatz
demonstrieren.
Zusammenfassung
Für das iPad gibt es eine riesige Anzahl von
Apps, die Entwicklern das Leben leichter machen
– wenn man weiß, wonach man suchen
muss. Ob dies nun das Schreiben von Code,
Meetings, die Vorplanung oder einfach nur
Organisatorisches betrifft – werfen Sie einen
Blick auf diese Apps, um das Beste aus Ihrem
iPad herauszuholen.
● ● ●
Abb. 6: Schnelle Diagramm-Erstellung
mit OmniGraffle.
Der Autor
Joe „Zonker“ Brockmeier arbeitet
freiberuflich als IT-Journalist,
Redakteur, Community-Spezialist
und engagiert sich für freie und
Open-Source-Software. Brockmeier
war von 2008 – 2010 Community
Manager bei openSUSE.
Er schreibt nun für Linux Pro Magazine
und eine Reihe anderer IT-
Magazine. Seine private Webseite
ist unter http:// www.​
dissociatedpress. net/ zu finden,
außerdem können Sie ihm auf
Twitter und Identi.ca folgen unter
dem Namen @jzb.
Infos
[1] Textastic:
http:// www. textasticapp.​
com/
[2] iMockups:
http:// www. endloop. ca/​
imockups/
[3] Audiotorium Notes:
http:// app‐apps. com/ apps/​
audiotorium‐notes/
[4] MochaSoft:
http:// www. mochasoft. dk/
[5] OmniGraffle:
http:// www. omnigroup. com/​
products/ omnigraffle‐ipad/​
features/
smart-developer.de 02/2011 43

Praxis
Gmote
Mit Gmote und Android den Rechner fernsteuern
Smart
steuern
Android-Handys erweisen sich im Alltag als digitale Multitools.
Mit der richtigen App verwandeln sie sich in Fernbedienungen
zum Abspielen beziehungsweise Ausführen von
Mediadateien auf Ihrem PC. Vincze-Aron Szabo und Marcel Hilzinger
Kirsty Pargeter, Fotolia
Die Apps im Android Market bieten
zahlreiche Möglichkeiten, Ihr Android-Handy
um Funktionen zu
erweitern, zum Beispiel Apps, die
Ihr Handy in eine Fernbedienung umwandeln.
Eine besonders praktische und vielseitige
unter diesen ist Gmote. Mit dem frei verfügbaren
Programm lässt sich nicht nur der
Medienplayer auf dem PC steuern, sondern
Sie können das Tool auch als Streaming-
Client und als Touchpad-Ersatz benutzen.
Client und Server
Gmote [1] finden Sie im Android-Market.
Möchten Sie die App auf einem Android- Gerät
ohne Market-Zugriff installieren, dann finden
Sie auf der Google-Code-Seite des Projektes
[2] die passende APK-Datei zum Download.
Das Tool unterstützt neben der Fernbedienungsfunktion
auch das Streaming von Musik
und Fotos auf Ihr Handy. So haben Sie im
Heimnetzwerk immer Ihre Lieblingsmusik
parat. Alles was Sie dazu benötigen, ist Ihr
Android-Handy, einen PC und ein eingerichtetes
Heimnetzwerk mit WLAN-Router.
Um Gmote zu installieren, müssen Sie zunächst
die entsprechende App gleichen Namens
auf Ihr Android-Handy laden. Falls Sie
nicht den Weg über den Market wählen,
müssen Sie dazu zunächst über die Android-
Einstellungen unter Anwendungen die Installation
von Apps unbekannter Herkunft akzeptieren.
Von den Berechtigungen her verlangt
die App lediglich, Internetverbindungen
verwenden und den Standby-Modus deaktivieren
zu dürfen. Nach der Installation
ist Ihr Android-Handy der sogenannte
Gmote-Client. Nun muss noch der Gmote-
Server eingerichtet werden – Ihr PC.
Auf dem PC sind je nach benutztem Betriebssystem
ein paar Arbeitsschritte mehr
erforderlich. Unter Windows laden Sie sich
unter [3] den Setup-Assistenten für Windows
herunter. Starten Sie im Anschluss die Setup-
Datei und folgen Sie den dort angegebenen
Beschreibungen. Im letzten Installationsschritt
können Sie festlegen, ob der Gmote-
Server automatisch bei jedem Windows-Start
ausgeführt werden soll.
Im Anschluss an die Installation, öffnet
sich automatisch ein Dialog zur Vergabe
eines Zugangspasswortes. Danach sehen Sie
den Media Path Selector zur Freigabe von
Ordnern. Fügen Sie hier über Add Path Verzeichnisse
hinzu, die Sie über Gmote ansprechen
möchten und schließen Sie den Dialog
durch einen Klick auf Done. Nun steht auf
der Taskleiste ein Symbol für die Steuerung
des Gmote-Servers zur Verfügung.
44
02 /2011 smart-developer.de

Praxis
Gmote
Achten Sie insbesondere unter
Windows darauf, dass eine eventuell
installierte Firewall Gmote nicht
blockiert und geben Sie dann gegebenenfalls
Gmote über die
Firewall-Konfiguration frei. Jetzt
können Sie Gmote auf Ihrem Android-Handy
starten.
Auch unter Mac OS X läuft die
Installation ähnlich einfach ab.
Hier müssen Sie sich zunächst für
das passende Zip-Archiv entscheiden
(Snow Leopard oder älteres
Mac OS X). Anschließend führen
Sie das im ZIP-Paket enthaltene
Ins tallationsprogramm aus (Abbildung
1), das die Gmote-Anwendung unter
den Programmen ablegt.
Beim ersten Start richten Sie das Passwort
ein (Abbildung 2) und geben anschließend
die Verzeichnisse frei, die Gmote nach unterstützten
Mediadateien untersuchen soll (Abbildung
3). Die Installation unter Linux beschreibt
der Kasten „Gmote für Linux“.
Abb. 2: Setzen Sie ein Passwort, damit nicht jemand
unerwünscht mithört oder mitsieht.
Musik freigeben
Um den Server betriebsbereit zu machen,
müssen Sie ein Zugangspasswort vergeben
und die Ordner mit den Mediadateien freigeben,
die Sie über Gmote steuern möchten.
Klicken Sie dazu mit der rechten Maustaste
auf das Gmote-Symbol im Systempanel und
rufen Sie über Settings | Change password
den Dialog zur Änderung des Passworts auf
(falls Sie nicht bereits bei der Installation
ein Passwort gesetzt haben). Vergeben Sie
in diesem Dialog das Zugangspasswort und
bestätigen Sie dieses über OK. Die Freigabe
für die Mediadateien erfolgt über das Menü
Settings | Change media paths des Systempanels,
was den Dialog Media Path Selector
öffnet (Abbildung 3). Fügen Sie nun über
Add Path alle relevanten Ordner hinzu,
die Bilder, Videos und Musik enthalten
und die Sie über Ihr Android-Handy
fernsteuern beziehungsweise abspielen
möchten. Das Hinzufügen von einzelnen
Dateien ist nicht möglich. Damit
haben Sie das Setup des Servers abgeschlossen
und können Gmote unter
Android starten.
Abb. 1: Die Installation (hier unter Mac OS X) bereitet auch unter
Windows und Linux keinerlei Probleme.
Gmote in Aktion
Beim ersten Start weist Sie die App darauf
hin, dass der Gmote-Server installiert sein
muss, bevor Sie die App nutzen können. Da
dieser Schritt bereits getan ist, können Sie
direkt auf I have installed the Server. Start
Gmote! drücken. Danach sucht Gmote im lokalen
Netz nach Gmote-Servern. Dabei spielt
es keine Rolle, ob der Desktop-Rechner per
LAN oder WLAN mit dem Android-Gerät
verbunden ist – Hauptsache die beiden Geräte
befinden sich im gleichen Netzwerk.
Markieren Sie den gewünschten Gmote-Server
(in der Regel erscheint hier nur ein Eintrag).
Um die Mediendaten auszuwählen,
drücken Sie auf Browse (Abbildung 4).
Haben Sie sich für eine Datei entschieden,
startet auf dem PC der zugehörige Medienplayer.
Unter Mac ist das iTunes, unter Windows
der Windows Media Player und unter
Linux der VLC Media Player. Die Inhalte werden
also in der Grundeinstellung auf den
dort angeschlossenen Lautsprechen und bei
Videos auf dem angeschlossenen Bildschirm
beziehungsweise Fernseher ausgegeben.
Gmote selbst wechselt auf dem Handy in den
Fernbedienungsmodus (Remote), in dem Sie
den gestarteten Player auf dem PC steuern.
Über das Symbol oben rechts können Sie den
Player auf dem PC wieder beenden.
Streamen und Tippen
Der Gmote-Server unterstützt auch das Abspielen
(Streamen) von Mediadateien, die
Abb. 3: Über den Media Path Selector teilen Sie Gmote
mit, welche Verzeichnisse erreichbar sein sollen.
smart-developer.de 02/2011 45

Praxis
Gmote
Abb. 4: Der Browser dient zum Auswählen
von Mediadateien. Sie
legen fest, ob Gmote die Datei
auf dem PC oder Handy abspielt.
Abb. 5: Über diese Oberfläche
steuern Sie Gmote. Über Browse
wechseln Sie in den Dateibrowser,
um Dateien auszuwählen.
Abb. 6: Ein übersichtlicher Bildbetrachter
ermöglicht das Anzeigen
von Fotos auf dem Handy. Die Bilder
sind auf dem PC gespeichert.
Abb. 7: Der integrierte Webbrowser
ermöglicht das Surfen im Internet
und das Aufrufen der Internetseiten
auf dem PC.
auf Ihrem PC oder einer angeschlossenen
Festplatte gespeichert sind. Diese Funktion
befindet sich zwar noch im Beta-Status, kann
aber bei Musik- und Bilddateien trotzdem
schon beeindrucken. Das Abspielen von Filmen
ist derzeit nur bei sehr wenigen Dateitypen
möglich. Klicken Sie auf Browse und
im Anschluss unter Play on auf Phone (beta).
Wählen Sie nun eine Audio- oder Bilddatei
aus, Gmote übernimmt nun die Playerfunktion
und öffnet die Datei auf Ihrem Handy
(Abbildung 5). Bilder werden in einem einfachen
Bildbetrachter geöffnet (Abbildung 6).
Als eine der wenigen Streaming-Apps zeigt
Gmote bei Musikstreaming auch Cover an.
Eine weitere nützliche Funktion im Beta-
Status ist das Aufrufen von webbasierten Inhalten.
Dafür besitzt Gmote einen integrierten
Browser, über den Sie Internetseiten öffnen
können (Abbildung 7). Drücken Sie
dazu auf die Menütaste Ihres Android-Smartphones
und dann auf Web (beta). Der Webbrowser
verfügt derzeit nur über Grundfunktionen.
Sie können Internetadressen aufrufen
und per Handytaste zur vorherigen Seite zurückkehren.
Eine Lesezeichenfunktion fehlt
dagegen. Über die Taste open on computer
öffnet Gmote die jeweils eingegebene Adressen
in einem Webbrowser auf dem PC.
Maus und Tastatur
Der Funktionsumfang von Gmote wird durch
das Touchpad komplettiert. Das Ziel dieser
Funktion ist es, eine Maus und eine Tastatur
mit dem Android-Handy zu simulieren, sodass
Sie Ihren PC zum Beispiel vom Sofa aus
bedienen können. Auch diese Funktion befindet
sich derzeit noch im Beta-Status, funktioniert
aber recht gut, wobei die Tastatur zu
Abstürzen neigt. Im Idealfall kann man mit
Gmote und einem Android-Gerät bequem
einen PC steuern, der zum Beispiel an einen
Fernseher oder Beamer angeschlossen ist
und auf eine zusätzliche Funk- beziehungsweise
Bluetooth-Tastatur verzichten. Es
bleibt allerdings abzuwarten, wann diese
Funktion den Beta-Status hinter sich gelassen
hat und stabil arbeitet.
● ● ●
Infos
[1] Gmote-Homepage:
http:// www. gmote. org/
[2] Google-Code-Seite:
http:// code. google. com/ p/​
gmote/
[3] Gmote-Server:
http:// www. gmote. org/ server
Gmote für Linux
Linux-Nutzer benötigen den VLC Media Player,
den Sie meist bequem über die Software-Verwaltung
Ihrer Distribution installieren können.
Prüfen Sie nach der Installation von VLC mit
dem Befehl whereis vlc über eine Konsole, ob
sich der VLC Media Player am Speicherort
/usr/bin/vlc befindet. Falls nicht, dann setzen
Sie mit Root-Rechten und dem Kommando
ln ‐s aktueller_vlc‐Pfad /usr/bin/vlc einen
symbo lischen Link an diese Stelle. Ersetzen Sie
dazu aktueller_vlc-Pfad durch den Pfad, der
Ihnen mit dem Befehl whereis angezeigt wurde.
Weiterhin setzt Gmote voraus, dass eine Java-
Laufzeitumgebung installiert ist und dass eine
Netzwerkverbindung besteht.
Laden Sie nun das Linux-Paket von Gmote für
Ihren PC herunter [3] und entpacken Sie es in
ein beliebiges Verzeichnis. Zu guter Letzt müssen
Sie die Datei GmoteServer.sh noch ausführbar
machen. Am einfachsten geht dies mit dem
Befehl chmod +x GmoteServer.sh. Nun können
Sie Gmote über den Befehl ./GmoteServer.sh
starten. Nach dem Start steht im Systemabschnitt
des Panels (KDE/Gnome) ein entsprechendes
Symbol zur Verfügung, über das Sie
das Programm steuern oder beenden.
46
02 /2011 smart-developer.de

Praxis
MeeGo-Einführung
Apps für MeeGo entwickeln
MeeGo
für dich!
Bei MeeGo denken vermutlich die meisten Entwickler
zunächst an Netbooks. Doch das freie Betriebssystem
ist deutlich flexibler. Dieser Artikel stellt das
Linux-basierte Betriebssystem vor und zeigt die ersten
Schritte zur eigenen App. Sulamita Garcia
MeeGo [1] ist ein freies Betriebssystem
auf Linux-Basis, optimiert
für eine möglichst gute
User Experience auf zahlreichen
Geräten. MeeGo unterstützt nicht nur Netbooks
und Smartphones, sondern auch Tablets,
Smart-TV-Geräte, In-Vehicle-Infotainment-Systeme
(IVI) und einige weitere. Als
Projekt unter der Schirmherrschaft der Linux
Foundation garantiert MeeGo eine offene
und kontinuierliche Entwicklung. MeeGo hat
zudem viele Werte von der Open-Source-
Community übernommen. Dazu gehört die
transparente Entwicklung, eine auf Verdiensten
beruhende Führungsstruktur (Meritocracy)
und die Policy, bei sämtlichen Änderungen
upstream, also bei den ursprünglichen
Projekten, für Aufnahme zu sorgen.
Upstream First
MeeGo arbeitet eng mit der Community zusammen
und setzt auf industrielle Standards,
um die Projekte wachsen zu lassen, anstatt
eigene Implementationen
hinter
verschlossenen
Türen zu
entwickeln. So
werden zum Beispiel
sämtliche Änderungen am Kernel zunächst
an die offiziellen Kernel-Maintainer geschickt,
um diese in den Standard-Kernel
aufzunehmen. Von den Verbesserungen in
MeeGo profitieren so sämtliche Linux-Nutzer.
Die MeeGo-Gemeinschaft besteht zurzeit
aus rund 30.000 registrierten Nutzern und
Entwicklern, die sich auf diversen Mailinglisten,
in Foren, Wikis [2] und IRC-Kanälen
treffen. Im IRC-Kanal tauschen täglich im
Durchschnitt 500 Leute Informationen aus.
Der Aufbau
MeeGo besteht aus drei Hauptkomponenten:
dem Hardware Adaptation Layer, der Middleware
und dem User Interface. Der Adaptation
Layer besteht aus dem Linux-Kernel und
MeeGo 1.1
Abb. 1: Die Handset-Version.
Abb. 2: Die Netbook-Oberfläche von MeeGo mit bunten
Symbolen in den MeeGo-Farben.
Abb. 3: Die Tablet-Variante von MeeGo in der aktuellen Vorabversion
von MeeGo 1.2.
smart-developer.de 02/2011 47

Praxis
MeeGo-Einführung
Guidelines für eine gute App
Es gibt verschiedene Design-Grundsätze für
MeeGo, die man im Hinterkopf behalten
sollte, um den Nutzern das bestmögliche
App-Erlebnis zu bieten. Bei Geräten mit kleinen
Bildschirmen sollten Sie zum Beispiel
darauf achten, nicht unnötig viel Platz für
Toolbars, Knöpfe oder Informationen zu verschwenden,
die für den Benutzer nicht relevant
sind. Zudem ist MeeGo auf ein möglichst
gutes Powermanagement optimiert, um
bei der Nutzung ein Maximum an Akkulaufzeit
zu garantieren.
MeeGo merkt sich die benutzerspezifischen
Einstellungen und am häufigsten besuchten
Seiten, dadurch bietet es dem Benutzer
einen einfachen Weg, um seine Lieblingsseiten
schnell wiederzufinden und keine Updates
von Social-Media-Seiten oder Freunden
zu verpassen. Als vollwertige Multitasking-
Plattform können Sie als Entwickler Anwendungen
programmieren, die diese Eigenschaften
ausnutzen und somit prompt auf
Eingaben reagieren.
Abb. 4: Der Qt Creator bietet eine sehr umfangreiche Inline-Hilfe.
Treibern, um eine bestimmte Hardware zu
unterstützen. Die Entwicklung konzentriert
sich hier auf schnelle Bootzeiten und optimalen
Ressourcenverbrauch. Die Middleware
enthält Dienste und Bibliotheken für mehrere
Bereiche: Daten-Management, Media-Unterstützung,
Internet-Dienste und Entwicklungs-API.
Zusammen bezeichnet man die
Middleware und den Adaptation Layer als
MeeGo Core. MeeGo Core stellt die Basis für
alle MeeGo-Produkte dar. Für Unterschiede
sorgen die grafischen Oberflächen von
MeeGo, die für jede Geräteklasse speziell angepasst
sind. Obwohl also die MeeGo-Netbook-Oberfläche
komplett anders aussieht
als die Handset-Variante oder die IVI-Version,
basieren sie alle auf dem aktuellen MeeGo
Core. Das bedeutet für Entwickler, dass ihre
App auf allen Varianten lauffähig ist, solange
man sich an die MeeGo APIs hält.
Qt – die MeeGo-API
Die MeeGo-API basiert auf dem freien
Framework Qt [3]. Bei Qt handelt es sich um
ein Multi-Plattform-Framework zur Programmierung
grafischer Anwendungen auf Basis
von C++. Es enthält zahlreiche Module,
um eine App über Widgets, Datenbanken,
Netzwerkverbindungen, Browser-Ansichten
und vieles mehr auszustatten. MeeGo unterstützt
die Entwicklung in Qt mit allen Mitteln
und ermutigt angehende Programmierer
über das Intel AppUp Developer Program,
die Vorteile dieser Technologie zu nutzen
und ihre Apps in Qt zu schreiben. Wie
MeeGo ist auch Qt freie Software.
Die integrierte Entwicklungsumgebung
(IDE) von Qt heißt Qt Creator und bietet
zahlreiche Möglichkeiten, um den Entwickler
bei seiner Produktivität zu unterstützen. Die
IDE enthält eine umfassende Dokumentation,
die mit Druck auf die F1-Taste für jedes
Objekt und jede Funktion einzeln aufgerufen
werden kann. Qt Creator zeigt während des
Programmierens auch nützliche Hinweise an
und gibt Vorschläge. Sie finden in der Dokumentation
auch zahlreiche Tutorials und Beispiele
in verschiedenen Schwierigkeitsgraden,
egal, ob Animation, Widget, Dialog oder
etwas anderes. Qt enthält zudem auch den
Qt-Designer, der Sie beim Zeichnen grafischer
Oberflächen mit einer umfangreichen
Bibliothek unterstützt.
Ein sehr nützliches Tool, wenn Sie eine
App für mehrere Geräte entwickeln möchten,
ist der Layout Manager des Qt Creators.
Darin lassen sich grafische Elemente skalieren
oder neu anordnen, um eine App optimal
an die gewünschte Bildschirmgröße oder
Ausrichtung anzupassen.
Das MeeGo-SDK
Das MeeGo Software Development Kit (SDK)
baut auf dem Qt Creator auf und erweitert
den Editor, um Programmierern das Schreiben
von MeeGo-Anwendungen zu erleichtern.
Die Windows-Version des SDK übernimmt
zudem die Aufgabe des Cross-Compiling,
sodass Sie problemlos unter Windows
eine Linux-App entwickeln können. Die
Linux-Version sorgt für eine optimale native
Entwicklung. Über das MeeGo Application
48
02/2011 smart-developer.de

Praxis
MeeGo-Einführung
Develop and Debug Environment (MADDE)
stehen Ihnen mehrere MeeGo-Abbilder inklusive
Bibliotheken zum Testen und Selbstentwickeln
bereit, egal, ob Tablet, Netbook oder
Handset. Neben der Entwicklung im Qt Creator
bietet das MeeGo-SDK auch die Möglichkeit,
Anwendungen direkt im Emulator
QEMU oder auf einem echten Gerät zu testen.
Wenn Sie schon über ein MeeGo-Gerät
verfügen, machen Sie dank des SDKs daraus
im Handumdrehen auch eine Plattform zur
Entwicklung und für Tests weiterer MeeGo-
Anwendungen.
Listing 1: Hello World in QML
import Qt 4.7
Rectangle {
width: 360
height: 360
Text {
text: "Hello World"
anchors.centerIn: parent
}
MouseArea {
anchors.fill: parent
onClicked: {
Qt.quit();
}
}
}
Qt Quick
Eine besondere Herausforderung jeder Anwendungsentwicklung
besteht darin, die Interessen
von Programmierern und Designern
unter einen Hut zu bringen. MeeGo entstand
in enger Zusammenarbeit von Designern und
Entwicklern und wir bei Intel sind der Meinung,
dass das der beste Weg ist, um für ein
positives Erlebnis beim Nutzer zu sorgen.
Die gleichen Ansprüche haben wir auch an
Qt Quick, ein großartiges Tool für Designer
und Entwickler, über das sich mit wenig
Code sehr coole grafische Oberflächen gestalten
lassen [4]. Dazu setzt Qt Quick auf die Qt
Meta-Object Language – QML in Zusammenarbeit
mit dem Qt Creator. Listing 1 zeigt ein
Beispiel, wie Sie damit sehr schnell eine Anwendung
schreiben.
Die Lernkurve von QML ist sehr flach, sodass
Sie schon nach wenigen Beispielen und
etwas Doku eigene animierte Anwendungen
mit sehr vielen Ressourcen entwickeln können.
QML bringt dabei auch Support für Gesten
mit, ein Set davon steht Ihnen zur Nutzung
bereit. Über die mitgelieferten Beispiele
in der Dokumentation und ausführliche Tutorials
gelingt der Einstieg bestimmt. Eines der
einfachsten Beispiele zeigt, wie Sie ein Spiel
schreiben, indem Sie zunächst das Spielfeld,
dann die Steine definieren, um schließlich
den Steinen ein paar Regeln beizubringen.
Zum Schluss fügen Sie noch etwas
JavaScript-Code bei, um das Spiel zu steuern.
Qt Quick unterstützt JavaScript nativ
und bietet auch die Integration von QML-
Dateien mit C++ an.
Das AppUp SDK
Über das AppUp Developer Program ([5],
siehe dazu auch den Artikel aus Smart Developer
01/​2011 [6]) bietet Intel einen zentralen
Channel, um Ihre Anwendungen auf mehreren
Kanälen und Geräten verfügbar zu machen.
Bevor Sie eine Anwendung einreichen
können, müssen Sie ein paar Schritte durchlaufen.
Dazu gehört zunächst die Registrierung
auf http:// AppDeveloper. intel. com, um
eine Identifikationsnummer zu erhalten. Hier
erhalten Sie auch für jede Ihrer Anwendungen
die nötige Unique ID. Die Guidelines
sind relativ schnell erklärt: Die App darf keinen
Schadcode enthalten und keine Nutzerdaten
auslesen, ohne den Benutzer darüber
zu informieren. Die Anwendung sollte
zudem als RPM-Paket gepackt sein und dabei
die entsprechenden Konventionen zur Versionierung
und Namensgebung einhalten. Last
but not least muss Ihre Anwendung die AppUp-SDK-Bibliothek
enthalten und Sie müssen
die passende Anwendungs-ID benutzen.
Sind diese Anforderungen erfüllt, dann
können Sie die App für den Validierungsprozess
einreichen. Hat Ihr Programm diesen
Test überstanden, dann landet Sie im App
Store und die Benutzer können sie herunterladen.
Treten bei der Validierung Probleme
auf, dann benachrichtigt Intel Sie per Mail
und klärt Sie über die Gründe auf, sodass Sie
die Fehler beheben und die App erneut einreichen
können.
All diese Schritte sind auf der AppUp-Entwicklerseite
detailliert dokumentiert. Hier
finden Sie auch zusätzliche Artikel und Hilfe
von Entwicklern, falls Probleme auftreten.
Intel bietet zudem regelmäßig besondere Prämienaktionen
oder andere Anreize. Der
Autor der besten MeeGo-Anwendung bekommt
zum Beispiel die einmalige Möglichkeit
zu einer Reise nach Russland spendiert,
inklusive Überschallflug mit einem ehemaligen
Militärjet. All diese Preise und noch einige
mehr werden vierteljährlich vergeben,
sodass sich ein Besuch auf der Intel-AppDeveloper-Webseite
und die Entwicklung für
MeeGo wirklich lohnt.
● ● ●
Die Autorin
Sulamita Garcia arbeitet für Intel
Deutschland als Technical Marketing
Engineer Europe und ist eng
in die MeeGo-Entwicklung involviert.
Sie erreichen Frau Garcia
unter der E-Mail-Adresse sulamita.
garcia@intel. com (bitte nur
Zuschriften in Englisch).
Infos
[1] Projektseite:
http:// www. meego. com
[2] MeeGo-Wiki:
wiki. meego. com
[3] Qt-Webseite:
http:// qt. nokia. com
[4] Qt Quick
http:// qt. nokia. com/ qtquick
[5] Intel Entwicklerprogramm:
http:// appdeveloper. intel.​
com
[6] Intel-AppUp erklärt:
Tim Schürmann, „So funktioniert
der AppUp-Store
von Intel“ Smart Developer
01/​2011, S. 46.
smart-developer.de 02/2011 49

Praxis
UPnP mit BRisa
UPnP-Programmierung mit BRisa: Teil 1/​2
Universell
verbunden
Das Protokoll Universal Plug and Play (UPnP) kann mehr als nur Musik oder Videos abspielen. Dieser
Artikel macht Sie mit dem Standard vertraut und zeigt, wie Sie die freie UPnP-Implementierung
BRisa installieren und damit arbeiten. Leandro Melo de Sales
Durch die weite Verbreitung von
Unterhaltungselektronik und mobilen
Geräten wie PDAs, Handys
und Tablet-Geräten mit Internetanschluss
gewinnen die Konzepte des mobilen
und Pervasive Computing [1] an praktischer
Bedeutung. Der Standard Universal
Plug and Play (UPnP) [2] eignet sich hervorragend
dafür, Dienstleistungen, die in Zusammenhang
mit Pervasive Computing stehen,
wie zum Beispiel die konfigurationsfreie
Vernetzung (ZeroConf) und die automatische
Erkennung von Geräten und Diensten in zukünftigen
Netzwerken, zur Verfügung zu
stellen. Das BRisa-Projekt [5] macht UPnP
praxistauglich durch eine freie Implementierung
des UPnP-Standards sowie dazu passende
Tools.
Was ist UPnP?
Dieser Artikel stellt UPnP und BRisa vor. In
einem zweiten Teil, der in der kommenden
Ausgabe von Smart Developer erscheint, zeigen
wir Ihnen dann, wie Sie eine Klimaanlage
mit BRisa steuern. Der UPnP-Standard
definiert ein Bündel von Computernetzwerk-
Protokollen, mit deren Hilfe Computer,
Appliances und drahtlose Geräte über ein
Peer-to-Peer-Netzwerk miteinander kommunizieren
können. Am UPnP-Standard sind
fünf verschiedene Prozesse beteiligt. Jedes
UPnP-kompatible Gerät, kann sich, unabhängig
vom Hersteller, dynamisch auf folgende
Weise in ein UPnP-Netzwerk einklinken:
• Erhalt einer IP-Adresse (Schritt 1 – Adressierung)
• Mitteilen der wichtigsten Gerätedaten
(Schritt 2 – Beschreibung).
• Mitteilen des Funktionsumfangs (auf Anfrage),
Erkennen der Existenz und der
Funktionen anderer Geräte im Netzwerk,
Inanspruchnahme oder Anbieten von
Netzwerkdiensten (Schritt 3 – Steuerung)
• Bei Bedarf Abonnieren der Ereignismeldungen
des externen Gerätes (Schritt 4 –
Ereignismeldung/​Eventing)
Karel Miragaya, 123RF
50
02/2011 smart-developer.de

Praxis
UPnP mit BRisa
• Aufrufen der Präsentationsseite des externen
Gerätes, mit deren Hilfe der Anwender
den Betriebsstatus abrufen und verändern
kann (Schritt 5 – Präsentation).
Unabhängig von den Prozessen und Betriebszuständen
eines UPnP-Gerätes kann das
Gerät das Netzwerk automatisch verlassen,
ohne dass unerwünschte Statusinformationen
zurückbleiben.
Beim Hochfahren schickt die Schaltzentrale
(Control Point) eine Multicast-Nachricht
an das Netzwerk, um UPnP-Geräte ausfindig
zu machen. Sobald alle UPnP-Geräte die
Multicast-Nachricht erhalten haben, die von
der UPnP-Schaltzentrale geschickt wurde,
gibt jedes einzelne Gerät dem anfragenden
Control Point eine Rückmeldung. Dadurch
kennt die UPnP-Schaltzentrale alle angeschlossenen
UPnP-Geräte im Netzwerk. Auf
diese Weise kann der Anwender mehr über
die Eigenschaften des Gerätes erfahren
(Name, Hersteller, Modell, usw.), ein Gerät
auswählen und bedienen sowie die gewünschte
Aktion an das Gerät schicken. Der
UPnP DCP-Spezifikationen
Die UPnP-Spezifikationen enthalten mehrere DCP-Systeme (Device
Control Protocol), die für die Kommunikation zwischen den einzelnen
UPnP-Geräten verantwortlich sind. Es folgt eine Liste der wichtigsten
DCPs mit Fallbeispielen, wie sie vom UPnP Forum definiert
wurden:
* UPnP Audio und Video – das DCP ist innerhalb der UPnP-Familie
zuständig für Multimedia Sharing, Speicherung und Abspielen. Sie
sind zusammen mit Freunden beim Grillen auf der Terrasse. Jemand
erinnert sich an ein Lieblingslied aus der Uni-Zeit. Sie erwähnen,
dass Sie das gesamte Album in Ihrem Netzwerk liegen haben.
Einige wenige Fingerbewegungen auf dem Touchscreen-Display
Ihres Handys genügen, und schon wird das gewünschte Lied über
die Außenlautsprecher abgespielt.
* Dienstgüte (Quality of Service, QoS) – durch die drei Varianten
der UPnP-Dienstgüte wird ein Framework geschaffen für richtlinienbasierte,
priorisierte QoS, die bei der Diagnose von Netzwerkproblemen
hilft und einen Mechanismus zur Verfügung stellt, mit
dem ein bevorzugter Server zur QoS-Richtlinienverwaltung festgelegt
und konfiguriert werden kann. Sie sehen sich gerade einen
Film in Ihrem Heimkino, als Ihre Kinder im Teenager-Alter von der
Schule nach Hause kommen und anfangen, Videospiele zu spielen.
Sie verlassen den Raum, um den Film im Schlafzimmer zu Ende zu
sehen. Mit UPnP können Sie sicherstellen, dass Ihrem Film eine höhere
Priorität als den Videospielen der Kinder eingeräumt wird und
Ihr Film somit ohne Ruckeln bis zum Ende in Ihrem Schlafzimmer
abgespielt werden kann.
* Lichtsteuerung – die DCPs zur Lichtsteuerung enthalten Informationen
für zwei Arten von Licht: Binäres Licht und gedimmtes Licht.
Binäres Licht entspricht einer einfachen Glühbirne oder jeder anderen
elektrischen Lichtquelle, die komplett an- und abgeschaltet
werden kann. Gedimmtes Licht hat dieselben Eigenschaften wie binäres
Licht, zusätzlich kann bei dieser Lichtform die Lichtintensität
gesteuert werden; darüber hinaus verfügt diese Lichtart über Zusatzfunktionen.
Ihre Kinder und deren Freunde richten normalerweise
ein Chaos zu Hause an Freitagabenden an, wobei sie die
Lichter brennen und die Türen unverschlossen lassen. In Zukunft
kein Problem mehr! Auf Knopfdruck erkennt Ihr Alarmsystem, dass
das Garagentor offen ist und dass außerdem mehrere Rollläden
nicht heruntergelassen wurden und dies nun per Automatik nachgeholt
werden muss. Das Alarmsystem wird aktiviert und alle
Lichtquellen werden abgeschaltet.
* Stromsparmodus und Fernzugriff – Geräte mit Ruhe-Modus verwenden
alle oder einige der folgenden Stromsparmodi: Transparent
Sleep, Deep Sleep Online und Deep Sleep Offline; das Gerät
kann sich dabei in jedem dieser Modi befinden. Sie besuchen Ihre
Eltern, und sie sind die einzigen, die sich auch nur im Entferntesten
für Ihre Urlaubsfotos interessieren. Da Ihre Set-Top-Box UPnP-fähig
ist, verbindet sie sich per Fernzugriff mit dem Server in Ihrer Wohnung,
schaltet den Ruhe-Modus ab und greift auf Ihre Mallorca-Urlaubsfotos
zu. Ein paar Stunden später, wenn die Diaschau vorbei
ist, wird der Server wieder in den Ruhe-Modus versetzt und vermutlich
auch Ihre Eltern.
* Drucken – das für Druckvorgänge zuständige DCP definiert eine
Norm für Druck-Dienste beim UPnP-Standard. Während der Werbepause
im Fernsehen erscheint eine kleine Grafik, die Sie darauf
hinweist, dass dies ein interaktiver Werbespot ist und weitere Informationen
abrufbar sind. Sie rufen die zusätzlichen Informationen
ab, indem Sie eine Taste auf der Fernbedienung drücken. Der nett
aussehende Pullover aus der Werbung ist als Sonderangebot mit
50% Rabatt erhältlich! Sie drücken die Taste noch einmal, da Sie
diesen Pulli nun dringend benötigen. Sofort wird Ihnen eine E-Mail
zugeschickt, während im Büro Ihr Drucker anspringt und Ihren Rabattgutschein
ausdruckt.
* Sicherheit – der für die Gerätesicherheit zuständige Dienst ist für
Merkmale wie starke Authentifizierung, Wiedergabesperre sowie
für den Schutz der UPnP SOAP-Mitteilungen verantwortlich. Da
alle Geräte in Ihrem Haushalt UPnP-fähig sind, werden die Filme,
die Sie zu Hause digital aufnehmen, automatisch auf Ihren Videoserver
im Auto kopiert (wobei natürlich die Filter der von Ihnen installierten
Kindersicherung greifen). Die UPnP-Technik stellt sicher,
dass Ihre Aufnahmen urheberrechtskonform sind, indem die Benutzerrechte
überprüft werden, damit Sie bei einer Kontrolle der
Urheberrechts-Polizei keinen Ärger bekommen. Bei Ihrer nächsten
längeren Fahrt können Ihre Kinder sich die Fahrzeit mit den neuen
Aufnahmen auf dem Rücksitz verkürzen.
* Geräteverwaltung – die DCPs zur Geräteverwaltung ermöglichen
es, den generellen Gerätestatus darzustellen, Instandhaltungsmaßnahmen
wie zum Beispiel Neustarts durchzuführen, Tests auszuführen
zur Fehlerdiagnose wie zum Beispiel den ping-Test oder
einen Selbsttest, außerdem können Logging-Funktionen an- und
abgeschaltet sowie Logfiles eingesehen werden. Während Sie
abends ein Musikvideo ansehen, wird Ihnen klar, dass die irren Farben
nicht zum Video gehören, sondern aufgrund einer Fehlfunktion
Ihres Fernsehgerätes auftreten. Auch das Fernsehgerät selbst
kommt zum gleichen Schluss und verständigt sofort die Kundenbetreuung.
Eine Nachricht erscheint auf dem Bildschirm – ein Techniker
bittet um Erlaubnis, den Fehler zu beheben; über Ihre Fernbedienung
stimmen Sie zu. Der Fehler wird per Download beseitigt
und das Problem ist gelöst.
Diese Beispiele zeigen nur einen kleinen Teil der vielen komplexen
Kommunikationsszenarien auf, die durch DCPs innerhalb der
UPnP-Standards ermöglicht werden.
smart-developer.de 02/2011 51

Praxis
UPnP mit BRisa
Abb. 1: Der BRisa UPnP Control Point arbeitet als Zentrale des Frameworks.
UPnP-Protokollstapel ist für die Koordinierung
des Kommunikationsprozesses zuständig.
Weitere Informationen zu den Protokollgruppen,
die mittels UPnP verfügbar sind,
finden Sie im Kasten „UPnP DCP-Spezifikationen“
auf Seite 51.
Das BRisa-UPnP-Projekt
Das BRisa-Projekt nahm seinen Anfang als
Framework in der Programmiersprache Python,
das die Entwicklung von UPnP-Geräten,
Diensten und Schaltzentralen ermöglichte.
Aufgrund der jüngsten Bemühungen
des BRisa-Projektteams wurde die erste Version
des Frameworks nun veröffentlicht,
wobei die Entwickler dabei auf das Qt-
Framework setzten. BRisa wird unterteilt in
UPnP-Kernklassen und die Programmierschnittstelle
(API) für die Control Points.
Man kann das BRisa UPnP-Framework
dazu verwenden, neue UPnP-Geräte zu entwickeln
sowie entsprechende Dienste zur
Verfügung zu stellen. Zu den möglichen Geräten
gehören zum Beispiel Drucker, aber
Abb. 2: In der nächsten Ausgabe zeigen wir Ihnen, wie Sie diese GUI programmieren.
auch typischerweise in
Haushalten vorhandene
Geräte und Gegenstände
wie Klimaanlagen,
Beleuchtungsanlagen,
Vorhänge
und Türen. Mittels
der BRisa-Programmierschnittstelle
für die UPnP-Schaltzentrale
können Programmierer
von Anwendungen
UPnP-
Dienste nutzen wie
zum Beispiel Geräteerkennung,
Suche nach
Multimedia-Inhalten,
Abschicken von Druckaufträgen, Ein- und
Ausschalten von Lichtquellen, Abrufen der
Daten von Temperatursensoren, Anpassen
der Temperatur einer Klimaanlage sowie die
Steuerung von Fenstervorhängen.
BRisa ist auf vielen verschiedenen Plattformen
verfügbar, darunter Linux, Windows,
Mac OS X sowie auf eingebetteten Systemen
wie MeeGo und anderen. Ich werde im Folgenden
einen kurzen Überblick über die Installationsschritte
für Linux geben, aber Sie
können diese Anleitung ganz einfach auf andere
Betriebssysteme übertragen. Die ausführliche
Anleitung zur Installation von
BRisa auf anderen Betriebssystemen finden
Sie in der BRisa-Projektdokumentation [5].
Es ist kinderleicht, BRisa auf Qt-fähigen
Systemen zu kompilieren und zu installieren.
Falls Sie weitere Informationen zur Installation
von Qt benötigen, steht Ihnen die BRisa
Qt-Entwicklerdokumentation [6] zur Verfügung.
Um fortzufahren, installieren Sie bitte
die Qt-Version 4.6 oder neuer. BRisa hat nur
eine externe Abhängigkeit: das LibQxt-Projekt
[7]. Die Qt-SOAP-Klassenbibliothek ist
in einem gesonderten Installationspaket verfügbar.
Um den Installationsvorgang zu vereinfachen,
haben wir den Quellcode sowohl
für Qt als auch für Qt SOAP in das BRisa-
Quellcode-Repository hineingepackt.
Zuerst müssen Sie die neueste Version des
Qt-BRisa-Quellcodes herunterladen und installieren.
Dazu muss auf Ihrem Rechner die
Versionsverwaltung Subversion installiert
sein. Fehlt Subversion, verwenden Sie einfach
den Paketmanager Ihrer Wahl, um diese
Anwendung zu installieren.
Um den Quellcode von Qt BRisa herunterzuladen,
öffnen Sie ein Terminal-Fenster und
navigieren Sie zu dem Verzeichnis, in dem
Sie den BRisa-Quellcode abspeichern wollen.
Erstellen Sie zum Beispiel ein Verzeichnis
52
02/2011 smart-developer.de

Praxis
UPnP mit BRisa
namens upnp innerhalb Ihres Benutzerverzeichnisses
und navigieren Sie dorthin. Führen
Sie dann folgende Befehle aus:
svn checkout https://vcs.maemo.org/svn/brisa/
qt/trunk/qt‐brisa
Navigieren Sie dann in das qt‐brisa-Verzeichnis.
Dieses Verzeichnis enthält die Projektdokumentation,
die Programmierschnittstelle,
den Quellcode von Entwicklungszweigen
des Projektes, Tags-Verzeichnisse und
auch Installationspakete.
Die drei wichtigsten Unterverzeichnisse innerhalb
von qt‐brisa sind deps, examples
und src. Das deps-Verzeichnis enthält alle
Abhängigkeiten der BRisa-Bibliothek. Im Verzeichnis
examples finden Sie Beispiele für
UPnP-Geräte und Schaltzentrale-Implementationen.
Das Verzeichnis src enthält die
Standard-Implementation des BRisa UPnP-
Stacks. Falls Sie Interesse haben, sich am
BRisa-Projekt zu beteiligen, können Sie das
zuletzt erwähnte Verzeichnis als Ausgangspunkt
verwenden, um tiefer in die BRisa
UPnP-Implementierung einzusteigen.
Als nächsten Schritt installieren Sie die
libqxt-Bibliothek: Wechseln Sie in das libqxt-Unterverzeichnis
innerhalb des deps-
Ordners und führen Sie folgende Befehle aus:
qmake
./configure
make
sudo make install
Nach der Installation der libqxt-Bibliothek
müssen Sie nun die Qt-SOAP-Bibliothek installieren.
Navigieren Sie dazu zum Verzeichnis
Qt SOAP innerhalb des deps-Verzeichnisses
und wiederholen Sie dann die obige Befehlsfolge
zum Kompilieren und Installieren:
cd qtsoap‐2.6‐opensource
qmake
./configure
make
sudo make install
Navigieren Sie nun zwei Verzeichnisebenen
nach oben zum qt‐brisa-Verzeichnis cd
../../, um dort die Qt BRisa-Bibliothek zu
installieren. Verwenden Sie dazu dieselbe
Abfolge der Installationsbefehle.
Navigieren Sie zum Verzeichnis examples
und führen Sie dort einige Anwendungen
aus, um zu überprüfen, dass alles korrekt
ins talliert wurde. Wechseln Sie dazu in unser
universelles UPnP-Verzeichnis und kompilieren
Sie dort die Schaltzentrale mithilfe der
folgenden Befehle (ignorieren Sie alle Warnhinweise
in Bezug auf die Datei brisa.prf,
falls welche erscheinen):
cd examples/linux/BrisaControlPoint
qmake
./configure
make
Starten Sie die Schaltzentrale, indem Sie folgenden
Befehl ausführen:
./brisacontrolpoint
Das Betriebssystem sollte nun die in Abbildung
1 zu sehende Schaltzentrale starten.
Hat alles geklappt, können Sie die UPnP-
Binärlicht-Implementation ausführen. Gehen
Sie dazu eine Verzeichnisebene nach oben
und wechseln Sie in das Verzeichnis Brisa‐
BinaryLight. Kompilieren Sie dann die Binärlicht-Beispielimplementation
cd ../BrisaBinaryLight
qmake
make
und führen Sie sie über den Befehl ./brisa
binarylight aus. Sie sollten auch das BRisa-
Konfigurationstool kompilieren und ausführen;
das Tool ist im Verzeichnis example verfügbar.
Das Konfigurationstool ermöglicht es
Ihnen, Konfigurationsdateien bequem über
eine GUI abzuändern, anstatt die Dateien von
Hand zu editieren. Das BRisa-Konfigurationstool
wird dazu verwendet, die Standardeinstellungen
des Frameworks zu ändern. In
naher Zukunft werden Anwender in der Lage
sein, BRisa Plugins und andere Funktionen
mit dem Konfigurationstool zu verwalten.
Falls Sie Schwierigkeiten haben bei der
Ins tallation oder Einrichtung des Qt-BRisa-
UPnP-Frameworks, können Sie das Installationshandbuch
zurate ziehen, das auf der offiziellen
Webseite verfügbar ist, oder besuchen
das BRisa-Projekt im IRC auf dem Freenode-
Server irc. freenode. com, Kanal brisa.
Fortsetzung folgt…
Mit den bisherigen Informationen sind Sie
nun zur Programmierung einer eigenen Anwendung
mit BRisa bereit. In der kommenden
Ausgabe von Smart Developer zeigen
wir Ihnen, wie Sie über das Framework eine
komplette Klimaanlage steuern, inklusive
grafische Oberfläche, Ein- und Ausschalten
des Gerätes, Setup der Temperatur und
Timerfunktion.
● ● ●
Die Autoren
Leandro Melo de Sales startete
das UPnP-BRisa-Projekt Ende
2006. Er koordiniert das BRisa-
Entwicklungsteam am Pervasive
Computing Laboratory (COMPE/​
UFAL) und an weiteren Instituten
in Brasilien. Leandro besitzt eine
Professur für Computerwissenschaften
an der Universität Alagoas
und ist PhD-Kandidat an
der staatlichen Universität von
Campina Grande in Brasilien.
Bei der Arbeit dieses Artikels
haben ihn unterstützt: Angelo
Perkusich, Hyggo Almeida,
Thiago de Sales, Marcello de
Sales, Camilo Campos, Vinicius
Santos, Willian Victor, Leandro
Dias.
Infos
[1] D. Saha, A. Mukherjee, Pervasive
Computing: A Paradigm
for the 21st Century,
IEEE Computer, IEEE Computer
Society Press, pp. 25-
31, March 2003.
[2] UPnP Forum:
http:// www. upnp. org/
[3] L. Sales, at al. BRisa UPnP A/​
V Framework, IEEE International
Conference on Consumer
Electronics pp. 1-2,
January 2008.
[4] P. Louridas. SOAP and Web
Services, IEEE Software, vol.
23, no. 6, pp. 62-67, December,
2006.
[5] BRisa Official Website:
http:// brisa. garage. maemo.​
org and http:// garage.​
maemo. org/ projects/ brisa
[6] BRisa Qt Developer Documentation:
http:// brisa.​
garage. maemo. org/​
downloads/ qt‐brisa‐1.​
0‐documentation. pdf
[7] LibQxt Project:
http:// dev. libqxt. org/ libqxt/
smart-developer.de 02/2011 53

Entwicklung
Filesharing mit iOS
Datenaustausch zwischen iTunes und iOS
Filesharing
erlaubt
Seit Version 3.2 bietet das iOS das Feature der Dateifreigabe (Filesharing) und somit die Möglichkeit
des Datenaustausches zwischen iTunes und dem iPhone/​iPod/​iPad. Unser Workshop zeigt, wie
Sie das Feature in einer eigenen App einsetzen. Heiko Kalista
Dieser Artikel beschreibt, wie man
das Filesharing Feature von iOS in
einer eigenen App verwendet.
Dieses durchaus nützliche Feature
(siehe Kasten „Das ist möglich“) bietet ein
enormes Potenzial: So kann man beispielsweise
einem Benutzer erlauben, den Spielstand
eines iPhone-Spiels auf das iPad-Pendant
zu übertragen. Einige Apps nutzen es
auch, um proprietäre Daten — etwa ein eigenes
Dateiformat — zwischen dem iOS-Gerät
und dem Mac auszutauschen. Die für diesen
Workshop mit Xcode 4 entwickelte iPad-App
hat eine denkbar einfache Aufgabe: Über
iTunes überträgt man Bitmap-Bilder, die dann
mittels der entwickelten App auf Knopfdruck
einen Schwarz-Weiß-Filter durchlaufen und
in einem neuen Verzeichnis abgespeichert
werden. Diese Bilder kann man sich dann per
iTunes wieder auf den Desktop ziehen.
Eine solche Aufgabe lässt sich natürlich
wesentlich effizienter gleich unter Mac OS X
lösen. Auch deckt die hier vorgestellte App
nicht alle möglichen Fälle ab: So unterstützt
sie beispielsweise keine palettierten Bitmaps,
nur Bilder mit 24- oder 32-Bit
Farbtiefe. Das Beispiel
veranschau-
Mit freundlicher Genehmigung von Apple
54
02/2011 smart-developer.de

Entwicklung
Filesharing mit iOS
Abb. 1: So aktivieren Sie die Dateifreigabe in Apples Entwicklungsumgebung Xcode.
licht aber sehr gut das Prinzip der Dateifreigabe
und der damit verbundenen Programmieraufgaben,
sodass Sie Ihren Ideen freien
Lauf lassen können.
Filesharing einschalten
Die für diesen Workshop erstellte App ist
eine View-based Application. Damit der
Quellcode für dieses Projekt überschaubar
bleibt, findet die gesamte Interaktion mit den
Dateien sowie das Umwandeln in ein S/​W-
Bild der Einfachheit halber direkt im View-
Controller statt. Der Name des Projektes lautet
„BlackWhiteFilter“ und die im Artikel
verwendeten Dateiverweise beziehen sich
auf diesen Namen. Damit Sie die Listings
nicht abtippen müssen, finden Sie den Quellcode
auf der Smart-Developer-Homepage [1].
Um die Dateifreigabe einzuschalten, öffnen
Sie die Datei BlackWhiteFilter‐Info.plist
und fügen per Rechtsklick und dem Menüpunkt
Add Row eine neue Zeile hinzu. Als
Eintrag wählen Sie Application supports
iTunes file sharing und setzen den Eintrag
Value auf YES.
Damit iTunes die Dateifreigabe anzeigt,
muss man die App für ein „echtes“ Device
kompilieren und auf diesem starten. Natürlich
kann man das Ganze auch im Simulator
testen, nur dann eben ohne iTunes. Wie das
funktioniert, sehen wir gleich.
Sobald die App einmal auf einem realen
Gerät gestartet wurde, sieht man in iTunes
unter Geräte | Mein_iPad | Apps die Dateifreigaben
für alle Apps, die dieses Feature unterstützen.
Sie haben hier nun die Möglichkeit,
Dateien in den Dokumentenordner der entsprechenden
App hinein oder daraus herauszukopieren.
Das Dokumentenverzeichnis
Damit Ihre App auf die freigegebenen Dateien
zugreifen kann, muss zuerst das zur
App gehörende Verzeichnis ermittelt werden.
Wie das zu bewerkstelligen ist, zeigt der
Code-Ausschnitt in Listing 1. Dieser wird
Das ist möglich
Prinzipiell kann man über die Filesharing-Funktion
von iOS/​iTunes einer App beliebige Dateien
zur Verfügung stellen und diese einfach
per iTunes übertragen. Die App kann diese Dateien
öffnen, auslesen und wenn gewünscht
auch verändern und zurückschreiben. Dazu
steht jeder App separat ein Ordner namens
„Documents“ zur Verfügung. Weiterhin ist es
möglich, zur Laufzeit eigene Dateien anzulegen
und sogar neue Ordner zu erstellen. Über
iTunes kann man dann auf die veränderten, respektive
neuen Dateien zugreifen. Hierbei spielen
Unterordner allerdings eine gesonderte
Rolle. Den Inhalt dieser Ordner kann iTunes
nur kopieren oder löschen. Es ist nicht möglich,
Dateien in Unterordner zu schieben oder
über iTunes Unterordner anzulegen. Obwohl
das Feature „Filesharing“ heißt, ist es auch
nicht möglich, dass sich verschiedene Apps
einen gemeinsamen Ordner teilen. Benutzt
man das Filesharing-Feature, dann besitzt jede
App ihren eigenen Ordner, auf den auch nur
sie allein zugreifen darf.
smart-developer.de 02/2011 55

Entwicklung
Filesharing mit iOS
Abb. 2: Die Dateifreigabe in iTunes.
aufgerufen, wenn der Nutzer den Konvertieren-Button
betätigt. Der Methode NSSearch‐
PathForDirectoriesInDomains teilt man mit,
welches Verzeichnis man ermitteln möchte
und wo dieses zu suchen ist. Wir sind auf
der Suche nach dem Dokumentenverzeichnis,
was wir durch die Konstante NSDocumentDirectory
angeben. Gesucht werden soll
im Benutzerverzeichnis. Das wird durch die
Konstante NSUserDomainMask angegeben.
Wie bereits beschrieben, lässt sich nur das
Dokumentenverzeichnis der eigenen App ermitteln.
Somit können Sie als Programmierer
davon ausgehen, dass in pathList nur ein
einziger Eintrag zu finden ist. Die App muss
somit die Liste nicht durchlaufen, sondern
schnappt sich einfach nur den ersten Eintrag.
Im String documentsDirectory steht nun
der Pfad, in dem die freigegebenen Dateien
zu finden sind. Da die App die konvertierten
Bilder später in einem separaten Ausgabeverzeichnis
speichert, erzeugen Sie noch einen
entsprechenden Pfad und legen ihn im String
destinationDirectory ab. Die App muss natürlich
überprüfen, ob das Ausgabeverzeichnis
vorhanden ist oder nicht. Beim ersten
Start der App ist es definitiv nicht vorhanden.
Die Klasse NSFileManager bietet leider
Listing 1: Ermitteln des Dokumentenverzeichnisses
NSArray *pathList = NSSearchPathForDirectoriesInDomains( NSDocumentDirectory, NSUserDomainMask, YES );
NSString *documentsDirectory = [pathList objectAtIndex:0];
NSString *destinationDirectory = [NSString stringWithFormat:@"%@/output", documentsDirectory];
NSFileManager *fileManager = [NSFileManager defaultManager];
// Ausgabeverzeichnis erzeugen, falls nicht vorhanden
BOOL isDirectory = NO;
if (([fileManager fileExistsAtPath:destinationDirectory isDirectory:&isDirectory] && isDirectory == YES) == NO) {
[fileManager createDirectoryAtPath: destinationDirectory withIntermediateDirectories: NO attributes: nil error: NULL];
}
56
02/2011 smart-developer.de

Entwicklung
Filesharing mit iOS
keine direkte Möglichkeit zur Abfrage, ob ein
bestimmtes Verzeichnis existiert oder nicht.
Stattdessen können Sie jedoch die Methode
fileExistsAtPath:isDirectory verwenden.
Diese ist zwar in der Verwendung etwas
eigen, erfüllt aber ihren Zweck anstandslos.
Existiert das gewünschte Ausgabeverzeichnis
nicht, dann legt es die Methode createDirectoryAtPath
an.
Für Simulanten
Das Dokumentenverzeichnis zu ermitteln
und neue Unterverzeichnisse zu erstellen,
funktioniert auf dem Device selbst, ebenso
wie im Simulator. Es ist nicht nötig, im
Quellcode eine Unterscheidung zu treffen.
Allerdings ist es nicht möglich, mittels iTunes
auf den Simulator zuzugreifen. Stattdessen
verwendet man einfach den Finder und arbeitet
direkt auf Dateiebene.
Wie auf dem echten Gerät hat jede App
ihren eigenen Platz für das Dokumentenverzeichnis.
Fündig wird man unter Library/
Application Support/iPhone Simulator/4.3/
Application/ID/Documents. Die „4.3“ steht
dabei für die verwendete iOS-Version und
„ID“ für die GUID der aktuellen App.
Auflisten der Bitmaps
Als Nächstes müssen wir uns darum kümmern,
eine Liste zu erstellen, die alle Bitmap-
Dateien im Verzeichnis enthält. Das ist nicht
weiter schwer, wie folgender Code-Ausschnitt
zeigt:
Zuerst lassen wir uns mittels der Methode
contentsOfDirectoryAtPath:documentsDirectory
ein Array zurückliefern, das die Namen
sämtlicher Objekte enthält, die sich im Dokumentenverzeichnis
befinden. Dazu zählen
neben den Dateien natürlich auch Unterordner.
Das Filtern dieser Liste übernimmt nicht
der Dateimanager, sondern die Methode
filteredArrayUsingPredicate der Klasse
NSArray. Dazu legen Sie zuerst ein NSArray
an und füllen dieses mit den gewünschten
Einträgen. Unsere App soll nur nach Bitmap-
Dateien suchen, weshalb wir nur bmp übergeben.
Natürlich können Sie weitere Dateiendungen
oder Filterkriterien angeben, wenn
Sie möchten.
Einlesen einer Grafik
Nun stehen sämtliche für die Konvertierung
benötigen Informationen bereit und die App
kann die erhaltene Liste der Bitmap-Dateinamen
durchlaufen (Listing 3). Der Code
durchläuft zuerst die Liste der gefundenen
Dateien, wobei jeder Eintrag für Debug-Zwecke
in die Log-Datei geschrieben wird. Weiterhin
baut der Code die Pfade für die Quellund
Zieldateien zusammen. Die Pfadangaben
werden der Methode convertImage übergeben,
die wir uns nun stückchenweise anschauen
(Listing 4).
Damit wir auf dem iPad während des Konvertierungsvorganges
auch etwas zu sehen
bekommen, wurde der App ein Imageview
spendiert, das zu Beginn der Methode convertImage
mit dem aktuell zu bearbeitenden
Bild gefüllt wird. Konvertiert man mehrere
Listing 2: Auflisten der Dateien
// Alle Dateien im Dokumentenverzeichnis auflisten
NSArray *filelist;
filelist = [fileManager contentsOfDirectoryAtPath:documentsDirectory
error:NULL];
// Die erhaltene Liste nach Bitmap‐Dateien filtern
NSArray *bmpFilter = [NSArray arrayWithObjects:@"bmp", nil];
NSArray *bitmapFileList = [filelist filteredArrayUsingPredicate:[NSPredicate p
redicateWithFormat:@"pathExtension IN %@", bmpFilter]];
Listing 3: Durchlaufen der Quellbilder
int count = [bitmapFileList count];
for (int i = 0; i < count; i++) {
NSLog(@"%@", [bitmapFileList objectAtIndex: i]);
NSString *pathOfSourceFile = [NSString stringWithFormat:@"%@/%@",
documentsDirectory, [bitmapFileList objectAtIndex: i]];
NSString *pathOfDestinationFile = [NSString stringWithFormat:@"%@/%@",
destinationDirectory, [bitmapFileList objectAtIndex: i]];
}
[self convertImage: pathOfSourceFile :pathOfDestinationFile];
Listing 4: Öffnen der Datei
‐ (void)convertImage:(NSString*)sourceFileName :(NSString*)destinationFileName
{
imageView.image = [[[UIImage alloc]
ileName] autorelease];
// Datei öffnen
NSFileHandle *fileHandle = [NSFileHandle
Path:sourceFileName];
initWithContentsOfFile:sourceF
fileHandleForReadingAt
}
if (fileHandle == NULL) {
NSLog(@"Failed to load: %@", sourceFileName);
return;
}
else {
NSLog(@"File %@ loaded successfully", sourceFileName);
smart-developer.de 02/2011 57

Entwicklung
Filesharing mit iOS
Listing 5: Auslesen des Bitmap-Headers
// Bitmap‐Header auslesen
struct BitmapHeader bitmapHeader;
int bitmapHeaderSize = sizeof(bitmapHeader);
Bilder, wird nur das zuletzt bearbeitete Bild
angezeigt. Das liegt daran, dass der gesamte
Konvertierungsprozess am Stück abläuft und
damit auch die GUI blockiert. Möchte man
jedes Bild anzeigen und eventuell noch einen
Fortschrittsbalken darstellen, dann muss
man die Funktionalität in einen separaten
Thread auslagern.
Um die Datei zu öffnen, legen Sie ein
NSFileHandle an und rufen die Methode
fileHandleForReadingAtPath auf, der Sie den
gewünschten Dateinamen (inklusive Pfad)
übergeben. Danach prüfen Sie, ob Sie ein
gültiges Handle bekommen haben und geben
entsprechende Meldungen aus.
Als Nächstes kümmern wir uns um das
Auslesen des Bitmap-Headers (Listing 5, und
Kasten „Der Bitmap-Header“).
NSData *bitmapHeaderData = [fileHandle readDataOfLength:bitmapHeaderSize];
[bitmapHeaderData getBytes:&bitmapHeader length:bitmapHeaderSize];
Listing 6: Auslesen der Pixeldaten
// Pixeldaten auslesen
NSData *bitmapPixelData = [fileHandle readDataOfLength:bitmapHeader.
bitmapDataSize];
Byte *pixelData = (Byte*)malloc(bitmapHeader.bitmapDataSize);
[bitmapPixelData getBytes:pixelData length:bitmapHeader.bitmapDataSize];
Die Klasse NSData bietet uns die Möglichkeit,
bequem auf einen Byte-Buffer zuzugreifen.
Mittels der Methode readDataOfLength lesen
wir nun den Bitmap-Header ein und speichern
ihn im NSData-Objekt bitmapHeader‐
Data. Dort nützen uns die Daten allerdings
noch nicht sonderlich viel, denn eigentlich
wollten wir unsere Struktur mit den gewünschten
Daten füllen. Dazu bietet die
Klasse NSData die Methode getBytes. Diese
kopiert einen definierten Speicherbereich an
die angegebene Adresse. Um einen Bereich
der zu kopierenden Daten anzugeben, bedient
man sich der Struktur NSRange und der
Funktion NSMakeRange. In unserem Fall genügt
es, einfach die gewünschte Länge anzugeben.
Wurde das Pack Alignment richtig gesetzt
(siehe Kasten „Der Bitmap-Header“),
stehen nun sämtliche Informationen über die
Bitmap-Datei in der Struktur bitmapHeader
zur Verfügung und es kann mit dem Auslesen
der eigentlichen Pixeldaten weitergehen.
Der Bitmap-Header
Eine Bitmap-Datei ist aufgeteilt in einen Header
und in die eigentlichen Bilddaten. Im Header
sind Informationen über die Breite, Höhe,
Farbtiefe und einige weitere Informationen abgelegt.
Die meisten dieser Informationen sind
für unser Vorhaben erst einmal irrelevant. Wir
unterstützen beispielsweise keine palettierten
Bilder. Wichtig ist allerdings, dass wir für die
folgende Struktur ein Pack Alignment von 2
angeben, da sonst später beim Laden die
Struktur nicht korrekt gefüllt werden würde.
#pragma pack(push, 2)
struct BitmapHeader
{
[fileHandle closeFile];
int stride = (bitmapHeader.width * (bitmapHeader.bpp / 8) + 3) & ~3;
Listing 7: Die Graustufen-Konvertierung
// Graustufenkonvertierung
int numBytes = bitmapHeader.bpp/8;
for (int y=0; y

Entwicklung
Filesharing mit iOS
Das Auslesen der Pixeldaten (Listing 6) gestaltet
sich auch nicht weiter schwierig. Wir
müssen lediglich ein neues NSData-Objekt anlegen,
die Daten einlesen und die Byte-Daten
kopieren. Die dafür benötigte Größe berechnet
die App aus dem Header. Im Prinzip die
gleiche Vorgehensweise wie im obigen Code-
Ausschnitt. Der letzten Zeile schenken wir
allerdings ein bisschen mehr Beachtung:
Man muss aufpassen, wenn man die Pixeldaten
korrekt verarbeiten möchte, da jede Zeile
einer Bitmap 32 Bit aligned ist. Bei bestimmten
Auflösungen besteht somit ein kleiner
overhead an Bytes pro Zeile. Beim Auslesen
muss man das berücksichtigen. Um herauszufinden,
wie viele Bytes tatsächlich pro
Zeile verwendet werden, rechnen wir uns
den sogenannten stride aus. Wie dieser weiterverwendet
wird, zeigt Listing 7.
Jedes Pixel einer Bitmap-Datei besteht (solange
keine Farbpalette verwendet wird) zu
bestimmten Anteilen aus Rot, Grün und Blau.
Das menschliche Auge nimmt diese drei Farben
unterschiedlich intensiv wahr. Somit
kann man jeder dieser Farben eine gewisse
Gewichtung zuordnen. Meistens liegt diese
Gewichtung bei etwa 11% Blau, 59% Grün
und 30% Rot. Verrechnet man jede Farbkomponente
mit der Gewichtung und addiert die
Resultate, erhält man einen passenden Grauwert.
Und genau das machen wir in der oben
gezeigten Schleife. Man sieht dort auch, dass
als Byte-Offset pro Zeile der weiter oben berechnete
stride zum Einsatz kommt.
Das Finale
Ein Graustufenbild liegt nun als Resultat vor,
allerdings liegt dieses noch im Speicher. Wie
Sie das Ergebnis in eine neue Bitmap-Datei
schreiben, zeigt Listing 8.
Als Erstes müssen Sie sich darum kümmern,
dass die Pixel wieder in einem NSData-Objekt
landen, denn das oben verwendete Byte-Array
lässt sich nicht direkt in eine Datei
schreiben. Dazu benutzt unsere App die
Methode dataWithBytes der Klasse NSData.
Dieser übergeben Sie den Zeiger auf die Byte-
Daten und deren Länge. Nun versuchen Sie,
die Zieldatei zu öffnen. Ist diese bereits vorhanden,
gibt die Methode fileHandleForWritingAtPath
ein Filehandle zurück. Falls die
Datei noch nicht vorhanden ist, erzeugen Sie
sie mit der Methode createFileAtPath und
versuchen dann erneut Ihr Glück.
Sobald ein gültiges Handle vorhanden ist,
schreibt die Methode writeData den Bitmap-
Header – den wir ja noch im Speicher haben
– in die geöffnete Datei. Als Nächstes
schreibt die gleiche Methode die Pixeldaten
und erzeugt damit eine neue Bitmap-Datei.
Zu guter Letzt wird die Datei geschlossen
und die Pixeldaten mittels free freigegeben.
Fazit
Die Dateifreigabe via iTunes ist im Zusammenspiel
mit dem iPad oder einem iPhone
ein interessantes und nützliches Feature.
Man kann damit Daten auf das iPad packen,
diese unterwegs im Zug bearbeiten und später
wieder auf den Rechner ziehen. Zudem
lassen sich Dateiformate verwenden, für die
Apple keine native Unterstützung bietet. Last
but not least eignet sich das Feature, um Anwendungsdaten
älterer Geräte auf neuere zu
übertragen. Wie dieser Artikel gezeigt hat, ist
es nicht schwer, die Dateifreigabe für die eigene
App zu verwenden und mittels einiger
Dateioperationen erste Resultate zu erzielen.
Für Ihr eigenes Projekt brauchen Sie also nur
noch eine zündende Idee. ● ● ●
Der Autor
Heiko Kalista arbeitet als Software-Entwickler
bei Giegerich &
Partner GmbH in Dreieich. Er hat
das Fachbuch „C++ für Spieleprogrammierer“
verfasst. Sie erreichen
Ihn unter der Adresse
largo75@gmx. de
Infos
Listing 8: Schreiben von Dateien
bitmapPixelData = [NSData dataWithBytes:(const void *)pixelData
length:bitmapHeader.bitmapDataSize];
// Datei schreiben
fileHandle = [NSFileHandle fileHandleForWritingAtPath:destinationFileName];
if(fileHandle == nil) {
[[NSFileManager defaultManager] createFileAtPath:destinationFileName contents:nil
attributes:nil];
fileHandle = [NSFileHandle fileHandleForWritingAtPath:destinationFileName];
}
if(fileHandle != nil) {
[fileHandle writeData:bitmapHeaderData];
[fileHandle writeData:bitmapPixelData];
[fileHandle closeFile];
}
free(pixelData);
[1] Kompletter Quellcode
der Beispiel-App:
http:// www. smart‐developer.​
de/ Magazin/ Code‐Beispiele
[2] IOS-Entwicklerprogramm,
weiterführende Informationen
zum Thema:
http:// developer. apple. com/​
library/ ios/ # documentation/​
iphone/ conceptual/​
iphoneospro
grammingguide/​
StandardBehaviors/​
StandardBehaviors. html
[3] Informationen zum Buch
„C++ für Spieleprogrammierer“:
http:// www. hanser. de/​
buch. asp"isbn=978‐3‐446‐
42140‐0& area=Computer
smart-developer.de 02/2011 59

Entwicklung
WP7-Entwicklung mit XNA
Spiele-Programmierung für Windows Phone 7
Blöcke
stapeln
Spiele oder Anwendungen für das Windows Phone 7 zu
programmieren, ist für erfahrene Windows-Entwickler
nicht schwierig: Die Tools dazu – Visual Studio 2010 und
die Windows Phone 7 Developer Tools – gibt es kostenlos
und die Programmiersprache ist C#. Dieser Artikel
zeigt, wie ein einfaches Spiel namens Blocks
entsteht. Benjamin Nitschke
Seit Ende letzten Jahres mischt Microsoft mit
Windows Phone 7 am Smartphone-Markt mit.
Dank XNA und Unterstützung für Silverlight
kann man nun relativ einfach Spiele und Anwendungen
für Windows Phone 7 in C#/​.NET entwickeln.
Andere Plattformen wie iOS und Android benötigen andere
Sprachen und Tools (Objective-C und Java). Der Einstieg ist
für Spieleentwickler also nicht immer ganz so leicht.
Dieser Artikel zeigt, wie Sie ein einfaches Windows-Phone-7-
Spiel in XNA mit wenigen Zeilen Source-Code programmieren. Wer
sich für die Silverlight-Entwicklung von Windows Phone 7 interessiert,
findet in der Ausgabe 01/​2011 von Smart-Developer einen interessanten
Artikel zum Erstellen eines einfachen RSS-Newsreaders
[1]. Dieser Artikel geht auch noch auf die Unterschiede zum
iPhone und zu Android ein und stellt eine mögliche Lösung für
Spieleentwickler vor, um auf allen Plattformen mit einer Codebasis
Spiele entwickeln zu können.
nebuto, 123rf.com
Voraussetzungen
Um loszulegen, braucht man einen Windows-Rechner und Visual
Studio 2010 sowie die Windows Phone Developer Tools. Visual Studio
2010 gibt es als kostenlose C#-Express-Variante, aber auch die
volle Version (Standard, Professional oder Ultimate) funktioniert
problemlos mit den Windows Phone Developer Tools zusammen.
Um Letztere installieren zu können, benötigt man mindestens
Windows Vista oder Windows 7. Wer noch auf Windows XP setzt,
oder unter Linux oder Mac OS X für Windows Phone 7 entwickeln
will, sollte sich den Abschnitt zur Delta Engine am Ende des Artikels
durchlesen, dort gibt es diese Voraussetzungen nicht, zudem
können Sie damit auch für andere Plattformen entwickeln.
60
02/2011 smart-developer.de

Entwicklung
WP7-Entwicklung mit XNA
Nachdem Sie die Tools installiert haben und
optional auch die aktuellen Service Packs
eingerichtet haben, kann man in Visual Studio
2010 ein neues Windows Phone Game
(4.0) Projekt in der Gruppe XNA Game Studio
4.0 erstellen (Abbildung 2). Für diesen
Artikel wurde das Projekt WP7Blocks genannt.
Nachdem man OK gedrückt hat, werden
automatisch zwei Projekte erstellt:
WP7Blocks und WP7BlocksContent. Das Content-Projekt
ist noch leer und erwartet nun
Content für das WP7Blocks-Projekt, das
unter Content References verlinkt ist.
Die Idee
Als Nächstes braucht man erst einmal eine
Spiel idee. Wenn die Idee komplexer wird
und insbesondere, wenn man zusammen in
einem Team mit Grafikern, Game Designern
und Programmierern arbeitet, sollte man
unbedingt ein Spielkonzept erstellen und
eine grobe Planung vornehmen. Aber auch
wenn Sie alleine arbeiten, sollten die Ziele
ganz klar sein. Für diesen Artikel war das
Ziel, in etwa 100 Zeilen Code ein sehr einfaches
Spiel für Windows Phone 7 zu erstellen
und auch keine weiteren Libraries oder
Frameworks außer XNA zu benutzen. Logischerweise
lässt sich auf 100 Zeilen nicht
sonderlich viel Spiellogik unterbringen, aber
umso besser eignet sich das Projekt als
Grundlage für weitere und komplexere 2D-
Spiele in XNA.
Fallende Blöcke
Die Spielidee ist ein stark vereinfachtes Tetris.
Es gibt jedoch nur eine Art Block und
man kann diesen nur nach rechts und links
Abb. 1: Das Blocks-Spiel auf dem Windows Phone 7 Emulator.
bewegen. Das Spiel findet auf einem 9x9 großen
Feld statt, und genau wie in Tetris erscheint
oben ein neuer Block und das Spielziel
ist, unten Zeilen zu füllen. Ein zugegebenermaßen
sehr einfaches Spiel, bei dem
zudem auch die Bedingungen zum Gewinnen
oder Verlieren fehlen. Man kann jedoch
beliebig lange auf einem echten Gerät oder
dem Windows Phone 7 Emulator spielen und
genau wie bei Tetris verschwinden Zeilen,
sobald diese komplett gefüllt sind.
Das Spiel besteht nur aus zwei Grafiken.
Die Datei SpaceBackground.png (Abbildung
3) dient als Hintergrundbild und Block.png
(Abbildung 4) zeigt den aktuellen Block an,
den man steuern kann. Beide Grafiken stammen
vom Spiel XNATetris, das ich 2006 für
mein Buch „Professional XNA Game Programming“
geschrieben habe. Wer sich für
ein vollständiges Tetris in XNA interessiert,
findet am Ende des Artikels ein paar weiter-
Abb. 2: So erstellen Sie ein neues Windows Phone Game Projekt.
smart-developer.de 02/2011 61

Entwicklung
WP7-Entwicklung mit XNA
Abb. 4: Die Blockgrafik für
das triviale Tetris-Spiel.
Abb. 3: Die Hintergrundgrafik für das Blocks-Spiel.
führende Literaturhinweise. In diesem Artikel
kümmern wir uns nur um die grundlegenden
Elemente eines WP7-Spiels.
Initialization
Um die beiden Grafiken im WP7Blocks-Projekt
benutzen zu können, müssen diese zum
WP7BlocksContent-Projekt hinzugefügt werden.
Dies geht am einfachsten durch
Drag&Drop dieser zwei Dateien auf den Solution
Explorer in Visual Studio 2010. Es
kommt nicht darauf an wie diese Grafiken
aussehen, man kann auch beliebig andere
Bilder benutzen. Wer die XNATetris-Grafiken
Listing 1: Variablen
benutzen will, sollte diese am besten durch
den XNATetris-Link am Ende des Artikels herunterladen
und dort aus dem Content-Verzeichnis
entnehmen. Wer andere Grafiken
benutzen will, sollte darauf achten, dass das
Hintergrundbild mindestens 512 x 512 Bildpunkte
groß ist.
Die Größe der Block.png-Grafik spielt
keine Rolle. Sie wird im Spiel immer in 53 x 53
Pixeln gezeichnet, da das Spielboard 9x9 Felder
hat und jedes Windows-Phone-7-Gerät
eine Auflösung von 800 x 480 Pixeln hat
(480/​9 ergibt 53.33).
Als Nächstes kann man in Visual Studio
noch die Eigenschaften (Properties) der Bilder
bearbeiten (Abbildung 5). Es bietet sich
an, DXTCompression zu benutzen, um die
Bilder klein zu halten, aber bei diesem kleinen
Spiel macht die Kompression kaum
einen Unterschied an der finalen App-Größe.
Im WP7Blocks-Projekt gibt es noch weitere
Grafiken, die für die Kacheln des Windows
Phone 7 benutzt werden und ein GameThumbnail.png,
welches ebenfalls als Kachel und
im WP7-AppStore erscheint. Die Datei Game.
ico hat keine Bedeutung unter Windows
Phone 7 und auch die Program.cs-Datei wird
nicht benötigt. Letztendlich bleibt nur noch
die Game1.cs-Datei übrig, welche Sie am besten
in etwas Sinnvolleres umbenennen, zum
Beispiel BlocksGame oder
MeinErstesGame.
Abb. 5: Hier bearbeiten Sie die
Eigenschaften für das Content-Projekt
des Blocks-Spiels.
Texture2D background;
Texture2D block;
// Define a field of 9x9 blocks
const int FieldWidth = 9, FieldHeight = 9;
bool[,] field = new bool[FieldWidth,
FieldHeight];
int currentBlockX = 4, currentBlockY = 0;
// Update 4 times a second.
const double UpdateTime = 0.25f;
double nextUpdateTime = 0.0f;
Listing 2: LoadContent
///
/// LoadContent will be called once per
game
/// all of your content.
///
protected override void LoadContent()
{
// Create a new SpriteBatch, used to draw textures.
spriteBatch = new SpriteBatch(GraphicsDevice);
background = Content.Load("SpaceBackground");
block = Content.Load("Block");
} // LoadContent()
Ein erster Test
Um sicherzustellen, dass
bisher alles in Ordnung ist
und Sie durch eventuelle
Umbenennaktionen oder
dem Hinzufügen von Content
noch nichts kaputt
gemacht haben, sollten
Sie jetzt das Projekt einmal
ausführen. Standardmäßig
startet es im Windows
Phone 7 Emulator
und zeigt ein blaues Hintergrundbild
an. Mehr als
das Spiel zu beenden,
können Sie zum aktuellen
Zeitpunkt allerdings noch
nicht tun.
Nun definieren wir zunächst
alle Konstanten
und Variablen, die wir für
das Projekt brauchen (Listing
1). Zunächst wird
eine Texture background
für die Hintergrundgrafik
und eine Texture block für
62
02/2011 smart-developer.de

Entwicklung
WP7-Entwicklung mit XNA
die Blockgrafik definiert. Diese werden gleich
in der LoadContent-Methode geladen und von
der Render-Methode verwendet.
Als Nächstes legen Sie das das 9x9 Pixel
große Spielfeld fest, wobei jedes Feld nur
zwei States einnehmen kann, entweder True
für „Block ist hier“ oder False für den Zustand
„leer“. Da ein WP7-XNA-Spiel standardmäßig
mit 30 Frames pro Sekunde läuft
und damit auch die Update-Methode so oft
aufgerufen wird, ist dies auch für einen Tetris-Profi
viel zu schnell. Das Spielfeld würde
sich in zwei bis drei Sekunden füllen, ohne
dass Zeit bleibt, die Blöcke zu verteilen.
Daher wird UpdateTime benutzt, um nur viermal
pro Sekunde den Block nach unten zu
bewegen. Der Benutzer kann so immer noch
30-mal pro Sekunde auf den Bildschirm tippen,
um den aktuellen Block nach rechts
oder links zu bewegen. Den bisherigen Code
unserer App zeigt Listing 1.
Der Constructor der BlocksGame-Klasse
kann so bleiben wie er ist und in der Load-
Content-Methode müssen nur noch die beiden
Texturen geladen werden (Listing 2). Die
UnloadContent- und Initialize-Methoden
werden ebenfalls in diesem einfachen Beispiel
nicht benötigt und können ruhig entfernt
werden. Damit sind wir auch schon fertig
mit der Initialisierung und können direkt
weitermachen mit der benötigten Spiellogik.
Um sicherzustellen, dass noch alles kompiliert
und läuft, sollte man ruhig das Projekt
nochmals starten (F5).
Spiellogik
Die erstellte BlocksGame-Klasse enthält bereits
eine XNA-Methode zum Zeichnen namens
Draw, auf die auch gleich eingegangen
wird. Außerdem gibt es bereits eine Update-
Methode, um die Spiellogik zu aktualisieren.
In unserem Fall geht es also darum, den aktuellen
Spielblock nach unten zu bewegen,
Touch-Input abzufangen und letztendlich
eine komplett gefüllte Zeile des Spielfeldes
wieder zu löschen und alle darüberliegenden
Zeilen herunterrücken zu lassen.
Den Code dafür zeigt Listing 3. In den ersten
Zeilen geht es darum, dem User zu ermöglichen,
das Spiel wieder zu beenden,
was in XNA mithilfe der GamePad-Klasse und
deren Buttons-Properties gelöst wird. Wer
schon einmal in XNA, zum Beispiel für die
Xbox 360, programmiert hat, dem wird dies
sehr bekannt vorkommen. Windows Phone 7
unterstützt allerdings nur den Back-Button.
Stattdessen benutzt man die TouchPanel-
Klasse, um auf die Touch-Inputs zugreifen zu
können. Dies geht entweder über die Touch-
Listing 3: Spiellogik
// Allows the game to exit
if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
this.Exit();
// Move left right depending on where the user touched the screen
foreach (TouchLocation touchPos in TouchPanel.GetState())
{
if (touchPos.State == TouchLocationState.Released)
{
// Move block left or right
if (touchPos.Position.X < 350 &&
currentBlockX > 0)
{
currentBlockX‐‐;
}
else if (touchPos.Position.X > 450 &&
currentBlockX < FieldWidth ‐ 1)
{
currentBlockX++;
}
} // if
} // foreach
// Update current block and create a new one if we reached the ground
nextUpdateTime += gameTime.ElapsedGameTime.TotalSeconds;
// Only handle this every 0.25 seconds.
if (nextUpdateTime > UpdateTime)
{
nextUpdateTime ‐= UpdateTime;
// Check if we can move down
if (currentBlockY < FieldHeight ‐ 1 &&
field[currentBlockX, currentBlockY + 1] == false)
{
// Move block one down.
currentBlockY++;
}
// Otherwise fix this block and create a new one at the top
else
{
// Fix this block
field[currentBlockX, currentBlockY] = true;
// Quick check if the bottom line is now full
int blocksInLine = 0;
for (int x = 0; x < FieldWidth; x++)
if (field[x, FieldHeight ‐ 1])
blocksInLine++;
if (blocksInLine == FieldWidth)
{
// Move everything one down (we have to do it upside down)!
for (int y = FieldHeight ‐ 1; y > 0; y‐‐)
for (int x = 0; x < FieldWidth; x++)
field[x, y] = field[x, y ‐ 1];
}
// Create a new block at the top
currentBlockX = 4;
currentBlockY = 0;
} // else
} // if
smart-developer.de 02/2011 63

Entwicklung
WP7-Entwicklung mit XNA
Listing 4: Drawing in der Draw-Methode
// Clear background in black
GraphicsDevice.Clear(Color.Black);
Collection wie im gezeigten Code via Touch-
Panel.GetState() oder über Gestures, wenn
man diese für sein Spiel aktivieren will.
Wenn der User auf die linke Bildhälfte
klickt, soll der aktuelle Block nach links bewegt
werden, berührt der Spieler die rechte
Bildschirmhälfte (X Position größer als 450
Pixel), dann soll sich der Block nach rechts
bewegen. Um dies auch gleich wieder mit F5
(Start Projekt Hotkey in Visual Studio) testen
zu können, sollte man zunächst den aktuellen
Block auf den Bildschirm zeichnen (siehe
Abschnitt Drawing), um zu testen, ob alles
bisher richtig läuft. Den restlichen Code
braucht man dafür noch nicht.
Als Nächstes überprüfen Sie über die Update-Methode,
ob eine Viertelsekunde vergangen
ist. Wenn ja, dann wird der restliche
Code ausgeführt. Wie erwähnt, dient dieser
Workaround dazu, den Block nicht 30-mal
pro Sekunden nach unten bewegen zu müssen.
Kann der Block ein Feld nach unten bewegt
werden, dann tut dies die App – fertig.
spriteBatch.Begin();
// Place background in center (800 pixels width ‐ 512 pixels) / 2 = 144
spriteBatch.Draw(background, new Vector2(144, 0), Color.White);
// Draw all field blocks
for (int x = 0; x < FieldWidth; x++)
for (int y = 0; y < FieldHeight; y++)
if (field[x,y])
spriteBatch.Draw(block, GetBlockRect(x, y), Color.DarkGray);
// And finally also add the current block
spriteBatch.Draw(block, GetBlockRect(currentBlockX, currentBlockY),
Color.White);
spriteBatch.End();
Listing 5: Die Hilfsfunktion GetBlockRect
///
/// Get block position and rectangle for the current block or a field block
///
private Rectangle GetBlockRect(int x, int y)
{
// Place blocks in center (800 pixels width ‐ 480 pixels height) / 2
// Note: Reduced to 477 to make 9*53 fit into 477 (480 would have spaces)
return new Rectangle(162 + x * 477 / FieldWidth, y * 477 / FieldHeight,
477 / FieldWidth, 477 / FieldHeight);
} // GetBlockRect(x, y)
Kompliziert wird es erst wieder, wenn wir
ganz unten angelangt sind oder auf dem Zielfeld
bereits ein Block existiert. Dann stoppt
die App den aktuellen Block und brennt ihn
in das Feld. Schlussendlich wird noch überprüft,
ob wir eine komplette Zeile von links
nach rechts gefüllt haben und wenn dies der
Fall ist, wird die gesamte Zeile gelöscht und
das Spielfeld darüber einen Block nach unten
verschoben.
Drawing
Wir sind nun fast fertig, aber ohne Draw-Code
sehen wir noch nichts auf dem Bildschirm,
nur nach wie vor den hellblauen Standard-
Hintergrund des erstellten XNA-Projektes.
Zunächst löschen wir den Hintergrund in
Schwarz und dann zeichnen wir die Spielelemente
auf die Zeichenfläche (Listing 4). In
2D-XNA benutzt man dazu die SpriteBatch-
Klasse, welche mehrere Draw-Calls zusammenfasst
und für uns optimiert. Nachdem
der spriteBatch per Begin gestartet wurde,
erscheint das SpaceBackground-Hintergrundbild
zentriert.
Als Nächstes zeichnen wir alle 9x9-Feld-
Blöcke (am Anfang noch leer). Sobald der
Spieler jedoch ein paar Blöcke gefüllt hat,
werden hier mehr und mehr Blöcke gezeichnet
(Abbildung 1). Sobald eine Zeile voll ist
und wieder gelöscht wurde, vereinfacht sich
das Spielfeld natürlich wieder. Das Letzte
was noch getan werden muss, ist den aktuellen
beweglichen Block zu zeichnen. Beim fixierten
Feld wurde die Farbe Color.DarkGray
benutzt, beim aktuellen Block hingegen die
Farbe Color.White. So kann man leicht auseinanderhalten,
welcher Block momentan der
Ideal für Einsteiger
Das hier beschriebene Spiel ist in etwa ein bis
zwei Stunden Programmierarbeit entstanden.
Es wurde parallel zu diesem Artikel geschrieben
und es gibt nicht nur eine XNA-Version für
WP7, sondern auch eine Variante mit der Delta
Engine, die auf allen Plattformen läuft. Wichtig
ist, dass man sich klare Ziele setzt und konstant
testet, ob das gewünschte Ergebnis in die
richtige Richtung geht. Bei uns im Team benutzen
wir viele Tausende Unit-Tests, um kleine
Teile zu testen, und selbst bei diesem kleinen
Spiel macht es Sinn, die Einzelteile separat zu
testen (GetBlockRect, Spiellogik, Drawing, Current
Block, Block Field, etc.). Alternativ kann
man sich, auch wie in diesem Artikel beschrieben,
langsam hocharbeiten und einzelne Probleme
nacheinander lösen (erst Visual Studio
installieren, dann XNA Projekt erstellen, dann
testen, dann aktuellen Block hinzufügen, etc.).
64
02/2011 smart-developer.de

Entwicklung
WP7-Entwicklung mit XNA
aktuelle ist, da alle Blöcke ja die gleiche Grafik
benutzen. Die Blöcke selbst werden mit
der einfachen Hilfsfunktion GetBlockRect gezeichnet,
was den Draw Code etwas aufgeräumter
gestaltet (siehe Listing 5).
Testing
Damit sind wir nun komplett fertig mit unserem
kleinen Spiel. Mit Kommentaren und
Leerzeilen kommt die Datei BlocksGame.cs
auf etwa 170 Zeilen, der eigentliche Spielcode
ist aber eher 100 Zeilen lang, das Ziel
wurde also erreicht. So richtig Spaß macht
das Ganze noch nicht, aber es funktioniert
im Emulator und auf einem Windows-Phone-
7-Gerät. Aufgrund der Größe des Projektes
ist es nun sehr einfach, weitere Spielregeln
und auch weitere Grafiken einzubinden. Die
Ideen sind vielfältig, man könnte zum Beispiel
das Spiel mehr zum XNATetris umbauen,
Physik hinzufügen (siehe Links),
oder einfach mal den Accelerometer des
Phones benutzen, um das Spielfeld zu drehen
oder auf weitere Ideen zu kommen.
Die Delta Engine
Der hier gezeigte Code läuft nur auf einem
Windows Phone 7. Mit ein paar kleinen Änderungen
lässt sich der Code aber auch auf
Windows Vista/​7 oder die Xbox 360 portieren,
da XNA auf diesen drei Plattformen
läuft. Dazu müsste man insbesondere in der
Update-Methode auch ein Xbox 360 GamePad
und die Maus und Tastatur in Windows unterstützen.
Außerdem braucht man für jede
Plattform ein eigenes Projekt und ein eigenes
Content-Projekt, da diese verschiedene Einstellungen
haben.
Da Windows Phone 7 aktuell noch nicht
sehr weit verbreitet ist, spielt wohl jeder Entwickler
mit dem Gedanken, seine Apps auch
auf iOS und/​oder Android zu übertragen.
Doch bereits mit einer Portierung des hier
beschriebenen sehr einfachen Spiels sieht es
eher schlecht aus: Erfahrene Mac- und iOS-
Entwickler könnten das Spiel entweder mit
Cocoa oder in OpenGL ES nachprogrammieren.
Wer aber hauptsächlich unter Windows
programmiert, benötigt dazu erst einmal
einen Mac, um XCode benutzen und Applikationen
für das iPhone einstellen zu können.
Außerdem ist der Aufwand insbesondere
für Anfänger viel größer, um ein Spiel in
XCode zu erstellen, da es von Apple keine
Spiele-Libraries gibt. Auch bei Android muss
man sich zunächst mit dem SDK und Davik/​
Java oder C++ vertraut machen. Egal, wie
man es dreht und wendet: Man benötigt für
jede Plattform eine eigene Lösung.
Einen möglichen Ausweg stellt die Delta Engine
der Spieleentwickler von MobileBits und
exDream dar. Dabei handelt es sich um eine
seit 2009 entwickelte Multiplattform-Spieleengine
in .NET, über die sich Spiele unter
Windows entwickeln und per Knopfdruck
auf mehrere unterstützte Plattformen übersetzen
lassen. Sicherlich gibt es andere Engines
wie Unity oder Unreal 3, die ebenfalls
erlauben Spiele, auf mehrere Plattformen zu
entwickeln. Die Unreal 3 Engine ist aber eine
sehr komplexe Engine für komplexe Spiele
und damit komplett ungeeignet für schnelle
und flexible mobile Spiele. Unity auf der anderen
Seite ist zwar eine gute Lösung für
iPhone-Spiele, gibt dem Entwickler jedoch
kaum Kontrolle über den Code, da man nur
in Skripten und im Unity-Editor arbeitet. Beiden
fehlt zudem der WP7-Support.
Den kompletten Code des Blocks-Spiels in
der Version der Delta Engine finden Sie auf
der Smart-Developer-Homepage zum Download.
Er reduziert sich gegenüber der WP7-
Variante von 170 Zeilen auf 60 Zeilen (ohne
Kommentare und Leerzeilen sogar unter 40
Zeilen Code) und läuft quasi als Bonus auf
allen Plattformen, die die Delta Engine aktuell
unterstützt: iOS, Android, Windows,
Linux, Mac OS X, Xbox 360. Da die Delta Engine
ebenfalls C# benutzt wie auch das Spiel
in diesem Artikel, ist der Code sehr ähnlich.
Im Prinzip besteht er aus ein paar Vereinfachungen,
da die WP7-spezifischen Code-Zeilen
(zum Beispiel Code, der von der Windows
Phone 7 Auflösung 800 x 480 Pixel ausgeht)
entfernt und an die Delta Engine übergeben
werden (dort spielt die Auflösung
keine Rolle).
Die Delta Engine befindet sich momentan
in einer geschlossenen Beta-Phase und wird
im Juli 2011 zum ersten Mal veröffentlicht.
Momentan arbeitet eine Handvoll ausgewählter
Teams an sehr unterschiedlichen
Projekten, der Kreis der Beta-Tester vergrößert
sich aber jeden Monat. Bei Interesse
können Sie sich auf der Projektseite [2] anmelden
und natürlich noch viel mehr zum
Projekt erfahren.
Fazit
Mit wenigen Zeilen Code lässt sich ein einfaches
Spiel für Windows Phone 7 programmieren,
wenn man dazu die von Microsoft
bereitgestellten Tools benutzt. Wer hingegen
beabsichtigt, für mehrere Plattformen Spiele
zu entwickeln, der schaut sich am besten die
aktuelle Beta-Version der Delta Engine an.
Den Code zum Artikel finden Sie auch auf
der Projektseite unter [2]. ● ● ●
Der Autor
Benjamin Nitschke arbeitet als
CTO der Firma MobileBits GmbH
und der exDream GmbH in Hannover.
Nach vielen Jahren in der
Spieleentwicklung auf den unterschiedlichsten
Plattformen (PC,
Xbox 360, Playstation 3, iPhone,
Android, etc.) konzentriert er nun
seine ganze Energie auf die Entwicklung
der hauseigenen Open
Source Multiplatform Delta Engine,
um die Entwicklung von
Spielen und Anwendungen auf
allen Plattformen einfacher zu
machen.
Infos
[1] RSS-Reader für Windows
Phone 7: Martin Straumann,
„Windows Phone 7 App
leicht gemacht“, Smart
Developer 01/​2011, S. 78.
[2] Delta Engine und Source
Code zu diesem Artikel:
http:// deltaengine. net/​
examples. html
[3] Visual Studio 2010:
http:// www. microsoft. com/​
visualstudio/ en‐us/
[4] Windows Phone 7
Development Center:
http:// create. msdn. com/
[5] Windows Phone 7 Developer
Guide:
http:// msdn. microsoft. com/​
en‐us/ library/ gg490765. aspx
[6] Video-Tutorial: Getting started
with writing your first 2D
XNA game:
http:// create. msdn. com/​
en‐US/ education/ tutorial/​
2dgame/ getting_started
[7] WP7-Spiele mit Physics::
http:// www. codeproject. com/​
KB/ windows‐phone‐7/​
BounceBall. aspx
[8] XNA-Tetris-Tutorial:
http:// xnaprojects. exdream.​
com/ Default. aspx?​
Name=XNA%20Tetris
smart-developer.de 02/2011 65

Entwicklung
Bada: Face Recognition App
Gesichtserkennung mit Bada
Gesichter
analysieren
Die zwei Bada-Flaggschiffe von Samsung verfügen über eine
Frontkamera. Um diese nutzen zu können, bietet das SDK entsprechende
Schnittstellen an. Dieser Artikel zeigt, wie Sie diese
zur Gesichtserkennung nutzen. Tobias Thiel
Julien Tromeur, 123RF
Samsung liefert
Entwicklern
über
das Bada-
SDK eine umfangreiche
API, die unter anderem
eine Klasse zur Gesichtserkennung
enthält.
Dieser Workshop
stellt die API der Gesichtserkennung
anhand
einer kleinen App
vor, die Sie
Schritt für
Schritt nachimplementieren
können.
Ziel des
Workshops
ist es, Ihnen
ein Gefühl
für die Fähigkeiten
der
Gesichtserkennung
zu vermitteln
und Sie
in die Lage zu
versetzen, die
Klasse der Gesichtserkennung
in Ihren Apps verwenden
zu können. Den
Quellcode zum Beispiel finden
Sie auf der Smart-Developer-Homepage
[1]. Der Workshop
setzt Kenntnisse in C++ voraus,
Sie sollten das Bada-SDK 1.2.1 installiert
haben und schon mal ein Bada-Projekt
aufgesetzt haben.
Die Klassen zur Gesichtserkennung gehören
zum Namespace Osp::Uix. Die Klasse
Osp::Uix::FaceDetection ermöglicht die Erfassung
von Gesichtern in stehenden und bewegten
Bildern. Das Ergebnis der Gesichtserfassung
ist eine Liste von Instanzen der
Klasse Osp::Graphics::Rectangle, die Aufschluss
über die Lage und Größe der in
einem Bild gefunden Gesichter gibt. Anders
als zur Erfassung von Gesichtern ist zur
Erkennung ein zusätzlicher qualitativer
Faktor notwendig. Die Klasse
Osp::Uix::FaceRecognizer erfasst Gesichter
in stehenden und bewegten Bildern und berechnet
für die gefundenen Gesichter je
einen Merkmalsvektor. Merkmalsvektor und
Lage eines Gesichtes fasst die Klasse
Osp::Uix::FaceRecognitionInfo zusammen.
Über den Inhalt der Merkmalsvektoren erhält
man von Samsung leider keine Auskunft. Die
hier beschriebene App benutzt deshalb die
Methoden IsMatching() und MeasureSimilarity()
von Osp::Uix::FaceRecognizer auf
Osp::Uix::FaceRecognitionInfo Instanzen,
um die Ähnlichkeit zwischen zwei Gesichtern
zu vergleichen.
Voraussetzungen
Die wichtigsten Klassen der App sind die von
Osp::Base::Runtime::Thread abgeleitete
Klasse RecognizerThread zur eigentlichen
Gesichtserkennung und die von
02/2011 smart-developer.de

Entwicklung
Bada: Face Recognition App
Osp::Ui::Form abgeleitete Klasse Form1, die
die Ergebnisse anzeigt. Beide Klassen kommunizieren
über einen Listener mit dem
Namen RecognizerThreadListener. Eine
Hilfsklasse mit dem Namen MyFaceInfo enthält
Zeiger auf einen Dateinamen und auf die
Informationen eines darin gefundenen Gesichts
in der entsprechenden Datei. Mithilfe
dieser Klasse können Sie später die Ergebnisse
wieder einer Datei zuordnen.
Die App durchforstet das Dateisystem
eines Gerätes oder des Simulators nach Bilddateien,
sucht darin Gesichter und vergleicht
deren Ähnlichkeit miteinander. Der Beispielcode
wurde mit dem bada SDK 1.2.1 implementiert
und sowohl im Simulator als auch
auf einem Wave S8500 getestet. Um die App
im Simulator testen zu können, müssen Sie
Bilder in das Dateisystem des Simulators
laden. Kopieren Sie die Bilder in den Pfad
/bada//
Model//Simulator/FS/Win32FS/
Media/Images und passen Sie gegebenenfalls
den Pfad an, der in RecognizerThread.h als
Define IMAGE_DIRECTORY_PATH definiert
wurde. Auf dem Gerät werden Bilder von
Bada in den Ordnern /Media/Images/ und /
Storage/Media/Images/ gespeichert. Verändern
Sie den Define nicht, dann erwartet die
App die zu analysierenden Bilder im Ordner
/Media/Images/Fotos0001/.
Bevor Sie mit der Implementierung der
App beginnen, müssen Sie auf dem Bada
Developer Portal [2] ein Manifest erstellen.
Wählen Sie bei der Erstellung des Manifestes
das Privileg IMAGE aus. Damit erlauben Sie
der App, Bilder decodieren zu dürfen. Öffnen
Sie das Bada-SDK und erstellen Sie mit dem
heruntergeladenen Manifest ein neues Projekt.
Um den Code so einfach wie möglich zu
halten, legt die App wenig Wert auf einfache
Bedienung oder ein besonders hübsches Aussehen.
Interessante Informationen über die
Gesichtserkennung gibt die App über
AppLogDebug() aus. Sie lassen sich so in der
Debug Perspective von Eclipse im Window
Output betrachten.
Code schreiben
Beginnen Sie mit der Implementierung der
Klasse RecognizerThread. Sie führt die Gesichtserkennung
aus und kommuniziert die
Ergebnisse über einen Listener zu der Klasse,
die die UI implementiert. Konstruktor und
Destruktor der Klasse bleiben leer. In der
Init()-Methode zur Initialisierung einer Instanz
der Klasse rufen Sie Construct() auf die
Instanz auf und definieren den Thread als
Worker-Thread. Implementieren Sie die Methode
SetListener(), mit der Sie später den
Listener der Instanz setzen, über den die Ereignisse
der Gesichtserkennung kommuniziert
werden.
Ein Thread muss drei Methoden implementieren:
OnStart() ruft Bada auf, wenn
der Thread gestartet wird, OnStop(), wenn
der Thread terminiert, und in Run() verrichtet
ein Worker-Thread seine Arbeit. Listing 1
zeigt die vollständige Definition von RecognizerThread.
Die Arbeit des Threads ist im Falle des Beispielcodes
in vier Phasen aufgeteilt. In der
ersten Phase wird der FaceRecognizer analysiert
und konfiguriert. In der zweiten Phase
wird der Ordner /Media/Images/Fotos0001/
nach Bilddateien durchsucht. In der dritten
Abb. 1: Im ersten Schritt durchsucht
die App sämtliche Bilder eines gegebenen
Verzeichnisses und sucht
darin nach Gesichtern.
Zuverlässiges Wissen für Entwickler
openbook
online!
Juli 2011
im Handel!
Java ist auch eine Insel
Android 3
Silverlight 4
Das Praxisbuch ActionScript 3
1.480 S., 9. Auflage 2011, mit DVD, 49,90 €
www.GalileoComputing.de/2254
550 S., 2011, mit DVD, 39,90 €
www.GalileoComputing.de/2516
1.178 S., 2010, mit DVD, 49,90 €
www.GalileoComputing.de/2126
702 S., 2010, mit DVD, 39,90 €
www.GalileoDesign.de/2336
» www.facebook.com/GalileoPressVerlag
» www.twitter.com/Galileo_Press
www.GalileoComputing.de/Programmierung

Entwicklung
Bada: Face Recognition App
Abb. 2: Das Ergebnis eines Durchlaufs
der App.
Listing 1: Die Klasse RecognizerThread
Phase werden die gefundenen Dateien nach
Gesichtern durchsucht. In der vierten Phase
vergleicht die App die gefundenen Gesichter
miteinander und ermittelt das Gesichtspaar,
das sich am meisten ähnelt.
Beginnen Sie mit der Implementierung der
ersten Phase in Run(). Legen Sie eine Face-
Recognizer-Instanz auf dem Stack an und
rufen Sie Construct() darauf auf. Damit ist
der FaceRecognizer vollständig initialisiert.
Die Fähigkeiten der Gesichtserkennung unterscheiden
sich je nach Gerät. Um die App
portabel zu gestalten, sollten Sie die Fähigkeit
analysieren und die FaceRecognizer-Instanz
anschließend im Code konfigurieren.
Mit der Methode GetRange() erhalten Sie den
Wertebereich eines Parameters des Face-
Recog nizers. Die Methode übernimmt vier
Referenzen vom Typ long. Der erste Parameter
identifiziert den Parameter, der von
GetRange() ausgelesen werden soll. In die
anderen drei Parameter schreibt die Methode
den Minimal- und Maximalwert des Parameters
und die Schrittgröße dazwischen.
Übergeben Sie der Methode die Konstante
FACERECOGNIZER_MAXNUMBER_IMAGE, erhalten
Sie die maximale Anzahl von Gesichtern zurück,
die der FaceRecognizer pro Bild erkennen
kann. Listing 2 zeigt die Implementierung
des Tests. Verwenden Sie die Konstante
FACERECOGNIZER_SCALE_IMAGE, erhalten Sie
class RecognizerThread : public Osp::Base::Runtime::Thread {
public:
RecognizerThread();
virtual ~RecognizerThread();
void Init();
void SetRecognizerThreadListener(RecognizerThreadListener &listener);
virtual Osp::Base::Object * Run(void);
virtual bool OnStart(void);
virtual void OnStop(void);
private:
RecognizerThreadListener *_pListener;
};
Angaben über die Größe der Gesichter, die
der FaceRecognizer erkennen kann. Dieser
Wert verhält sich relativ zur Bildgröße.
Grundsätzlich gilt: Je kleiner der Wert, desto
kleiner die Gesichter, die erkannt werden
können, aber desto höher ist der Rechenaufwand.
GetSupportedFormListN() gibt einen
Zeiger auf eine alloziierte Liste der unterstützten
Bildformate zurück. Die Ergebnisse
der Analyse können Sie mit AppLogDebug()
auf den Output-View der IDE schreiben.
Im nächsten Schritt sucht der Recognizer-
Thread die Bilddateien zusammen. Legen Sie
dazu eine ArrayList an, in der Sie die Ergebnisse
der Suche ablegen. Die Klasse
Osp::Io::Directory bildet einen Ordner ab,
auf dessen Inhalt Sie mit einem
Osp::Io::DirEnumerator iterieren können.
Legen Sie ein Directory an und übergeben Sie
im Construct()-Aufruf das Define mit dem
Dateipfad zu den Bildern. ReadN() erzeugt
einen DirEnumerator. Er gibt beim Aufruf von
GetCurrentDirEntry() eine Instanz der
Klasse Osp::Io::DirEntry zurück. Testen Sie
mit IsDirectory(), ob es sich bei dem aktuell
betrachteten Ordnereintrag um einen Ordner
handelt. Ist dies nicht der Fall, erhalten
Sie mit GetName() den Dateinamen des Ordnereintrages,
den Sie dann auf das Suffix untersuchen.
Handelt es sich um ein JPEG,
fügen Sie den vollwertigen Pfad der Liste mit
Dateipfaden hinzu. Hat MoveNext den gesamten
Ordner durchlaufen und alle Ordnereinträge
getestet, kommunizieren Sie über den
Listener, wie viele Bilddateien gefunden wurden.
Zur Implementierung des Listeners
legen Sie nun die neue Klasse Recognizer‐
ThreadListener an und definieren die virtuelle
Methode OnFinishGrabbingFiles(), die
die Anzahl der gefundenen Bilddateien als
Parameter übernimmt. Listing 3 zeigt alle
Methoden des Listeners.
Analysieren und zuordnen
In der dritten Phase soll der Recognizer-
Thread die gefundenen Bilddateien analysieren.
Zur Speicherung der gefundenen Gesichter
legen Sie eine weitere ArrayList an. Implementieren
Sie eine Schleife zum Iterieren
Listing 2: Anzahl der Gesichter festlegen
long minValue, maxValue, steppingDelta, defaultValue;
result r = faceRecognizer.GetRange(FACERECOGNIZER_MAXNUMBER_IMAGE, minValue, maxValue, steppingDelta, defaultValue);
if (E_SUCCESS == r) {
AppLogDebug("range of maximal number of faces per image:[%d .. %d] delta:%d default:%d", minValue, maxValue, steppingDelta,
defaultValue);
faceRecognizer.SetProperty(FACERECOGNIZER_MAXNUMBER_IMAGE, maxValue);
}
68
02/2011 smart-developer.de

Entwicklung
Bada: Face Recognition App
über die Liste von Dateipfaden. Zur Decodierung
einer Bilddatei benötigen Sie zunächst
eine Image-Instanz. Legen Sie die Image-Instanz
an und rufen Sie Construct() und
DecodeN() auf dieser Instanz auf. DecodeN()
übergeben Sie den Dateipfad und das Format,
in das die Datei codiert werden soll. Das
gewählte Format muss eines der vom Face-
Recognizer unterstützten Formate sein.
Nun rufen Sie auf der zu Beginn von Run()
angelegten FaceRecognizer-Instanz Extract‐
FaceInfoFromStillImageN() auf und übergeben
die von DecodeN() erzeugte Bitmap.
ExtractFaceInfoFromStillImageN() führt die
Gesichtserkennung durch und liefert im Erfolgsfall
eine Liste mit FaceRecognitionInfo-
Instanzen zurück (Listing 4). Erweitern Sie
den Listener um die Methode OnFinishedAnalyzingFile(),
die als Parameter den Index des
Bildes in der Liste, die Länge der Liste und die
Anzahl der gefundenen Gesichter übernimmt.
Um der UI das Ergebnis mitzuteilen, rufen Sie
die Methode auf dem Listener auf.
Um die gefundenen Gesichter später wieder
der Bilddatei zuordnen zu können, implementieren
Sie die Hilfsklasse MyFaceInfo
mit einem Zeiger auf eine FaceRecognition‐
Info-Instanz und auf einen String als Attribut.
Für jede FaceRecognitionInfo-Instanz
erzeugen Sie eine MyFaceInfo-Instanz, speichern
die FaceRecognitionInfo und den dazugehörigen
Dateinamen darin ab und hängen
die MyFaceInfo-Instanz an die ArrayList.
Der Listener erhält die Methode OnFinished‐
AnalyzingFiles(), um der UI die Summe der
gefundenen Gesichter mitzuteilen.
Resultate vergleichen
In der vierten Phase des Threads vergleicht
die App die gefundenen Gesichter miteinander.
Eine Schleife durchläuft dazu die Liste
mit MyFaceInfo-Instanzen. Für jede Instanz
aus der Liste durchläuft die App eine weitere,
innere Schleife, in der die MyFaceInfo-Instanz
mit allen folgenden MyFaceInfo-Instanzen der
Liste verglichen werden.
Die Methode MeasureSimilarity() gibt
einen Wert zwischen 0 und 100 und IsMatching()
einen boolschen Wert zurück. Die
Rückgabewerte schreiben Sie mit AppLogDebug()
in die Output-View. Listing 5 zeigt, wie
der Vergleich stattfindet. Für die Ausgabe auf
der UI erweitern Sie den Listener um die Methode
OnFoundMostSimilarFaces(), die einen
Zeiger auf die beiden MyFaceInfo-Instanzen
übernimmt.
Ergibt ein Vergleich zweier Gesichter eine
höhere Ähnlichkeit als alle vorhergehenden
Vergleiche, dann speichert die App den Wert
und die Indizes auf die MyFaceInfo-Instanzen
innerhalb der Schleife in Variablen und
informiert den Listener mit dem Aufruf von
OnFoundMostSimilarFaces() über das Ereignis.
Um die UI über das Ende des Vergleiches
zu informieren, erweitern Sie den Listener
um eine letzte Methode. OnFinishedComparingFaces()
und rufen die Methode auf den
Listener auf. Damit endet die Methode Run()
und der Thread terminiert.
Damit ist die Implementierung des Threads
und seiner Kommunikationsschnittstelle,
dem Listener, abgeschlossen und Sie können
mit der Implementierung der UI beginnen.
Die grafische Oberfläche
Die GUI besteht aus der Klasse Form1, die
von Osp::Ui::Controls::Form und RecognizerThreadListener
erbt. Zunächst definieren
Listing 3: Der Listener im Detail
class RecognizerThreadListener {
public:
virtual void OnFinishedGrabbingFiles(int numberOfFiles) = 0;
virtual void OnFinishedAnalyzingFile(int index, int total, int numberOfFaces)
= 0;
virtual void OnFinishedAnalyzingFiles(int numberOfFaces) = 0;
virtual void OnFinishedComparingFace(int index, int total, int maxSimilarity)
= 0;
virtual void OnFoundMostSimilarFaces(MyFaceInfo *pCurrentMyFaceInfo,
MyFaceInfo *pOtherMyFaceInfo) = 0;
virtual void OnFinishedComparingFaces(int similarity) = 0;
};
Listing 4: Die Gesichtserkennung
// Bild dekodieren
Image *image = new Image();
image‐>Construct();
Bitmap* pBitmap = image‐>DecodeN(*pFilename, BITMAP_PIXEL_FORMAT_ARGB8888);
delete image, image = null;
result r = GetLastResult();
if (IsFailed(r)) {
AppLogDebug("failed decoding image %ls", pFilename‐>GetPointer());
return null;
}
// Gesichter aus dem Bild extrahieren
IList *pFaces = null;
pFaces = faceRecognizer.ExtractFaceInfoFromStillImageN(*pBitmap);
r = GetLastResult();
if (IsFailed(r)) {
delete image, image = null;
AppLogDebug("failed decoding image %ls", pFilename‐>GetPointer());
continue;
}
smart-developer.de 02/2011 69

Entwicklung
Bada: Face Recognition App
Abb. 3: Das Ergebnis eines Durchlaufs
mit sehr ähnlichen Fotos.
Der Autor
Tobias Thiel arbeitet als Mobile
Developer bei Enough Software
und ist zudem Samsung Developer
Advocate.
Infos
[1] Quellcode zum Download:
http:// www. smart‐developer.​
de/ Magazin/ Code‐Beispiele
[2] Bada-Entwicklerportal:
http:// developer. bada. com/
Listing 5: Vergleich zweier Gesichter
Sie das Layout /Res/480x800/IDF_FORM1.xml,
indem Sie ein Label und Progress in der Form
platzieren. Lassen Sie in der Mitte der Form
genügend Platz für die Darstellung der Bilder
übrig. In der Klasse Form1 legen Sie Attribute
für die beiden Control-Elemente – dem Label
und dem Progress – an.
Um den Thread zur Gesichtserkennung beenden
zu können, legen Sie als weiteres Attribut
einen Zeiger auf einen Recognizer­
Thread an. Während des Vergleiches der Gesichter
zeigt die UI die beiden Bilder an, die
die aktuell ähnlichsten Gesichter enthalten,
und versieht die Gesichter mit einem Rahmen.
Dafür benötigt die App zwei
Osp::Graphics::Bitmaps und zwei
Osp::Graphics::Rectangles.
In Initialize() laden Sie das Layout aus
der XML-Datei, und in OnInitialize() weisen
Sie die Controls aus dem Layout den
Attributen zu und starten den Thread. Dafür
allozieren Sie eine neue Instanz der Klasse
RecognizerThread, initialisieren die Instanz,
übergeben ihr einen Zeiger auf die Form1-
Instanz selbst als Listener und starten den
Thread mit dem Aufruf der Methode Start().
Im Destruktor und in OnTerminate() sollte
der Thread gestoppt werden, damit sich die
App ordentlich terminieren lässt.
In den Methoden des RecognizerThread­
Listeners werden die Ergebnisse des Threads
visualisiert, dabei schreibt OnFinishedGrabbingFiles()
die Anzahl der gefundenen Dateien
in das Label und definiert diese als
Obergrenze des Progress. Hat der FaceRecognizer
eine Datei analysiert, dann schreibt die
App die Anzahl von OnFinishedAnalyzing­
File() in das Label und aktualisiert den Progress.
Nach Abschluss der Analysen wird die
Anzahl der gefundenen Gesichter von
OnFinishedAnalyzingFiles in das Label geschrieben,
der Wert als Obergrenze des Progress
verwendet und der Progress zurückgesetzt.
Über OnFinishedComparingFace() wird
// Aehnlichkeit berechnen
MyFaceInfo *pOtherMyFaceInfo = (MyFaceInfo *)myFaceInfoArrayList.GetAt(j);
int similarity = faceRecognizer.MeasureSimilarity(*(pCurrentMyFaceInfo‐>pFaceR
ecognitionInfo), *(pOtherMyFaceInfo‐>pFaceRecognitionInfo));
if (faceRecognizer.IsMatching(*(pCurrentMyFaceInfo‐>pFaceRecognitionInfo),
*(pOtherMyFaceInfo‐>pFaceRecognitionInfo))) {
AppLogDebug("match: %ls %ls", pCurrentMyFaceInfo‐>pFilename‐>GetPointer(),
pOtherMyFaceInfo‐>pFilename‐>GetPointer());
}
AppLogDebug("similarity %d%%: %ls %ls", similarity,
pCurrentMyFaceInfo‐>pFilename‐>GetPointer(),
pOtherMyFaceInfo‐>pFilename‐>GetPointer());
der Progress aktualisiert und der Status in
das Label geschrieben.
Findet die App bei dem Vergleich zwei Gesichter,
die sich ähnlicher als alle zuvor sind,
ruft sie den Thread OnFoundMostSimilar­
Faces() auf. Diese Methode lädt die Bilder, in
dem die Gesichter gefunden wurden und
speichert die Rechtecke, die die gefundenen
Gesichter umrahmen. Nach dem Vergleich
aller Bilder entfernt OnFinishedComparing­
Faces() den Progress aus der Form und gibt
den Wert der maximalen Ähnlichkeit aus
(Abbildung 3). Um das Label und den Progress
nach jedem Ereignis neu zu zeichnen,
rufen Sie am Ende jeder Methode Draw() und
Show() auf die Form auf.
Um die Bilder der maximal ähnlichen Gesichter
anzuzeigen, implementieren Sie die
Methode OnDraw(). Darin holen Sie sich mit
GetCanvasN() ein Osp::Graphics::Canvas.
Nachdem Sie Vorder- und Hintergrundfarbe
des Canvas definiert haben, berechnen Sie
Rechtecke und zeichnen mit DrawBitmap()
die Bitmaps in die Rechtecke. Am Ende der
Methode muss die Anwendung das Canvas
löschen und den Speicher wieder freigeben.
Der Beispielcode implementiert mit GetRectangleOfRectangleInRectangleN()
eine Methode,
die einen Pointer auf eine Rectangle-
Instanz zurückgibt, die die maximale Ausdehnung
eines Rechtecks in einem umrahmenden
Rechtecks unter Beibehaltung des
Seitenverhältnisses berechnet. Damit lassen
sich die Bitmaps bequem platzieren.
Soweit die Implementierung. Bauen Sie
das Projekt und führen Sie es im Debug-
Mode aus. Achten Sie vor der Ausführung
darauf, dass in dem definierten Verzeichnis
die Bilder mit Gesichtern liegen, die Sie analysieren
wollen. Im Output-View erfahren Sie
Details über den FaceRecognizer.
Bei der Ausführung der App wird schnell
klar: Der FaceRecognizer erkennt nicht alle
Gesichter, die Sie mit bloßem Auge sofort erkennen.
Die Personen müssen dazu gut ausgeleuchtet
und aufrecht der Kamera zugewandt
sein. Tatsächliche Paare für IsMatching()
sind sehr schwer zu generieren.
Fazit
Mit den Klassen FaceRecognizer und FaceDetector
ermöglicht Bada die Umsetzung einer
Gesichtserkennung, ohne dazu externe Bibliotheken
einbinden zu müssen. Ob die zwei
Klassen leistungsfähig genug sind, um Ihre
Ideen umsetzen zu können, müssen Sie allerdings
selbst entscheiden. Zur Auswertung
der üblichen Porträt-Aufnahmen genügen sie
aber in jedem Fall. ● ● ●
70
02/2011 smart-developer.de

JETZT
MiT dVd!
MAGAZIN
SondErAkTion
Testen Sie jetzt
3 Ausgaben
für 3 Euro!
Jetzt schnell bestellen:
• Telefon 07131 / 2707 274
• Fax 07131 / 2707 78 601
• E-Mail: abo@linux-magazin.de
• Web: www.linux-magazin.de/probeabo
Mit großem Gewinnspiel
(Infos unter: www.linux-magazin.de/probeabo)
GEwinnEn SiE... EinEn MulTiMEdiA-PlAyEr MiT doPPElTEM
dVB-T-TunEr Von wyPlAyEr iM wErT Von 300,- Euro (uVP)
Einsendeschluss ist der 15.06.2011

Entwicklung
Blackberry PlayBook
Mit ActionScript für das BlackBerry-Playbook programmieren
PlayBook-
Action!
Seit April ist das PlayBook von RIM verfügbar. Dass bereits beim Launch
des Tablets zahlreiche Apps dafür existieren, hängt unter anderem mit
der Programmiersprache ActionScript zusammen. Dieser Artikel stellt
die Sprache vor und zeigt, wie Sie damit entwickeln. Tam Hanna
Auf dem Papier beherrscht das Play-
Book genannte Tablet von Research
in Motion so ziemlich alles:
Android, J2ME und native Anwendungen.
Da die Hardware jedoch noch sehr
jung ist, muss sich in der Praxis erst zeigen,
wie sich die einzelnen Möglichkeiten entwickeln.
Dennoch können PlayBook-Anwender
bereits jetzt auf sehr viele Apps zurückgreifen.
Diese Anwendungen sind in ActionScript
geschrieben – einer Programmiersprache von
Adobe, die bis dato nur im Bereich der Flash-
Applets verbreitet ist.
ActionScript
ActionScript orientiert sich lose an Java. Die
Syntax lässt sich ohne Probleme „en suite“
erlernen. Auch wenn ActionScript von Haus
aus nicht typgebunden ist, kann die Sprache
auch mit fix typisierten Variablen umgehen.
Wer eine Anwendung für das PlayBook mit
ActionScript realisieren will, muss dazu auf
das Adobe AIR-SDK [1] zurückgreifen. Als
IDE empfiehlt Research in Motion die Verwendung
von Flash Builder 4.5 [2]. Zusätzlich
benötigen Sie das Tablet-OS-SDK und
einen Simulator. Beides finden registrierte
Entwickler unter [3]. Dieser Artikel basiert
auf dem Tablet-OS-SDK in Version 0.9.4, aktuell
ist Version 1.0.1 (Stand: Mai 2011).
Die Installation des SDK erledigen Sie
unter Windows per Doppelklick auf den Installer.
Für Linux und Mac OS X bietet RIM
ebenfalls entsprechende Pakete an, die sich
problemlos einrichten lassen. Achten Sie
unter Windows darauf, den Installationspfad
für den Flash Builder auf C:\Programme\
Adobe\Adobe Flash Builder Burrito anzupassen.
Der Installer extrahiert ein CD-Image
an einen beliebigen, frei festlegbaren Ort.
blackberry.com
Abb. 1: Das PlayBook-OS wird von VMWare nicht
direkt unterstützt.
72
02/2011 smart-developer.de

Entwicklung
Blackberry PlayBook
Abb. 2: Hardwarebeschleunigte Virtualisierung ist zwingend erforderlich.
Ohne die Grafikbeschleunigung wird der Emulator quälend langsam.
Abb. 3: Laut Dokumentation sind 1024 MB RAM erforderlich, wobei VMWare
nur den Speicher belegt, den es braucht. Planen Sie ca. 600 MB RAM ein.
Im nächsten Schritt installieren Sie den Emulator.
Er basiert auf dem VMWare-Player [4]
und ist ebenfalls für Windows, Mac OS X
und Linux verfügbar. Mit einem Klick auf
File | Create a new Virtual Machine starten
Sie den VM-Erstellungswizard. Als Installationsmedium
geben Sie die soeben erhaltene
.iso-Datei des SDK an.
Die Nachfrage nach der OS-Version beantworten
Sie mit Other, die Unterversion ebenfalls
mit Other. Den Name der VM können
Sie frei wählen. 8 GByte Festplattenspeicher
sind ausreichend, als Speicherausbau benötigt
die virtuelle Maschine 1024 MByte. Die
Grafikbeschleunigung müssen Sie im Reiter
Display über die Checkbox Accelerate 3D
Graphics aktivieren.
Nach einem Klick auf Finish starten Sie die
VM und nach einigen Sekunden erscheint
das PlayBook-Logo auf dem Bildschirm.
Tablet OS
Nach 5 bis 10 Minuten wird der PlayBook-
Ladebildschirm verschwinden und stattdessen
der Emulator-Homescreen erscheinen.
Passiert dies nicht, starten Sie die VM über
das Menü neu.
Abb. 4: Schalten Sie auf dem PlayBook den Development
Mode ein.
Das User Interface des PlayBooks wird durch
sogenannte Gestures gesteuert. Eine Wischgeste
von oben in den Bildschirm aktiviert
das Menü der Anwendung, während ein
Wisch von unten nach oben den Taskmanager
öffnet und den User in den Homescreen
zurückbringt.
Die Fehlersuche auf PlayBook-Anwendungen
erfolgt über das Debugging der TCP/​IP-
Verbindung. Dazu müssen Sie den Development
Mode des VMWare-Players aktivieren
(Abbildung 4). Sie finden ihn im Menü des
Programmstarters in der Rubrik Development
Mode. Danach sehen Sie neben der Uhr ein
Hammer-Symbol. Ein Klick darauf zeigt die
IP- Adresse des PlayBooks an.
Erste Schritte
Nun ist es an der Zeit, Code für das PlayBook
zu schreiben. Dazu starten Sie den Flash
Builder und wählen Neu | Neues Action­
Script-Mobilprojekt. Als Projektname benutzt
dieser Artikel MS1, als SDK die Standardeinstellung.
Bei den Zielplattformen verzichten
wir auf Android und legen das Projekt an.
Eventuelle Warnungen bezüglich des
Bezeichners können Sie ignorieren.
Im ersten Schritt gilt es nun, die Datei
MS1.as wie in Listing 1 gezeigt anzupassen.
ActionScript-Projekte werden durch ein
Start objekt initiiert. Unser Startobjekt heißt
MS1. Sein Konstruktor MS1() wird also beim
Programmstart aufgerufen, um das Programm
anzuwerfen. Die Klasse selbst sitzt
im Default-Paket. Das wird durch das Schlüsselwort
package angegeben. Die darauffolgenden
Import-Aufrufe inkludieren verwendete
Module. Die Zeile mit [] spezifiziert das
grundlegende Aussehen der Anwendung auf
smart-developer.de 02/2011 73

Entwicklung
Blackberry PlayBook
Schlüsselwort var eingeleitet.
Danach folgt
der Name, durch einen
Doppelpunkt getrennt,
sodann der (optionale)
Typ. Im Konstruktor
definieren Sie mit folgender
Zeile eine neue
Variable:
var
helloButton:LabelButton
= new LabelButton();
Abb. 5: Für Eclipse-Programmierer ein alter Bekannter: die Verwaltung der
Debuggerkonfigurationen.
dem PlayBook. Die eigentliche Klassendefinition
erfolgt über den Eintrag public class
MS1 extends Sprite. Die Klasse MS1 ist öffentlich
und wird von der Basisklasse Sprite abgeleitet.
Ein Sprite ist im Prinzip bloß ein
Formular – mehr brauchen wir nicht.
Die Variablendefinition in ActionScript unterscheidet
sich leicht von anderen Skriptsprachen.
Die Definition wird durch das
Sie können der Variablen
an dieser Stelle
auch gleich einen Wert
zuweisen, falls das
nötig sein sollte.
Unsere Routine erstellt
drei Objekte vom
Typ LabelButton,
TextFormat und
Button, die wir durch den Befehl addChild
zum Formular hinzufügen. Klicken Sie dazu
im Eclipse-Fenster auf das grüne Käfer-Symbol.
Daraufhin erscheint der Verwaltungsbildschirm.
Durch Klick auf Configure legen
Sie hier eine neue Gerätetest-Konfiguration
an. Im daraufhin aufpoppenden Dialog
geben Sie die IP-Adresse des PlayBooks und
Listing 1: MS1.as
package
{
var myFormat:TextFormat = new TextFormat();
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.text.TextField;
import flash.text.TextFormat;
import qnx.ui.buttons.Button;
import qnx.ui.buttons.LabelButton;
myFormat.color = 0xAA0000;
myFormat.size = 24;
myFormat.italic = true;
myFormat.align = "center";
var text:TextField = new TextField();
text.text = "Close";
text.setTextFormat(myFormat);
// The following metadata specifies the size and properties
of the canvas that
// this application should occupy on the BlackBerry PlayBook
screen.
[SWF(width="1024", height="600", backgroundColor="#cccccc",
frameRate="30")]
public class MS1 extends Sprite
{
public function MS1()
{
var helloButton:LabelButton = new LabelButton();
helloButton.label = "Hello World!";
var closeButton:Button = new Button();
closeButton.addChild(text);
closeButton.addEventListener(MouseEvent.CLICK, closeWindow);
closeButton.x = (stage.stageWidth ‐ closeButton.width)/2;
closeButton.y = helloButton.y ‐ helloButton.height;
addChild(helloButton);
addChild(closeButton);
stage.nativeWindow.visible = true;
}
private function closeWindow(event:MouseEvent):void{
stage.nativeWindow.close();
helloButton.x = (stage.stageWidth ‐ helloButton.width)/2;
}
}
helloButton.y = (stage.stageHeight ‐ helloButton.height)/2;
}
74
02/2011 smart-developer.de

Entwicklung
Blackberry PlayBook
das Gerätepasswort ein. Dazu muss die VM
aktiv sein und Sie müssen wie oben beschrieben
den Entwicklermodus aktiviert
haben. Danach starten Sie die Anwendung
durch einen Klick auf Debug. Abbildung 7
zeigt das Resultat im Emulator.
Buttons
Die hier gezeigte App enthält zwei Buttons.
Der LabelButton enthält seinen Text selbst,
während der Button zusätzlich ein TextField
mit Textinformationen erfordert. Und das
TextField wiederum braucht noch ein
TextFormat, um Eigenschaften wie Farben
etc. festzulegen. Zudem gibt es einen einfachen
Close-Button (ab Zeile 30), der mit
einem Eventhandler verdrahtet wird:
closeButton.addEventListener(MouseEvent.CLICK,
closeWindow);
Der Eventhandler selbst kommt in der Form
einer Funktion:
Abb. 6: Hier wird das PlayBook bzw. der Emulator mit
der IDE bekannt gemacht.
Es empfiehlt sich allgemein, Formulare in
einzelne Methoden auszulagern. Die im
Kons truktor auffindbare Erstellung des Formulars
wandert in eine eigene Methode, die
aus dem Konstruktor aufgerufen wird:
public function MS1()
{
baseForm();
private function closeWindow(event:MouseEvent)
stage.nativeWindow.visible = true;
:void
{
}
stage.nativeWindow.close();
Interessant ist dabei die Definition des Rückgabewertes
– er wird ähnlich einer Variablen
festgelegt.
Formulare in Strukturen
Unser Hello-World-Button tut bisher nicht
viel. Er soll nun ein neues Formular öffnen.
Allerdings gibt es, wie schon weiter oben
festgestellt, keine Formulare in ActionScript.
Stattdessen gibt es die Stages.
Stages lassen sich übereinanderstapeln
oder wiederverwenden. In unserem Beispiel
recyceln wir die bereits bestehende Stage.
Dazu brauchen wir folgende Funktion, die
übrigens immer wieder in Beispielen von
RIM vorkommt:
}
Im nächsten Schritt erstellen wir eine zweite
Funktion namens greetingForm(), die unser
Formular mit dem freundlichen Gruß an den
Enduser anzeigt. Die Syntax zeigt Listing 2,
wobei sich fehlende import-Deklarationen
per IntelliSense ergänzen lassen.
Im nächsten Schritt muss der helloWorld-
Button mit der greetingForm-Funktion verdrahtet
werden. Dies erfolgt über folgende
Zeile in der baseForm()-Funktion:
helloButton.addEventListener(MouseEvent.CLICK,
greetingForm);
private function clearWindow():void
{
while(numChildren > 0)
{
removeChildAt(0);
}
}
Die while-Schleife läuft, solange das Formular
Kinder enthält. Mit removeChildAt(0)
wird das unterste Kind entfernt. Danach
beginnt der Prozess wieder von oben.
Abb. 7: Hello World in ActionScript im PlayBook-Emulator.
smart-developer.de 02/2011 75

Entwicklung
Blackberry PlayBook
Eventhandler müssen einen Parameter annehmen.
Aus diesem Grund passen Sie die
Definition der Formular-Erstellungsmethode
folgendermaßen an:
{
}
clearWindow();
baseForm();
private function greetingForm(event:MouseEvent
):void
Damit ist das Programm für einen ersten Test
bereit. Das Resultat eines Klicks auf den
HelloWorld-Button zeigt Abbildung 7.
Beim genaueren Betrachten des Bildes erschließt
sich der Sinn dieses Formularaufbaus:
Anstatt die Steuerelemente direkt ins
Formular einzubauen, packen wir sie in
einen Container. Container sind spezielle
Steuerelemente, die die enthaltenen Steuerelemente
(oder Subcontainer) ordnen. Würden
wir unserem Container ein zweites Label
hinzufügen, erschiene es unter dem ersten.
Wie im ersten Formular gezeigt, kann man
die Koordinaten der einzelnen Steuerelemente
auch von Hand berechnen und festlegen.
Layouts machen die Arbeit jedoch wesentlich
leichter.
Gebt mir ein Menü
Damit bleibt nur mehr ein Problem: Wie
kommt der User wieder aus dem greeting‐
Form zum baseForm zurück? Die beste Lösung
dafür wäre das Verwerten des am Anfang des
Artikels besprochenen Menü-Strokes über
einen Eventhandler:
QNXApplication.qnxApplication.addEventListener
(QNXApplicationEvent.SWIPE_DOWN, swipeDown);
Die Handler-Routine der Anwendung sieht in
unserem Fall so aus:
private function swipeDown(event:QNXApplicatio
nEvent):void
In der Praxis könnte man hier beispielsweise
eine Reihe von Knöpfen (in der Form eines
neuen Formulars oder zweiten Sprites) anzeigen,
um komplexere Layouts zu realisieren.
Je nach Zweck lohnt es sich dabei, die
Steuerelemente als Klassenvariablen zu deklarieren.
Wie das in ActionScript aussieht,
zeigt Listing 3.
Ein eigenes Icon
Bis dato zeigte unsere Anwendung ein langweiliges
Defaulticon im Programmstarter an,
das soll sich nun ändern. Unser zukünftiges
Symbol muss im PNG-Format vorliegen und
sollte nach Möglichkeit mindestens 72 x 72
Pixel groß sein.
Sie binden das Symbol über die Importieren-Funktion
ein, die Sie durch einen Rechtsklick
auf das Projekt finden. Das Minibild
landet danach im Ordner src. Zusätzlich
braucht das Programm eine .xml-Datei, die
das Icon mit dem Desktop des Playbooks bekannt
macht. Dazu wählen Sie per Rechtsklick
den src-Ordner aus und erstellen eine
neue Datei namens blackberry‐tablet.xml.
Den Inhalt zeigt Listing 4. Bei einem transparenten
PNG setzen Sie den Eintrag transparent
auf true. Zusätzlich passen Sie in der
Datei app.xml die Informationen zur benutzten
Grafik an und legen entsprechende Copyright-Hinweise
an. In der Grundeinstellung
fehlen diese Informationen.
Listing 2: Das Greeting-Formular
Eingepackte Dateien
Große ActionScript-Objekte werden schnell
unübersichtlich. Daher ist es sinnvoll, sie in
mehrere Dateien aufzuteilen. Um die einzelprivate
function greetingForm():void
myFormat.align = "center";
{
clearWindow();
var text:TextField = new
TextField();
text.text = "Hallo Welt";
var myContainer:Container=new
Container;
myContainer.flow=ContainerFlow.
VERTICAL;
var myFormat:TextFormat = new
TextFormat();
text.setTextFormat(myFormat);
text.width=800;
myContainer.addChild(text);
myContainer.setSize(stage.
stageWidth,stage.stageHeight*0.7);
myFormat.color = 0xAA0000;
myFormat.size = 60;
myFormat.italic = true;
}
addChild(myContainer);
76
02/2011 smart-developer.de

Entwicklung
Blackberry PlayBook
nen Aufgaben im Hauptprojekt zu integrieren,
fügt man in der Hauptdatei den folgenden
include-Befehl ein:
include "BinaryClockDraw.as"
Er weist den Compiler an, die angegebene
Datei beim Erstellen der Hauptdatei an die
Stelle der include-Anweisung zu setzen.
Möchten Sie der Anwendung einzelne Dateien
mitgeben, dann bietet sich eine leicht
erweiterte Variante über [Embed] an. Die Dateien
müssen sich auch hier im src-Ordner
befinden. Danach erstellen Sie eine Ressourcenklasse
nach folgendem Schema:
Abb. 8: Icon und andere Ressourcendateien werden
Teil des Projektes.
public final class Resource
{
[Embed (source="level0.txt",
mimeType="application/octet‐stream") ]
public static const level0:Class;
[Embed (source="level1.txt",
mimeType="application/octet‐stream") ]
public static const level1:Class;
Die [Embed]-Statements weisen den Compiler
an, die von ihnen angezeigte Datei in die
ActionScript-Datei zu packen. Die darauffolgende
Variablendeklaration dient dem Zugriff.
Das Lesen der Datei erfolgt nach folgendem
Schema new String(new Resource.
level0());.
Listing 3: Klassenvariablen
public class AIRHelloWorld extends Sprite
{
public var state:String = "clock";
private var myContainer:Container;
private var myTimer:Timer=new
Timer(500,0);
...
Die App World
Damit ist die Anwendung nun reif für den
Weg in die App World. Bevor Sie sie dort jedoch
hochladen können, muss sie signiert
sein. Dazu benötigen Sie einen Code Signing
Key [5] und müssen damit Ihre Entwickler-
Workstation bei RIM in Kanada registrieren.
Danach gilt dieser Rechner als vertrauenswürdig
und kann Anwendungen signieren.
Haben Sie die E-Mail mit den Key-Dateien
erhalten, öffnen Sie den Einstellungen-Dialog
von Flash Builder und wechseln in die Rubrik
ActionScript-Erstellungsverpackung |
BlackBerry Tablet OS. Hier wählen Sie Signing
und quittieren die Fehlermeldung. Darauf
folgt ein Klick auf Create Certificate, um
ein Entwicklerzertifikat zu erstellen. Das
Publisher-Feld muss 1:1 mit den unter [5]
eingegebenen und in der .xml-Datei befindlichen
Angaben übereinstimmen. Dann klicken
Sie im Feld RIM Certificate auf Register,
um das soeben erstellte Entwicklerzertifikat
unter Verwendung der .csj-Datei bei RIM zu
registrieren.
Ab diesem Zeitpunkt lässt sich die App per
Klick auf Projekt | Releasebuild exportieren
verpacken. Vergessen Sie nicht, Enable digital
signing zu aktivieren. Nach dem Upload
der .bar-Datei zur BlackBerry App World
muss diese noch ein paar Qualitätstests
durchlaufen, bevor sie dann von RIM freigegeben
wird.
Fazit
Auch wenn das Entwickeln für das PlayBook
einige Stolpersteine bietet, eignet sich
ActionScript ideal für den schnellen Einstieg.
Hunderte Anwendungen sind bereits im
Store, Hunderte mehr werden kurz nach dem
Launch folgen. Das in einigen Monaten folgende
native PlayBook-SDK wird den Markt
abermals aufmischen und auch für das nötige
„Play“-Erlebnis sorgen.
● ● ●
Listing 4: blackberry-tablet.xml
none
false
Tamoggemon Limited
core.internet
icon‐bicatab.png
Infos
[1] Adobe AIR-SDK
http:// opensource. adobe.​
com/ wiki/ display/ flexsdk/​
Flex+SDK
[2] Flash Builder:
https:// www. adobe. com/​
cfusion/ entitlement/ index.​
cfm? loc=en%5Fus&​
e=labs%5Fflashbuilder%
5Fburrito
[3] SDK und Simulator:
http:// us. blackberry. com/​
developers/ tablet/ adobe. jsp
[4] VMWare-Player:
http:// downloads. vmware.​
com/ d/ info/ desktop_down
loads/ vmware_player/ 3_0
[5] Signierschlüssel beantragen:
https:// www. blackberry. com/​
SignedKeys/
smart-developer.de 02/2011 77

Entwicklung
WebOS Ares Framework
WebOS-Entwicklung mit Ares
Palm-Zeit
Die Übernahme von Palm durch HP und die Ankündigung von webOS
3.0 hat das Interesse an der Entwicklung für webOS wieder aufleben
lassen. Glücklicherweise ist es sehr einfach, webOS-Anwendungen mithilfe
der Entwicklungsumgebung Ares von Palm in einem Webbrowser
zu errichten. Roy Sutton
palm.com
Mojo und JS
Mojo beinhaltet das JavaScript-
Framework „Prototype“ für
DOM-Verarbeitung. Sie können
auch jQuery hinzufügen oder
andere plattformübergreifende
Frameworks verwenden, wie
zum Beispiel Jo.
Ares von Palm ist eine integrierte
Entwicklungsumgebung (IDE) für
den Webbrowser und dient für
den Bau von Anwendungen, die
unter webOS laufen. Ares unterstützt die Gestaltung
von Benutzeroberflächen (UI) per
Drag&Drop, verfügt über eine integrierte Fehlersuche
(Debugging) und sogar über eine integrierte
Versionskontrolle. Es baut auf Bespin,
einem quelloffenen Editor, auf, der ausgesprochen
für die Arbeit im Webbrowser
entwickelt wurde.
Die ersten Schritte mit Ares sind sehr einfach:
Legen Sie zuerst ein Konto beim Palm
Developer Center [1] an. Sie brauchen noch
einen geeigneten Browser (Firefox 3.6+, Safari
4.0+ oder Chrome). Wenn Sie Ihre Anwendungen
auch testen und die Vorteile der
integrierten Fehlersuche in vollem Umfang
nutzen wollen, laden Sie das Palm webOS
Software-Entwicklerkit (SDK) für Ihr Betriebssystem
von der Ares Website [2] herunter
(erreichbar für Windows, MacOS und
Linux) und installieren es. Ares stellt das Gerüst
für die Anwendung bereit und sorgt für
den Zugriff auf Komponenten und Funktionen
des Mojo-Frameworks. Mojo enthält vorgefertigte
Widgets und Dienste für webOS.
Dieser Artikel zeigt Ihnen an einer Beispielanwendung,
wie Sie Schritt für Schritt in
Ares vorgehen. Die Beispiel-App verwendet
dabei die API von Yahoo! Local Search [3],
um Kinos in der Umgebung eines bestimmten
Standortes zu ermitteln. Der Anwender
kann dazu eine beliebige Postleitzahl eingeben
oder per GPS den aktuellen Standort bestimmen.
Daraufhin zeigt die App die Ergebnisse
in einem Google-Map-Widget, wozu
die Google-Maps-API [4] verwendet wird.
Der Text spricht auch einige wichtige Konzepte
von webOS an, wie zum Beispiel Ereignisse
und Termine, Dienste, AJAX und CSS-
Design. Wenn Sie das Endergebnis gleich ansehen
wollen, laden Sie einfach den Quellcode
der Beispiel-App als .ZIP-gepackte Datei
von der Smart-Developer-Homepage herunter
[5] und fügen Sie diesen per Drag&Drop
direkt Ares hinzu.
Erste Schritte
Als Erstes legen Sie das neue Projekt an. Klicken
Sie dazu links oben auf New und wählen
Sie Application aus. Geben Sie der neuen
Anwendung den Namen Movie. Daraufhin
wird die Struktur für Ihr neues Projekt automatisch
erstellt und eine leere Arbeitsfläche
erscheint. Das Mojo-Framework verwendet
die MVC- (Model, View, Controller) Architekturmuster
für Anwendungsentwicklung.
Jedes Bildschirmbild verfügt sowohl über
einen Controller (einen sogenannten Assistenten)
als auch über ein View, das den
HTML-Code für das Rendern der Ansicht
(scene) enthält. Der Artikel konzentriert sich
auf die Arbeit mit visuellen Komponenten,
Sie können den HTML-Code aber auch manuell
bearbeiten.
78
02/2011 smart-developer.de

Entwicklung
WebOS Ares Framework
Ares hat drei Hauptbereiche (Abbildung 1):
Auf der linken Seite befindet sich die Kombinationspalette
und der Projekt-Browser, auf
der rechten Seite das Einstellungspanel und
in der Mitte das Design- und Code-Panel. Für
die Gestaltung der Benutzeroberfläche Ihrer
eigenen Anwendung ziehen Sie die entsprechenden
Widgets einfach von der linken Palette
in das Design-Feld in der Mitte hinüber.
Nun legen Sie die Inputelemente an. Achten
Sie darauf, dass die Ansicht einfach und
übersichtlich bleibt. Fügen Sie zuerst ein
PageHeader-Widget (kein Header-Widget) in
Ihre noch leere Arbeitsfläche ein. Ändern Sie
dann den Titel im Einstellungspanel auf
Kinofinder. Als Nächstes fügen Sie ein Group-
Widget ein, das für die logische Gruppierung
des später hinzufügenden Eingabefeldes für
die Postleitzahl und die Such-Schaltfläche
nötig sein wird. Die Group-Taste finden Sie im
Layout-Bereich der Palette. Wenn Sie diesen
Bereich nicht sehen, klicken Sie einfach auf
die Palette und scrollen weiter hinunter.
Nachdem Sie das Group-Widget hinzugefügt
haben, ändern Sie sein Label auf „Postleitzahl“.
Ziehen Sie anschließend ein Text-
Field in die Group-Box und ändern Sie den
hintText in „Postleitzahl eingeben“. Stellen
Sie die maxLength auf 5, den modifierState
auf Num-Lock und schließlich nennen Sie es
ZIPCode. Der hintText wird immer dann sichtbar,
wenn das TextField leer ist. Wenn Sie
den modifierState auf Num-Lock stellen,
lassen sich Zahlen einfacher eingeben.
Als Nächstes vergrößern Sie die Group-
Box: Markieren Sie dazu diese Box und ziehen
Sie die untere Kante etwas hinunter.
Fügen Sie nun einen ActivityButton in die
zweite Zeile der Group-Box ein. Ändern Sie
Abb. 1: Die Ares-Entwicklungsumgebung – eine leere Arbeitsfläche wartet auf Ihr Design.
das Label auf Suchen und benennen Sie es in
ZIPSearchButton um. Passen Sie die Größe
der Group-Box an, wenn der ActivityButton
nicht vollständig sichtbar ist.
Die letzte sichtbare Komponente wird ein
anderer ActivityButton sein, den Sie einfach
unter der Group-Box platzieren. Mit dieser
Taste wird der Anwender die Suche anhand
der GPS-Koordinaten seines Standortes starten.
Nennen Sie die Taste GPSSearchButton
und geben Sie Am Standort Suchen als Label
ein (Abbildung 2).
Ares enthält eine Reihe von nicht visuellen
Komponenten, für verschiedene Dienste, darunter
die beiden, die Sie nun benötigen: Die
WebServices-Komponente finden Sie im
WebServices-Bereich der Palette und die GPS-
Komponente unter Sensors. Ziehen Sie diese
beiden in Ihre Arbeitsfläche. Diese Dienste
werden dann in dem Bereich Non-Visual
Components unterhalb Ihrer Arbeitsfläche
eingeblendet (Abbildung 3).
Abb. 2: Der Hauptbildschirm des Kinofinders mit richtig
angeordneten Widgets.
Abb. 3: Der Arbeitsbereich für nicht visuelle Komponenten,
mit den Diensten GPS und WebServices.
smart-developer.de 02/2011 79

Entwicklung
WebOS Ares Framework
Tipp
Unter dem Reiter View im linken
Panel sehen Sie die Liste all der
Widgets, die Sie in der aktuellen
Ansicht Ihrer Anwendung benutzen.
Wählen Sie eines hier
aus, können Sie die Einstellungen
dafür im rechten Einstellungspanel
ändern.
Listing 1: webServices
query: "movie theater",
output: "json",
results: "10",
appid: "YahooDemo"
Listing 2: ZIPSearchButtonTap
var zip = this.$.ZIPCode.fetchModelProperty("value");
this.$.webService1.parameters.zip = zip;
this.$.webService1.execute();
Listing 3: webService1Success
Listing 4: list1 itemHtml
Markieren Sie die GPS-Komponente und deaktivieren
Sie das Kontrollkästchen neben
subscribe unter Settings; Sie wollen nämlich
immer nur eine einmalige Feststellung des
Standortes per GPS. Um den Akku zu schonen,
setzen Sie maximumAge auf 300 (Sekunden),
sodass zwischengespeicherte Werte
aus dem GPS auch genutzt werden, falls sie
nicht zu alt sind. Für eine relativ schnelle
Reaktion setzen Sie GPS‐accuracy und
response Time auf 2. Brauchen Sie weitere
Details zu diesen Einstellungen, dann klicken
Sie einfach auf den Reiter Help rechts oben
und Sie erhalten mehr Informationen über
die GPS-Komponente von Ares.
Als Nächstes markieren Sie die Web-
Services-Komponente und geben die URL
http:// local. yahooapis. com/ LocalSearch Ser
vice/ V3/ localSearch in der entsprechenden
Zeile ein. Stellen Sie dann handleAs auf JSON
um. Zum Schluss klicken Sie auf das Editor-
Symbol neben parameters und fügen den
Code aus Listing 1 zwischen den geschweiften
Klammern ein. Ersetzen Sie optimalerweise
„YahooDemo“ im appid-Eintrag gegen
Ihren eigenen Yahoo!-Entwicklerschlüssel,
wenn Sie einen haben.
if(inResponse.ResultSet && (inResponse.ResultSet.totalResultsReturned > 0))
{
}
else
{
}
this.controller.stageController.pushScene("results", inResponse.ResultSet);
Mojo.Controller.errorDialog("Keine treffenden Ergebnisse gefunden!");
#{Title}
#{Address}
#{Phone}
Distance: #{Distance} mi.
Listing 5: ResultsAssistant Setup Function
this.$.list1.model.items = this.results.Result;
this.controller.modelChanged(this.$.list1.model);
Ein bisschen programmieren
Die Benutzeroberfläche ist damit fertig. So
richtig programmiert haben wir aber bislang
noch gar nichts. Im folgenden Verlauf fügen
Sie zuerst Code hinzu, der auf Benutzereingaben
reagiert, dann all die nötigen Widgets.
In Ares fügen Sie Ereignis-Listener einfach
aus der IDE hinzu.
Klicken Sie zuerst auf die Taste Suchen im
Postleitzahl-Bereich Ihrer Anwendung (ZIP-
SearchButton), wählen Sie dann den Reiter
Events im rechten Einstellungspanel aus.
Unter dem Reiter Events klicken Sie auf
das Editor-Symbol neben ontap. Daraufhin
erstellt Ares eine neue Funktion namens ZIP‐
SearchButtonTap und wechselt die Ansicht
zum Code-Editor um. Für die Suche wird
Yahoo! Local Search die Postleitzahl brauchen,
die der Benutzer eintippt. Fügen Sie
deshalb den Code von Listing 2 in die Funktion
ZIPSearchButtonTap ein.
Wahrscheinlich ist Ihnen die Textfolge:
this.$.ZIPCode im Code gleich aufgefallen.
Ares erstellt die Widgets automatisch für Sie
und verwendet die Abkürzung this.$ für
den Zugriff auf diese mit Namen. In der ersten
Zeile folgt darauf die von Ihnen festgesetzte
Benennung für das TextField, in diesem
Fall „ZIPCode“. In den folgenden Zeilen
steht webService1, die von Ares zugewiesene
Benennung für das WebService-Widget, das
Sie vor Kurzem hinzugefügt haben.
Interessant ist hier auch noch der fetch‐
ModelProperty-Call. Es gibt viele Widgets,
deren Einstellungen und Status auch zur
Laufzeit erreichbar und veränderbar sind.
Das Widget TextFields besitzt auch ein
value-Attribut, das den Text enthält, den der
Benutzer eintippt.
Erfolg- und Misserfolg
Die letzten beiden Zeilen in der Funktion
sind für die Ajax-Anfrage wichtig: Die erste
enthält die erforderlichen Parameter dazu
und die zweite startet die Ajax-Anfrage
selbst, die gleich ausgeführt wird. Zum Abrufen
der Ergebnisse der Web-Anfrage richten
Sie einige Erfolg- und Misserfolg-Handler für
das WebRequest -Objekt ein.
Betätigen Sie die Design/​Code-Taste im
oberen Balken des Code-Editors, um wieder
in die visuelle Arbeitsfläche zu wechseln, wo
Sie nun die Erfolg- und Misserfolg-Handler
einrichten. Wählen Sie dann das webServices1-Widget
aus. Dieses Widget finden Sie
unterhalb der Ansicht im Non-Visual Components-Bereich.
Anschließend klicken Sie auf
das Editor-Symbol neben dem onSuccess-
Rückruf (callback), unter dem Reiter Events
80
02/2011 smart-developer.de

Entwicklung
WebOS Ares Framework
Listing 6: Zusatz für index.html
im Einstellungspanel. Fügen Sie dann den
Code von Listing 3 im Code-Editor ein.
Der onSuccess-Ruf von WebService übergibt
drei Parameter; einer davon ist inResponse,
das Ergebnis für die Ajax-Anfrage. Yahoo!
schickt die Antwort in einem JavaScript-Objekt
mit einer ResultSet-Property zurück. Innerhalb
von ResultSet befindet sich eine
Property namens totalResultsReturned, die
die Anzahl der Antworten enthält. Bevor Sie
fortfahren, überzeugen Sie sich mit einem
Test, ob Sie tatsächlich einige Antworten erhalten
haben.
Beachten Sie hier auch den pushScene-Call.
Dieser Code fordert den Stage-Controller auf,
eine neue Ansicht (scene) der Reihe der Ansichten
hinzuzufügen, die die aktuelle aktive
Ansicht abwählt. Diese neue Ansicht werden
Sie anschließend noch einrichten. Im Falle
eines Fehlers wird ein Fehlerdialog eingeblendet,
der den Benutzer benachrichtigt.
Ebenfalls unter dem Reiter Events finden
Sie die Zeile onFailure, klicken Sie auf das
Editor-Symbol und fügen Sie im Editor den
einfachen Fehlerdialog hinzu:
Mojo.Controller.errorDialog("Kann nicht mit
dem Server kommunizieren!");
Eine neue Ansicht
Sobald Sie eine Antwort vom WebService erhielten,
sorgen Sie im nächsten Schritt dafür,
dass die Ergebnisse für den Benutzer auch
angezeigt werden. Dazu richten Sie eine
neue Ansicht (scene) mit einem Stadtplan
und mit einer Reihe von Widgets ein, die die
Ergebnisse enthalten.
Klicken Sie auf das Dropdown-Menü New
links oben in Ares und wählen Sie Scene aus.
Benennen Sie die neue Ansicht „results“ und
bestätigen Sie mit OK. Daraufhin erscheint
eine neue leere Arbeitsfläche, worin Sie dann
das neue Bildschirmbild zusammenstellen.
Wählen Sie zunächst das Map-Widget in der
Palette aus und ziehen Sie dieses in die leere
Designfläche hinüber. Unter Settings | Geometry
stellen Sie die Sichthöhe auf 200 ein,
damit das gesamte Areal übersichtlich erscheint.
Um auch die Details richtig zu erkennen,
stellen Sie die Vergrößerung (zoom
level) auf 12 und entfernen Sie das Häkchen
bei showMarker.
Anschließend fügen Sie ein Scroller-Widget
vom Layout-Bereich der Palette unterhalb
des Stadtplans ein und stellen seine Höhe
unter Settings auf 100%. Fügen Sie dann
zum Scroller noch ein List-Widget hinzu. Mit
dem Scroller kann der Benutzer dann die
Liste glatt weiterblättern, ohne dabei den
Stadtplan aus der Bildfläche zu schieben.
In den nächsten Schritten editieren Sie das
Aussehen der Liste, errichten Sie die Vorlage
und machen Sie die nötigen Einstellungen
hierfür. Entfernen Sie zuerst die Häkchen
neben swipeToDelete und reorderable unter
Settings | Items. Diese Optionen deaktivieren
Sie, da der Benutzer die Liste eigentlich nicht
zu ändern braucht. Klicken Sie dann auf das
Editor-Symbol neben itemHtml. Löschen Sie
den kompletten Inhalt im Dialog und fügen
Sie hier den Code von Listing 4 ein.
Das Mojo-Framework verfügt über ein Vorlagensystem.
Verwenden Sie dieses, um die
Daten in der Liste anzuzeigen, die als Antwort
auf die Web-Anfrage eingetroffen sind.
Ordnen Sie einfach eine Liste von Kinos dem
Listenmodell zu und die Liste wird automatisch
aufgefüllt, wenn Sie ihr die Information
über neue Daten mitteilen.
Sie müssen auch für das Weiterleiten der
Informationen sorgen, die auf die Web-Anfrage
eingetroffen sind. Wechseln Sie zuerst
Listing 7: gps1Succes
if(inResponse.errorCode == 0)
{
this.latitude = inResponse.latitude;
this.longitude = inResponse.longitude;
delete this.$.webService1.parameters.zip;
this.$.webService1.parameters.latitude = this.latitude;
this.$.webService1.parameters.longitude = this.longitude;
this.$.webService1.execute();
}
else
{
Mojo.Controller.errorDialog("GPS Error!");
this.$.GPSSearchButton.active = false;
this.$.GPSSearchButton.activeChanged();
}
Abb. 4: Der erste Ergebnisbildschirm.
Listing 8: webService1Success pushScene
this.controller.stageController.pushScene("results", [inResponse.ResultSet, this.latitude, this.longitude]);
smart-developer.de 02/2011 81

Entwicklung
WebOS Ares Framework
Abb. 5: Die fertige webOS-Anwendung
mit einigen Style-Elementen
aufgepeppt.
Listing 10: movie.css
body.palm‐default {
background: url('../images/
film.jpg') top left repeat‐y;
}
.theater‐name {
padding‐left: 3px;
font‐weight: bold;
}
.theater‐address {
padding‐left: 3px;
font‐size: .8em;
}
.theater‐phone {
padding‐left: 3px;
display: inline;
font‐size: .9em;
}
.theater‐distance {
display: inline;
padding‐left: 10px;
font‐size: .9em;
}
Listing 9: ResultsAssistant
this.results = argFromPusher[0];
this.latitude = argFromPusher[1];
this.longitude = argFromPusher[2];
zum Code-Editor mit der Taste Design/​Code
hinüber, wo Sie ganz oben ResultsAssistant,
den Konstruktor für den Scene-Assistenten
sehen. Fügen Sie folgende Zeile dem
Body der Deklaration hinzu:
this.results = argFromPusher;
Nun teilen Sie der Liste die Information über
die erhaltenen Daten mit. Fügen Sie dazu
den Code von Listing 5 der Setup-Funktion,
gleich unter setupSceneAssistant hinzu.
Die erste Zeile in diesem Code kopiert das
Result-Feld (wo Yahoo! die Liste der Kinos
ablegt) in das Listenmodell. Die zweite benachrichtigt
den Scene-Controller, dass das
betroffene Modell aktualisiert wurde, so
kann dieser nun die angezeigten Daten ebenfalls
aktualisieren.
Erste Testphase
Am besten testen Sie die Anwendung gleich
in diesem Stadium, um sicherzugehen, dass
alles richtig funktioniert. Wenn Sie es noch
nicht getan haben, starten Sie jetzt den Palm-
Emulator. Klicken Sie dann auf den blauen
Pfeil links oben in Ares und die Anwendung
wird im Emulator gestartet. Geben Sie eine
Postleitzahl ein (in unserem Beispiel 20500)
und drücken Sie die Suchen-Taste. Daraufhin
sehen Sie einen Stadtplan von Sunnyvale in
Kalifornien und die Liste von Kinos in der
Umgebung (Abbildung 4). Zum Hauptbildschirm
wechseln Sie mit der ESC-Taste zurück,
was einem Backswipe auf dem Gerät
entspricht.
Was geschah währenddessen im Hintergrund?
Als Sie die Suchen-Taste betätigten,
wurde ein Event gestartet, der den onTap-
Handler aktivierte. Dieser wiederum führte
eine Ajax-Anfrage an den WebService aus.
Nachdem die Anfrage abgeschlossen war,
startete er den onSuccess-Rückruf, der den
Ergebnisbildschirm geladen hat.
Ist diese Reihenfolge bei Ihrem Test nicht
wie geplant abgelaufen, dann beheben Sie
nun die Fehler in Ares. Wechseln Sie wieder
zu Ares, dann sehen Sie den Log Viewer mit
den Fehlermeldungen. Alternativ starten Sie
das Ares-Tool JSLINT direkt neben dem Logviewer
und lassen Ihre Quelldatei auf Fehler
hin überprüfen. Auch den integrierten Debugger
können Sie zu Hilfe rufen, um Breakpoints
in Ihrem Code festzustellen und die
Werte von Variablen sowie die DOM-Struktur
zu überprüfen.
Mapping
Nun haben Sie eine Liste von Kinos zur Verfügung
und die Karte würde noch benutzerfreundlicher
aussehen, wenn Sie die Filmpaläste
darauf auch markierten. Sie sollten
auch die Karte selbst auf den Standort des
Benutzers zentrieren. Dazu brauchen Sie die
Google-Maps-API, um auf die Klassen zuzugreifen,
die vom Map-Widget benutzt werden.
Obwohl das Map-Widget die API eigentlich
importiert, wird diese aber dynamisch
geladen, deshalb erscheint sie nicht in der
Set up-Funktion. Diese Tatsache können Sie
aber umgehen.
Machen Sie eine Kopie von der Maps-API,
während die Anwendung zum ersten Mal geladen
wird, und fügen Sie diese dem HTML-
Dokument hinzu, das die Grundlage Ihrer
Anwendung bildet. Wechseln Sie dazu im
linken Panel auf Files, klicken Sie doppelt auf
index.html und fügen Sie Listing 6 unmittelbar
unter dem script-Tag mit ares.js ein:
Für das Zentrieren der Karte und für die
Markierung der Treffer brauchen Sie noch
einige Funktionen, die Sie einfach aus dem
Quellcode [5] herauskopieren und hier einfügen
können. Fügen Sie auch Anrufe (calls)
für diese beiden neuen Funktionen unten in
der Setup-Funktion hinzu. Wechseln Sie deshalb
zu results‐assistant.js zurück, klicken
Sie dazu einfach auf die Dropdown-
Liste der bereits editierten Dateien im oberen
Balken des Code-Editors und wählen Sie die
Datei aus. Fügen Sie diese beiden Zeilen der
Setup-Funktion für die Anrufe der neuen
Funktionen hinzu:
this.setMarkers();
this.centerMap();
GPS
Nun können Sie das GPS anschalten. Wechseln
Sie zuerst zur main‐chrome.js-Datei,
wählen Sie die Taste Am Standort Suchen
(GPSSearchButton) aus und klicken Sie im
Einstellungspanel unter dem ReiterEvents auf
das Editor-Symbol neben dem onTap-Handler,
um diesen hinzufügen. Palm stellt einen Service
für die Ermittlung von GPS-Koordinaten
bereit. Diesen Service können Sie für den ununterbrochenen
Betrieb oder für eine einmalige
Feststellung des Standortes konfigurieren.
In unserem Fall reicht eine einfache Feststellung
der Koordinaten vollkommen aus,
82
02/2011 smart-developer.de

Entwicklung
WebOS Ares Framework
verwenden Sie also die Methode: getCurrentPosition().
Fügen Sie im onTap-Handler
die folgende Zeile hinzu:
this.$.gps1.getCurrentPosition();
Das GPS vermittelt die Daten asynchron.
Richten Sie einen onSuccess-Rückruf für die
Komponente gps1 ein, um die ermittelten
Werte abzurufen. Ergänzen Sie den onSuccess-Rückruf
mit dem Code von Listing 7.
Dieser Code überprüft, ob valide GPS-Informationen
eingetroffen sind und startet
den WebService. Ein Teil des Codes sorgt
dafür, dass der zip-Parameter entfernt wird,
wenn der Benutzer zuvor bereits eine Suche
anhand einer Postleitzahl durchführte. Auch
zum onTap-Handler der Suchtaste per Postleitzahlen
wurde ein Code hinzugefügt, um
bereits vorhandene Werte für Längen- und
Breitengrad zu löschen.
Als Nächstes ändern Sie die Zeile in der
onSuccess-Funktion von webService1, damit
Längen- und Breitengrad dem Ergebnisbildschirm
weitergegeben werden. Tauschen Sie
dazu die pushScene-Zeile mit dem Code von
Listing 8 aus. Fügen Sie die folgende Zeile
der Funktion ZIPSearchButtonTap hinzu, um
darauf hinzuweisen, dass bei der Suche per
Postleitzahl kein Längen- und Breitengrad
zur Verfügung stehen:
this.latitude = this.longitude = undefined;
Zum Schluss ändern Sie noch den Konstruktor
für ResultsAssistant, damit die neuen
Parameter akzeptiert werden. Ersetzen Sie
den Konstruktor mit dem Code in Listing 9.
Zweite Testphase
An diesem Punkt angelangt, haben Sie eine
funktionierende, wenn auch nur sehr einfache
Anwendung für das Auffinden von Kinos
in der Hand. Die Suche per PLZ und per GPS
sollte bereits funktionieren. Probieren Sie die
Anwendung aus und testen Sie, ob alles erwartungsgemäß
funktioniert.
Letzte Schritte
Ohne auf feinere Details von Design näher
einzugehen, gibt es doch noch einige Verbesserungen,
die Sie schnell anwenden können,
besonders beim Ergebnisbildschirm und bei
der Kartendarstellung. Mit etwas CSS-Code
verleihen Sie Ihrer neuen Anwendung ein
Listing 11: Stylesheet zur index.html
etwas gepflegteres Aussehen. Fügen Sie deshalb
dem Projekt eine CSS-Datei hinzu. Klicken
Sie auf den Reiter Files im linken Ares-
Panel. Wählen Sie das Projektverzeichnis
Movie aus und klicken Sie oben links auf den
Button New folder. Benennen Sie den neuen
Ordner stylesheets. Klicken Sie anschließend
auf die New-Schaltfläche (weiter oben
links) und wählen Sie den Menüpunkt Document
aus. Markieren Sie im Popup-Fenster
den stylesheets-Ordner und geben Sie
movie.css für den Dateinamen an. Fügen Sie
den Code von Listing 10 in der neu errichteten
movie.css-Datei ein.
Wechseln Sie nun zur index.html-Datei
und fügen Sie die Zeile von Listing 11 dem
head-Element hinzu. Zum Schluss laden Sie
noch ein Bild hoch, das Sie als Teil des Hintergrundes
der Anwendung verwenden.
Laden Sie film.jpg aus dem ZIP-Archiv der
Smart-Developer-Homepage [5] herunter.
Wählen Sie unter dem Reiter File das Verzeichnis
images aus, ziehen Sie dann die gewünschte
Bilddatei in den linken unteren Bereich
von Ares hinüber (wo Sie die Aufforderung:
„Drop local files below to upload to
„images“ sehen) und lassen Sie die Datei einfach
fallen; die Datei wird zu Ares hochgeladen.
Hat alles geklappt, sieht Ihre App wie in
Abbildung 5 aus.
Fazit
Aus diesem Artikel haben Sie erfahren, wie
Sie mithilfe von Ares schnell eine Anwendung
zusammenstellen, die Angaben aus
verschiedenen Quellen sammelt, diese miteinander
kombiniert und dem Benutzer anzeigt.
Sie haben auch einige Aspekte der
JavaScript-Programmierung für webOS kennengelernt.
Interessieren Sie sich mehr für
das Thema, versuchen Sie selbst eine Beschilderung
für die einzelnen Ergebnisse und
für die Kartenmarkierungen herzustellen.
Oder richten Sie Verknüpfungen zu den Telefonnummern
in der Liste ein, damit der Benutzer
die gewünschte Nummer gleich anwählen
kann.
Ich hoffe, dass Sie in webOS die Plattform
für Ihre nächste Anwendung gefunden
haben. Sie werden sehen, dass webOS-Anwender
ordentlich geschriebene Anwendungen
wirklich sehr zu schätzen wissen und
Entwickler sehr anerkennen, die nützliche
Funktionen bereitstellen. Auf Wiedersehen
im App-Katalog!
● ● ●
Roy Sutton
Roy ist ein App-Entwickler, Blogger
und webOS-Enthusiast. Er
schrieb schon mobile Anwendungen,
als es diesen Begriff
überhaupt noch nicht gab. Sie
finden Beiträge von ihm unter
http:// www. webOSroundup. com.
Roy ist außerdem Kurator für das
Community-betriebene webOS-
Dokumentations-Wiki unter
http:// webOS101. com. Sie können
ihm auch auf Twitter unter @
Pre101 folgen.
Infos
[1] Entwicklerseite von Palm:
http:// developer. palm. com
[2] Ares: https:// ares. palm. com/​
Ares/ about. html
[3] Yahoo! Local Search API:
http:// developer. yahoo. com/​
search/ local/ V3/ localSearch.​
html
[4] Google Maps API:
http:// code. google. com/ apis/​
maps/ documentation/​
javascript/
[5] Quellcode zum Artikel:
http:// www. smart‐developer.​
de/ Magazin/ Code‐Beispiele
smart-developer.de 02/2011 83

Entwicklung
Android und OpenGL
Einführung in die 3D-Grafik auf Android
Umschalten
auf 3D
Mit aktuellen Smartphones macht nicht nur das Spielen, sondern auch die Grafikprogrammierung
so richtig Spaß. Dieser Artikel gibt Ihnen eine Einführung in die Entwicklung von OpenGL-ES-Anwendungen
unter Android. Shane Conder und Lauren Darcey
Yuriy Ivkin, 123RFa
Mobilgeräte sind sehr leistungsfähig
und werden von Monat zu
Monat leistungsfähiger. Die ausgereifte
und sehr beeindruckende
Grafikleistung, die früher ausschließlich
auf Hochleistungsrechner beschränkt
war, finden Sie mittlerweile dank integrierter
Hardwarebeschleunigung auf nahezu jedem
alltäglichen Smartphone. Dreidimensionale
Grafik wird in einer Vielzahl von Anwendungen
eingesetzt, von Spielen über Kartendarstellungen
bis hin zu virtueller und erweiterter
Realität. In dieser Anleitung
zeigen wir Ihnen anhand von
praktischen Beispielen, wie
Sie die ersten und wichtigsten Schritte meistern,
um selbst Anwendungen mit 3D-Grafik
für die Android-Plattform zu entwickeln.
Der Artikel richtet sich in erster Linie an
Entwickler, die mit der Android-Plattform
und mit den Entwicklerwerkzeugen für Android
bereits vertraut sind und über grundlegende
Kenntnisse in 3D-Grafik verfügen.
Falls Sie gerade anfangen oder Ihre Grundkenntnisse
vertiefen wollen, finden Sie im
Info kasten am Ende des Artikels eine Liste
von Publikationen zum Thema 3D- und
OpenGL-Programmierung [2] [3] [4].
Quellcode zur APP
Wir haben eine einfache Anwendung für Android
namens Easy3D eingerichtet, um die
Konzepte in dieser Anleitung zu veranschaulichen.
Aufgrund der Länge von OpenGL-Codebeispielen
und der begrenzten Kapazität von
Printmedien empfehlen wir Ihnen, dass Sie
den Code gleich herunterladen und die Programmierschritte
darin mitverfolgen. Der vollständige
Quellcode für Easy3D steht unter [1]
zum Download bereit.
84
02/2011 smart-developer.de

Entwicklung
Android und OpenGL
Abb. 1: Schematische Darstellung der Beziehungen zwischen den implementierten Klassen.
Entwickeln mit OpenGL ES
OpenGL ES ist eine Untergruppe von OpenGL
und wird auf eingebetteten Systemen verwendet,
die heutzutage auf so ziemlich allen
modernen Smartphone-Plattformen zum Einsatz
kommen. Android benutzt herkömmliche
OpenGL ES-Bibliotheken für 3D-Grafikentwicklung.
Haben Sie bereits Erfahrung
mit OpenGL ES auf anderen Plattformen,
wird Ihnen die Technik auf Android sehr bekannt
vorkommen. Manche Android-Geräte
unterstützen nur OpenGL ES in der Version
1.1, andere bereits OpenGL ES 2.0. In unserer
Beispielanwendung verwenden wir
OpenGL ES 1.1, so können wir die Vorteile
der vordefinierten Shader mit fest zugewiesenen
Funktionen ausnutzen. Bei OpenGL ES
2.0 müssten wir unsere eigenen Shader von
Listing 1: Die grafische Oberfläche
public class Easy3DActivity extends
Activity {
private GLSurfaceView easySurfaceView =
null;
private Easy3DRenderer mEasyRenderer;
}
protected void onResume() {
super.onResume();
if (easySurfaceView != null) {
public void onCreate(Bundle
savedInstanceState) {
super.onCreate(savedInstanceState);
}
}
easySurfaceView.onResume();
easySurfaceView = new
GLSurfaceView(this);
easySurfaceView.
setEGLContextClientVersion(1);
mEasyRenderer = new
Easy3DRenderer(this);
easySurfaceView.
setRenderer(mEasyRenderer);
private class Easy3DRenderer implements
GLSurfaceView.Renderer {
private Context context;
Easy3DRenderer(Context context) {
this.context = context;
}
public void onDrawFrame(GL10 gl) {}
setContentView(easySurfaceView);
}
protected void onPause() {
super.onPause();
if (easySurfaceView != null) {
easySurfaceView.onPause();
}
public void onSurfaceChanged(GL10 gl, int
width, int height) {}
public void onSurfaceCreated(GL10 gl,
EGLConfig config) {}
}
}
smart-developer.de 02/2011 85

Entwicklung
Android und OpenGL
Abb. 2: Die Beispielanwendung mit drei mit Texturen versehenen und beleuchteten Würfeln.
Listing 2: onSurfaceCreated()
Grund auf neu erstellen (was den Rahmen
dieser einfachen Anleitung deutlich überschreiten
würde).
Das Android-SDK [5] enthält eine Reihe
von Hilfsklassen, die grafikspezifische Aufgaben
vereinfachen. Die Klasse GLSurfaceView
ist eine standardmäßige Android-Surface-
View, die die zugrunde liegende grafische
Oberfläche unter Verwendung eines EGL-
Kontextes implementiert, um darauf zu
zeichnen. In Verbindung mit der GLSurface-
View-Klasse zeichnet die GLSurfaceView.Renderer-Klasse
die Grafiken, wenn diese vom
System aufgerufen werden. Abbildung 1
stellt die Beziehungen zwischen diesen Klassen
recht plastisch dar.
public void onSurfaceCreated(GL10 gl, EGLConfig config) {
gl.glEnableClientState(GL10.GL_NORMAL_ARRAY);
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
gl.glHint(GL10.GL_PERSPECTIVE_CORRECTION_HINT, GL10.GL_NICEST);
gl.glShadeModel(GL10.GL_SMOOTH);
gl.glDisable(GL10.GL_DITHER);
gl.glEnable(GL10.GL_DEPTH_TEST);
gl.glEnable(GL10.GL_CULL_FACE);
gl.glEnable(GL10.GL_TEXTURE_2D);
gl.glEnable(GL10.GL_COLOR_MATERIAL);
gl.glEnable(GL10.GL_LIGHTING);
gl.glEnable(GL10.GL_LIGHT0);
gl.glEnable(GL10.GL_LIGHT1);
gl.glActiveTexture(GL10.GL_TEXTURE0);
gl.glClearColor(0.4f, 0.4f, 0.5f, 1);
int[] textures = new int[2];
gl.glGenTextures(2, textures, 0);
texHoneyCube.setTexture(gl, context, textures[0], R.drawable.honeycomb_512);
texDroidCube.setTexture(gl, context, textures[1], R.drawable.
gingerbread_256);
}
Zunächst erstellen Sie eine neue Instanz von
GLSurfaceView innerhalb der onCreate()-Methode
einer Activity-Klasse. Für eine Vollbild-Ansicht
setzen Sie diese View als Parameter
für den Aufruf von setContentView
() . Über onPause()- und onResume()-Ereignisse
müssen Sie die GLSurfaceView-Instanz
explizit benachrichtigen. Überschreiben Sie
dazu die entsprechenden Callback-Methoden
in der Activity und rufen Sie die gleichen
Methoden am GLSurfaceView-Objekt auf.
Nun erstellen Sie eine leere Implementierung
einer GLSurfaceView.Renderer-Klasse.
Ihre Activity-Klasse sieht nun ähnlich wie
der Code in Listing 1 aus (in der Datei Easy-
3DActivity.java), wobei wir Debugging-
Code und Anmerkungen zur besseren Lesbarkeit
entfernt haben.
Setup der GUI
Für die grafische Oberfläche treffen Sie die
wichtigsten Einstellungen innerhalb der Methode
onSurfaceCreated(). Hier stellen Sie
Tiefentest, Client-Zustände, Culling, Hinting,
Lichter und Texturen ein, sowie die zahlreichen
anderen Attribute, die Sie in Ihrer GL-
Anwendung aktivieren, deaktivieren oder
mit einem bestimmten Wert versehen wollen.
Obwohl Sie hier auch Hilfsklassen für
die Bildsynthese initialisieren und Texturen
erstellen können, ist dieser Ort nicht für das
Konfigurieren von Elementen der Projektionsfläche
und des Modellbereichs geeignet.
Listing 2 zeigt eine übliche Konfiguration
für eine GL-Oberfläche mit Shading, Lichtern
und Texturen.
Kennen Sie sich in OpenGL ES im Allgemeinen
gut aus, sollte Ihnen Listing 2 ziemlich
bekannt vorkommen: Es geht hier um
Listing 3: Das Ansichtfenster
public void onSurfaceChanged(GL10 gl, int
width, int height) {
gl.glViewport(0, 0, width, height);
float ratio = (float) width / height;
gl.glMatrixMode(GL10.GL_PROJECTION);
gl.glLoadIdentity();
GLU.gluPerspective(gl, 35, ratio, 1,
500);
GLU.gluLookAt(gl, 0, 0, 12f, 0, 0, 0, 0,
1, 0f);
// ambient/diffuse hidden
gl.glLightfv(GL10.GL_LIGHT0, GL10.GL_
POSITION, new float[] { ‐20f, 20f, 0f, 1 },
0);
gl.glLightfv(GL10.GL_LIGHT1, GL10.GL_
POSITION, new float[] { 5f, ‐5f, 7f, 1 },
0);
}
86
02/2011 smart-developer.de

Entwicklung
Android und OpenGL
eine standardmäßige Konfiguration für
OpenGL, außer der Stelle für die Texturen.
Hier benutzten wir eine Hilfsklasse für einen
Würfel, worauf wir später noch zurückkehren.
Zuerst führen Sie aber die OpenGL-Konfiguration
zu Ende.
Ansichtfenster und Projektion
Nach den Grundeinstellungen für OpenGL
stellen Sie nun im nächsten Schritt das Ansichtfenster
(Viewport) ein. Ihre Anwendung
erhält die allerersten Informationen über das
Ansichtfenster in der onSurfaceChanged()-
Rückrufmethode. Mit dem Aufruf dieser Methode
bekommt die Anwendung Informationen
über die Abmessungen der Zeichnungsfläche
eines bestimmten Gerätes. Die allerwichtigste
Information für die meisten Anwendungen
ist hier das Seitenverhältnis des
Bildschirms. Wie bei den meisten OpenGL-
Implementationen üblich, konfigurieren Sie
zuerst die Projektionsmatrix und fügen dann
alle Objekte hinzu, bei denen es sinnvoll ist,
sie innerhalb der (oder in Relation zur) Projektionsfläche
zu definieren.
Listing 3 zeigt eine perspektivische Konfiguration
sowie den Standort des Betrachters.
Im Folgenden fügen Sie diesem Raum einige
Lichtquellen hinzu. (Die Lichtquellen sind
grundsätzlich relativ zum Betrachter und fix
platziert, unabhängig davon, wie viele Objekte
sich in der Szene bewegen. Lichter von
Szenen-Objekten im Modellraum einzuführen,
ist mit mehr Aufwand auch möglich.)
Listing 7: setTexture()
mCoordinateBuffer = OpenGLUtilities
.getFloatBufferFromFloatArray(textu
reCoords);
mTextureID = textureID;
gl.glBindTexture(GL10.GL_TEXTURE_2D,
mTextureID);
Bitmap bitmap = BitmapFactory.
decodeResource(c.getResources(),
drawableID);
Bitmap bitmapSq = Bitmap
.createScaledBitmap(bitmap, 512, 512,
false);
GLUtils.texImage2D(GL10.GL_TEXTURE_2D, 0,
bitmapSq, 0);
bitmap.recycle();
bitmapSq.recycle();
gl.glTexParameterf(GL10.GL_TEXTURE_2D,
GL10.GL_TEXTURE_MIN_FILTER,
GL10.GL_NEAREST);
gl.glTexParameterf(GL10.GL_TEXTURE_2D,
GL10.GL_TEXTURE_MAG_FILTER,
GL10.GL_LINEAR);
Beachten Sie noch die in Listing 3 verwendete
GLU-Hilfsklasse, welche die Entsprechung
für GLUT (OpenGL Utility Toolkit) in
Android darstellt.
Frames zeichnen
Mit dem soeben konfigurierten OpenGL ES
können Sie bereits zeichnen. Zum Zeichnen
wird die onDrawFrame()-Rückrufmethode aufgerufen.
In Ihrer Implementierung dieser Methode
legen Sie dann alle regulären OpenGL-
Aufrufe für die Erstellung einer Szene ab.
Listing 4 zeigt den Inhalt einer ziemlich einfachen
Implementierung für die
onDrawFrame()-Methode, die einen Honeycomb-Würfel
zeichnen soll.
Wie Listing 4 zeigt, ist das Zeichnen mit
OpenGL ES auf Android sehr ähnlich, wenn
nicht gleich, wie auf anderen Plattformen.
Allerdings sehen Sie hier eine andere Referenz
zu einer Klasse für das Zeichnen eines
Würfels. Als Nächstes schildern wir die
damit zusammenhängenden Besonderheiten.
Umgang mit Puffern
Wie es oft der Fall im OpenGL-Gebrauch ist:
Arrays speichern Eckpunkte, Normalen und
Indizes. Diese Arrays können Sie anfangs mit
Listing 4: onDrawFrame()
public void onDrawFrame(GL10 gl) {
}
gl.glClear(GL10.GL_COLOR_BUFFER_BIT | GL10.GL_DEPTH_BUFFER_BIT);
gl.glMatrixMode(GL10.GL_MODELVIEW);
gl.glLoadIdentity();
gl.glTranslatef(0f, 0f, 0f);
gl.glRotatef(mRotateAngle, 1f, 1f, 0f);
texHoneyCube.draw(gl);
...
Listing 5: OpenGL-fähiger Puffer
ByteBuffer tempBuffer = ByteBuffer.allocateDirect(array.length * 4);
tempBuffer.order(ByteOrder.nativeOrder());
FloatBuffer buffer = tempBuffer.asFloatBuffer();
buffer.put(array);
buffer.position(0);
Listing 6: Hilfsmethoden
private FloatBuffer mVertexBuffer;
float vertices[] = {1f, 0f, 0.5f, .... };
// Inside‐Methode vor dem Gebrauch:
mVertexBuffer = OpenGLUtilities.getFloatBufferFromFloatArray(vertices);
// Wenn während des Zeichnens verwendet:
gl.glVertexPointer(3, GL10.GL_FLOAT, 0, mVertexBuffer);
smart-developer.de 02/2011 87

Entwicklung
Android und OpenGL
Über die Autoren
Shane Conder und Lauren Darcey
haben zusammen mehrere
erfolgreiche Lehrbücher zu Entwicklung
mobiler Software verfasst,
darunter Android Wireless
Application Development und
SAMS Teach Yourself Android
Application Development in 24
Hours. Sie erreichen die beiden
per androidwirelessdev+sm@
gmail. com oder über den Blog
http:// androidbook. blogspot. com
sowie auf Twitter unter http://​
twitter. com/ androidwireless.
Infos
[1] Quellcode zum Artikel:
http:// code. google. com/ p/​
android‐opengl‐smartdeveloper/
[2] Android Leitlinien zu
3D-Entwicklung:
http:// developer. android.​
com/ guide/ topics/ graphics/​
opengl. html
[3] Wright, Richard S., Nicholas
Haemel, Graham Sellers und
Benjamin Lipchak: OpenGL
SuperBibleAusgabe 5.; Addison-Wesley
Professional,
2010. ISBN-13: 978-
0321712615
[4] Munshi, Aaftab, Dan Ginsburg
und Dave Shreiner.
OpenGL(R) ES 2.0 Programming
Guide. Addison-Wesley
Professional, 2008.
ISBN-13: 978-0321502797
[5] Android-SDK Download:
http:// developer. android.​
com/ sdk/ index. html
[6] Android-NDK:
http:// developer. android.​
com/ sdk/ ndk/ overview. html
[7] Android Entwicklerblog:
http:// android‐developers.​
blogspot. com/ ? hl=en
Java definieren, aber sie müssen in einem reservierten
Bereich im Speicher aufbewahrt
werden, damit die zugrunde liegende
OpenGL-Implementierung diese genau und
sicher nutzen kann. Um dies zu gewährleisten,
verwenden Sie hier die Methode allocateDirect()
der ByteBuffer-Klasse. Der Code
in Listing 5 nimmt zum Beispiel ein Array
von Float-Werten und wandelt die Werte in
einen OpenGL-fähigen Puffer um.
Da diese Art von Code ziemlich gebräuchlich
ist, erstellten wir Hilfsmethoden: die
Datei OpenGLUtilities.java ist im Easy3D-
Download enthalten. Die Verwendung ist
ziemlich einfach und wird in Pseudocode in
Listing 6 veranschaulicht.
Mit diesen für die Grafik-Programmierung
relativ einfachen Tools können Sie unter Verwendung
von OpenGL auf Android nahezu
alles zeichnen, was Sie möchten. Allerdings
sind Szenen oft mit Texturen verbessert: Ihre
Konfiguration haben Sie bereits in Listing 2
kennengelernt. Schauen Sie sich jetzt den
Aufruf der setTexture()-Methode etwas
gründlicher an.
Android NDK
In Verbindung mit OpenGL wird oft auch das
Android-NDK (Native Development Kit) angesprochen.
Das NDK [6] beinhaltet native C-APIs
für OpenGL, wodurch Anwendungen von anderen
Plattformen schneller portiert werden,
wenn diese in C geschrieben sind. Im Allgemeinen
wird aber das Android-NDK Ihre Arbeit
in Sachen Performance nicht viel voranbringen,
wenn Sie es lediglich für OpenGL-Aufrufe
verwenden. Allerdings könnten einige Berechnungen
und Algorithmen effizienter sein.
Für 3D-Grafik ist die neue Alternative zu Android-NDK:
Renderscript. Zum Zeitpunkt der
Erscheinung dieses Artikels wissen wir noch
ziemlich wenig von Renderscript, aber es ist
für die Erstellung von 3D-Grafiken in Höchstqualität
konzipiert, die mehrere Prozessorkerne
und den Grafikprozessor sehr effizient nutzen.
Um mehr Informationen über Renderscript zu
erhalten, schauen Sie sich das Blog für Android-Entwickler
[7] regelmäßig an.
Laden von Texturen
Es gibt viele Möglichkeiten, Texturen zu gestalten.
Eine sehr effiziente Methode für den
Umgang mit Texturen sehen Sie in Listing 7
(aus der EasyCube.java-Datei). Hier laden Sie
eine herkömmliche Android-Bild-Ressource
in OpenGL für den Gebrauch als Textur. Ähnlich
wie bei den Puffern, müssen Sie auch
die Textur-Koordinaten sehr genau konfigurieren.
Die Texturen verbinden Sie wie gewohnt
mit OpenGL und die Parameter konfigurieren
Sie auch wie sonst üblich. Für Android
nutzen Sie die texImage2D()-Methode
der GLUtils-Klasse. Anschließend stellen Sie
die Android-Bildobjekte mit dem Aufruf der
recycle()-Methode von der Bitmap-Klasse
sofort frei. Die Texturen sind nun sicher in
der zugrunde liegenden OpenGL-Implementierung
abgelegt.
Nachdem Sie all diese Einstellungen ordnungsgemäß
durchführten, erstellen Sie nun
leicht ähnliche Szenen wie in Abbildung 2
dargestellt. In dieser Beispielszene sind alle
Würfel animiert: Der eine wird einmal, der
andere zweimal gedreht.
Um die gesamte Implementierung dieser
einfachen Szene anzusehen, laden Sie den
vollständigen Quellcode herunter [1].
Fazit
In diesem Artikel haben Sie erfahren, wie Sie
OpenGL ES auf Android initialisieren und
konfigurieren. Sie verwendeten die Klasse
GLSurfaceView, um die Konfiguration von
OpenGL-Kontexten und Oberflächen zu vereinfachen.
Sie haben auch gelernt, wie Sie
Puffer für den sicheren Gebrauch von
OpenGL einstellen, und wie Sie Texturen einfach
laden und anwenden. Zahlreiche Bücher
sind zum Thema OpenGL und Grafik-Programmierung
erschienen – die 3D-Programmierung
ist eine sehr komplexe und vielschichtige
Thematik. Hier haben wir lediglich
an der „Oberfläche“ gekratzt, um es mit
einem Wortspiel auszudrücken. Nun sind Sie
bereit: Bauen Sie großartige 3D-Anwendungen
für Android. Sind Sie damit fertig, dann
schreiben Sie uns und erzählen uns von
ihren Erfahrungen!
● ● ●
OpenGL ES 2.0
Nahezu alle Android-Geräte unterstützen
OpenGL ES 1.x, die Version, die wir in unserer
Beispielanwendung verwendeten. OpenGL ES
2.0 verfügt über keine Shader mit festen Funktionen,
dafür aber über eine voll programmierbare
Shader-Pipeline. OpenGL ES 2.0 ist viel
flexibler, braucht aber auch viel mehr an Konfiguration.
Das Setup in Android ist sehr ähnlich,
aber Sie fordern dann OpenGL ES 2.0 als
zugrunde liegenden Kontext an. Dazu rufen Sie
die setEGLContextClientVersion()-Methode
mit dem Parameter 2 auf. So können Sie bei
allen betroffenen Rückrufen den GL10-Parameter
einfach ignorieren und stattdessen immer
die statische GLES20-Klasse aufrufen. Das
Laden und Kompilieren von Shader-Programmen
führen Sie genauso wie auf anderen Plattformen
durch.
88
02/2011 smart-developer.de

Entwicklung
Jenseits von Eclipse und Android-SDK
Android
Developer
Android-Tools für Entwickler
Eclipse und Android-SDK sind eine gute Entscheidung, wenn Sie mit der
Entwicklung für Android anfangen. Nach einer Weile werden Sie aber
mit Sicherheit zusätzliche Funktionen brauchen, die im SDK nicht enthalten
sind. In diesem Artikel zeigen wir Ihnen Bibliotheken und Werkzeuge,
die Ihnen das Leben als Entwickler erleichtern. Dave MacLean
Sie haben das Android-SDK installiert;
auf Ihrem System läuft die
kompatible Version von Eclipse
[1] mit der Erweiterung Android
Development Tools (auch bekannt als ADT,
und selbstverständlich aktualisieren Sie regelmäßig
Ihr System). Sie haben mindestens
ein gutes Buch zum Thema Android-Entwicklung
gelesen und natürlich
diese Zeitschrift; und Sie entwickeln
fleißig Anwendungen aus Spaß und
für Profit. Haben Sie jetzt alles, was Sie
für An droid brauchen?
Von Ihrer Antwort hängt es ab, ob Sie sich
das Leben etwas einfacher machen. Denn
obwohl das Android-SDK [2] und die ADT
[3] eine Menge zu bieten haben, erledigen
sie nicht alles, und früher oder später werden
Sie etwas brauchen, was nicht da ist. In diesem
Artikel mache ich Sie mit einigen ausgezeichneten
Bibliotheken und Werkzeugen
bekannt, die Sie zusätzlich zu Ihren Android-
Entwickleranwendungen nutzen können. Die
meisten der hier beschriebenen Lösungen
wurden speziell für Android entwickelt.
Guava
Die erste Bibliothek, die Sie kennenlernen
sollten, heißt Guava [4] und stammt von
Google. Es gibt tatsächlich einige Android-
Programme von Google, die von Guava abhängig
sind. Guava ist eine Klassenbibliothek,
die viele Lücken füllt. Nehmen wir
zum Beispiel an, Sie benötigen einige Operationen
für Zeichenketten, die Sie in der standardmäßigen
Strings-Klasse nicht finden.
Oder Sie wollen die Validität von Parametern
überprüfen. Guava bietet in diesen
beiden Fällen eine große
Hilfe. Es ist quelloffen, sehr
leistungsstark und stabil. Die
Klassenbibliothek laden Sie
einfach von der Downloadseite
von Guava herunter
[5]. Hier
finden
Sie neben
der gezippten
Guava Jar-
Datei auch die
API-Referenzdokumentation,
eine Anleitung für die Nutzung
von Guava mit dem
ProGuard-Obfuscator
(dem Quelltextverschleierer
für Android-Anwendungen),
sowie andere wichtige Informationen.
Hier sind einige
Beispiele für Klassen,
die Sie wahrscheinlich
sehr hilfreich finden
und auch benutzen
werden:
• com.google.common.io.LineReader
– bietet eine
Kirsty Pargeter, 123RF
smart-developer.de 02/2011 89

Entwicklung
Android-Tools für Entwickler
readLine()-Methode für jedes beliebige
java.lang.Readable-Objekt sowie einen
BufferedReader, FileReader oder String-
Reader. Es gibt noch viele andere Klassen,
die sich auf Zeichenketten und Dateien
beziehen.
• com.google.common.base.Preconditions –
bietet praktische Methoden für die Verifikation
eines Parameters und gibt ein IllegalArgumentException
mit einer aussagekräftigen
Meldung aus, wenn die Voraussetzungen
nicht erfüllt sind. Zum Beispiel
statt:
if (count 0, U
"must be positive: %s",count);
Die Preconditions-Klasse enthält auch Methoden
für die Prüfung auf NULL, für die
Überprüfung der Positionen in Arrays, in
Listen oder in Zeichenketten sowie für die
Prüfung des korrekten Zustandes und einiges
mehr. Die grundlegende Operation beruht
auf der Auswertung eines Ausdrucks
und wenn dieser sich als falsch erweist,
wird eine sinnvolle Zeichenkette ausgegeben.
Mit anderen Worten: Es überprüft
eine Behauptung (Assertion) und beschwert
sich, wenn diese Behauptung
nicht wahr ist. Diese Funktion macht
Ihnen als Entwickler beim Codeschreiben
die Überprüfung von Parametern viel leichter,
was viele Entwickler sonst sehr oft vernachlässigen.
• com.google.common.base.Splitter – als
Ergänzung zur Joiner-Klasse bietet die
Splitter-Klasse eine Split-Methode, die
Strings oder Instanzen von CharSequence-
Objekten behandelt und zum Trennen alle
Arten von Separatoren und Funktionen anwenden
kann. Als Ergebnis der Aufspaltung
entsteht ein Iterable von den Tokens,
die vorgefunden wurden. Folgendes Beispiel
zeigt, wie Sie einen String in Tokens
aufspalten und dabei die Ergebnisse trimmen,
um keine leeren Strings zu erhalten:
private static final SplitterU
mySplitter = Splitter.on(',')U
.trimResults()
.omitEmptyStrings();
Iterable tokens = U
mySplitter.split(U
"one, ,three, four,");
Der obige Code setzt tokens zu ["one",
"three", "four"]. Sie können auch andere
Tricks anwenden, um einen Splitter zu schaffen,
der jede beliebige Zeichenfolge oder
einen String von mehreren Zeichen als Separator
verwenden kann.
Ich habe lediglich einige wenige von den
zahlreichen Klassen der Guava-Bibliothek
vorgestellt. Sehen Sie sich die Bibliothek
etwas gründlicher an, es lohnt sich bestimmt.
Laden Sie dazu die Guava Zip-Datei
auf Ihren Computer herunter und entpacken
Sie die jar-Datei. Wechseln Sie dann zu
Ihrem Projekt in Eclipse über, klicken Sie mit
der rechten Maustaste auf den Projektnamen,
wählen Sie Build Path und Configure
Build Path…. Klicken Sie auf die Registerkarte
Libraries im Popup-Dialog, dann auf
die Add External JARs…-Taste. Navigieren
Sie zum Verzeichnis mit der Guava.jar-Datei,
markieren Sie diese und klicken Sie auf
Open. Zum Schluss klicken Sie auf OK und
können gleich mit Guava anfangen.
Facebook-API
Facebook stellt Entwicklern eine API zur Verfügung,
die eine Integration von Facebook-
Funktionen ermöglicht. Sie können zwar
gerne die gesamte Dokumentation hierfür
gründlich durchstudieren, aber auch gleich
die Vorteile einer Bibliothek nutzen, die eigens
für die Integration von Facebook in Android-Anwendungen
entwickelt wurde. Auf
der Website der Facebook-Bibliothek für Android
[6] finden Sie den Quellcode der Facebook-API
mit Klassen für Benutzerfreundlichkeit
zum Download. Hier finden Sie auch
Beispielanwendungen und eine Kopie der
Facebook-App für Ihren Emulator.
Auf der Entwicklerseite von Facebook [7]
lesen Sie nützliche Informationen und Nachrichten,
die direkt von Facebook veröffentlicht
werden. Die Dokumentation über die
interne Funktionsweise von Facebook ist besonders
interessant, denn hier erfahren Sie
mehr zum Datenmodell und anderen Funktionen
von Facebook und wie Sie über soziale
Graphen navigieren.
Zum Einsatz dieser Bibliothek benötigen
Sie ein verifiziertes Facebook-Konto. Das bedeutet,
dass Sie zu Ihrem Benutzernamen
zusätzlich noch Ihre Handynummer oder
Kreditkartennummer angeben müssen. Facebook
will die Beziehung zu seinen Entwicklern
nämlich mit etwas Greifbarem sichern.
90
02/2011 smart-developer.de

Entwicklung
Android-Tools für Entwickler
Sie müssen auch Ihre Anwendung auf der
Website von Facebook registrieren, bevor Sie
dieses integrieren. Ihre Anwendung bekommt
dann eine interne ID, die den Zugriff
auf die APIs für Ihre Anwendung überhaupt
erst ermöglicht. Außerdem müssen Sie den
Nutzungsbedingungen zustimmen, um Ihre
Anwendung bei Facebook zu registrieren.
Haben Sie diese Registrierungsschritte erfolgreich
absolviert, sehen Sie das Profil für
Ihre Anwendung mit der appID, die Sie Ihrer
Anwendung auf der Android-Seite hinzufügen
müssen, damit diese einwandfrei funktioniert.
Am besten fangen Sie zuerst mit einer
der Beispielanwendungen von Facebook an,
die im Download mit enthalten sind. Eine
von denen ist sehr einfach und erhält lediglich
rudimentäre Daten, eine andere kann
Streams von Facebook (wie zum Beispiel den
News-Feed) einbinden. Ihre appID fügen Sie
der App.java-Datei hinzu. Beachten Sie, dass
diese Beispielanwendungen auch die originalen
Facebook-Grafiken für Symbole und
Schaltflächen enthalten.
Obwohl die Anweisungen von Facebook
genau erklären, wie Sie ein selbstständiges
Projekt in Eclipse für die Klassen der Benutzerfreundlichkeit
(Convenience) errichten
und diese mit Ihrem eigentlichen Projekt verbinden,
habe ich mich für eine andere Lösung
entschieden. Ich hielt es für einfacher,
die Convenience-Klassen in ein Projekt zu
importieren, die ich zuvor für eine der Beispielanwendungen
von Facebook eingerichtet
habe. Als Ergebnis hatte ich zwei Pakete
in meinem neuen Projekt: eines für die Beispieldateien
und ein anderes mit den Dateien
der Convenience-Klasse. Gehen Sie auch so
vor und benennen Sie das Beispielpaket auf
den Namen Ihrer eigenen Anwendung um.
Das einzige Problem für mich war dabei,
dass der Verweis auf eine zeichenbare Ressource
im FbDialog.java nicht aufgelöst werden
konnte. Schließlich habe ich eine Importanweisung
mit dem Namen meiner
neuen Anwendung hinzugefügt und das
Problem war gelöst.
Haben Sie auch die letzte Hürde mit dem
Android-Schlüssel überwunden (siehe Kasten
„Android Key Hash“), dann zögern Sie
nicht weiter und ändern Sie die Beispielanwendungen
je nach Wunsch. Oder studieren
Sie einfach die Funktionen der API, um einige
Facebook-Features in Ihre eigene Anwendung
einzubinden.
Android UI Utilities
Als Nächstes überlegen Sie sich, wie Sie die
Grafiken für Ihre Anwendung gestalten.
Dabei sollten Sie nicht nur an die Symbole
Ihrer Anwendung (je eines für alle Auflösungen,
die Sie unterstützen wollen) denken,
sondern auch auf Grafiken für Menüs, Registerkarten
und Benachrichtigungen achten.
Vergessen Sie auch nicht eine hochauflösende
Grafik für den Android Market zu erstellen.
Für die Bearbeitung Ihrer Grafiken
könnten Sie natürlich herkömmliche Programme
wie Photoshop oder GIMP verwenden,
aber probieren Sie doch mal das Android
Asset Studio [8] aus.
Asset Studio ist ein Online-Werkzeug, das
viele Funktionen bietet, wie Farbverbesserung,
Farbfüllung, Lesen und Einfügen von
Text, und es sorgt im Allgemeinen dafür, dass
die Bilder in Ihren Android-Anwendungen
Android Key Hash
Damit Ihre Anwendung sich mit Facebook verständigen
kann, erledigen Sie noch einen weiteren
Integrationsschritt: Auf der Website von
Facebook finden Sie in Ihren App Settings unter
Mobile and Devices ein Feld namens: Android
Key Hash. Geben Sie hier Ihr Zertifikat als Hash-
Schlüssel-Wert ein. Diesen Wert erhalten Sie
laut Anweisungen, indem Sie folgende Befehle
in der Kommandozeile Ihres Rechners ausgeben:
keytool ‐exportcert U
‐alias androiddebugkey U
‐keystore ~/.android/debug.keystore U
| openssl sha1 ‐binary U
| openssl base64
Diese Anweisungen sind zwar korrekt, gelten
aber nur für den Fall, dass Sie Ihre Anwendung
gerade entwickeln und in einem Emulator oder
auf Ihrem eigenen persönlichen Gerät testen,
nicht aber bei einer Veröffentlichung im Market.
Dazu exportieren Sie das Zertifikat, das Sie zum
Signieren der Produktiv-Version Ihrer Anwendung
verwenden, das hoffentlich in einem separaten
Keystore unter einem differenten Alias
aufbewahrt wird. Auch wenn Sie Mac oder
Linux verwenden, kann es vorkommen, dass
OpenSSL nicht out of the Box läuft. Unter Linux
installieren Sie OpenSSL sehr einfach mit
einem Befehl wie:
sudo apt‐get install openssl
Unter Windows oder Mac suchen Sie nach
einem Download und installieren die OpenSSL-
Software, damit Sie den Befehl openssl verwenden
können. OpenSSL ist freie Software und für
sehr viele Plattformen erhältlich, wählen Sie
also die Version aus, die Ihrem System am besten
entspricht.
smart-developer.de 02/2011 91

Entwicklung
Android-Tools für Entwickler
Infos
[1] Eclipse:
http:// www. eclipse. org/
[2] Android-SDK:
http:// developer. android.​
com/ sdk/ index. html
[3] Android Development Tools:
http:// developer. android.​
com/ sdk/ eclipse‐adt. html
[4] Guava: http:// code. google.​
com/ p/ guava‐libraries/ wiki/​
Release08
[5] Guava-Bibliotheken:
http:// code. google. com/ p/​
guava‐libraries/
[6] Android Facebook-Bibliothek:
http:// developers.​
facebook. com/ docs/​
reference/ android
[7] Facebook Entwicklerseite:
http:// developers. facebook.​
com
[8] Android Asset Studio:
http:// android‐ui‐utils.​
googlecode. com/ hg/​
asset‐studio/ dist/ index. html
[9] Suche nach Android-Projekten:
http:// code. google. com/​
hosting/ search?​
q=label:Android
[10] ZXing: http:// code. google.​
com/ p/ zxing/
[11] csipsimple:
http:// code. google. com/ p/​
csipsimple/
[12] Subversion-Download:
http:// subversion. apache.​
org/ packages. html
[13] ACRA-Bibliothek:
http:// code. google. com/ p/​
acra/
Abb. 1: Android Symbole in den gängigen Auflösungen
mit einem Foto von meinem Hund.
einfach gut aussehen. Nach dem Setup klicken
Sie einfach auf Download .ZIP und
laden sich eine ZIP-Datei mit den gewünschten
Bilddateien in den unterschiedlichsten
Auflösungen herunter. Die einzige Einschränkung
besteht darin, dass das Android Asset
Studio eindeutig für den Chrome-Browser
optimiert wurde. In anderen Browsern funktioniert
es je nach Lust und Laune.
Das Android Asset Studio hat eingeschränkte
Funktionen in dem Sinne, dass Sie
die Bilder selbst nicht darin erstellen. Sie
kommen also um Photoshop oder GIMP zur
Erstellung des Ausgangsbildes nicht komplett
herum. Aber für die fertigen Bilder in den
verschiedenen Auflösungen für Ihre Anwendung
verwenden Sie am besten Asset Studio.
Seine einfache Handhabung veranschaulicht
Abbildung 1, als Ergebnis eines Fotos von
meinem Hund Max. Ich habe es ins Asset
Studio hochgeladen und mit einigen einfachen
Tastendrücken in der Mitte eines Kreises
platziert. Anschließend klickte ich einfach
auf Download und fertig waren meine
Bilddateien.
Das Asset Studio ist Teil der Android UI
Utilities. Dazu gehören auch das Pencil-Tool
und die Symbolvorlagen für Photoshop. Das
Pencil-Tool ist ein Plugin für Firefox, es kann
aber auch selbstständig laufen. Mit diesem
Tool erstellen Sie mit Leichtigkeit Zeichnungen
und insbesondere GUI-Prototypen.
Arbeiten Sie mit Photoshop, dann werden
Sie die Symbolvorlagen für sehr nützlich halten.
Die Photoshop-Templates finden Sie auf
dem Reiter Downloads auf der Webseite für
Android UI Utilities (auch links unten), die
entsprechende Datei finden Sie unter dem
Namen icon_templates.zip.
Noch mehr Android-Projekte
Ich habe Ihnen nur einige Projekte von der
Hostingseite für Android-Projekte von
Google vorgestellt, aber Sie finden viel mehr
Projekte hier, und alle sind quelloffen. Für
eine detaillierte Suche nach Android-Projekten
verwenden Sie einfach die URL [9] aus
dem Infokasten. Diese Anfrage wird Tausende
von Treffern liefern: Projekte, die in irgendeiner
Weise mit Android in Zusammenhang
stehen; geben Sie weitere Schlüsselwörter
an und verfeinern Sie die Suche nach
Belieben. Das Ergebnis ist eine wahre
Schatztruhe von Anwendungen und Quellcode,
die Sie zur Vertiefung Ihrer Android-
Kenntnisse nutzen können, darunter Klassiker
wie ZXing, die sehr originelle Barcode-
Anwendung [10] oder csipsimple, eine SIP-
Anwendung für VoIP-Anrufe [11].
Jede Projektseite ist in mehrere Reiter aufgeteilt.
Hier lernen Sie verschiedene Aspekte
des Projektes kennen: In der Regel gibt es je
einen Reiter für den Download, für das Wiki,
für eine Liste von bereits bekannten Fehlern,
für die Dokumentation und für den Quellcode
selbst. Normalerweise können Sie den
Quellcode gleich in Ihrem Browser betrachten:
Klicken Sie dazu einfach auf den Reiter
Browse unter Source. In den meisten Fällen
können Sie den Quellcode mit dem Subversion-System
auch direkt auf Ihren lokalen
Rechner herunterladen. Wenn Sie Subversion
noch nicht installiert haben, laden Sie die
entsprechende Version für Ihr Betriebssystem
herunter [12]. Für Subversion gibt es übrigens
auch Eclipse-Plugins.
ACRA
Zum Schluss komme ich wieder zu den nützlichen
Bibliotheken zurück und stelle nun
die Absturzberichte vor. Wie Sie vielleicht
wissen, liefert der Android Market zwar einige
Fehlerprotokolle an den Entwickler zurück,
aber diese Informationen sind meistens
Listing 1: ACRA-Erweiterung
@ReportsCrashes(formKey = "your form key
here")
public class MyApplication extends
Application {
@Override
public void onCreate() {
// Folgende Zeile initialisiert ACRA
ACRA.init(this);
super.onCreate();
}
}
92
02/2011 smart-developer.de

Entwicklung
Android-Tools für Entwickler
nicht ausführlich genug. Zum Glück hilft hier
die ACRA-Bibliothek weiter [13]. ACRA sendet
die Informationen grundsätzlich an eine
zentrale Stelle, immer wenn Ihre Anwendung
abstürzt. Üblicherweise ist dies ein Spreadsheat
in Google Text & Tabellen, die Sie im
Voraus erstellt haben. Seit Kurzem unterstützt
das Tool aber auch andere Möglichkeiten.
So können Sie ein benutzerdefiniertes
Skript aufrufen oder eine E-Mail erhalten.
Die Implementierung der Google Text & Tabellen-Option
ist ziemlich einfach: Erstellen
Sie zunächst eine Tabelle anhand der dafür
vorgesehenen Schablone in Google Text & Tabellen
unter Ihrem Google-Konto unter Berücksichtigung
des Formularschlüssels.
Fügen Sie dann die Bibliothek Ihrem Projekt
auf ähnliche Weise hinzu, wie ich es Ihnen
bereits bei der Guava-Bibliothek geschildert
habe. Als Nächstes zeigt Listing 1, wie Sie
android.app.Application ergänzen, indem
Sie eine Anmerkung zu ihrer Definition hinzufügen
und die ACRA-Bibliothek in on-
Create() initialisieren. Mit anderen Worten:
Sie fügen eine neue Klasse zu Ihrem Projekt
hinzu, die MyApplication benannt und eine
Subklasse von android.app.Application
wird. Dann können Sie es wie in Listing 1 gestalten.
Da die meisten Benachrichtigungsoptionen
Informationen über das Internet senden,
müssen Sie eine Erlaubnis für android.
permission.INTERNET zur AndroidManifest.
xml-Datei hinzufügen. Wenn Sie die Manifest-Datei
editieren, denken Sie daran, gleich
den Namen für Ihre Anwendung auf My-
Application zu ändern. Das war’s! Wenn von
nun an Ihre Anwendung auf irgendeinem
Gerät irgendwann abstürzt, entsteht ein
neuer Eintrag in Ihrer Tabelle mit detaillierten
Informationen über die Gerätekonfiguration
und natürlich auch zu den Einzelheiten
des Crash. Achten Sie darauf, dass Sie den
Endanwender vor dem Installieren der Anwendung
über die Tatsache in Kenntnis setzen,
dass diese Ereignisse geloggt und über
das Internet versendet werden.
Fazit
Ich habe Ihnen in diesem Artikel eine Auswahl
an interessanten Bibliotheken und
Tools vorgestellt, um Ihre Entwicklungsarbeit
für Android zu erleichtern. Wir erleben eine
sehr aufregende Zeit für Android-Entwickler
— nutzen Sie die Chance! ● ● ●
Der Autor
Dave MacLean ist IT Enterprise
Architect von Beruf, lebt und arbeitet
in Jacksonville (FL). Als
Absolvent der University of
Waterloo in Systems Design Engineering
im Jahre 1985, arbeitete
er auf dem Gebiet Software-
Entwicklung, darunter auch mehrere
Jahre in Silicon Valley (FMC,
Sun, Trimble Navigation) bevor
er nach Florida zog. Dave ist Mitverfasser
der Bücher Pro Android
2 und Pro Android 3. Sie erreichen
ihn unter davemac327@
gmail.com, oder besuchen Sie
seine Website unter http:// www.​
androidbook. com.
4 Hefte
nur
E 26,90
Smart Developer
Alles zum Thema mobile Betriebssysteme
Für Smartphone-Entwickler und Entscheidungsträger
in der mobilen Entwicklung
JETZT auch
als PDF
ErhälTlich!
Meine Vorteile:
+ Ich erhalte vier Ausgaben des Smart
Developer frei Haus für e 26,90 statt
e 31,60 (Preise gelten für Deutschland)
+ Das Abonnement ist jeder zeit kündbar.
Ich gehe kein Risiko ein
+ Aktuell informiert mit allen Neuigkeiten
rund um Tablets und Smartphones
Jetzt bestellen unter:
www.SmART-DeveloPeR.De/Abo
Telefon 07131 / 2707 274 • Fax 07131 / 2707 78 601 • E-Mail: abo@smart-developer.de

Power User
WebOS 2.1
©Hewlett-Packard
Die wichtigsten Neuerungen von webOS 2.1
Neues
webOS
Noch im Oktober 2010 kündigte HP die neue webOS-Version 2.0 an, tatsächlich
erhältlich ist sie jedoch erst seit März 2011, dafür gleich als Version
2.1. Wir haben uns die neue Software angeschaut und zeigen, wie
Sie das Update vornehmen. Marcel Hilzinger
Infos
[1] Offizielle Update-Doku von
HP: http:// www. palm. com/​
us/ support/ handbooks/ pre/​
webOS_WNWC_de. pdf
[2] WebOS-SDK für Linux:
http:// developer. palm. com/​
index. php? option=com_con
tent& view=article& id=1585
Die wichtigsten Neuerungen von
webOS 2.1 sind „Just Type“ für
die schnelle Suche oder Nachrichtenerstellung,
das Stapeln bzw.
Gruppieren von Karten und die neuen Kontoeinstellungen.
Bei der Account-Verwaltung
bringt webOS deutliche Vorteile gegenüber
Android oder iOS mit, da Sie bei webOS für
praktisch alle Accounts separat festlegen
können, welche Komponenten (Adressbuch,
Termine, Notizen, etc) Sie synchronisieren
möchten. Komplett neu in der aktuellen
webOS-Version ist zudem der Support für
VPN-Verbindungen und der Präsentationsmodus
im Zusammenspiel mit dem Touchstone-Ladegerät.
Legen Sie das Smartphone
auf den Ladestein, schaltet es sich automatisch
in diesen Modus um, der in der Grundeinstellung
eine Uhr anzeigt.
Der Textassistent
Schreiben Sie ab und zu in Fremdsprachen
oder benutzen Sie oft Slang-Ausdrücke, dann
dürften Sie auch schnell über den neuen
Textassistenten stolpern. Er korrigiert Wörter
direkt bei der Eingabe, was bei der ersten
Anwendung für etwas Verwirrung sorgen
kann. Die geänderten Begriffe lassen sich
zum Glück per Antippen zurückändern und
dem eigenen Wörterbuch hinzufügen. Kommen
Sie mit der Autokorrektur gar nicht klar,
dann können Sie die einzelnen Funktionen
im Textassistenten auch ausschalten. An gleicher
Stelle bearbeiten Sie auch das Benutzerwörterbuch.
Ein Import ist leider nicht möglich.
Praktisch sind auch die Kürzel für feste
Textbausteine in E-Mails, Nachrichten und
anderen Anwendungen.
Obwohl HP die Bedienung des Telefons und
des Adressbuchs durch Favoriten etwas erleichtert
hat, gehört die Kontaktverwaltung
weiterhin nicht zu den benutzerfreundlichsten
im Smartphone-Feld.
Just Type
Bei „Just Type“ handelt es sich um mehr als
eine bloße Schnellsuche. Wie der Name bereits
sagt, muss man sich in vielen Fällen erst
nach dem Schreiben Gedanken darüber machen,
was aus einem Text werden soll. Unter
webOS 2.1 beginnt man einfach zu tippen
und entscheidet sich quasi während des
Tippvorgangs, ob man eine Twitter-Nachricht
senden, seinen Facebook-Status aktualisieren
oder nach einer App im App Catalog suchen
möchte. Dabei sind die verknüpften Aktionen
in die zwei Gruppen „Starten und Suchen“
und „Schnellaktionen“ unterteilt. Über
eine Schnellaktion legen Sie zum Beispiel
einen neuen Termin an oder versenden eine
Nachricht. Sämtliche Aktionen lassen sich
anpassen und um eigene Einträge ergänzen.
Karten sortieren
Die zweite wichtige Neuerung, die auch in
webOS 3.0 als großes Feature angepriesen
wurde, betrifft die Kartenansicht von webOS.
Klicken Sie zum Beispiel im Browser auf
einen Link mit target="_blank", dann öffnet
webOS dazu eine neue Karte. Diese bündelt
das OS aber automatisch mit der bereits offenen
Karte, sodass sogenannte Stacks entstehen.
Die Stacks sind App-unabhängig, man
kann sich somit auch einen Stack mit einem
Spiel, einer Webseite und einem Chat-Programm
zusammenstellen. Auch wenn dieses
94
02/2011 smart-developer.de

Power User
WebOS 2.1
Feature in erster Linie
auf Tablets von großem
Vorteil ist, vereinfacht
es auch die Arbeit
unter webOS auf
einem Smartphone.
Die vorgegebenen
Karten für Anwendungen,
Extras und System
lassen sich zudem beliebig
umbenennen, löschen,
verschieben
oder durch weitere ergänzen.
Das bisherige
Limit der drei Startseiten
entfällt somit.
Abb. 1: Die Funktion „Just type“
Lohnt sich das
Update?
Die für den Sommer
angekündigten Tablets und neuen webOS-
Smartphones liefert Hewlett-Packard bereits
mit webOS 3.0 aus. Wann und ob das Pre
Plus bzw. das Pixie Plus überhaupt in den
Genuss von webOS 3.0 kommen werden,
steht zurzeit noch nicht fest. Insofern ist das
Update mit seinen Features zum aktuellen
Zeitpunkt eine gute Wahl. Eine echte Performance-Verbesserung
dürfen Sie hingegen
nicht erwarten. Zudem haben mit der neuen
Version auch einige Fehler den Weg in
bietet mehr als eine bloße Schnellsuche
bei Google & Co.
Abb. 2: Die Stapel erleichtern die
Navigation bei vielen geöffneten
Karten und sorgen für Ordnung.
webOS gefunden: So beklagte sich unser Pre-
Plus-Testgerät zuweilen über Verbindungsprobleme
mit dem Google-Account. Hier hilft
es, den bestehenden Account zu löschen und
neu anzulegen. Die Probleme treten nur bei
Benutzern auf, die über einen Gmail- und
einen Googlemail-Account verfügen. Zudem
funktionieren auch einige Apps nicht mehr
mit der neuen webOS-Version, zum Beispiel
der bislang einzige halbwegs brauchbare QR-
Code-Scanner QRdeCODEr.
● ● ●
Abb. 3: Der Präsentationsmodus
schaltet sich ein, sobald Sie das Pre
auf den Touchstone legen.
WebOS-Update
Abb. 4: Während des Firmware-Upgrades darf die USB-Verbindung nicht abbrechen, sonst
droht Datenverlust. Im schlimmsten Fall wird das Handy sogar unbenutzbar.
o2 Deutschland liefert seit Februar das Update auf webOS 2.1 aus.
Allerdings kommt es bei den meisten Geräten nicht automatisch
over the air an, sondern muss manuell heruntergeladen werden
(Stand April 2011). Besitzen Sie ein Palm Pre Plus oder Pixie Plus,
dann gehen Sie wie folgt vor, um Ihr Smartphone auf webOS 2.1
aufzufrischen:
Öffnen Sie im Browser die Seite palm. com/ rom und scrollen Sie
nach unten, um eine detaillierte Anleitung in Englisch für das Update
zu erhalten. Das Update erfolgt im Wiederherstellungsmodus
des Palm-Smartphones über die Java-Software webOS Doctor.
Das Upgrade funktioniert unter Windows, Mac OS (10.5 und 10.6)
und Linux. Linux-Benutzer benötigen neben der Java-Software das
Paket palm‐novacom, das Teil des WebOS-SDK für Linux ist [2]. Die
Seriennummer finden Sie auch auf Ihrem Palm unter System | Geräteinfos
| Seriennummer. Der komplizierte Schritt über das Netzteil
ist deshalb nötig, weil das Smartphone vor dem Update komplett
geladen wird.
Hat alles geklappt, dann erscheint beim Loslassen
des Lautstärke-Buttons (lauter) ein USB-
Symbol und Sie können nun den webOS-Doctor
starten und den Anweisungen im Java-Programm
folgen (Abbildung 4). Nach dem
Flash en der Firmware muss das Smartphone
neu gestartet werden. Das Pre Plus/​Pixie Plus
zeigt dann anstelle des bisherigen Palm-Logos
das HP-Logo an.
Beachten Sie beim Update, dass Sie sich neu an
Ihrem Palm-Account anmelden müssen und
dass dieser Vorgang nur über das Datennetz
funktioniert, aber nicht per WLAN. Zudem spielt
webOS dann auch sogleich die Daten aus dem
Backup wieder ein. Wenn Sie sich gerade im
Ausland befinden, müssen Sie somit mit Roaming-Kosten
rechnen.
smart-developer.de 02/2011 95

PowerUser
Mobile Benchmarks
Benchmark-Programme für Android und iOS
Volle
Leistung
Wer ein Smartphone
kauft, muss sich dabei
nicht nur für eine Plattform
entscheiden, sondern
auch die Leistung
des zukünftigen Rennpferds
einschätzen können.
Benchmarks helfen
dabei. René Hesse
Viktor Gmyria, 123rf.com
Abb. 1: AnTuTus System Benchmark
testet auch die Performance von
Micro-SD-Karten.
Abb. 2: Linpack gibt es nicht nur in
der hier gezeigten iOS-Version, sondern
auch für Android.
Wie wichtig ist eine große Auswahl
an Apps? Welche Display-Diagonale
gefällt am besten?
Benötigt man eine Hardware-Tastatur
und braucht man bereits einen
Dual-Core-Prozessor? Alle diese Dinge können
am Ende entscheidend bei der täglichen
Nutzung eines Smartphones sein. Doch
woher soll man Anhaltspunkte, für die Leistungsfähigkeit
eines Smartphones nehmen?
Ein iPhone mit einem Android-Smartphone
zu vergleichen, ist gar nicht so einfach, wie
man sich das vorstellt. Durch die unterschiedlichen
Betriebssysteme und deren teilweise
tiefgreifende Anpassung an die Hardware,
können sich Leistungsunterschiede ergeben,
welche sich nicht von den reinen
technischen Daten ableiten lassen.
Mit Benchmarks vergleichen
Hier kommen die Benchmarks ins Spiel.
Diese sollen einen Vergleich der Rechenkraft
sowie der Grafikleistung verschiedener Geräte
ermöglichen. Innerhalb einer Plattform
ist dies auch problemlos möglich. So lassen
sich zum Beispiel verschiedene Android-Geräte
untereinander mittlerweile sehr gut ver-
gleichen. Will man aber die Leistung eines
iPad mit einem Android-Tablet vergleichen,
wird die Aufgabe schon schwieriger.
Wer mit einem Grafik-Benchmark die 3D-
Leistung eines Gerätes messen will, sollte
zum Beispiel bedenken, dass hier je nach
Benchmark auch die Displayauflösung einen
entscheidenden Punkt ausmacht. So kann es
durchaus vorkommen, dass ein Gerät mit
schwacher CPU und niedriger Displayauflösung
besser abschneidet, als ein Gerät mit
einem hochauflösenden Display und starker
CPU. So müssen zum Beispiel bei der Auflösung
HVGA (320 x 480 Pixel) nur 153'600
Pixel berechnet werden. Aktuelle Smartphones,
die mit einem WVGA-Display ausgestattet
sind (480 x 800 Pixeln), müssen hingegen
384'000 Pixel berechnen.
Die folgenden Programme haben sich in
den letzten Monaten bewährt, um einen haltbaren
Anhaltspunkt für die Leistungsfähigkeit
von mobilen Geräten zu erhalten. Dabei
ist in jedem Fall zu beachten, dass die gefühlte
Geschwindigkeit des Nutzers, erheblich
von der gemessenen abweichen kann.
Gerade bei den Top-Smartphones und Tablets
liefern die Benchmarks manchmal Resultate,
96
02/2011 smart-developer.de

PowerUser
Mobile Benchmarks
die sich nur um Millisekunden unterscheiden.
Zudem können weitere Faktoren die
Testergebnisse beeinflussen.
Quadrant und An3DBenchXL
Der Quadrant-Benchmark [1] ist einer der ältesten,
den es für Android gibt, leider auch
einer der ungenauesten. Er erlaubt eine recht
grobe Unterteilung der Leistungsfähigkeit,
die sich allerdings durch spezielle Werte in
alternativen ROMs beeinflussen lässt.
An3DBenchXL [2] nutzt die Android-Version
der jPCT 3D-Engine, um die Leistungsfähigkeit
eines Smartphones zu ermitteln. Die
Werte beziehen sich zwar hauptsächlich auf
die grafischen Berechnungen, dennoch liefern
die Ergebnisse (Abbildung 1) recht realitätsnahe
Zahlen, die man für einen direkten
Vergleich heranziehen kann.
Smartbench 2011
Das Benchmark-Programm Smartbench [3]
ist 2011 in einer neuen Version erschienen,
welche nicht nur neue Messungen ermöglicht,
sondern durch Multicore-Unterstützung
auch erstmals realistische Werte zum Vergleich
von Single- und Multicore-Geräten bietet.
Wer bereits die alte 2010er-Version benutzt
hat, muss den Benchmark nochmal
komplett neu durchlaufen lassen, da sich die
Berechnungen grundlegend geändert haben.
Unter http:// smartphonebenchmarks. com lassen
sich diverse Werte von verschiedenen
Geräten einsehen. Generell wird in die Bereiche
Produktivität und Gaming unterteilt.
System Benchmark
Der System Benchmark von AnTuTu [4] ist
eine ansprechend umgesetzte App, die nicht
nur die CPU-Leistung sowie die 2D- und
3D-Grafik, sondern auch die Geschwindigkeit
der SD-Karte testet. Es gibt einen Online-
Vergleich direkt im Programm und Filteroptionen,
welche es erlauben, nur die Werte
bestimmter Modelle anzuzeigen. Den
System Benchmark gibt es nur für Android
(Abbildung 1).
Linpack
Der Linpack-Benchmark [5], [6] ist einer der
wenigen Tests, der einen direkten Vergleich
von Android und iOS-Geräten ermöglicht.
Hier wird anhand mathematischer Formeln
die Rechenkraft in Megaflops ausgegeben,
was zudem eine einheitliche Größe für die
Leistung von Prozessoren ist. Somit lassen
sich die Werte auch mit den Resultaten eines
Desktop-PCs oder eines Notebooks vergleichen,
nicht nur zwischen iOS und Android.
SunSpider und BrowserMark
Da bekanntlich die Browser von iOS-und Android-Geräten
auf der WebKit-Engine basieren,
erlaubt WebKit einen plattformübergreifenden
Vergleich der beiden Betriebssysteme.
Mit der Hilfe von SunSpider – einer Benchmark-Suite
zum Testen der Geschwindigkeit
von JavaScript-Implementierungen – kann
man so ermitteln, wie die Systemleistung im
Browser Anwendung findet. Auch wenn der
SunSpider-Benchmark [7] nicht in erster
Linie dazu dient, plattformübergreifend die
Leistung eines Smartphones beurteilen zu
können, sondern in erster Linie die Performance
der jeweiligen WebKit-Implementierung
misst, gibt er somit ansatzweise auch
Informationen zu der darunter werkelnden
Hardware aus.
Ähnlich wie SunSpider funktioniert auch
BrowserMark [8]. Der Test liefert aber dabei
etwas andere Ergebnisse als sein Vorbild.
Auch BrowserMark führt seine verschiedenen
Belastungstests über JavaScript durch,
sodass er sich unabhängig vom eingesetzten
Betriebssystem nutzen lässt. Neben der frei
verfügbaren Version gibt es auch eine Corporate-Variante
mit Akkutest.
Speedtest.net
Auch nicht unwichtig im Alltag ist die Geschwindigkeit
der Netzwerkverbindung.
Speedtest.net (Abbildung 3) gehört zu den
meist benutzten Programmen, wenn es um
die Messung der Download- und Upload-Raten
geht. Das Tool ist für Android und iOS
verfügbar [9], [10] und seine Messungen
sind recht zuverlässig. Es besteht die Möglichkeit,
einen Server in seiner Nähe auszuwählen
und sich die Verbindungsstabilität
anzeigen zu lassen. Benutzen Sie das Tool
über WLAN, erhalten Sie einen guten Eindruck
von der Leistungsfähigkeit des verbauten
WLAN-Chipsatzes bzw. Ihres Routers, je
nach Hardware.
Wer misst, …
Trotz im Internet veröffentlichter Spitzenergebnisse
bei gewissen Tests sollten Sie sich
beim Kauf eines Smartphones nie bloß auf die
Werte von Benchmarks verlassen, sondern
sich nach Möglichkeit stets ein persönliches
Bild vom Gerät machen. Für den Vergleich
unter Freunden eignen sich die hier vorgestellten
Tools aber allemal. Last but not least eignen
sie sich gut, um eventuelle Performance-
Schwachstellen aufzuspüren und durch gut
angepasste Software zusätzliche Leistungsreserven
freizusetzen – auch nach dem Kauf
eines neuen Smartphones. ● ● ●
Abb. 3: Für iOS und Android bietet
Speedtest.net eigene Apps an.
Infos
[1] Quadrant:
https:// market. android. com/​
details? id=com.​
aurorasoftworks. quadrant.​
ui. standard
[2] An3DBenchXL: https://​
market. android. com/ details?​
id=com. threed. jpct. benchxl
[3] Smartbench: https:// market.​
android. com/ details? id=com.​
smartbench. eleven
[4] System Benchmark:
https:// market. android. com/​
details? id=com. antutu.​
ABenchMark
[5] Linpack für Android:
https:// market. android. com/​
details? id=com.​
greenecomputing. linpack
[6] Linpack für iOS:
http:// itunes. apple. com/ de/​
app/ linpack/ id380883195
[7] SunSpider:
http:// www. webkit. org/ perf/​
sunspider/ sunspider. html
[8] BrowserMark: http://​
browsermark. rightware.​
com/ browsermark/ index.​
action
[9] Speedtest für Android:
https:// market. android. com/​
details? id=org. zwanoo.​
android. speedtest
[10] Speedtest für iOS:
http:// itunes. apple. com/ de/​
app/ speedtest‐netmobile‐speed/
id300704847
smart-developer.de 02/2011 97

SErvice
Impressum
2011 — 08 — 25
higyou, 123RF
Ausgabe 03/2011 von Smart Developer erscheint
am 25. August und bringt unter anderem
Artikel zu Adobe Flex, Geo-Daten unter
iOS, Bing mit Windows Phone 7, Android-
Entwicklung und zum Mobile Payment.
Bestellen Sie jetzt ein Abo unter
www.smart-developer.de/Abo,
um keine Ausgabe zu verpassen!
Wir sind zudem ständig auf der
Suche nach Autoren und interessanten
Artikeln rund ums Thema
mobile Betriebssysteme. Sie müssen über
keine Schreibtalente verfügen, aber Sie müssen
uns etwas erzählen wollen, das Sie besonders
interessant finden: Eine tolle App,
die Sie nutzen oder sogar selbst programmiert
haben, undokumentierte Features oder
besondere Techniken, um eine Anwendung
zu entwickeln oder ein besonderes Projekt.
Sie erreichen uns unter der E-Mail-Adresse:
redaktion@smart-developer.de
HEFT-DVD Service
Unsere Datenträger werden mit größter
Sorgfalt zusammengestellt und vor der
Produktion auf Fehler geprüft. Dennoch
kann es bedingt durch die Produktionsprozesse
im Presswerk, beim Vertrieb
oder bei der Zustellung durch die
Post zu beschädigten oder fehlerhaften
Datenträgern kommen. Hegen Sie den
Verdacht, dass der Datenträger defekt
ist, dann nehmen Sie bitte über die Adresse
cdredaktion@smart-developer.de
Kontakt mit der Redaktion auf. Ist der
Datenträger tatsächlich beschädigt, erhalten
Sie von uns umgehend und unentgeltlich
einen neuen zugestellt.
MARKEN/ WARENZEICHEN
Sämtliche Marken, eingetragene Warenzeichen
und Produkt namen sind Eigentum des
jeweiligen Inhabers. Sollten wir ein Markenoder
Warenzeichen irrtümlich benutzt oder
einen Copyright-Hinweis übersehen haben,
teilen Sie uns das bitte per E-Mail an
redaktion@smart-developer.de mit, damit wir
den Eintrag korrigieren können.
Impressum
Smart Developer ist eine Publikation der
Linux New Media AG
Putzbrunner Str. 71
81739 München
Tel.: +49 (089) 99 34 110
Fax: +49 (089) 99 34 11 99
Homepage
http://www.smart-developer.de
E-Mail
Redaktion:
Abo:
Chefredakteur (v. i. S. d. P.)
Marcel Hilzinger
Redaktion
Joe Casad, Rikki Kite, Rita Sooby,
Thomas Leichtenstern
Datenträgerproduktion
Thomas Leichtenstern
Autoren dieser Ausgabe
Benjamin Nitschke, Dave MacLean, Heiko Kalista,
Joachim Sieber, Jochen Heizmann, Joe Brockmeier,
Lauren Darcy, Marcel Hil zinger, René Hesse,
Roman Bucher, Roy Suttan, Shane Conder,
Sulamita Garcia, Tam Hanna, Thomas Leichtenstern,
Tobias Thiel, Vincze-Aron Szabo
Layout
Kristina Fleischer
Titelgestaltung
Judith Erb
Bildnachweis
sxc.hu, 123rf.com, fotolia.de und andere
Sprachlektorat
Astrid Hillmer-Bruer, Elke Knitter
Übersetzungen
Ákos Tóth, Thomas Prager
Produktionsleitung
Christian Ullrich
Druck
Vogel Druck und Medienservice GmbH & Co. KG,
97204 Höchberg
Geschäftsleitung
Brian Osborn (Vorstand)
Hermann Plank (Vorstand)
Anzeigenleitung
Hubert Wiest
Marketing und Vertrieb
Tel.: +49 (0)89 / 99 34 11 23
Fax: +49 (0)89 / 99 34 11 99
Mediaberatung
D / A / CH
Petra Jaser
Tel.: +49 (0)89 / 99 34 11 24 • Fax: +49 (0)89 / 99 34 11 99
UK / Ireland
Penny Wilby
Tel.: +44 (0)1787 211 100
USA
Ann Jesse
Tel.: +1 785 841 8834
Joanna Earl
Tel.: +1 785 727 5275
Es gilt die Anzeigenpreisliste vom 01.01.2011.
Abonnentenservice
Lea-Maria Schmitt
D / A / CH
Telefon: +49 (0)7131 27 07-274
Fax: +49 (0)7131 27 07-78-601
Smart Developer Deutschland Österreich Schweiz Europa
Einzelheft- Einzelpreis und 7,90 Abopreise Euro 8,70 D,A,CH Euro 15,80 und Sfr EU 10,25 Euro
Jahresabo* 26,90 Euro 29,90 Euro 53,90 Sfr 33,90 Euro
*Smart Developer erscheint viermal jährlich
Schüler- und Studentenermäßigung: 20 Prozent
gegen Vorlage eines Schülerausweises oder
einer aktuellen Immatrikulationsbescheinigung.
Eine Haftung für die Richtigkeit von Veröffentlichungen
kann – trotz sorgfältiger Prüfung durch
die Redaktion – vom Verlag nicht übernommen
werden. Mit der Einsendung von Manuskripten
oder Leserbriefen gibt der Verfasser seine Einwilligung
zur Veröffent lich ung in einer Publikation der
Linux New Media AG. Für unverlangt eingesandte
Manuskripte oder Beiträge übernehmen Redaktion
und Verlag keinerlei Haftung.
Autoreninfos
Die Redaktion behält sich vor, Einsendungen zu
kürzen und zu überarbeiten. Das exklusive Urheber-
und Verwertungsrecht für angenommene
Manus kripte liegt beim Verlag. Es darf kein Teil des
Inhalts ohne schriftliche Genehmigung des Verlags
in irgendeiner Form vervielfältigt oder verbreitet
werden.
Copyright © 1999 - 2011 Linux New Media AG
ISSN: 2191-5199
98
02/2011 smart-developer.de

Smart Developer
Alles zum Thema mobile Betriebssysteme
Für Smartphone-Entwickler und Entscheidungsträger
4 Hefte
nur
E 26,90
JETZT auch
als PDF
ErhälTlich!
Jetzt bestellen unter:
Meine Vorteile:
+ Ich erhalte vier ausgaben des smart
developer frei Haus für e 26,90 statt
e 31,60 (preise gelten für deutschland)
+ das abonnement ist jeder zeit kündbar.
Ich gehe kein risiko ein
+ aktuell informiert mit allen Neuigkeiten
rund um tablets und smartphones
www.smart-developer.de/abo
Telefon 07131 / 2707 274 • Fax 07131 / 2707 78 601 • E-Mail: abo@smart-developer.de

SM
Intel AppUp developer program –
einfach profitieren
Apps und Spiele für Tablets sowie Netbooks erstellen, portieren und verkaufen:
Jetzt ganz einfach. Wir bieten Entwicklern eine zukunftsorientierte Plattform mit
vielen Fördermöglichkeiten und fairer Umsatzbeteiligung – nutzen Sie die Chance,
sich in einem wachsenden Markt zu positionieren und steigern Sie den Absatz
Ihrer Portierungen sowie Neuentwicklungen.
Hier können Sie sich anmelden und erhalten weitere Informationen:
appdeveloper.intel.com
Alle Infos unter
http://appdeveloper.intel.com/en-us/join
Melde dich an beim
Intel and Intel AppUp are trademarks of Intel Corporation in the U.S. and/or other countries.