Android-Apps mit HTML, CSS und JavaScript

180 Pages·2011·4.37 MB·German

by  Jonathan Stark

Mit Standard-Web-Tools zur nativen App
Android
Apps
mit HTML, CSS und JavaScript
Jonathan Stark
O’Reilly
Deutsche Übersetzung von Lars Schulten
wiwobooks 2.0

Android Apps mit HTML, CSS und
JavaScript
Jonathan Stark
Deutsche Übersetzung
von LarsSchulten
Beijing(cid:2)Cambridge(cid:2)Farnham(cid:2)Köln(cid:2)Sebastopol(cid:2)Tokyo
DieInformationenindiesemBuchwurdenmitgrößterSorgfalterarbeitet.Dennochkönnen
Fehlernichtvollständigausgeschlossenwerden.Verlag,AutorenundÜbersetzerübernehmen
keinejuristischeVerantwortungoderirgendeineHaftungfüreventuellverbliebeneFehlerund
derenFolgen.
AlleWarennamenwerdenohneGewährleistungderfreienVerwendbarkeitbenutztundsind
möglicherweiseeingetrageneWarenzeichen.DerVerlagrichtetsichimWesentlichennachden
SchreibweisenderHersteller.DasWerkeinschließlichallerseinerTeileisturheberrechtlich
geschützt.AlleRechtevorbehalteneinschließlichderVervielfältigung,Übersetzung,
MikroverfilmungsowieEinspeicherungundVerarbeitunginelektronischenSystemen.
KommentareundFragenkönnenSiegerneanunsrichten:
O’ReillyVerlag
Balthasarstr.81
50670Köln
E-Mail:[email protected]
CopyrightderdeutschenAusgabe:
(cid:2)2011byO’ReillyVerlagGmbH&Co.KG
1.Auflage2011
DieOriginalausgabeerschien2010unterdemTitel
BuildingAndroidAppswithHTML,CSSandJavaScriptbeiO’ReillyMedia,Inc.
DieDarstellungeinesHammerhuhnsimZusammenhangmitdem
ThemaAndroid-EntwicklungisteinWarenzeichenvonO’ReillyMedia,Inc.
BibliografischeInformationDerDeutschenNationalbibliothek
DieDeutscheNationalbibliothekverzeichnetdiesePublikationinder
DeutschenNationalbibliografie;detailliertebibliografischeDaten
sindimInternetüberhttp://dnb.d-nb.deabrufbar.
ÜbersetzungunddeutscheBearbeitung:LarsSchulten,Köln
Lektorat:ChristineHaite,Köln
Korrektorat:FriederikeDaenecke,Zülpich
Satz:ThiloBollmann,ReemersPublishingServicesGmbH,Krefeld,www.reemers.de
Umschlaggestaltung:KarenMontgomery,Boston
Produktion:AndreaMiß,Köln
Belichtung,DruckundbuchbinderischeVerarbeitung:
DruckereiKösel,Krugzell;www.koeselbuch.de
ISBN978-3-89721-573-3
DiesesBuchistauf100%chlorfreigebleichtemPapiergedruckt.
FürErica&Cooper

Inhalt
Inhalt VII
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Einleitung IX
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1 Erste Schritte 1
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Web-AppsimVergleichzunativenApps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
KurzeinführungindieWebprogrammierung. . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2 Elementares Styling 13
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
SiehabenkeineWebsite?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
ErsteSchritte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
DasAndroid-CSShinzufügen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
DasAndroid-Look-and-Feeleinbringen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
MitjQueryersteVerhalteneinführen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
WasSiegelernthaben. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
3 Fortgeschrittenes Styling 33
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
EinenSpritzerAjaxeinbringen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
DerVerkehrspolizist. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
EtwasSchnickschnack. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
DemHome-ScreeneinSymbolhinzufügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
WasSiegelernthaben. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
4 Animationen 55
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
MitetwasHilfevonunseremFreund . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
NachHauserutschen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
DieSeite»Tage«hinzufügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
DieSeite»Tag«. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
| VII
DieSeite»NeuerEintrag« . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
DieSeite»Einstellungen«. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
DieTeilezusammenfügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
jQTouchanpassen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
WasSiegelernthaben. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
5 Clientseitige Datenspeicherung 73
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
WebStorage. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
WebSQLDatabase. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
WasSiegelernthaben. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
ReferenzzudenWebDatabase-Fehlercodes. . . . . . . . . . . . . . . . . . . . . . . . . . . 94
6 Offline gehen 95
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
DieGrundlagendesOfflineApplicationCaches . . . . . . . . . . . . . . . . . . . . . . . . 95
DieOnline-Whitelist-und-Fallback-Optionen . . . . . . . . . . . . . . . . . . . . . . . . . 98
EinedynamischeManifest-Dateierstellen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
Debugging . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
WasSiegelernthaben. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
7 Native Apps 113
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
PhoneGap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
DasAndroidSDKherunterladen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
PhoneGapherunterladen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
DieUmgebungeinrichten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
EinvirtuellesAndroid-Geräterstellen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
KiloGaperstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
KiloGapimEmulatorinstallieren. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
KiloGapaufIhremGerätinstallieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
DasGerätmitJavaScriptsteuern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
WasSiegelernthaben. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
8 Die App auf dem Android Market einreichen 145
. . . . . . . . . . . . . . . . . . . . . . . .
DieRelease-VersionderAppvorbereiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
DieAppaufdenAndroidMarkethochladen. . . . . . . . . . . . . . . . . . . . . . . . . . . 149
Appsdirektverteilen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
WeitereLektüre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
Anhang: Browsererkennungmit WURFL 155
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Index 159
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
VIII | Inhalt
Einleitung
Dank Handys sind wir von einer Phase, in der fast niemand Zugang zu Informationen
hatte,ineinePhasegelangt,inderbeinahejederaufdiegewaltigenRessourcendesWebs
zugreifen kann. Das ist vielleicht die größte Leistung unserer Generation. Trotz ihrer
allumfassenden Bedeutung steckt die mobile Informationsinfrastruktur immer noch in
den Kinderschuhen. Technische, finanzielle und politische Kräfte sorgen für eine bei-
spiellose Fragmentierung der Plattformen – und es ist zu befürchten, dass das zunächst
einmalnochschlimmerwird.
Entwickler,diegroßeundheterogeneGruppenvonPersonenansprechenmüssen,stehen
voreinerscheinbarunüberwindlichenHerausforderung:»Wieimplementierenwirunsere
mobileVisionaufmachbareundfinanzierbareWeiseunderreichenmitihreinemöglichst
große Zahl von Teilnehmern?« In vielen Fällen sind Webtechnologien die Lösung. Die
Kombination der Fortschritte von HTML5 und von Mobilgeräten hat eine Umgebung
geschaffen, in der auch unerfahrene Entwicklermobile Anwendungen erstellenkönnen,
diedasLebenvonMenschenaufderganzenErdeerleichternkönnen.
Googles Android-Betriebssystem ist eine faszinierende Ergänzung im Raum mobiler
Informationsverarbeitung. Im wahren Google-Geiste ist die Plattform offen, frei und
höchst interoperabel. Die Entwicklungswerkzeuge sind ausgereift und mächtig, wenn
auchetwasgeekhaft,undsielaufenaufeinerVielzahlvonPlattformen.
Telekommunikationsunternehmen und Gerätehersteller sind auf den Android-Zug auf-
gesprungen. Immer mehr Android-Geräte der unterschiedlichsten Formen und Größen
strömenaufdenMarkt.FürEntwickleristdaseinezweischneidigeAngelegenheit.Einer-
seits bedeuten mehr Geräte auch einen größeren Markt. Andererseits bedeuten mehr
Geräte auch mehr Fragmentierung. Der Fragmentierung im Android-Markt können Sie
ebenso wie der Fragmentierung im allgemeinen Markt mobiler Technologien dadurch
begegnen,dassSieAppsmitHTML,CSSundJavaScripterstellen.
Natürlich sind nicht alle Anwendungsfälle für eine Entwicklung mit Webtechnologien
geeignet. Aber andererseits sind mir schon eine Menge mit nativem Code geschriebene
Apps begegnet,diesichebensogut mitHTML hättenimplementierenlassen.Wenn ich
| IX
mitEntwicklernspreche,diesichnichtsichersind,welchesVerfahrensiewählensollen,
sageichihnenFolgendes:
Wenn Sie Ihre App mit HTML, CSS und JavaScript erstellen können, sollten Sie das
wahrscheinlichauchtun.
Der Einsatz offener, standardbasierterWebtechnologien bietet Ihnen die größte Flexibi-
lität,diegrößteReichweiteunddiegeringstenKosten.SiekönnendieAppproblemlosals
Web-App veröffentlichenund dann imBetriebmitTausenden realenAnwendern testen
unddebuggen.WennSiesoweitsind,könnenSiePhoneGapnutzen,umIhreWeb-App
in eine native Android-App zu konvertieren, nach Bedarf einige gerätespezifische Funk-
tionen ergänzen und die App dann auf dem Android Market einreichen oder auf Ihrer
WebsitezumDownloadbereithalten.Klingtgut,nichtwahr?
Wer dieses Buch lesen sollte
Ichsetzevoraus,dassSiegewisseErfahrungimUmgangmitHTML,CSSundJavaScript
(insbesondere mit jQuery haben). Kapitel 5, »Clientseitige Datenspeicherung«, enthält
einfachen SQL-Code. Eine gewisse Vertrautheit mit der SQL-Syntax wäre also ebenfalls
hilfreich,istabernichtunbedingterforderlich.
Was Sie für dieses Buch brauchen
Dieses Buch vermeidet das Android SDK, wo immer es geht. Für den größten Teil der
BeispielebenötigenSienur einenTexteditorund GoogleChrome (einenbrandaktuellen
Webbrowser,denSiefürMacundWindowsunterhttp://www.google.com/chromeherun-
terladen können). Das Android SDK benötigen Sie nur für das PhoneGap-Material in
Kapitel7,»NativeApps«,indemicherläutere,wieSieIhreWeb-AppineinenativeApp
umwandeln,dieSieaufdemAndroidMarketeinreichenkönnen.
Typografische Konventionen
IndiesemBuchwerdendiefolgendentypografischenKonventionenverwendet:
Kursiv
Kennzeichnet neu eingeführte Begriffe, URLs, E-Mail-Adressen, Dateinamen und
Dateinamenserweiterungen.
Nichtproportionalschrift
WirdfürCodebeispieleundimFließtextfürProgrammelementewieVariablen-oder
Funktionsnamen, Datenbanken, Datentypen, Umgebungsvariablen und Schlüssel-
wörterverwendet.
Nichtproportionalschriftfett
KennzeichnetBefehleoderanderenText,derwörtlichsoeingegebenwerdenmuss.
X | Einleitung