Technologie Change allgemein

1 Umstellung Vaadin Design-Management-Tooling
- 1.1 Rapidclipse und das neue Frontend
2 Custom Themes
- 2.1 Rapidclipse und Custom Themes
3 UI Designer
- 3.1 Hintergrundserver pro Projekt
- 3.2 Konsolenausgabe für Hintergrundserver
4 Production Mode Build
- 4.1 RapidClipse und der Production Mode-Build

Umstellung Vaadin Design-Management-Tooling

RapidClipse-Projekte basieren auf Vaadin und dessen Komponenten, welche auf WebComponents basiert, also im Grunde HTML & CSS.

Projekte ab RC11 nutzen Vaadins neues Management für diese Frontend-Dateien, welches nun auf ES6 Modulen (oder auch JS Module) statt wie bisher auf HTML-Imports basiert.
Intern wird nun zum Zusammenstellen und Management des Designs PNPM genutzt, nicht mehr Bower.

Auch die Art und Weise wie die Frontend-Dateien dann beim Build aufbereitet und zusammengestellt werden ändert sich: Vorher wurden sie duch Bower als webjars bereitgestellt, nun wird dazu webpack genutzt.
Webpack packt die Frontend-Dateien im "production"-Mode, im Developer-Mode allerdings werden sie on-the-fly bereitgestellt, indem ein zusätzlicher "webpack development server" im Hintergrund gestartet wird.
Dadurch ist es nun auch möglich, Style-Änderungen* live** im RapidClipse-Designer zu sehen.

* in vorhandenen Css-Dateien. ** eingentlich beim nächsten Refresh der UI

Beide Funktionen, das Management per NMP/PNPM und Erstellen eines Bundles im Production Mode per webpack sind als Maven-Plugins automatisiert.

Im Zuge der Umstellung auf NPM/PNPM verändert sich auch die Struktur von RC/Vaadin-Anwendungen: Der frontend-Ordner, in dem alle zusätzlichen Frontend-Dateien (*.js, *.css) liegen, liegt nicht mehr im src/main/webapp/-Ordner, sondern direkt im Projekt-Root-Ordner.

Bilder und andere statische Resources sollten dagegen im src/main/webapp Ordner verbleiben.

Rapidclipse und das neue Frontend

Der neu platzierte Frontend-Ordner, der nun ausserhalb der “normalen” (Maven/Java) - Projektstruktur liegt, ist im ProjectManagement als eigener Bereich ausgeführt.

Custom Themes

Der Umgang mit Design-Anpassungen wurde durch die Einführung von Custom Themes vereinfacht.
Es ist nun möglich, ein Custom-Theme zu erstellen, einfach durch Konvention, indem ein Unterordner im frontend/themes-Ordner angelegt wird, der mindestens zwei Unterelemente beinhaltet: einen components/-Ordner und eine styles.css-Datei:

Alle so erstellten Custom-Themes basieren auf dem Lumo-Theme, sie können analog zu diesem und zum Material-Theme per @Theme-Annotation genutzt werden:

Rapidclipse und Custom Themes

Funktion zum einfachen Erstellen neuer Custom-Themes im “frontend”-Bereich des ProjectManagements integriert.
Custom-Themes in die Funktionen integriert, die der Rapidclipse UI-Designer zum Setzen und Ändern des Projekt-Themes bietet.

UI Designer

Hintergrundserver pro Projekt

Bisher lief im Hintergrund eines jeden UI-Designer-Fensters ein eigener Server, der die Ansicht bereitstellte.
Dieses Design wurde verändert, unter anderem um der verlängerten Startzeit durch die NPM/PNPM-Tasks des neuen Frontend-Toolings und dem Start des zusätzlichen "webpack development servers" Rechnung zu tragen.
Ab RC11 läuft im Hintergrund pro Projekt ein Server, der die UIs aller UI-Designer-Fenster eines Projekts bedient. Dieser Server bleibt auch gestartet wenn das Fenster wieder geschlossen wird.

Das hat zur Folge, dass

nach dem RapidClipse-Start der Start des Hintergrundservers für das erste geöffnete UI-Designer-Fenster eines Projekts etwas länger dauert
alle anderen UI-Designer-Fenster schnell geöffnet werden können
das Neuladen einer Seite schnell passiert
Änderungen an den Zoom- und Theme-Einstellungen eines UI-Designer-Fensters auch alle anderen UI-Designer-Fenster eines Projekts betreffen

Konsolenausgabe für Hintergrundserver

Es kann natürlich immer einmal vorkommen, dass der Hintergrund-Server z.B. durch irgendwelche Änderungen im Projekt nicht mehr funktioniert.

Um dann an weitere Informationen zu kommen ist es möglich, die Konsolenausgabe für Hintergrundserver zu aktivieren.

Die Einstellung “Show designer console” bestimmt die Sichtbarkeit der Konsole und ist unter

Window → Preferences → RapidClipse → GUI Editor → Designer Server

zu finden.

Production Mode Build

In früheren Versionen konnte eine Applikation entweder im Developer Mode oder im Production Mode ausgeführt werden, je nach Einstellung, ohne weitere Änderungen.

Es gibt weiterhin einen “Production Mode”, dieser wird aber nur genutzt um ein Production Mode-Build zu erstellen.

Bei diesem Production-Mode-Build wird ein zusätzlich vaadin:build-frontend-Goal des "vaadin-maven-plugins" aufgerufen. Dies ist ein Teil des neuen Design-Management-Tooling, um ein Frontend-Paket durch webpack erstellen zu lassen, welches dann Teil des war-files wird.

Dieses vaadin:build-frontend ändert aber zum Teil Daten und Pfade, die der webpack development server, der im Development Mode läuft, braucht.

Es ist dann oftmals so dass nach einem Production Mode-Build der Designer-Server im Hintergrund der UI-Builder-Fenster Probleme mit der Darstellung hat.

Dies kann durch ein Maven-Update, welches unter anderm vaadin:prepare-frontend ausführt und anschließendem Neustart des DesignerServers gelöst werden (Rechtscklick -> Maven -> Update Project”).

RapidClipse und der Production Mode-Build

RapidClipse bietet im Quick Launch View einen Button an, der den Production Mode-Build anstößt und zusätzlich automatisch die “Aufräumarbeiten” übernimmt.