GWT

Question

我是 GWT 的新用户，我正在寻找有关 "theme management" 的建议。

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

我想对所有静态属性使用 CSS sheet 并使用一些 GWT 行（例如 label.getElement.getStyle.setColor(...)）来更改颜色。但是我有很多 "hover" 属性，我认为创建很多 MouseOverHandler 不是一个好主意......

有没有办法动态编辑 CSS sheet 或魔术？

谢谢。

Answer 1

无需重新加载整个应用程序即可更改主题的最简单方法是将主题 class 分配给 body 元素。

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

.theme1 .myClass {
  color: red;
}

.theme2 .myClass {
  color: blue;
}

然后将特定主题应用到 body 元素：

<body class="theme1">

当你想改变主题时，你必须改变 body class 所以它会变成：

<body class="theme2">

这样，每个具有 class myClass 的元素的颜色将从红色变为蓝色。

Answer 2

您不能动态编辑 CSS 文件，但您可以将 CSS 样式作为新的 CSS 文件或直接注入到您的文档中。

例如，您可以在 "main.css" 文件中定义所有关键 CSS 规则，然后将用户定义的规则直接添加到主机 HTML 页面中 style 标签。

Answer 3

您有很多选择 - 最直接的（对我而言）是利用 GWT 引入的现有 CSS classes。如果查看 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; }");

如果您有想要不同样式的自定义小部件，只需向它们添加一个 class（.customWidgetWhatever，例如 Button 有 .gwt-Button，等等）您将包含在您的自定义样式表中。

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

button {
    background: green;
}

所有 <button> 都会变成绿色。

GWT - 更改 CSS 悬停属性