以 GWT UiBinder 样式访问 CSS 常量答案

【问题标题】：Accessing CSS Constants in GWT UiBinder Style以 GWT UiBinder 样式访问 CSS 常量
【发布时间】：2010-11-12 22:09:18
【问题描述】：

使用 GWT 2.1，我正在尝试创建一个包含大量常量和常用样式的 CSS 文件。我想使用 ui:style 标签将其包含在 UiBinder 模板中：

<ui:UiBinder
  xmlns:ui='urn:ui:com.google.gwt.uibinder'
  xmlns:g='urn:import:com.google.gwt.user.client.ui'

  <ui:style field="css" src="constants.css" />
</ui:UiBinder>

我可以轻松地利用元素的样式：

<g:FlowPanel styleName="{css.panel}">...</g:FlowPanel>

但尝试在另一个 Style 块中使用常量失败：

<ui:Style>
  .templateSpecificStyle {
      background-color: {css.royalBlue};
      padding: 1em;
  }
</ui:Style>

奇怪的是我没有收到编译错误。创建了混淆的 CSS 类；但是，内容是空的。有没有办法在另一个 Style 块中访问这些 CSS 常量？是否可以使用旧的 ResourceBundle / CssResource 模式？

【问题讨论】：

标签： css gwt uibinder

【解决方案1】：

在重新阅读https://stackoverflow.com/questions/3533211/need-app-wide-css-constants-in-gwt/4143017#4143017 之后，我发现如果在样式块中添加特定于模板的样式，这些常量就可以工作：

<ui:Style src="constants.css">
  .templateSpecificStyle {
      background-color: royalBlue;
      padding: 1em;
  }
</ui:Style>

这非常适合我的需求。

【讨论】：

【解决方案2】：

在某个类中定义这些常量可能最符合您的利益，然后使用运行时替换将该常量包含在您打算使用的每个 CSS 资源中。

CSSConstants.java

package com.foo.client;
public final class CSSConstants {
    public static final String ROYAL_BLUE = "#4169E1";
}

UiBinder 模板中的样式块

<ui:style>
  @eval royalBlue com.foo.client.ROYAL_BLUE
  .templateSpecificStyle {
    background-color: royalBlue
  }
</ui:style>

请注意，即使该技术的名称是“运行时替换”，GWT 编译器也会将 royalBlue 替换为字符串文字，因为可以在编译时评估 royalBlue 的值。

有关您可以在 CSS 资源中做的更酷的事情，请查看http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#CssResource

【讨论】：

@eval 我希望在每个 UiBinder 模板中引用的每个常量似乎真的很冗长，而且有些难看。 constants.css 还包含一些有用的样式。我真的希望有一种更清洁的方法。
我同意 - 很多 GWT 的东西有时会变得非常冗长。另一种方法是扩展CssResource 接口，以便您可以通过这种方式公开常量。这将使您免于创建CSSConstants.java。但是，您仍然需要@eval 才能将这些样式放在需要的地方。