Design Workflow

Damit das Styling der Web-Anwendung einheitlich bleibt, kann diese Step-By-Step Liste als Wegweiser benutzt werden.

1. Custom-Theme erstellen mit dem Lumo theme editor

   1. In Rapidclipse ein neues Custom-Theme erstellen (Danach Rechtsklick auf Projekt und Refresh klicken)

      

   2. Css-Code dann beim Download kopieren und in die “styles.css” einfügen

      

   3. Im MainLayout oder der View mit der Route(““) die Theme-Annotation hinzufügen

      @Theme(themeFolder = "My-Cool-Theme")
      public class MainLayout extends VerticalLayout implements PageConfigurator, RouterLayout
      {

   4. Designer-Server refreshen um die Änderungen zu sehen (Für kleine Änderungen in den Dateien kann der Gelbe Refresh Pfeil daneben benutzt werden)

      

2. Einzelne Komponente haben verschiedene ThemeVariants die über den Properties-Panel geändert werden können. Hier ein Beispiel für Grids

   

3. Falls diese Theme-Variants nicht genügen können eigene “Theme-Variants” als Css-Klassen angelegt werden. Beispiel dazu:

   1. In styles.css eine neue Css-Klasse hinzufügen:

      .info-panel {
      	--lumo-primary-text-color: rgb(0, 0, 100);
      	background: lightblue;
      	margin-top: 0em;
      	margin-bottom: 0em;
      }

   2. In Rapidclipse bei den Komponenten diese unter “ClassName” einfügen

      

4. Um speziell für einzelne Komponente tiefergreifende Änderungen vorgenommen werden müssen, können direkt Custom-Styles dafür im components-Ordner angelegt werden

   1. Dafür im components-Ordner eine CSS-Datei anlegen die genauso heißt wie die Komponente

      

   2. Dort kann dann die Shadow-Dom verändert werden (Vaadin-Doku)

      [part="label"] {
      	font-size: large;
      }

5. Für ganz spezifische Änderungen, welche nur an einzelne Komponenten einer View geändert werden müssen, kann der Styles-Dialog in Rapidclipse helfen

   

Für Hilfe und tiefergreifende Beschreibungen kann die Vaadin-Dokumentation aufgeschlagen werden.