Java/Vaadin - 为各个视图使用不同的主题答案

【问题标题】：Java/Vaadin - Using different theme for individual ViewsJava/Vaadin - 为各个视图使用不同的主题
【发布时间】：2016-11-25 00:49:51
【问题描述】：

短版：Vaadin 是否支持在运行的应用程序中为不同的视图/布局/组件使用不同的主题？

更长的版本：我正在尝试实现一些非常基本的功能/“模块化”，其中提供了一个扩展 View 的类，然后将其添加到特定容器中。目前，使用https://stackoverflow.com/a/60775/3560336 此处看到的方法“可以”找到一个特定的类。但是这个视图现在将使用在我的应用程序的主 UI 中使用的主题。有什么方法可以让这个视图（或其他任何可能的视图，例如 CustomComponent）使用另一个主题？

【问题讨论】：

标签： java vaadin

【解决方案1】：

据我所知，主题在运行时是可切换的（请参阅下面的示例代码），但它们是在全局/UI 级别设置的。如果视图完全更改，并且您没有任何不能更改的公共部分，例如菜单栏，那么这可能适合您。

public class MyUI extends UI {
    @Override
    protected void init(VaadinRequest request) {
        VerticalLayout content = new VerticalLayout();
        content.setSizeFull();
        setContent(content);

        content.addComponent(new TextField());
        content.addComponent(new Button("Switch theme", e -> {
            if (getTheme().equals("mytheme1")) {
                setTheme("mytheme2");
            } else {
                setTheme("mytheme1");
            }
        }));
    }
}

否则，主题引擎允许您为各种组件define your own styles（甚至覆盖默认组件）并使用addStyleName() 应用它们：

Java 类：

myButton.addStyleName("red-border");

主题配置：

@mixin mytheme1 {
  @include valo;
  // Insert your own theme rules here

  .red-border {
    // custom style added with addStyleName()
    border: 1px red solid;
  }

  .v-button {
    // global override of default v-button rule
    background-color: green;
  }
}

【讨论】：