Migration von 10/X zur Version 11

Die Migration einer RC 10.4.1 Application funktioniert grundsätzlich in 2 Schritten. Eine automatische Migration innerhalb der IDE und ein manueller Anteil im Bereich CSS. Nachfolgend wird beschrieben welche Schritte Sie wie durchführen müssen um Ihr Projekt auf die neue Version 11 zu heben. Sorgen Sie zu jedem Zeitpunkt für eine angemessene Backup Strategie Ihres Projektes (GIT, Manuelle backups, etc.)

Schritt 1 Vorbereitung:

1. Erstellen Sie eine neue RapidClipse 11 Installation mit einem neuen Workspace

2. Importieren Sie Ihre Sicherung des Projektes auf der Sie die Migration durchführen wollen oder Clonen Sie Ihr Projekt in die IDE und erstellen Sie einen neuen Branch auf dem die Migration durchgeführt werden kann

3. Sorgen Sie dafür, dass in der neuen IDE die selben grundlegenden Einstellungen vorhanden sind welche auch in der version 10.4.1 vorhanden waren z.B.

   1. JDK Versionen verfügbar machen

   2. Datenbank Verbindungen aus dem “DataSourceExplorer” exportieren und importieren

   3. Codeformatter einbinden

   4. Eventuelle Plugin wie JRebel installieren

   5. Tomcat Version installieren

4. Sorgen Sie dafür, dass sich zu diesem Zeitpunkt keine Compilerfehler im Projekt befinden.

5. Maven update durchführen um eventuell Maven Fehler im Projekt zu eliminieren.

   1. Rechtsklick auf das Projekt → Maven → Maven Update

6. Abgesehen von bestimmten Metadateien dürfen sich keine Änderungen durch das öffnen in der neuen IDE oder am Projekt ergeben

Schritt 2 Automatische Migration:

1. Die automatische Migration kann über zwei Wege gestartet werden

   1. Beim Start der IDE wird automatisch geprüft ob sich Projekte im “ProjectManagement” befinden welche noch nicht upgedated wurden. Daraufhin wird gefragt ob Sie updaten möchten.

   2. Rechtsklick auf das Projekt → RapidClipse → Update Project

2. Nachfolgende Änderungen sollten sich durch die Migration ergeben

   1. Änderungen in der Pom.xml

      1. Framework Versionen werden angehoben

      2. Zusätzliche notwendige Einträge in der Pom.xml hinzugefügt

      3. Nicht mehr benötigte Einträge in der Pom.xml entfernt

   2. Dateiendungen der “.ui.xml” werden auf “.uixml” geändert

   3. Neues “Frontend” Package wird dem root hinzugefügt

   4. Anpassung der .gitignore falls vorhanden für alle NPM Elemente

Schritt 3 Manuelle Migration:

Zunächst, was hat sich grundlegend geändert:

1. @HtmlImports im code funktionieren nicht mehr und wurde durch @CSSImports ersetzt.
   Beispiel:

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

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

2. Wie man weiterhin am obigen Beispiel erkennen kann gibt es keine .html Dateien mehr diese werden alle durch .css Dateien ersetzt

3. Die CSS Dateien befinden sich nicht mehr in “.main.webapp.frontend.” sondern ab sofort direkt im root Verzeichnis im Ordner “.frontend.”

4. Die Struktur der CSS Dateien hat sich ebenfalls geändert hier dazu näheres: https://vaadin.com/docs/v14/flow/styling/custom-theme

Schritte für die Migrations:

1. Schritt 1: Egal ob Sie in Ihrer alten Applikation ein Theme verwendet haben oder nicht ist es dennoch sinnvoll zunächst ein neues Theme zu erstellen.
   Klicken Sie dazu auf den Theme erstellen Button in der Sektion “frontend“ des ProjectManagement.

   Open

   

   Vergeben Sie einen Namen für das neue Theme hier als Beispiel “basic“. Als Ergebnis sollte Ihr “frontend” Bereich wie folgt aussehen

   Open

   

2. Schritt 2: Alle Theme Variablen werden jetzt aus der früheren “shared-styles.html“ in die neue “styles.css“ kopiert.

   Selbiges gilt auch für Theme Varianten wie das Lumo Dark.

3. Schritt 3: Eigene Style Klassen umziehen. Wie bereits oben beschrieben können eigene Styleklassen einfach umgezogen werden. Allerdings dürfen diese Dateien keine .html Dateien sondern müssen .css Dateien sein.
   Aus einer MyCustomStyles.html wird eine MyCustomStyles.css. Der Inhalt bleibt allerdings unverändert. Allerdings müssen die Imports angepasst werden, dafür gibt es zwei Möglichkeiten.

   1. Alle imports werden in der styles.css zusammengefasst

   2. Oder die imports werden direkt bei den jeweiligen Java Klassen hinzugefügt.

   3. Ein Mix aus beiden Varianten ist ebenfalls möglich, allerdings muss ein Import in einer Java Klasse nur einmal auf der obersten Ebene importiert werden.

4. Schritt 4: Komponenten bezogene Styles die über ein “dom-module“ umgesetzt wurden umziehen
   Beispiel Version 10.4.1:

   1. Erstellen Sie im Ordner “components“ eine Datei mit dem Name “vaadin-app-layout.css“. Der Name entspricht dabei immer dem Namen der Komponente welche Sie verändern möchten.

   2. Jetzt fügen Sie nur noch den “:host“ part in die neue Datei ein

   3. Bei den Imports verhält es sich dann ganz genauso wie bei den oben beschrieben custom styles.

Alle Information zu Themes sind natürlich in unsere Dokumentation zu finden. Frontend & Design oder ebenfalls direkt bei Vaadin. https://vaadin.com/docs/v14/flow/styling