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.
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.
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 bietet Unterstützung für dieses neue Designsystem
Der neu platzierte Frontend-Ordner, der nun ausserhalb der normalen Projektstruktur liegt, ist im ProjectManagement als eigener Bereich ausgeführt.
Hier ist auch eine Funktion zum Erstellen neuer Custom-Themes integriert.
Rapidclipse bietet im UI-Designer Funktionen zur Nutzung von Custom-Themes an.
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.