© James Steidl, 123RF

Mit dem noch recht jungen Modul Thym landet Apaches Cordova in Eclipse. So gerüstet bauen Sie über einige Befehle, wenige Mausklicks und ein bisschen HTML-5-Code mobile Anwendungen. Unter anderem greift Ihnen dabei das Jboss Developer Studio unter die Arme. Der Workshop verrät, wie es geht.

Die Jboss-Tools [1] setzen sich aus verschiedenen Eclipse-Plugins zusammen, die Eclipse [2] in der Standardversion erweitern und verbessern. Die aktuelle Betaversion läuft unter Eclipse Mars. Die Kombination aus Eclipse und Jboss-Tools gibt es auch als Bundle, das unter dem Namen Red Hat Jboss Developer Studio (JBDS, [1]) firmiert (siehe Kasten “Jboss-Installation”).

Ein Teil dieser Jboss-Tools ist ein Eclipse-Plugin namens Thym [3], das den Nutzern dabei hilft, mobile und hybride Anwendungen zu bauen. Thym erzeugt Cordova-Projekte [4]. Diese erlauben es Entwicklern, native Geräte-APIs mit Hilfe von Javascript anzusprechen. So lassen sich Apps allein mit Hilfe von HTML, CSS und Javascript entwickeln. Der Artikel zeigt, wie Sie mit Jboss Developer Studio ein Backend erzeugen, auf das dann ein mit Apache Thym programmierter mobiler Client als Frontend zugreift. Den Beispielcode finden Sie unter [5].

Befehlskette

Starten Sie am besten mit dem Backend. Um es schnell aufzusetzen, greifen Sie zu Forge [6], einem Wizard, der Ihre Eingaben nimmt und sie in Code verwandelt. Dazu genügt es, in JBDS auf »Window | Open Perspective | Jboss« zu klicken, dann auf »Show View | Forge Console« . Eine Konsole erscheint und ein Klick auf das grüne Dreieck startet Forge. Geben Sie nun die Kommandos aus Listing 1 ein, um ein neues Projekt anzulegen (Abbildung 1).

01 project-new --named demo
02 jpa-new-entity --named Contact
03 jpa-new-field --named name
04 jpa-new-field --named age --type int

Abbildung 1: Mit Forge lässt sich in der Forge-Console schnell ein Demo-Projekt anlegen.

Diese Befehle erzeugen zunächst ein neues Maven-Projekt [7] mit einer Entität des Java Persistance API (JPA), die »Contact« heißt und die Felder »name« und »age« kennt. Als Nächstes benötigen Sie einen REST-Endpunkt für diese Entität, zum Glück kennt Forge auch hierfür ein Kommando:

rest-generate-endpoints-from-entities  --targets org.demo.model.Contact

Mit dem REST-Endpunkt für die »Contact« -Entität am Start klicken Sie mit der rechten Maustaste auf »demo« und wählen »Run As | Run on Server« . Dann suchen Sie einen existierenden Wildfly Application Server [8] aus.

Wildfliegen

In der Regel müssen Sie den Wildfly-Server zunächst installieren. Das klappt über »Manually define a new server« . Klicken Sie zweimal auf »Next« und wählen Sie dann »Download and Install Runtime« . Suchen Sie zum Beispiel »Wildfly 8.2.0 Final« aus und klicken Sie erneut auf »Next« , was den Server installiert. Ein Klick auf »Finish« fährt den Server hoch, die Ausgaben erscheinen in der Ansicht »Console« .

Läuft der REST-Dienst erst mal, sollte er sich auch problemlos aufrufen lassen. In der Ansicht »Project Explorer« lässt sich die Option »JAX-RS Web Service« ausklappen. Hier erscheinen nun alle generierten Endpunkte, die »GET« – und »POST« -Kommandos absetzen.

Um an der Benutzerfreundlichkeit zu feilen, kehren Sie auf die Forge-Konsole zurück und geben

scaffold-setup --provider AngularJS
scaffold-generate --provider AngularJS  --targets org.demo.model.Contact

ein. Unter »http://localhost:8080/demo/« erscheint nun im Browser ein hübsches, von Angular JS [9] generiertes Interface, das den eben erzeugten Endpunkt nutzt. In diesem führen Sie nun Crud-Operationen (Create, Read, Update, Delete) für die »Contact« -Entität aus. Ergänzen Sie über »Create« ein paar Einträge, fügen Sie Namen und Altersangaben hinzu, um später Resultate auf dem mobilen Client zu erzielen (Abbildung 2).

Abbildung 2: “May the forge be with you!” Die mit Forge gebaute Demo sammelt die Daten, welche die Mobil-App später anzeigen soll.

Mobiler werden

Auf Basis des REST-API bauen Sie im nächsten Schritt das Frontend, einen mobilen Webclient für die Anwendung. JBDS unterstützt neben Android auch Cordova, ein Framework, mit dem Entwickler plattformübergreifende Anwendungen erzeugen. Wie oben angedeutet, besteht die ganze Anwendung aus HTML-5-Technologien. Sie wickelt eine native App ein, die eine Webview verwendet, um die HTML-5-Software anzuzeigen.

Auf diesem Wege lassen sich durchaus native Funktionen wie die Kamera verwenden, da Cordova Plugins an Bord hat, die den Zugriff auf die eingebauten Gerätefunktionen über ein Javascript-API erlauben. Wie Cordova unterstützen auch diese Plugins eine ganze Reihe von Plattformen.

Zunächst holen Sie Cordova und Thym. Sie rufen die Ansicht »Jboss Central« auf und klicken auf »Hybrid Mobile Project« . Das installiert eine Reihe weiterer Plugins und erfordert wieder einen Neustart. Nach diesem legen Sie ein neues Projekt an (»File | New | Project | Mobile« ) und wählen »Hybrid Mobile (Cordova) Application Project« . Das Projekt braucht einen Namen und eine ID (letzteres ist für I-OS wichtig), im Beispiel benennen Sie beide einfallsreich mit »client« und »org.demo.client« .

Im nächsten Dialogfenster ergänzen Sie eine »Mobile Engine« , indem Sie auf »Download« klicken und die neueste Android-Cordova-Version auswählen, sie herunterladen und sie in der Übersicht noch einmal ankreuzen. Der Weg über »Next« führt zu einer Registry, über die Sie gewöhnlich Plugins suchen und installieren. Da Sie keins brauchen, klicken Sie auf »Finish« . Eine Fehlermeldung, die auf der Testmaschine erschien, beeinflusste den weiteren Verlauf nicht.

Das Projekt »client« bringt nun unter anderem einen »plugins« -Ordner mit, der potenzielle Plugins enthält sowie einen »www« -Ordner mit der App. Um diese in Aktion zu sehen, wählen Sie nach einem Rechtsklick auf das »client« -Projekt »Run as | Run w/CordovaSim« .

Der in Abbildung 3 gezeigte Simulator emuliert auch eine Reihe von Plugins und eignet sich damit hervorragend für Tests. Er unterstützt ein Feature namens »Live Reload« , das geänderten HTML-Code gleich im Simulator anzeigt. Um es zu aktivieren, öffnen Sie zuvor in JBDS die »Servers« -Ansicht und wählen per Rechtsklick »New | Server« aus. In der folgenden Auswahl entscheiden Sie sich für einen »LiveReload Server at localhost« im Bereich »Basic« und starten diesen. Anschließend kehren Sie zum Cordova-Simulator zurück, klicken diesen mit der rechten Maustaste an und wählen »Enable LiveReload« .

Abbildung 3: Die Live-Reload-Funktion aktualisiert die Ansicht nach jeder gespeicherten Änderung.

Jedes Mal, wenn Sie von jetzt an die Datei »www/index.html« bearbeiten, den Code darin ändern und ihn dann sichern, erscheinen die Updates im Cordova-Simulator (Abbildung 3).

Aufhübschen

Als Erstes möchten Sie die HTML- und Javascript-App etwas Smartphone-freundlicher gestalten. Hier springt das Ionic-Framework [13] in die Bresche, alternativ warten Jquery und weitere Vertreter. Ionic bringt eine Reihe von Komponenten mit, die typisch für den Umgang mit Smartphones sind und zum Beispiel Wischgesten ermöglichen. Die »Palette« -Ansicht in JBDS (»Window | Show View | Other | Palette« ) erlaubt es, die Anwendung um solche Komponenten zu erweitern.

Um nun die Beispiel-App in eine Ionic-App zu verwandeln, löschen Sie zuerst den »div« -Container mit den Demo-Inhalten aus der Datei »index.html« . Dann rufen Sie die Ansicht »Palette« auf, wählen Ionic aus und schieben den »Header Bar« per Drag & Drop genau unter das »body« -Tag. Das ruft einen Assistenten auf den Plan, der auf der rechten Seite anzeigt, wie das gerenderte HTML-Endergebnis aussehen wird (Abbildung 4).

Abbildung 4: Ein Assistent zeigt, wie die fertige HTML-Oberfläche aussehen wird.

Deaktivieren Sie die beiden Schaltflächen und wählen als Name »Contacts« und als Farbe »bar-positive« . Nach einem Klick auf »Next« bietet der Wizard an, das Ionic-Framework in den Kopf der App einzubetten. Stimmen Sie dem zu und beenden das Ganze über »Finish« .

Womöglich fragen Sie sich an dieser Stelle, warum die Vorschau nicht wie erwünscht aussieht. Das kommt daher, dass Ionic mit Angular JS arbeitet, das Sie erst initialisieren müssen. Öffnen Sie dazu die Datei »www/js/index.js« und ersetzen den gesamten Code durch den aus Listing 2.

01 angular.module('ionicApp', ['ionic'])
02 .controller('MainCtrl', function($scope, $http) {
03 });

Der Code deklariert »ionicApp« und »MainCtrl« , auf die auch der HTML-Code referenzieren muss. Das gelingt, wenn Sie das »html« -Tag um das Attribut »ng-app=”ionicApp”« erweitern, in das »body« -Tag gehört das Attribut »ng-controller=”MainCtrl”« . Am Ende entfernen Sie die Referenz auf die Datei »index.css« aus dem Kopfteil. Nun beginnt das Ganze bereits wie eine App auszusehen.

Ergänzen Sie weitere Kontrollelemente und fügen Sie zum Beispiel direkt nach dem »Header bar« das »Content« -Element aus der »Palette« -Ansicht ein und platzieren dort hinein einen Schalter (»Toggle« ), um ein Beispiel für eine dynamische Komponente zu haben. Klicken Sie auf »Finish« , sollte die App wie in Abbildung 5 aussehen.

Abbildung 5: Die App mit etwas komplexeren Komponenten, etwa einem Schalter (»Toggle«).

Nun entfernen Sie den Schalter (»Toggle« ) wieder und ersetzen ihn durch eine Liste (»List« ). Anstatt aber den Wizard zu verwenden, tippen Sie einfach die Zeilen aus Listing 3 ein. Um diese mit den Kontakten aus dem Backend zu verbinden, muss die App zunächst diese Kontakte holen. Das erledigt der Code aus Listing 4, der lediglich den Code am Ende von Zeile 2 in Listing 2 erweitert. Dies holt die Kontakte vom Endpunkt und packt die Antwortdaten anschließend in einen Bereich, der »items« heißt.

01 [...]
02 <ion-list>
03   <ion-item>
04       Item 1
05   </ion-item>
06 </ion-list>
07 [...]

01 [...]
02 .controller('MainCtrl', function($scope, $http) {
03         $http.get('http://localhost:8080/demo/rest/contacts/').then(function(resp) {
04                 $scope.items = resp.data;
05         }, function(err) {
06                 alert('Could not get data!');
07         });
08 });

Diese »items« lassen sich nun im HTML-Frontend verwenden, um die Liste zu füllen (Listing 5). Das »ng-repeat« -Attribut fordert Angular dazu auf, über die Daten im »items« -Bereich zu iterieren und jedem Ding den Namen »item« zu verpassen (Zeile 4). Dafür müssen Sie in der Demo Daten eingetragen haben. Die doppelten geschweiften Klammern bestimmen das Aussehen der angezeigten Daten. Erst erscheint der Name, gefolgt von einem Komma, dann vom Alter.

01 [...]
02 <ion-list>
03   <ion-item ng-repeat="item in items">
04      {{ item.name }}, {{ item.age }}
05   </ion-item>
06 </ion-list>
07 [...]

Damit ist eine Liste entstanden, die die App nach dem Start abholt. Um in ihr Updates unterzubringen, ergänzen Sie ein Pull-to-Refresh-Feature, wie es beispielsweise Twitter-Apps mitbringen. Glücklicherweise liegt auch diese Funktion bereits als fertige Komponente vor, Sie müssen sie lediglich in der HTML-Datei vor der Liste einfügen (Listing 6).

01 [...]
02 <ion-refresher on-pulling="fetch()">
03 </ion-refresher>
04 <ion-list>
05 [...]

Abschließend fehlt im Javascript-Code noch eine Bereichsfunktion mit dem Namen »fetch()« , um die Daten abzuholen. Damit sie das tut, passen Sie den Abholcode aus Listing 4 noch ein weiteres Mal an (Listing 7).

01 angular.module('ionicApp', ['ionic'])
02 .controller('MainCtrl', function($scope, $http) {
03   $scope.fetch = function() {
04     $http.get('http://localhost:8080/demo/rest/contacts/').then(function(resp) {
05       $scope.items = resp.data;
06     }, function(err) {
07       alert('Could not get data!');
08     }).finally(function() {
09     $scope.$broadcast('scroll.refreshComplete');
10     });
11   };
12   $scope.fetch();
13 });

Dank des finalen Anstrichs erfährt die Aktualisierungskomponente davon, wenn die App frische Daten geholt hat, und passt ihren Status an. Da Sie nach dem Start der App auch weiterhin die ursprüngliche Liste sehen möchten, steht in Zeile 12 der Befehl »$scope.fetch();« . Klappen Sie jetzt die Liste auf, holt sie die Kontakte aus dem Backend.

Wollen Sie den Code auf einem tatsächlichen Gerät einsetzen, müssen Sie »localhost« durch eine IP-Adresse ersetzen. Zugleich starten Sie Wildfly mit der Option »-b 0.0.0.0« , damit andere Maschinen im Netzwerk den Server erreichen.

Fazit

Alles in allem fällt es ziemlich leicht, neue Technologien zu testen, wenn eine IDE die Lernkurve am Anfang abschwächt. Entwickler setzen so schnell neue Dienste auf und erreichen auf diese Weise kurze Schreib- und Prüfzyklen. Das wiederum beschleunigt den gesamten Lernprozess.