10. Januar 2012 in Android, Coden, Javascript, Tutorials by Leo

In der Schule haben wir im JavaScript Modul den Auftrag erhalten, eine Android App mithilfe von PhoneGap zu programmieren. Ein weiterer Teilpunkt des Auftragspunkt gab es, wenn man das ganze mithilfe von jQuery Mobile umsetzt. Da ich jQuery schon kenne, dachte ich wieso nicht, und setzte mich mit jQuery Mobile auseinander.

Nun eine kleine Anleitung:

  1. Als erstes muss natürlich PhoneGap korrekt installiert werden. Die beste Anleitung findet ihr hier, auf der offiziellen PhoenGap Website.
  2. Das ganze geht von unserem index.html File aus. Dieses wird beim Start der App über PhoneGap aufgerufen. In der Anleitung oben wurde dieses File erstellt, es befindet sich im Verzeichnis /assets/www.
  3. Nun benötigen wir jQuery Mobile, sprich das JS, CSS und die Bilder für die Designs. Dies alles kann hierheruntergeladen werden. Weiter unten auf der Download-Seite findet ihr den Link zu einem Zip (“If you want to host the files yourself you can download a zip of all the files:”), dieses sollte heruntergeladen werden. Es gibt noch weitere möglichkeiten, so kann jQuery auch aus dem Web geladen werden, dann wäre es jedoch nicht lokal auf dem Handy und würde Traffic verursachen, bzw. bei keiner Datenverbindung gar nicht geladen werden. JQuery Mobile lokal zu haben ist also der sicherste weg.
  4. Haben wir jQuery Mobile heruntergeladen entpacken wir es und legen es auch ins www/ Verzeichnis wie unsere index.html-Datei. Das ganze wird nun in den Header inkludiert: 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

    Dies alles kommt natürlich in den Header (<head>) und die Link müssen auch noch angepasst werden (jenachdem wo ihr eure Files hingelegt habt).

  5. Nun wo alles eingebunden ist, können wir mit einer ersten Seite beginnen. Damit das ganze so aussieht wie es aussehen sollte, wird eine spezielle Seiten Anatomie von jQuery Mobile verlangt. Mehr dazu findet ihr hier.
    Wir fügen für eine erste Seite also folgenden Code zwischen die Body-Tags unseres index.html-Files:

    <pre><div data-role="page" id="idDerSeite">
	<div data-role="header">...</div>
	<div data-role="content">...</div>
	<div data-role="footer">...</div>
</div></pre>
  6. Der HTML-Code oben stellt jetzt eine Seite dar. Um mehrere Seiten zu erstellen, kopiert man den obigen Code einfach mehrmals in den Body-Tag der Seite und ändert die ID der Seite. Jeweils die oberste Seite wird als Standardseite genutzt, sprich, als erstes aufgerufen. Um die Seiten zu verlinken kann einfach ein normaler HTML-Link gemacht werden mit dem href=”#idDerSeite”.