Zmień motywy w Vaadin 7 przez kod

Question

Robię projekt w Vaadin 7. W tym muszę zmienić motyw strony.

W programie Vaadin 6 istnieje funkcja o nazwie "setTheme()". dzięki czemu mogę zmienić motyw za pomocą tej funkcji, gdziekolwiek chcę w moim kodzie.

Ale w Vaadin 7 nie mogłem znaleźć czegoś takiego.

Wiem, że będzie sposób na zrobienie tego.

A także jak zastosować zmiany w interfejsie podczas zmiany motywu?

Czy zostanie zmieniony automatycznie? (lub)

ICEPush pomoże mi?

Answer 1

Ponieważ użyłem niestandardowych motywów, zrobiłem to całkiem proste. Użyłem przycisku przełączającego i za każdym razem wykonałem wymagany fragment kodu.

JavaScript.getCurrent().execute("document.body.className = document.body.className.replace(\"theme1\",\"theme2\"); "); 

JavaScript.getCurrent().execute("document.body.className = document.body.className.replace(\"theme2\",\"theme1\"); "); 

Mój plik css będzie taki.

.theme1 .v-button { 
    /* some css attribute */ 
} 

.theme2 .v-button { 
    /* some css attribute */ 
} 

Uwierz mi; Przełącznik motywu jest bardzo szybki, ponieważ sama przeglądarka robi sztuczkę, aby zmienić motyw, zamiast pytać serwer Vaadin o zmianę.

Answer 2

W programie Vaadin 7 metoda "setTheme()" została zastąpiona nową adnotacją @ Theme. "Zmiana tematu" w locie nie jest możliwa w Vaadin 7.

Istnieje disucssion w tym Vaadin Forum Thread o zmianie motywu w locie w Vaadin 7. Powinieneś rzucić na niego okiem.

Answer 3

można spróbować to dla Vaadin 7:

1. Stwórz własną UIProvider
2. Zarejestruj UIProvider w głównym interfejsie
3. Przełącznik motywu w UIProvider i strona spust reload

DynamicThemeUIProvider. java

public class DynamicThemeUIProvider extends UIProvider { 
    private String currentTheme = "reindeer"; 

    @Override 
    public Class<? extends UI> getUIClass(UIClassSelectionEvent event) { 
     return DemoUI.class; 
    } 

    public void setTheme(String theme) { 
     currentTheme = theme; 
    } 

    public String getTheme(UICreateEvent event) { 
     return currentTheme; 
    } 
} 

DemoUI.java

public class DemoUI extends UI { 
    private DynamicThemeUIProvider provider; 
    @Override 
    protected void init(VaadinRequest request) { 
     provider = new DynamicThemeUIProvider(); 
     getSession().addUIProvider(provider); 
    } 

    public DynamicThemeUIProvider getDynamicThemeUIProvider() { 
     return provider; 
    } 
} 

Następnie na składnik, który przełącza motyw:

@Override 
public void valueChange(ValueChangeEvent event) { 
    DemoUI ui = (DemoUI) getUI(); 
    DynamicThemeUIProvider uiProvider = ui.getDynamicThemeUIProvider(); 

    if (uiProvider == null) { 
     return; 
    } 

    uiProvider.setTheme("reindeer"); 
    try { 
     String value = (String) event.getProperty().getValue(); 
     uiProvider.setTheme(value.toLowerCase()); 
    } catch (Exception e) { 
     e.printStackTrace(); 
    } 

    ui.getPage().getJavaScript().execute("document.location.reload(true)"); // page refresh 
} 

Answer 4

Regarding tematów dla wykresów: prostu mają przełącznik gdzieś wewnątrz słuchacza każdej ComboBox lub OptionGroup (dla przycisków radiowych), aby wykonać następujące ChartOptions statyczne wywołanie metody, np

ChartOptions.get().setTheme(new VaadinTheme()) 

następnie

ChartOptions.get().setTheme(new SkiesTheme()) 

itp

istnieje również GridTheme(); GrayTheme() i HighChartsDefaultTheme(); możesz nawet rozszerzyć motyw bazowy, aby stworzyć własny motyw (spójrz na to w Księdze Vaadina).

Answer 5

funkcjonalność setTheme został wprowadzony w Vaadin 7.3.0: https://vaadin.com/wiki/-/wiki/Main/Changing+theme+on+the+fly

Answer 6

Od Vaadin 7.3 można użyć UI#setTheme()

Answer 7

W Vaadin 7 i wyższych wersji mamy Adnotacja nazywa @Theme (yourThemeName) na podstawie Nazwa tematu, którą tu podajesz, przekieruje do tego konkretnego stylu .scss. Ta adnotacja jest wywoływana przed wywołaniem metody Init.