Migration from 10/X to version 11

The migration of a RC 10.4.1 application basically works in 2 steps. An automatic migration within the IDE and a manual part in the CSS area. Below is a description of what steps you need to do and how to do them in order to lift your project to the new version 11. Make sure you have a proper backup strategy for your project at all times (GIT, manual backups, etc.).

Step 1 Preparation:

  1. Create a new RapidClipse 11 installation with a new workspace.

  2. Import your backup of the project you want to migrate to or clone your project into the IDE and create a new branch to migrate to

  3. Make sure that the same basic settings are available in the new IDE that were available in version 10.4.1, e.g.

    1. Make JDK versions available

    2. Export and import database connections from "DataSourceExplorer".

    3. Include code formatter

    4. Install any plugin like JRebel

    5. Install Tomcat version

  4. Make sure that there are no compiler errors in the project at this time.

  5. Maven update to eliminate any Maven errors in the project.

    1. Right click on the project → Maven → Maven Update.

  6. Except for certain metafiles, no changes must result from opening in the new IDE or to the project

Step 2 Automatic migration:

  1. The automatic migration can be started in two ways

    1. With the start of the IDE it is checked automatically whether there are projects in the "ProjectManagement", which were not updated yet. Thereupon it is asked whether you would like to update.

    2. Right click on the project → RapidClipse → Update Project.

  2. The following changes should result from the migration

    1. Changes in the Pom.xml

      1. Framework versions are raised

      2. Added additional necessary entries in Pom.xml

      3. Removed entries in Pom.xml that are no longer needed

    2. File extensions of ".ui.xml" are changed to ".uixml".

    3. New "frontend" package is added to the root

    4. Adjustment of the ".gitignore" if available for all NPM elements

Step 3 Manual migration:

First, what has changed fundamentally:

  1. @HtmlImports in the code no longer work and has been replaced by @CSSImports.
    Example:

    1. Version 10.4.1 old import: @HtmlImport("frontend://styles/shared-styles.html")

    2. Version 11 new import: @CssImport("./styles/custom-style.css")

  2. As you can further see from the above example, there are no more .html files these are all replaced with .css files.

  3. The CSS files are no longer located in ".main.webapp.frontend." but from now on directly in the root directory in the folder ".frontend. ".

  4. The structure of the CSS files has also changed here more details: https://vaadin.com/docs/v14/flow/styling/custom-theme

Steps for migration:

  1. Step 1: Whether you used a theme in your old application or not, it still makes sense to create a new theme first.
    To do this, click on the Create Theme button in the "frontend" section of the ProjectManagement.

    image not found

    Assign a name for the new theme here as an example "basic". As a result your "frontend" area should look like this

    image not found

  2. Step 2: All theme variables are now copied from the former "shared-styles.html" to the new "styles.css".

    image not found

    The same is true for theme variants like the Lumo Dark.

    image not found

  3. Step 3: Move your own style classes. As described above, you can easily move your own style classes. However, these files must not be .html files, but .css files.
    A MyCustomStyles.html becomes a MyCustomStyles.css. The content remains unchanged. However, the imports must be adapted, for this there are two possibilities.

    1. All imports are combined in the styles.css.

      image not found

    2. Or the imports are added directly to the respective Java classes.

      image not found

    3. A mix of both variants is also possible, but an import in a Java class must be imported only once on the top level.

  4. Step 4: Relocate component related styles implemented via a "dom-module".
    Example version 10.4.1:

    image not found .. In the "components" folder, create a file with the name "vaadin-app-layout.css". The name always corresponds to the name of the component you want to change. .. Now just add the ":host" part to the new file

    + image not found

    1. With the Import it behaves then completely exactly like with the custom styles described above.

      image not found

All information about themes can be found in our documentation. Frontend & Design or also directly at Vaadin. https://vaadin.com/docs/v14/flow/styling