themes - 通过代码更改 Vaadin 7 中的主题

Question

我正在 Vaadin 7 中做一个项目。我需要更改页面的主题。

在 Vaadin 6 中，有一个名为“setTheme()”的函数。这样我就可以在代码中的任何位置使用该函数更改主题。

但是，在 Vaadin 7 中，我找不到类似的东西。

我知道会有办法做到这一点。

以及当我更改主题时如何在 UI 上应用更改？

会自动更改吗？（或者）

ICEPush 会帮助我吗？

Answer 1

在 Vaadin 7 中，方法 'setTheme()' 已被新的注解 @Theme 取代。在 Vaadin 7 中，“动态主题更改”是不可能的。

在这个Vaadin 论坛主题中有一个关于 Vaadin 7 中动态主题更改的讨论。你应该看看它。

Answer 2

在 Vaadin 7.3.0 中引入了 setTheme 功能：https ://vaadin.com/wiki/-/wiki/Main/Changing+theme+on+the+fly

Answer 3

你可以试试这个 Vaadin 7：

1. 创建自己的 UIProvider
2. 在根 UI 中注册您的 UIProvider
3. 在 UIProvider 中切换主题并触发页面重新加载

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

然后在切换主题的组件上：

@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

因为我使用了自定义主题，所以我让它变得非常简单。我每次都使用切换按钮并执行所需的代码。

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

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

我的css文件将是这样的。

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

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

相信我; 主题切换非常非常快，因为浏览器本身会执行切换主题的技巧，而不是要求 Vaadin 服务器进行切换。

Answer 5

关于图表的主题：只需在 ComboBox 或 OptionGroup（用于单选按钮）的侦听器内的某处进行切换，即可进行以下 ChartOptions 静态方法调用，例如：

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

然后

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

等等

还有 GridTheme(); GrayTheme() 和 HighChartsDefaultTheme(); 您甚至可以扩展基本主题以创建自己的主题（在 Vaadin 中查找）。

Answer 6

从 Vaadin 7.3 开始，您可以使用UI#setTheme()

Answer 7

在 Vaadin 7 及更高版本中，我们有一个名为 @Theme(yourThemeName) 的注释，基于您在此处提供的主题名称，它将重定向到特定的 .scss 样式。此注释在调用 Init 方法之前调用。