Auszug aus dem Buch Apps mit PhoneGap entwickeln

1.1.4 Eine Standardschablone

Betrachten wir eine Schablone, mit der wir in der Folge bei PhoneGap-Projekten arbeiten werden, wenn wir kein Framework einsetzen. Dabei werden wir die externen Skripte und Style Sheets in einem Unterordner lib und dort in die Unterordner js und css einsortieren.

CHV_BOX_ID_02

icn002

Die Listings auf der Webseite zum Buch

Die Standardschablone samt der folgenden JavaScript-Datei finden Sie auf der Webseite zum Buch unter kap4/standardschablone. Beachten Sie, dass die Cordova-Skriptdatei nicht dabei ist, da sie sich je nach Zielplattform unterscheidet und wahrscheinlich neuere Versionen bereits erschienen sind. Verwenden Sie immer die neuste Version aus dem Internet und ändern Sie einfach den Dateinamen.

Listing 1.2 Eine Schablone für unsere PhoneGap-HTML-Datei (mit der PhoneGap-Version 2.2.0)

<!DOCTYPE html>

<html lang=“de“>

<head>

<meta charset=“utf-8″/>

<title></title>

<meta name=“viewport“ content= „width=device-width, initial-scale=1“ />

<link type=“text/css“ rel=“stylesheet“ href=“lib/css/stil.css“/>

<script type=“text/javascript“ charset=“utf-8″ src=“lib/js/cordova-2.2.0.js“></script>

<script type=“text/javascript“ charset=“utf-8″ src=“lib/js/scripts.js“></script>

</head>

<body>

</body>

</html>

CHV_BOX_ID_01

icn001

Reihenfolge beachten

Notieren Sie in der HTML-Basis-Datei immer zuerst die Referenzen auf die externen CSS-Dateien, erst dann die Referenz auf die PhoneGap-JavaScript-Bibliothek und dann die Referenzen auf die externen JavaScript-Dateien mit Ihrem Code (und die zur Sicherheit am Ende des Bodies).

Beachten Sie unbedingt, dass die Templates unter Windows Phone als auch Xcode andere Strukturen generieren. Dort sind insbesondere die Referenzen auf die Skriptdateien aus den oben genannten Gründen am Ende des Bodies zu finden. Ebenso wird kein lib-Verzeichnis verwendet. Sie können gerne bei diesen generierten Strukturen bleiben. Nur werden sich die Ausführungen – sofern das relevant ist – und die Beispielcodes im Buch immer die hier notierten Strukturen beziehen. Wir wollen ja möglichst unabhängig von einer spezifischen Plattform bleiben und müssen uns – bei unterschiedlichen Strukturen – einfach für eine Variante entscheiden. Diese wird aber überall funktionieren. Sie können den Inhalt des www-Verzeichnisses einfach von einem System (etwa Eclipse) in das www-Verzeichnis eines anderen Systems (etwa Visual Studio) kopieren. Beachten Sie nur, dass die jeweilige PhoneGap-Bibliothek (cordova-x.x.x.js) immer spezifisch für das jeweilige Zielsystem sein muss und nicht so kopiert wird. Diese muss also erhalten bleiben, wenn Sie die neuen Strukturen anlegen. Aber der Ort dieser Datei sollte lib/js sein.