Dank PhoneGap wird die plattformübergreifende Entwicklung von Apps für Android, iOS & Co. fast zum Kinderspiel. Die Gestaltung der App-Schnittstellen erfolgt dabei überwiegend mit Web-Standards, doch auch der Zugriff auf native Smartphone-Funktionen ist möglich.
Nachdem Sie im ersten Teil dieses Workshops die grundlegenden Möglichkeiten von PhoneGap kennengelernt haben, stellen wir in diesem zweiten Teil die ersten praktischen Möglichkeiten des Zugriffs auf native Smartphone-Funktionen vor. Professionelle und ambitionierte Web-Entwickler greifen bei der Entwicklung von Web-Inhalten meist zu Dreamweaver. Der Profi-Editor gehört zum Adobe-Konzern und integriert in Version 5.5 auch PhoneGap. Auch diese Möglichkeit stellen wir in diesem Workshop vor.
Teil 1 auf CD
Den ersten Teil unseres PhoneGap-Workshops finden Sie als PDF-Dokument auf der Heft-CD im Verzeichnis artikel.
Wenn Sie in die Entwicklung mobiler Anwendungen einsteigen, sollten Sie sich vergegenwärtigen, dass es gegenüber der klassischen Web-Entwicklung einen entscheidenden Unterschied gibt: Bei der traditionellen Web-Technik ist die Funktionalität auf Webserver und Web-Client verteilt. Der Browser greift auf den Webserver zu, dort findet in der Regel die Verarbeitung statt und der Webserver gibt das Ergebnis an den Client zurück. Da die Verarbeitung überwiegend auf Seiten des Servers erfolgt, kommt der Browser mit relativ wenig Rechenaufwand zurecht.
Ein Großteil der Smartphone-Apps sind allerdings so konstruiert, dass Sie eben keinen Server-Zugriff verlangen. Das bedeutet in der Praxis, dass – je nach App-Funktionalität – die Berechnung bzw. Datenverarbeitung auf Seiten des Smartphones erfolgen muss. Hierbei kommt insbesondere wieder JavaScript ins Spiel, eine Technik, die eine Fülle an Anwendungsmöglichkeiten bietet. Natürlich können Sie auch auf Verarbeitungsfunktionen zugreifen, die ein Webserver bereitstellt. PhoneGap unterliegt hier keinerlei Beschränkung. Denken Sie aber daran, dass Nutzer Ihre App eventuell auch ohne Internet- bzw. Netzwerkverbindung benutzen möchten.
Lokales Speichern von Eingaben
Anhand eines einfachen Beispiels wird deutlich, wie Sie derlei Aufgaben bewältigen können. Mit den nachfolgenden Schritten erzeugen wir eine einfache App, die ein Eingabeformular besitzt, mit dem die Benutzer eine Liste von Einträgen anlegen. Legen Sie dazu eine neue PhoneGap-App an und weisen Sie der Index-Datei den Code aus Listing 1 zu:
Listing 1
Eingaben speichern
<html>
<head>
<title>PhoneGap-Workshop</title>
<style>
body {
background: white;
}
div#main {
background: #ccc;
border: black 1px solid;
height: 80%;
padding: 15%;
width: 80%;
-webkit-border-radius: 10px;
}
</style>
<meta name=»viewport» content=»width=device-width, initialscale=
1.0»></meta>
</head>
<body>
<div id=»main»>
<h1>Beispiel für lokales Speichern</h1>
<form id=»Formular»>
<input type=»text» id=»eingabeName» placeholder=»Ihre_Eingabe» />
<button id=»submitEintrag»>Zur Liste hinzufügen</button>
<br>
</form>
</div>
</body>
</html>
Die Zielfunktionalität ist schnell erläutert: Die Benutzer geben in das Feld einen Eintrag ein und erweitern die Liste mit einem Klick auf die Schaltfläche Zur Liste hinzufügen. Obiger HTML-Code macht bereits Gebrauch eines neuen HTML-5-Attributs: Mit placeholder können Sie dem Benutzer einen Hinweise im Eingabefeld geben, welche Art der Eingabe erwartet wird. Als Nächstes benötigen wir eine Skript-Funktion, die die Eingabe aus dem Eingabefeld entgegennimmt, diese dann an der gewünschten Position einfügt und das Eingabefeld nach der Verarbeitung leert. Realisieren lässt sich das mit dem JavaScript-Code aus Listing 2.
Listing 2
Eingaben auswerten
<script>
document.addEventListener(«DOMContentLoaded», function () {
var formularListe = document.getElementById(formularListe');
var formularFeld = document.getElementById(formularName');
document.getElementById(«formular»).
addEventListener(«submit», function (evt) {
evt.preventDefault();
var neuerEintrag = formularFeld.value;
var neuerListenEintrag = document.createElement(li');
neuerListenEintrag.innerHTML = neuerEintrag;
formularListe.appendChild(neuerListenEintrag);
formularFeld.value = «»;
return false;
}, false);
});
</script>
Nun legen wir noch unterhalb des Formularfelds eine Liste an, in der die Eingaben eingefügt werden. Dazu verwenden wir das <ul>-Tag wie in folgendem Beispiel:
<ul id=»formularListe»> </ul>
Nach dem Einfügen des Codes in unsere Index-Datei können Sie das Formular öffnen und dann die Liste mit ersten Inhalten füllen. Einziges Problem unserer Formularfunktion: Die Eingaben sind nach einem Reload des Dokuments verschwunden. Die bisherige Funktion hat die Eingaben zwar schön in die Liste eingefügt, aber es ist noch keine permanente Speicherung erfolgt. Realisieren lassen sich Speicherfunktionen durch die Verwendung der HTML LocalStorage-API.
HMTL5 und PhoneGap
Gerade Web-Entwickler werden sich schnell mit PhoneGap anfreunden, denn die meisten beschäftigen sich aktuell ohnehin mehr oder minder intensiv mit den Neuheiten von HTML5. Und da Smartphones (nicht nur dank PhoneGap) die Ausführung von HTML-basierten Inhalten erlauben, so bietet es sich natürlich an, diese Möglichkeiten bei der Entwicklung mobiler Anwendungen zu nutzen. Die vielen Neuerungen, die HTML5 gegenüber seinem Vorläufer bietet, macht die Web-Technik so interessant für die Programmierung mobiler Anwendungen. Die beiden wichtigsten Tags für App-Entwickler dürften das Audio- und das Video-Tag sein. Damit können Sie Audio- und Video-Dateien direkt in eine Web-Seite integrieren – ähnlich einfach, wie das beim Einbetten von Bildern mit dem img-Tag ist. Um das Video Beispiel.mp4 in Ihre App einzubetten, verwenden Sie folgenden einfachen Code:
var videoTag = '<video id="beispielVideo" width="240" height="120"' 'autobuffer src=»Beispiel.mp4» controls></video>';
Mit dem controls-Attribut zeigen Sie an, dass für die Steuerung typische Kontrollfunktionen verwendet werden. Mithilfe von XUI lassen sich die Ansicht und das Starten der Videos steuern. Ein Beispiel zeigt Listing 3.
Listing 3
Video abspielen
function showAndPlayVideo() {
if (!x$('#beispielVideo').length) {
x$('#noVideo').inner(videoTag);
x$('#beispielVideo')[0].play();
x$('#beispielVideo').on('click', function () {
this.pause();
}).on('pause', function () {
x$(this).remove();
});
}
}
Für PhoneGap-Entwickler ist ein weiteres neues HTML-Element von Interesse: das Canvas-Elemen. Es ermöglicht das Zeichnen von dynamischen Bitmap-Grafiken. Diese grafischen Elemente lassen sich nicht nur als Illustrationen nutzen sondern eignen sich auch für Animationen, zur Bildmanipulation und für vieles mehr. Die Animationen realisiert HTML 5 über DOM-Methoden, die ihrerseits über JavaScript angesprochen werden. Das Canvas-Element wird gelegentlich auch als legitimer Flash-Nachfolger betrachtet. Das Schöne an dem Canvas-Element: Auch sein Einsatz ist nicht sonderlich kompliziert. Es genügen grundlegende HTML- und JavaScript-Kenntnisse. Die Definition eines Canvas-Elements ähnelt dem <img>-Element sehr. Es wird wie folgt eingebunden:
<canvas id="Canvas-Beispiel" width="150" height="150"></canvas>
Allerdings gibt es einen Unterschied: Es besitzt keine src– und keine alt-Attribute. Das <canvas>-Element besitzt vielmehr nur zwei Attribute: width und height. Wenn Sie diese beiden Attribute nicht angeben, so wird ein Element mit 300 Pixeln Breite und 150 Pixel Höhe initiiert. Die Größe lässt sich beliebig per CSS anpassen.
Sie können das Canvas-Element beispielsweise für Seitenübergänge oder für andere beliebigen Animationen innerhalb einer App verwenden.
Professionelles Aussehen
Aus dem täglichen Leben ist es uns vertraut: Produkte mit einer guten Verpackung wecken ein größeres Interesse als solche mit einer schnöden Aufmachung. Das ist bei Apps nicht anders als bei Cornflakes, elektronischen Geräten oder sonstigen Dingen des täglichen Lebens. Wenn Ihre App optisch ansprechend gestaltet ist, wird sie mehr Nutzer finden also eine vermeintliche langweilige Anwendung.
Dank der CSS3-Unterstützung von PhoneGap schöpfen Sie aus einem ganzen Fundus an interessanten Gestaltungsmitteln. Mit CSS3 lassen sich Elemente verschieben, skalieren, drehen, und strecken – das alles dynamisch, ohne auch nur eine Zeile JavaScript zu schreiben. Das Zauberwort heißt transform. Eine spezielle Transform-Variante erfreut sich gerade bei PhoneGap-Entwicklern besonderer Beliebtheit: translate.
Diese CSS3-Funktion verschiebt das gewünschte Objekt entsprechend des angegebenen Längenwerts. Dabei bezieht sich der erste Wert auf die x-Achse, also horizontal, der zweite Wert auf die y-Achse, also vertikal. Sie können alternativ auch mit translateX(<translation-value>) bzw. translateY(<translation-value>) die Verschiebung definieren.
Sie können eine Translation wie folgt definieren: Möglichkeit 1:
transform:translate(50px, 50px);
Möglichkeit 2:
transform:translateX(50px); transform:translateY(50px);
Diese Verschiebefunktionen lässt sich beispielsweise auf Hinweisfenster mit einer Alert-Funktion anwenden.
CSS3 bietet drei weitere interessante Transformationsmöglichkeiten:
rotate(): Mit dieser drehen Sie das Element im Uhrzeigersinn um einen bestimmten Gradwert. Negative Werte sind zulässig und drehen das Objekt entgegen dem Uhrzeigersinn.skew(): Bei dieser Methode wird das Element in einem bestimmten Winkel schräg dargestellt.matrix(): Diese Methode vereint alle 2D-Transformationsmethoden. Sie können also ein Objekt drehen, skalieren, verschieben und neigen.
Entwicklern, denen das noch nicht genug ist, animieren mit translate3d Objekte sogar mehrdimensional. Sie können diese rotieren und modifizieren, aber auch die Perspektive ändern
Ausgabe einer Fehlermeldung
Eine der wichtigsten Funktionen bei der PhoneGap-Entwicklung ist die Ausgabe von Fehlermeldungen, die die App dann ausgegeben soll, wenn sie bzw. das Smartphone eine bestimmte Funktion nicht ausführen kann.
Dazu bedient man sich normalerweise der JavaScript-Funktion alert(). Das Problem dieser Funktion: Sie zeigt im Titel index.html an. Für die ersten Gehversuche mag das ausreichend sein, hat aber schon einen unprofessionellen Touch. Sie bekommen das deutlich besser hin, in dem Sie die PhoneGap-Klasse notification verwenden. Deren Aufruf sieht wie folgt aus:
navigator.notification.alert( nachricht, titel, buttons, optionen);
Bis auf den Inhalt der Meldung sind alle Elemente optional. Je mehr Elemente Sie verwenden, umso funktionaler wird die Meldung natürlich. Sie können beispielsweise einen OK-Button für das Schließen der Meldung einführen. Alternativ fügen Sie eine Ja-Nein-Frage ein, die der Nutzer dann mit Klicks auf die entsprechenden Buttons beantwortet. Die Implementiertung der entsprechenden Funktion zeigt Listing 4.
Listing 4
Ja/Nein-Frage
navigator.notification.alert(
"Es ist ein Fehler beim Herstellen der Internet-Verbindung aufgetreten. Wollen Sie es erneut versuchen?",
"Keine Internet-Verbindung",
"Nein",
"Ja",
{
onClose: function(buttonIndex) {
if (buttonIndex == 1)
retryConnection();
}
}
);
Ein starkes Team: Dreamweaver und PhoneGap
Adobe hat in den vergangenen Jahren durch die Übernahme von Macromedia mit deren Web-Entwicklungswerkzeugen wie Flash, Fireworks und Dreamweaver ihre Produktpalette gezielt um professionelle Programme zur Web-Entwicklung erweitert. Anfang Oktober letzten Jahres gab Adobe die Übernahme von Nitobi, die PhoneGap-Entwickler, bekannt. Inzwischen hat man PhoneGap in den Dreamweaver-Editor integriert. Damit steht potentiellen Entwicklern eine Umgebung zur Verfügung, die Ihres Gleichen sucht.
Bei solchen Übernahmen stellt sich natürlich immer auch die Frage, welche Konsequenzen das für alle Beteiligten hat. Da PhoneGap inzwischen an die Apache Software Foundation übergeben wurde und in Zukunft offenbar als Apache Callback bezeichnet wird, stehen die Zeichen gut, dass neben Dreamweaver-Nutzern auch allen anderen Anwender weiterhin in den Genuss dieser Lösung kommen.
Die in Dreamweaver CD 5.5 integrierte PhoneGap-Version erlaubt Ihnen das schnelle Erstellen von Web-Anwendungen als native App für Android- und iOS-Plattformen. Das PhoneGap-Framework agiert dabei als Brücke zwischen den Web-Applikationen und dem mobilen Gerät. Um die ersten Gehversuche mit Dreamweaver und der PhoneGap-Komponente zu unternehmen, sind je nach Entwicklungsplattform und Zielumgebung folgende Voraussetzungen zu erfüllen. Wenn Sie unter Mac OS X eine Android-Anwendung programmieren wollen, benötigen Sie Mac OS X 10.5.8 oder höher und das Android SDK für Mac OS X. Wenn Sie unter Windows für Android entwickeln möchten, benötigen Sie Windows XP (nur 32 Bit), Vista oder Windows 7, das Android SDK und das Java JDK.
Bevor Sie mit der eigentlichen Entwicklung beginnen, müssen Sie Dreamweaver für das Zusammenspiel mit dem Android SDK konfigurieren. Ist das gewünschte SDK bereits heruntergeladen und installiert, müssen Sie Dreamweaver wissen lassen, wo das Kit zu finden ist. Legen Sie zunächst eine neue Site an und führen Sie dann den Befehl Site | Mobile Anwendungen | Anwendungs-Framework konfigurieren aus.
Geben Sie in dem Eingabefeld Android SDK-Pfad den Pfad zur SDK-Installation an. Sollte Ihr System noch nicht über eine SDK-Installation verfügen, klicken Sie auf die Schaltfläche Einfache Installation. Dreamweaver lädt dann das Android SDK automatisch herunter und konfiguriert die Umgebung.
Dreamweaver CS 5.5
In Sachen Web-Design und -Authoring ist Dreamweaver nach wie vor der Stand der Dinge. Aus dem einzigen WYSIWYG-Web-Editor hat sich längst ein Profiwerkzeug entwickelt, das alle notwendigen Funktionen für ambitionierte und professionelle Entwickler bietet. Die aktuelle Version unterstützt insbesondere die mobiler Anwendungen für Smartphone und Tablet PCs. Diesen Komfort lässt sich Adobe teuer bezahlen: Rund 570 EUR kostet die Vollversion. Adobe stellt eine 30-Tage-Testversion zum Download bereit.
Erste mobile Anwendung mit Dreamweaver
Erzeugen Sie zunächst eine Index-Datei mit dem Befehl Datei | Neu. Wählen Sie aus dem Dialog Neues Dokument im linken Bereich Seite aus Beispiel, unter Beispielordner den Eintrag Mobile Starter und als Beispielseite schließlich jQuery Mobile (PhoneGap). Dreamweaver generiert mit einem Klick auf Erstellen eine HTML-Datei. jQuery ist eine freie JavaScript-Klassenbibliothek mit umfangreichen Funktionalitäten für die Animation, Elementauswahl und Manipulation. Sichern Sie Datei als index.html. Dreamweaver gibt eine Meldung aus, dass auch die abhängigen Dateien gesichert werden müssen. Klicken Sie auf Kopieren. In der Dateiliste finden Sie den neu angelegten jquery-Ordner und die Index-Datei. Dreamweaver generiert damit das Grundgerüst einer ersten mobilen App.
Der nächste Schritt dient der Konfiguration der Anwendung. Dazu wählen Sie Site | Mobile Anwendungen| Anwendungseinstellungen aus. Weisen Sie Ihrem Projekt unter Bundle-ID eine Bezeichnung zu. Die ID besitzt das Format com.firmenname.anwendungsname. Die ID darf lediglich Buchstaben, Ziffern und die Sonderzeichen Punkt sowie Bind- und Unterstich und enthalten. Sie sollten bei der Entwicklung außerdem darauf achten, dass die Site-Größe die 25 MB-Marke nicht überschreitet.
Dann weisen Sie Ihrer Anwendung eine Bezeichnung zu, geben Ihren Namen unter Verfasser und die Entwicklungsversion ein. Optional ist die Zuweisung eines Icons im PNG-Format. Das Schöne dabei: Die Ausgangsgröße des Logos spielt keine Rolle, denn Dreamweaver bringt die Ausgangsdatei auf die erforderlichen Standardgrößen. Bestimmen Sie außerdem den Zielpfad für Ihre Anwendung. Je nach Entwicklungsplattforum und installierten SDKs können Sie die Zielplattform sowie das Virtual Device auswählen. Haben Sie lediglich das Android SDK installiert, sind keine weiteren Anpassungen erforderlich. Mit einem Klick auf die Speichern-Schaltfläche sichern Sie die Anwendungseinstellungen.
App-Entwicklung
Das Template für die PhoneGap-basierte Entwicklung weist bereits vier Seiten auf, die Sie im weiteren Verlauf der Entwicklungsarbeit beispielsweise mit Zugriffen auf die PhoneGap-API erweitern können. Für die Entwicklungsarbeit aktivieren Sie am besten die Teilen-Ansicht. Passen Sie zunächst die Seitenüberschriften an, indem Sie diese beispielsweise die ersten Seitenüberschrift mit Home und die zweite mit Kamera bezeichnen.
Um die Überschrift von Seite 1 in Home umzubenennen, verwenden Sie die Entwurfsansicht und passen diese an. Benennen Sie Seite 2 entsprechend in Kamera um. Das Template besitzt zudem eine Fußzeile. Die können Sie löschen oder mit einem eigenen Text versehen, der alle Dokumente am Fußende ziert. Wir begnügen uns hier auf die ersten beiden Seiten. Passen Sie außerdem den ersten Link auf der Home-Seite an. Der sollte dann ebenfalls Kamera lauten.
Nun können wir ein wenig Funktionalität mithilfe der PhoneGap APIs realisieren. Umfangreiche Informationen finden bzgl. der Verwendung der jQuery Mobile- und der PhoneGap-API finden Sie unter http://jquerymobile.com [2] bzw. http://docs.phonegap.com [3]. Unter http://jquerymobile.com/demos/ finden Sie jede Menge Beispiele und vordefinierte Komponenten.
PhoneGap-Anwendungen sollten vor ihrer Ausführung immer zunächst prüfen, dass PhoneGap vollständig geladen wurde. Die folgenden Anweisungen sorgen dafür. Ersetzen Sie dazu das <body>-Tag mit <body onload = "onBodyLoad();">. Entfernen Sie den Schrägstrich vor phonegap.js:
<script src="phonegap.js" type="text/javascript"></script>
Fügen Sie die folgenden Zeilen nach dem Tag <script src="phonegap.js" type="text/javascript"></script>, aber vor dem </head>-Tag ein:
<script> function onBodyLoad(){ document.addEventListener("deviceready",onDeviceReady,false); } function onDeviceReady(){ navigator.notification.alert("PhoneGap funktioniert"); } </script>
Dann wenden wir uns der Kamera-Seite zu. Dazu legen wir verschiedene Bedienelemente und ein JavaScript-Schnipsel für die Kamera-Seiten an. Im zugehörigen Abschnitt unterhalb der Zeile <div data-role="content"> ersetzen Sie das Wort Inhalt mit dem Code aus Listing 5.
Listing 5
Bild als Quelle
<fieldset class="ui-grid-a"> <div class="ui-block-a"><button type="button" data-theme="c" data-icon="plus" ontouchstart="getPictureFromCamera();">Kamera</button></div> <div class="ui-block-b"><button type="button" data-theme="c" data-icon="search" ontouchstart="getPictureFromGallery();">Galerie</button></div> </fieldset> <div id="camera-image" class="ui-body ui-body-b" style="background-size:100%;min-height:250px"></div>
Der Code aus dem Listing 6 erzeugt zwei Schaltflächen, mit denen die Benutzer Bilder mit der Kamera auslöst oder Bilder aus der Galerie auswählt. Der Einfachheit halber beschränken wir aus auf die Kamerafunktion. Dazu verwenden Sie die PhoneGap-API-Funktion getPictureFromCamera(). Sie wird durch einen Klick auf den Kamera-Button ausgelöst und ruft die Funktion navigator.camera.getPicture auf. Die Details verrät Listing 6.
Listing 6
getPictureFromCamera()
function getPictureFromCamera(){ navigator.camera.getPicture(onSuccess, onFail, { quality: 50, destinationType:Camera.DestinationType.FILE_URI }); function onSuccess(imageURI) { $('#camera-image').css({'background-image': 'url('+imageURI+')', 'background-size': '100%'}); } function onFail(message) {console.log('Fehler beim Laden des Bilds');}} function
Damit ist ein erster API-Aufruf realisiert und Sie können die Anwendung erstellen und ausführen. Dazu führen Sie den Befehl Site | Mobile-Anwendungen |Erstellen und Emulieren | Android aus. Im Emulator überprüfen Sie dann Ihre App auf die Funktionstüchtigkeit hin.
Fazit
PhoneGap ebnet dem angehenden App-Entwickler den einfachen Weg in die Programmierung von mobilen Anwendungen. Dank der Unterstützung von HTML5 und CSS3 lassen sich viele Standardfunktionen bereits ohne tiefgehende Programmierkenntnisse bewältigen. Wenn Ihre App allerdings auch professionellen Ansprüchen genügen sollen, müssen Sie sich ab einer gewissen Anforderung auch mit PhoneGap-Klassen auseinandersetzen. Ideal für Web-Designer: Sie kommen mit Dreamweaver CS 5.5 dank der PhoneGap-Integration schneller als Ziel.
Infos
- Teil 1 des Workshops: https://www.android-user.de/Magazin/Archiv/2012/04/Android-Anwendungen-mit-PhoneGap-entwickeln-Teil-1/
- JQuery-Beispiele: http://jquerymobile.com/demos/
- PhoneGap-Dokumentation: http://docs.phonegap.com