Sie haben sicherlich schon viel über xJS Frameworks, allen voran AngularJS, gehört. Als Vaadin Entwickler haben Sie sich vielleicht auch schon die Frage gestellt, wie Sie mit diesen Frameworks umgehen sollen. Ignorieren? Das wäre ein Jammer, denn die Frameworks eröffnen eine Menge großartiger Möglichkeiten. Ein kompletter Wechsel? Wäre auch schade, da Sie dann auf Vaadin verzichten müssten.
Glücklicherweise muss es aber nicht zwingend Vaadin oder AngularJS heißen. Vaadin und AngularJS klingt doch schon viel besser, oder?
Im Vaadin Directory gibt es ein Add-on, mit dem sich das Beste aus beide Welten kombinieren last. Es heißt Vaangular.
Hier ein paar Gründe, warum Sie Vaadin und AngularJS kombinieren sollten:
- Vorhandene Skills im Team nutzen bzw. streuen
- Responsiveness (bei schlechter Netzqualität) durch Client-seitige Logik erhöhen
- Bestehende AngularJS Assets verwenden
- AngularJS als Alternative für die GWT Entwicklung verwenden
Wie gesagt: Wenn Sie AngualrJS für die Implementierung der Client-seitigen Logik verwenden, können Sie komplett auf GWT Entwicklung verzichten. Und: Das Add-on nutzt die Client-Server-Kommunikation von Vaadin. Damit integrieren sich die AngularJS Komponenten Server-seitig nahtlos in die bestehende Vaadin Architektur. Es ist keine separate Implementierung eines REST-Services nötig.
Hier ein Beispiel, wie Sie mit Vaangular die Responsiveness einer Vaadin Anwendung erhöhen können. Stellen Sie sich vor, dass Sie eine Wettervorhersage bereitstellen möchten. Über einen Schieberegler kann die Uhrzeit festlegt werden und es werden dann genauere Informationen für diese Uhrzeit geliefert.
Es wäre bei schlechtem Netz (das wir alle noch kennen) nicht sehr praktikabel, mit jeder Bewegung des Schiebereglers einen Server-Roundtrip auszulösen. Die Bewegung auf der Client-Seite sofort zu verarbeiten, ist hingegen kein Problem. Und Client-Entwickler sind mit AngularJS vielleicht schon vertrauter als mit GWT/Vaadin.
Um einen AngularJS basierten Schieberegler in eine Vaadin Anwendung zu integrieren, sind ein paar Schritte nötig. Ein komplettes Beispiel finden Sie übrigens auf Github.
Zunächst müssen Sie das Add-on in Ihr Projekt einbinden.
Dann implementieren Sie ein HTML-Template, welches AngularJS-Bindungs enthält:
[code language=”html”]
<div ng-controller="WeatherController">
<div ng-bind-html="content()"></div>
<input type="range" min="0" max="{{userState.times.length-1}}" step="1" ng-model="sliderPos" />
<div>
<div ng-repeat="t in userState.times" ng-click="moveSlider($index)">
<div>{{t}}</div>:00
</div>
</div>
</div>
[/code]
Im nächsten Schritt implementieren Sie einen AngularJS Controller (auch wenn hier JavaScript statt Java verwendet wird, bitte den Test nicht vergessen).
[code language=”JavaScript”]
angular.module(‘weatherModule’, [‘ngSanitize’])
.controller(‘WeatherController’, function($scope, $connector, $sce) {
$scope.sliderPos = 0;
$scope.content = function() {
var res = $scope.userState.entries[$scope.sliderPos];
return $sce.trustAsHtml(res);
};
$scope.moveSlider = function(val) {
$scope.sliderPos = val;
};
});
[/code]
Die Client-Seite ist nun bereits implementiert. Nun ist noch ein wenig Arbeit auf der Server-Seite nötig. Implementieren Sie eine Vaadin-Komponente, die von de.akquinet.engineering.vaadin.vaangular.angular.NgTemplate oder de.akquinet.engineering.vaadin.vaangular.angular.NgTemplatePlus erbt. Die Wetterdaten können Sie wie folgt setzen:
[code language=”Java”]
public void setData(int[] times, String[] entries) {
validateParameters(times, entries);
this.times = times;
this.entries = entries;
setUserState(&amp;amp;quot;times&amp;amp;quot;, times);
setUserState(&amp;amp;quot;entries&amp;amp;quot;, entries);
markAsDirty();
}
[/code]
Alles, was per setUserState() gesetzt wird, wird an die Client-Seite bzw. AngularJS weitergereicht.
Jetzt müssen Sie die Komponente nur noch in Ihre Vaadin UI integrieren und den Server starten – und schon haben Sie einen Teil Ihrer Vaadin Anwendung durch AngularJS ersetzt.
Natürlich können Sie auch Daten von der Client-Seite / AngularJS an den Server senden (hier werden übrigens beide Modi unterstützt: Immediate und Deferred) oder aus einem AngularJS Controller Server-seitige Methoden aufrufen. Wenn Sie die HTML Elemente geschickt mit Vaadin CSS versehen, wird Ihre AngularJS Komponente dann auch vom Design dem Rest Ihrer Anwendung entsprechen.
Für mehr Details und ausführliche Beispiele verweisen wir auf unser Github-Projekt.
Sie finden das Original dieses Posts auf vaadin.com/blog
Oliver Damm, Axel Meier and Sebastian Rothbucher sind Vaadin & Web Entwickler und Trainer. Alle drei arbeiten für die akquinet AG in Hamburg. Wenn sie nicht gerade den FC St. Pauli anfeuern oder an der Alster entspannen, bauen sie Geschäftsanwendungen für das Web – natürlich mit Vaadin.
