Question

我是GWT的新用户，我正在寻找有关“主题管理”的一些建议。

我必须创建一个可以处理主题更改的网站。我的意思是用户可以通过填写表单来制作自己的主题，然后网站将自动动态地更改其颜色以显示新的颜色。

我认为对所有静态属性使用CSS表并使用一些GWT行（例如label.getElement.getStyle.setColor（...））来改变颜色。但我有很多“悬停”属性，我认为创建许多MouseOverHandler并不是一个好主意......

有没有办法动态编辑CSS表格或者这样做的魔术？

感谢。

Answer 1

你有很多选择 - 最直接的（对我来说）是利用GWT引入的现有CSS类。如果您查看GWT提供的任何小部件的javadoc，您会注意到CSS Style Rules部分。例如，Button：

.gwt-Button  
    the outer element

这意味着您添加到页面的每个Button都应用了.gwt-Button样式。如果您使用覆盖此样式的规则注入CSS样式表：

.gwtButton {
    background: red;
}

所有按钮都会变为红色。您可以使用StyleInjector注入样式表。动态创建样式表的内容取决于您 - 但它只是文本，它不应该很难（但要确保生成的CSS规则有效！）。

为了帮助您入门，请尝试将此代码连接到某个按钮，看看是否点击它会触发更改页面上的所有Buttons红色：

StyleInjector.inject(".gwt-Button { background: red; }");

如果您想要使用不同风格的自定义小部件，只需向其中添加一个单独的类（.customWidgetWhatever，如Button具有.gwt-Button等），您将在其中添加自定义样式表。

确保您了解CSS的工作原理以及它可以为您做些什么。例如，如果您想为每个按钮设置相同的样式，则不必单独更改每个按钮的样式，只需使用：

button {
    background: green;
}

所有<button>都将变为绿色。

Answer 2

在不重新加载整个应用程序的情况下更改主题的最简单方法是为body元素指定一个主题类。

您希望在应用中添加具有特定主题的每个CSS类，例如：

.theme1 .myClass {
  color: red;
}

.theme2 .myClass {
  color: blue;
}

然后，您将特定主题应用于body元素：

<body class="theme1">

当您想要更改主题时，您必须更改body类，以便它变为：

<body class="theme2">

这样，每个具有类myClass的元素的颜色都会从红色变为蓝色。

Answer 3

您无法动态编辑CSS文件，但您可以将CSS样式作为新的CSS文件注入，也可以直接注入文档。

例如，您可以在＆＃34; main.css＆＃34;中定义所有关键的CSS规则。文件，并使用style标记将用户定义的规则直接添加到主机HTML页面中。