Thay đổi chủ đề trong Vaadin 7 qua mã

Question

Tôi đang thực hiện một dự án trong Vaadin 7. Trong đó tôi cần thay đổi chủ đề của một trang.

Trong Vaadin 6, có một hàm gọi là 'setTheme()'. để tôi có thể thay đổi chủ đề bằng cách sử dụng chức năng đó bất cứ nơi nào tôi muốn trong mã của mình.

Nhưng, trong Vaadin 7, tôi không thể tìm thấy bất kỳ nội dung nào như thế.

Tôi biết sẽ có cách để thực hiện.

Và cũng làm cách nào để áp dụng các thay đổi trên giao diện người dùng khi tôi thay đổi chủ đề?

Nó sẽ tự động được thay đổi? (hoặc)

ICEPush sẽ giúp tôi?

Answer 1

Vì tôi đã sử dụng các chủ đề tùy chỉnh, tôi đã làm cho nó khá đơn giản. Tôi đã sử dụng nút bật tắt và thực thi mã yêu cầu mỗi lần.

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

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

Tệp css của tôi sẽ như thế này.

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

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

Tin tôi đi; chuyển đổi chủ đề rất nhanh vì trình duyệt tự thực hiện mẹo để chuyển chủ đề thay vì yêu cầu máy chủ Vaadin thực hiện chuyển đổi.

Answer 2

Trong Vaadin 7 phương thức 'setTheme()' đã được thay thế bằng Chú thích mới @Theme. "Không thể thay đổi chủ đề bay" là không thể có trong Vaadin 7.

Có một disucssion trong số này Vaadin Forum Thread về thay đổi chủ đề bay trên Vaadin 7. Bạn nên xem qua nó.

Answer 3

bạn có thể thử điều này cho Vaadin 7:

1. Tạo UIProvider của riêng bạn
2. đăng ký UIProvider của bạn trong giao diện người dùng gốc
3. Chuyển chủ đề trong UIProvider và trang kích hoạt tải lại

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; 
    } 
} 

Sau đó, vào một thành phần mà chuyển đề tài:

@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

Về chủ đề cho bảng xếp hạng: chỉ cần có một công tắc ở đâu đó bên trong một người biết lắng nghe hoặc là một ComboBox hoặc một OptionGroup (cho các nút radio) để thực hiện cuộc gọi phương thức tĩnh ChartOptions sau, ví dụ:

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

sau đó

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

, vv

có cũng GridTheme(); GrayTheme() và HighChartsDefaultTheme(); bạn thậm chí có thể mở rộng chủ đề cơ sở để tạo chủ đề của riêng bạn (nhìn lên trong Sách Vaadin).

Answer 5

chức năng setTheme đã được giới thiệu trong Vaadin 7.3.0: https://vaadin.com/wiki/-/wiki/Main/Changing+theme+on+the+fly

Answer 6

Kể từ Vaadin 7.3 bạn có thể sử dụng UI#setTheme()

Answer 7

Trong Vaadin 7 và các phiên bản cao hơn, chúng tôi đã một Chú thích gọi @Theme (yourThemeName) dựa trên Tên chủ đề mà bạn cung cấp ở đây nó sẽ chuyển hướng đến đó .scss Style.This chú thích được gọi trước khi phương thức Init được gọi.