Es ist ja modern, sich nicht sofort festzulegen – warum dies also bei der mobilen Plattform einer App tun? Ob iOS, Android, Symbian, Windows Mobile, Blackberry und viele mehr – wer kann es sich schon leisten, für jede dieser Plattformen eine eigene App zu entwickeln? Für diesen Zweck gibt es mittlerweile verschiedene Frameworks, von denen wir einige hier im Blog auch schon vorgestellt haben. PhoneGap ist eines, das von der eigentlichen Plattform abstrahiert und eine einheitliche Programmierschnittstelle anbietet. Konkret heißt das, dass anstatt auf Java für Android-Apps auf Webtechnologien wie HTML5, JavaScript und CSS3 gesetzt wird. Die App kann später relativ einfach für andere Plattformen veröffentlicht werden.
Mit dem Build-Management Maven kann man auch solche Apps bauen und auf das Gerät deployen lassen. Für ein Beispiel greifen wir die Grundlage aus einem vorhergegangenen Blog-Artikel wieder auf und bauen das dort angelegte Projekt etwas zurück:
- ProGuard aus dem Profil „production“ entfernen (oder gleich das ganze Profil) und die Datei proguard.cfg aus dem Root-Verzeichnis des Projekts löschen.
- JUnit und das Verzeichnis „src/test/java“ entfernen, da wir bis auf die Initialisierung von PhoneGap keinen Java-Code mehr schreiben werden.
- Nicht mehr benötigten Java-Code entfernen: DateStringUtils.java löschen, HelloWorld.java wird später mit anderem Inhalt befüllt (siehe weiter unten).
- Auch das Verzeichnis „/src/main/resources/layout“ samt Inhalt entfernen.
- Alle Einträge bis auf den „app_name“ aus der Datei strings.xml löschen.
Eine Installation des Android-SDK ist ebenfalls für PhoneGap nötig. Die Anwendung wird zwar abstrakt implementiert, dann aber explizit für die Android-Plattform gebaut.
Wir laden uns die aktuelle Version von PhoneGap herunter (derzeit ist dies die 1.8.1). Nach dem Entpacken stehen unter „lib“ für jede unterstützte Ziel-Plattform diverse Dateien bereit. Aus dem „android“-Ordner kopieren wir die cordova-1.8.1.js in das „/src/main/assets/www“-Verzeichnis unseres Projekts – das www-Verzeichnis muss natürlich vorher erstellt werden! Das Verzeichnis „xml“ kopieren wir samt Inhalt in „/src/main/resources/“. Die cordova-1.8.1.jar stellt in der Maven-Welt ein kleines Problem dar, da sie nicht einfach „irgendwohin“ kopiert werden kann – sie muss Maven-like aus einem Repository geholt werden. Leider ist das PhoneGap bzw. Cordova-Projekt noch bei keinem größeren Remote-Repository hinterlegt. (Anmerkung: PhoneGap wird bald in Apache Cordova aufgehen, daher findet man in der Übergangsphase beide Namen).
Folgender Maven-Aufruf kopiert das Artefakt in das lokale Repository:
mvn install:install-file -Dfile=cordova-1.8.1.jar -DgroupId=org.apache.cordova -DartifactId=cordova -Dversion=1.8.1 -Dclassifier=android -Dpackaging=jar
Mit dem mitgegebenen „classifier“ kann die Bibliothek parallel dazu auch für die anderen Mobile-Plattformen installiert und nach Bedarf aus dem Repository bezogen werden.
Die pom.xml erweitern wir mit:
<dependency>
<groupId>org.apache.cordova</groupId>
<artifactId>cordova</artifactId>
<classifier>android</classifier>
<version>1.8.1</version>
</dependency>
Nun ist unser Projekt bereit für eine PhoneGap-Anwendung. Es kann gemäß der „Get Started Guide“ von PhoneGap fortgefahren und die erste Anwendung entwickelt werden. Wer das ZIP-Archiv aus dem alten Blog-Artikel verwendet hat, kann auch die HelloWorld.java modifizieren: Wir ersetzen die abgeleitete Klasse „Activity“ durch „DroidGap“ aus dem „org.apache.cordova“-Paket. Weiter müssen wir noch „setContentView(R.layout.main);“ ersetzen, so dass man folgenden Code erhält:
public class HelloWorld extends DroidGap {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
}
}
Natürlich muss unter „assets/www“ dann auch eine index.html-Datei existieren. Wichtig ist, dass diese die von PhoneGap mitgebrachte JavaScript-Datei einbindet. Wir verwenden eine Datei analog zur Anleitung von PhoneGap:
<!DOCTYPE HTML> <html> <head> <title>Little example!</title> <script type="text/javascript" charset="utf-8" src="cordova-1.8.1.js"></script> </head> <body> <h1>Hello Super-World!</h1> </body> </html>
Zu guter Letzt muss die Start-Activity der Anwendung angepasst und um die Rechte auf dem Android-System erweitert werden, um alle Funktionen von PhoneGap nutzen zu können. Dies wird beides über die AndroidManifest.xml konfiguriert. Nach den Änderungen sollte diese ungefähr wie unsere aussehen:
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="de.holisticon.examples.androidWithPhonegap" android:versionCode="1" android:versionName="1.0"> <uses-sdk android:minSdkVersion="8"/> <supports-screens android:largeScreens="true" android:normalScreens="true" android:smallScreens="true" android:resizeable="true" android:anyDensity="true" /> <uses-permission android:name="android.permission.CAMERA"/> <uses-permission android:name="android.permission.VIBRATE"/> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/> <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS"/> <uses-permission android:name="android.permission.READ_PHONE_STATE"/> <uses-permission android:name="android.permission.INTERNET"/> <uses-permission android:name="android.permission.RECEIVE_SMS"/> <uses-permission android:name="android.permission.RECORD_AUDIO"/> <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/> <uses-permission android:name="android.permission.READ_CONTACTS"/> <uses-permission android:name="android.permission.WRITE_CONTACTS"/> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/> <uses-permission android:name="android.permission.GET_ACCOUNTS"/> <uses-permission android:name="android.permission.BROADCAST_STICKY"/> <application android:label="@string/app_name"> <activity android:name="de.holisticon.examples.androidWithPhonegap.HelloWorld" android:label="@string/app_name"> <intent-filter> <action android:name="android.intent.action.MAIN"/> <category android:name="android.intent.category.LAUNCHER"/> </intent-filter> </activity> </application> </manifest>
Alles fertig? Dann bauen wir mit „mvn clean package“ die App. Diese kann, wenn wir den Emulator gestartet oder ein Endgerät angeschlossen haben, direkt mit „mvn android:deploy“ deployed werden. Wem es zu schnell ging: Das Beispiel kann wieder als ZIP-Archiv heruntergeladen werden.
