通过代码更改 Vaadin 7 中的主题答案

【问题标题】：Change themes in Vaadin 7 via code通过代码更改 Vaadin 7 中的主题
【发布时间】：2013-04-15 00:12:48
【问题描述】：

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

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

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

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

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

会自动更改吗？（或）

ICEPush 会帮助我吗？

【问题讨论】：

标签： themes vaadin

【解决方案1】：

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

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

【讨论】：

还有其他方法可以更改主题吗？？
您可以像本论坛的最后一篇帖子一样：vaadin.com/forum#!/thread/1154742/2995814 或像这里一样：vaadin.com/forum/#!/thread/1803904/1805113 使用 UIProvider。
谢谢reg..我会调查的。
正如@Leif Åstrand 的回答中提到的，setTheme() 在 vaadin 7.3.0 中重新引入

【解决方案2】：

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

【讨论】：

【解决方案3】：

你可以在 Vaadin 7 上试试这个：

创建您自己的 UIProvider
在根 UI 中注册您的 UIProvider
在 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
}

【讨论】：

【解决方案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 服务器进行切换。

【讨论】：

如果您在运行时切换主题，请注意复杂布局中的错误（例如使用表格），因为具体的实现并不总是会在主题更改后对大小更改做出反应

【解决方案5】：

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

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

然后

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

等等

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

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

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

【讨论】：