| Table of Contents |
|---|
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.
| Expand |
|---|
* 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 frontend-Ordner, in dem alle zusätzlichen frontendFrontend-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
...
Der neu platzierte Frontend-Ordner, der nun ausserhalb der normalen Projektstruktur liegt, ist im ProjectManagement als eigener Bereich ausgeführt.
...
und Custom Themes
Funktion zum einfachen Erstellen neuer Custom-Themes im “frontend”-Bereich des ProjectManagements integriert.
Rapidclipse bietet im Custom-Themes in die Funktionen integriert, die der Rapidclipse UI-Designer Funktionen zur Nutzung von Customzum Setzen und Ändern des Projekt-Themes anbietet.
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.
...
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
| Info |
|---|
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.
...