Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 3 Next »

Welches Theme ein Projekt nutzt wird mit Hilfe der @Theme Annotation festgelegt.
Diese Annotation muss in der Startseite, also der Klasse mit @Route("") gesetzt werden - wenn diese kein ParentLayout hat.
Falls die Startseite ein ParentLayout hat, muss dort die @Theme Annotation gesetzt werden.

Es gibt zwei vordefinierte Themes: Lumo and Material, wobei Lumo das Default-Theme ist. Es ist auch möglich, custom-Themes zu definieren.

  • Wenn kein Theme explizit definiert ist, wird das Lumo-Theme verwendet.

  • Nur ein einziges Theme kann pro Applikation verwendet werden. Es ist also z.B, nicht möglich gleichzeitig für eine Komponente Theme Lumo zu verwenden und für eine Zweite das Theme Material

  • Ein Projekt kann mehrere custom-Themes beinhalten - aber nur eines verwenden

  • Es ist bei laufender Anwendung kein Theme-Wechsel möglich

RapidClipse bietet Unterstützung beim Erstellen von Custom Themes und beim Generieren der @ThemeAnnotation.

Beispiele für das Setzen eines Themes:

Lumo in der Variante “Dark”

@Route("")
@Theme(value = Lumo.class, variant = Lumo.DARK)
public class MainLayout extends VerticalLayout {
  ...
}

Custom Theme “my-theme”

@Route("")
@Theme(themeFolder = "my-theme")
public class MainLayout extends VerticalLayout {
  ...
}

Die Theme-Änderungen sind erst nach einen Background-Server-Refresh im GUI-Builder sichtbar. Ein Button dafür ist Rechts-Oben im GUI-Builder vorhanden (Siehe Screenshot)

  • No labels