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 NPM bzw. 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.