Technology Change general
Conversion Vaadin Design Management Tooling
RapidClipse projects are based on Vaadin and its components, which is based on WebComponents, basically HTML & CSS.
Projects as of RC11 use Vaadin’s new management for these frontend files, which is now based on ES6 modules (or JS modules) instead of HTML imports as before.
Internally, PNPM is now used to assemble and manage the design, not Bower.
Also the way the frontend files are prepared and compiled during the build changes: Before they were provided by Bower as webjars, now webpack is used.
Webpack packs the frontend files in "production" mode, but in developer mode they are provided on-the-fly by starting an additional "webpack development server" in the background.
As a result, it is now also possible to see style changes* live** in the RapidClipse Designer.
-
in existing css files. Actually in the next refresh of the UI
Both functions, the management via NMP/PNPM and the creation of a bundle in production mode via webpack are automated as Maven plugins.
In the course of the change to NPM/PNPM the structure of RC/Vaadin applications also changes: The frontend folder, where all additional frontend files (.js, *.css) are located, is no longer in the src/main/webapp/ folder, but *directly in the project root folder.
Images and other static resources should remain in the src/main/webapp folder.
Custom Themes
Handling design customizations has been simplified with the introduction of Custom Themes.
It is now possible to create a custom theme, simply by convention, by creating a subfolder in the frontend/themes folder that contains at least two subelements: a components/ folder and a styles.css file:
All custom themes created in this way are based on the Lumo theme, they can be used analogously to it and to the Material theme via @theme annotation:
UI Designer
Background server per project
Previously, a separate server ran in the background of each UI Designer window, providing the view.
This design has been changed, among other things to account for the extended startup time due to the NPM/PNPM tasks of the new frontend tooling and the startup of the additional "webpack development server".
As of RC11, a server* runs in the background per project, which serves the UIs of all UI Designer windows of a project. This server remains started even if the window is closed again.
This has the consequence that
-
after RapidClipse startup the start of the background server for the first opened UI Designer window of a project takes a bit longer
-
all other UI Designer windows can be opened quickly
-
reloading a page happens quickly
-
Changes to the zoom and theme settings of a UI Designer window also affect all other UI Designer windows in a project.
Console output for background server
Of course, it can always happen that the background server stops working, e.g. due to some changes in the project.
To then get more information it is possible to enable the console output for background servers.
The "Show designer console" setting determines the visibility of the console and is available under
[.aui-icon .aui-icon-small .aui-iconfont-info .confluence-information-macro-icon]##
Window → Preferences → RapidClipse → GUI Editor → Designer Server
to find.
Production Mode Build
In previous versions, an application could be run in either Developer Mode or Production Mode, depending on the setting, without any further changes.
There is still a "Production Mode", but it is only used to create a Production Mode build.
This production-mode build calls an additional vaadin:build-frontend goal of the "vaadin-maven-plugin". This is part of the new design management tooling to let webpack build a frontend package which then becomes part of the war-file.
However, this vaadin:build-frontend partially changes data and paths needed by the webpack development server running in development mode.
It is then often so that after a Production Mode build, the Designer server has problems rendering in the background of the UI Builder windows.
This can be solved by a Maven update, which among other things runs vaadin:prepare-frontend and then restarting the DesignerServer (right click → Maven → Update Project").
