Vaadin 14: Neue LTS-Version bringt Unterstützung für npm- und JavaScript-Module

© Shutterstock / Magnus Binnerstam
Vaadin, die Open-Source-Plattform für das Entwickeln von Webanwendungen, ist in Version 14 erschienen. Das Web-Framework unterstützt nun unter anderem auch npm- und JavaScript-Module. Vaadin 14 bringt außerdem die Möglichkeit, Flow-Anwendungen als WebComponent zu exportieren.
Mit Vaadin 14 ist die nächste LTS-Version auf GitHub und in Maven Central verfügbar. Hierbei handelt es sich um eine Version, für die mindestens 5 Jahre Support verfügbar sein wird. Natürlich können Firmen diese Zeitspanne auf bis zu 10, im Extremfall auf 15 Jahre erweitern. Dabei handelt es sich dann allerdings um kommerziellen Support. Genaueres dazu findet sich in der Roadmap des Frameworks.
Vaadin 14: Das ist neu
Für Vaadin 14 wurden einige Änderungen unter der Haube vorgenommen. Zum Beispiel ist es nun möglich, Polymer-3-, npm- und JavaScript-Module anstelle von Polymer-2-, Bower- und HTML-Importen zu verwenden. Aber auch für den Java-Entwickler, der sich auf die serverseitige Entwicklung konzentriert, sind einige Neuerungen dazugekommen.
Durch das Hinzufügen von @PreserveOnRefresh
zu einem Router-Layout oder einer Route, das dafür sorgt, dass beim neu laden
der Seite durch den Benutzer dennoch der Komponentenstatus erhalten bleibt. Mit einfachen Worten: Der Reload-Button im Browser kann ohne Verluste durch den Benutzer verwendet werden. Zu beachten ist der Unterschied zu Vaadin 8. Dort wurde die Annotation an die View selbst angebracht. Hier ist es nun das Layout oder die Klasse mit der @Route
-Annotation.
Zudem ist immer wieder die Frage aufgekommen, ob man eine Vaadin-Flow-Anwendung selbst als WebComponent in eine andere Anwendung einbetten kann. Das ist nun mit allen Vor- und Nachteilen möglich, indem die Anwendung selbst als WebComponent exportiert wird. Hierzu später mehr. Hinzugekommen ist außerdem der Support, um Rückgabewerte zu erhalten, wenn von der Serverseite aus auf dem Client JavaScript ausgeführt wird. Der Rückgabewert kann dann durch den Aufruf von Page.executeJs (String expression, Serializable ... parameters)
an die Serverseite zurückgesendet werden.
Um auf der Serverseite in Flow detailliertere Informationen über die Client-Seite zu erhalten, kann man Page.retrieveExtendedClientDetails
aufrufen. Zu den bereitgestellten Details zählen unter anderem die Bildschirmbreite und -höhe sowie die Zeitzone, die der Browser verwendet.
Deep-dive in Vaadin 14
Auf die Highlights des Releases sind wir in Kürze bereits oben eingegangen. In diesem Abschnitt wollen wir ein wenig ins Detail zu den einzelnen Neuerungen gehen.
Grid Column mit Autosizing
Als Standardeinstellung ist festgelegt, dass jede Spalte die gleiche Breite haben sein soll. Allerdings ist das nicht immer der gewünschte Effekt. Um nun alle oder auch nur eine bestimmte Untermenge an Spalten diesem neuen Verhalten anzupassen, wird über alle betroffenen Spalten iteriert und das Attribut autoWidth
auf true
gesetzt. Um die neuen Einstellung zu aktivieren muss man dann zu dem gewünschten Zeitpunkt die Methode recalculateColumnWidths()
aufrufen. Dann sind alle notwendigen Informationen vorhanden, um die jeweils aktive Spaltenbreite anhand der Werteinhalte zu setzen.
Grid mit Drag and Drop
Das Grid unterstützt nun auch Drag and Drop
zwischen zwei Instanzen. Hierzu muss als erstes D6D für Zeilen aktiviert werden. Das erfolgt am Quell-Grid mittes der Methode setRowsDraggable(true)
. Ebenfalls muss man angeben, welche Daten transportiert werden sollen. Dazu benötigt man die Angabe des Datenformates, zum Beispiel text/email
und die technische Angabe, wie die dafür vorgesehenen Daten aus der Zeile extrahiert werden. In diesem Beispiel ist es lediglich der Getter Person::getEmail
, der von der Datenklasse aufgerufen werden soll.
Das Ziel muss dann in den Zustand dropMode == GridDropMode.BETWEEN
versetzt werden. Damit die Daten, die mittels Event geliefert werden, richtig verarbeitet werden können, implementiert man für das Ziel-Grid einen DropListener
.
GridPro – Custom Renderer / Editor
Wird ein eigener Renderer für ein Attribut einer Spalte benötigt, so kann man diesen nun einfach bei der Erzeugung der EditColumn
setzen.
Auf dem selben Weg kann man auch eigene Editoren übergeben, um den jeweiligen Wert innerhalb der Zeile manipulieren zu können.
Notifications
Dem Lumo-Theme wurden weitere Notification-Varianten hinzugefügt, um auf einfache Weise den unterschiedlichen Bedeutungen besser entsprechen zu können. Natürlich kann man dies auch als Basis dafür nehmen, zusätzliche eigene Varianten zu erzeugen.
Neue Change Modes für Textfelder
Wenn man Eingabemasken erzeugt, kommt man immer wieder an den Punkt, an dem man unteschiedlich auf die Veränderungen reagieren möchte. Manchmal ist es wünschenswert, nicht erst bei der vollständigen Eingabe den Wert zu verarbeiten. Bei einer Suche kann es schon hilfreich sein, basierend auf den schon getätigten Eingaben, eine Vorauswahl der möglichen Ergebnisse angezeigt zu bekommen. Das war auch schon vorher möglich, erzeugte dann aber bei jedem Tastenschlag einen Event. Wenn jede Änderung in einem Request ended, ist das allerdings bei den meisten Systemen einfach zu viel. Die in Vaadin 14 neu hinzugefügten Modi ermöglichen es nun, ein Event verzögert oder beim Erreichen eins definierten Time-outs ein zu senden.
Reloading ohne UI-Zustandsverlust
In Vaadin 8, basierend auf GWT, gab es die Möglichkeit, den Zustand einer UI bei einem Reload der Seite beizubehalten. Diese Funktion ist nun in Vaadin 14 ebenfalls enthalten. Somit kann die Verwendung des reload
-Buttons durch den Benutzer derart unterbunden werden, dass der Zustand auf der Serverseite erhalten bleibt. Es wird dem Benutzer also keine neue Instanz, sondern die zuvor erzeugte wieder zur Verfügung gestellt. Um dieses zu erreichen, muss der Klasse, die das Layout oder die jeweilige View definiert, die Annotation @PreserveOnRefresh
hinzugefügt werden.
@Route("myview") @PreserveOnRefresh public class PreservedView extends VerticalLayout { public PreservedView() { add(new TextField("Content will be preserved")); // ... } }
@PreserveOnRefresh public class PreservedLayout extends FlexLayout implements RouterLayout { public PreservedLayout() { // ... } }
Genauere Details finden sich in der Online-Dokumentation.
ComboBox – Defaults
Bei der ComboBox
gab es eine kleine Änderung im Bereich der Standardeinstellungen. Beginnend mit Vaadin 10 bis hin zur aktuellen Version von Vaadin 13 ist standardmäßig der ClearButton
einer ComboBox
aktiviert gewesen. Das hat sich mit Vaadin 14 geändert. Um diesen ClearButton
wieder anzuzeigen, muss man das Attribut clearButtonVisible
auf true
setzen.
Neues App-Layout
Mit Vaadin 14 wird auch ein neues App-Layout bereitgestellt. Dieses gibt einem ein Basis-Layout für reponsive Web-Apps, das eine responsive Seitennavigationsleiste mit vertikalen Menüpunkten beinhaltet. Hierzu gibt es auch ein Online-Tutorial.
MenuBar
Eine klassische Menüzeile inklusive entsprechender Struktur für Untermenüs kann mit der Klasse MenuBar
erzeugt werden.
npm
Eine der größten Änderungen in Vaadin 14 ist die platfforminterne Verwendung von npm / webpack. Templates können daher ab sofort optional als JavaScript-Dateien definiert werden. Dies ermöglicht es, WebComponents von Drittanbietern wesentlich einfacher verwenden zu können. Auf der Serverseite wird dann das Template via @JsModule
-Annotation eingebunden und kann hiernach normal verwendet werden.
Rückgabewerte von Client-seitigem JavaScript
Mittels der Methode executeJS(..)
kann auf der Client-Seite eine Funktion getriggert werden. Um nun die Rückgabewerte verwenden zu können, müssen diese vom Typ herdefiniert werden. Der Methode then
kann dann ein Consumer
übergeben werden, indem der Rückgabewert anschließend verarbeitet wird.
Zugriff auf detailliertere Browserinformationen
Auf der Serverseite hat man nun mehr Informationen über den gerade verwendeten Browser. Dazu zählen Informationen wie Bildschirmauflösung, Zeitzonen und vieles mehr.
Export als einbettbare WebComponent
Diese Möglichkeit ermöglicht es einem auf komfortable Art und Weise, die Interaktion mit Legacy-Systemen oder bei der Migtration von anderen Frameworks. Um dieses zu erreichen, muss man einen WebComponentExporter
für die zu exportierende Komponente implementieren. Vaadin erzeugt daraus dann eine JavaScript-Datei, die an gegebener Stelle importiert werden kann
Weitere Informationen zur aktuellen Version von Vaadin gibt es auf GitHub und natürlich auf der Homepage des Projektes.
Happy Coding
Vielleicht sollte man noch erwähnen, dass es auch einen Vaadin-Initializr für Spring/Vaadin-Anwendungen gibt, ähnlich dem Spring Initializr.
Zu finden unter: https://start.vaadin.com/
Hier können vielen Vaadin-relevante Optionen interaktiv schon im Vorfeld ausgewählt werden, wie z. B. das Zielgerät, der „Anwendungstyp“, die gewünschte Implementierung, die Schriftgröße, Farben usw.
Meines Erachtens nach sehr schön gemacht.