Question

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

在Vaadin 6中，有一个名为'setTheme（）'的函数。这样我就可以在代码中的任何地方使用该功能更改主题。

但是，在Vaadin 7中，我找不到那样的东西。

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

还有如何在更改主题时在UI上应用更改？

会自动更改吗？（或）

ICEPush会帮助我吗？

Answer 1

在Vaadin 7中，方法'setTheme（）'已被新的Annotation @Theme取代。 Vaadin 7中无法实现“即时主题变化”。

关于Vaadin 7中的飞行主题变化，这个Vaadin Forum Thread有一个讨论。你应该看看它。

Answer 2

由于我使用了自定义主题，因此我非常简单。我使用了一个切换按钮，每次都执行所需的代码。

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 3

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

Answer 4

你可以试试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
}

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 Style.This注释在调用Init方法之前调用。

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

7 个答案: