css - 动态更改 GWT 主题

Question

我有一个 GWT 应用程序，我创建了 appBlueTheme.jar、appOrangeTheme.jar 并添加到项目的 BuildPath 中。我的 module.gwt.xml 文件有

 ....
<inherits name='appBlueTheme.appBlueTheme'/>
<inherits name='appOrangeTheme.appOrangeTheme'/>
 ...

但是在我的应用程序中，我看到了 GWT 文档所说的 appBlueTheme 的效果

“继承的模块将按照它们列出的顺序级联”

我希望根据用户响应更改主题。我如何实现这一目标？

score 3 · Accepted Answer

如果“主题”是指样式，正确的方法不是为每个主题创建一个单独的 jar，而是使用 CSS。

A. 如果你使用 CSSResource，你可以使用条件 CSS：

B. 如果你使用外部 CSS 文件，而不是

.headerPanel {
    background: blue;
}

您可以根据所选主题指定不同的背景：

.orangeTheme .headerPanel {
    background: orange;
}
.blueTheme .headerPanel {
    background: blue;
}

请注意，您的代码（或 Ui:Binder）应该只将类“headerPanel”分配给小部件。当您启动您的应用程序时，您会为最外面的小部件（添加到 RootPanel 的小部件）分配一个默认主题。例如，您设置

myAppPanel.addStyleName("blueTheme");

这将为所有具有“headerPanel”类的小部件提供蓝色背景。当用户选择不同的主题时，您删除“blueTheme”类并添加“orangeTheme”类。它会自动刷新页面（无需重新加载），所有样式都会改变。

编辑：

如果您需要将主题应用于整个应用程序，包括 PopupPanel 和对话框，请使用此代码来应用您的主题：

Document.get().getBody().setClassName("blueTheme");

1 回答 1