Page Comparison

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)

      Image Removed

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

      Image Removed

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

      Code Block
      language java
      @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)

      Image Removed

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

   Image Removed

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:

      Code Block
      language css
      .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

      Image Removed

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

      Image Removed

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

      Code Block
      language css
      [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

   Image Removed

   Theme Workflow
   Mit Custom Themes können die großflächigsten Änderungen vorgenommen werden. Diese vereinheitlichen die gesamte Anwendung. Themes kann man aber nicht während der Runtime ändern.

6. ThemeVariant Workflow
   Theme-Variants können Komponente verändern, ohne das überstehende Theme zu brechen. Sind leicht-bediehnlich per Rapidclipse Dialog und sind gut wenn eine Komponente ein alternativ-design braucht oder herausstechen soll.

7. Css-Class Workflow
   Falls die Theme-Variants nicht ausreichen können selber Css-Klassen erstellt werden. Dies erfordert mehr manuellen Aufwand, aber ermöglicht eine feinere Kontrolle über die Eigenschaften.

8. Component Styling Workflow
   Eigenschaften die in der Shadow-Dom einer Komponente sind, können nicht mit puren Css-Klassen verändert werden. Dafür müssen extra für die einzelnen Komponenten ein Styling erstellt werden. Dies ermöglicht aber die feinste Kontrolle über das Aussehen einer Komponente.

9. Styling Panel Workflow
   Für View-Spezifische kleine Css-Styling Änderungen wie Margins, oder simple Eigenschaften die kein Shadow-Dom-Zugriff brauchen kann der Styling-Dialog im Rapidclipse Properties-Panel benutzt werden.

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

...