0

我正在使用 GWT 2.5.1 开发一个多模块应用程序。我没有使用任何 GWT 主题。我想自定义一些 GWT 小部件的样式，例如Button和CheckBox。

我看到两个解决方案：

  • 编写在应用程序中加载的 CSS 文件（HTML 页面中的链接）。CSS 将包含使用 GWT 定义名称的 CSS 规则，例如用于按钮的 .gwt-Button 和用于复选框的 .gwt-CheckBox、.gwt-CheckBox-disabled。该解决方案没有利用 GWT 编译器进行的 CSS 优化。
  • 每次使用按钮或复选框时，请使用 CssResource 并设置样式名称。此解决方案将利用 CSS 优化，但每次创建新 Widget 时都需要设置样式名称。

还有其他解决方案吗？哪个是正确的？

4

4 回答 4

2

您也可以将这些样式放在 CssResource 中。只需将 @external 放在您的 css 文件中的这些样式之上，您就可以开始了。

例如：

@external gwt-DatePicker; 
.gwt-DatePicker {
    ...
}

希望能帮助到你。

于 2013-08-07T19:11:47.047 回答
0

其他解决方案： Button 是 html 元素button， Checkbox 是 html 元素input[type=checkbox]。因此，您可以在这些元素上设置样式并为特定状态使用 css 选择器。即button:disabled。这样您就不必设置样式名称，或者没有很多额外的样式名称并使用更简洁的 css。

于 2013-08-07T14:13:42.007 回答
0

我个人会使用 emanuele 的解决方案，但只是提供一个替代方案：您可以使用小部件的getElement()方法直接访问样式名称，因此如果您真的想要，您可以用您创建的样式名称覆盖样式名称。但是，对于具有多种样式的较大的小部件和面板，这变得相当困难。

于 2013-08-09T18:50:55.323 回答
0

您可以子类化您想要设置样式的任何小部件（例如 MyButton），并让您的子类为每个创建的小部件添加样式名称，或者使用对this.setWidth(), this.getElement().getStyle.setXXX.

另外，GWT 编译器在 CSS 上执行了哪些优化？我知道它会混淆样式名称以避免冲突，但我不确定 CSS 是否能够被优化？

于 2013-08-08T12:45:07.347 回答