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

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.

International JavaScript Conference

The Microfrontend Revolution: Using Webpack 5 Module Federation with Angular

by Manfred Steyer

React Workshop: Single Page Applications Powered by React

by Sebastian Springer

Das große Hybrid-Trainingsevent für Angular

Angular-Preformance: So zünden Sie den Turbo

mit Christian Liebl (Thinktecture AG)

Angular Testing: Werde zum Profi – schreibe Tests

mit David Müllerchen (webdadve.de)

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