Native Anwendungen und App Stores - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 369

Für Ihre App sind für Sie im Moment nur zwei Stellen des Codes relevant. Zum einen
können Sie den Schwellenwert einer Schüttelgeste in Form einer Zahl unter watch-
ForShake(1.0); angeben. Zum anderen definieren Sie ca. in der Mitte des Codes, was
genau passieren soll, wenn eine Schüttelgeste erkannt wird. In diesem Fall führen Sie
die Funktion onShake(); aus. Diese Funktion wurde auch in der vorherigen Version
mit dem ursprünglichen Shake-Script aufgerufen, insofern müssen Sie weniger
Anpassungen vornehmen. Zurück zur index.html . Platzieren Sie die Verknüpfung der
shake.js -Datei direkt unterhalb der Einbindung von PhoneGap.js : <script src="java-
script/shake.js" type="text/javascript"></script>

Etwas weiter unten im Code können Sie folgende Referenz auf das bisherige Shake-
Plugin bedenkenlos löschen:

9

// Shake Plugin
window.onload = function() {
window.addEventListener('shake', shakeEventDidOccur, false);

function shakeEventDidOccur () {
// Folgender Code wird bei einer Schüttelgeste ausgeführt
onShake();
}
};

Listing 9.3 Diese Referenz auf das ursprüngliche Shake-Plugin benötigen Sie nicht mehr

Bei der Definition der onShake -Funktion entfernen Sie lediglich das vorangestellte
var . Damit ist die Funktion global verfügbar und kann aus der shake.js -Datei aufgeru-
fen werden.

onShake = function() {
if(!geschuettelt) {
// CSS-Klasse austauschen und Bild einblenden
$('.flickr-bild').toggleClass('sichtbar');
$('button').text("Neues Foto machen!").toggleClass("shakeit");
geschuettelt = true;
}
};

Listing 9.4 Die globale Funktion onShake

Das war's auch schon. Jetzt funktioniert Ihre App auch unter Android. Sie haben mit
wenig Aufwand und mit Ihren bestehenden HTML- und JavaScript-Kenntnissen die
Kamera aktiviert und das Bild innerhalb der HTML-Datei weiterverarbeitet. So ein-
fach kann es sein.