Java/Vaadin - Verwenden eines anderen Designs für einzelne Ansichten

Question

Kurzversion: Unterstützt Vaadin die Verwendung verschiedener Designs für verschiedene Ansichten/Layouts/Komponenten in einer laufenden Anwendung?

Längere Version: Ich versuche einige sehr grundlegende Funktionalität/"Modularität" zu erreichen, wo eine Klasse zur Verfügung gestellt wird, die View erweitert und dann zu einem bestimmten Container hinzugefügt wird. Das funktioniert derzeit "ok", mit dem Ansatz https://stackoverflow.com/a/60775/3560336, um eine bestimmte Klasse zu finden. Diese Ansicht verwendet nun jedoch das Thema, das in der Hauptbenutzeroberfläche für meine Anwendung verwendet wird. Gibt es eine Möglichkeit, diese Ansicht (oder was auch immer es sein könnte, z. B. CustomComponent) ein anderes Thema zu verwenden?

Answer 1

Soweit ich weiß, sind die Themen zur Laufzeit umschaltbar (siehe Beispielcode unten), aber sie sind auf globaler/UI-Ebene eingestellt. Wenn sich die Ansichten vollständig ändern und Sie keine gemeinsamen Abschnitte haben, die sich nicht ändern dürfen, z. B. eine Menüleiste, funktioniert dies möglicherweise für Sie.

public class MyUI extends UI { 
    @Override 
    protected void init(VaadinRequest request) { 
     VerticalLayout content = new VerticalLayout(); 
     content.setSizeFull(); 
     setContent(content); 

     content.addComponent(new TextField()); 
     content.addComponent(new Button("Switch theme", e -> { 
      if (getTheme().equals("mytheme1")) { 
       setTheme("mytheme2"); 
      } else { 
       setTheme("mytheme1"); 
      } 
     })); 
    } 
} 

Andernfalls wird das Design-Engine ermöglicht es Ihnen, define your own styles für Ihre verschiedene Komponenten (oder sogar auch keine überschreiben) und wendet sie mit addStyleName():

Java-Klasse:

myButton.addStyleName("red-border"); 

Theme-Konfiguration:

@mixin mytheme1 { 
    @include valo; 
    // Insert your own theme rules here 

    .red-border { 
    // custom style added with addStyleName() 
    border: 1px red solid; 
    } 

    .v-button { 
    // global override of default v-button rule 
    background-color: green; 
    } 
}