css - GWT 共享 CSS 样式不起作用

Question

我需要在几个 UI Binder 模板中使用相同的样式，所以我按照以下描述做了所有事情:https://developers.google.com/web-toolkit/doc/latest/DevGuideUiBinder#Using_an_external_resource .

所以我做了以下事情:

1.创建资源接口(interface):

public interface Resources extends ClientBundle {    @Source("shared.css")    Style style();    public interface Style extends CssResource {        String grayedOut();    }}

2。已创建 shared.css与 Resources 类在同一目录中的文件:

.grayedOut{    background-color: red;}

3。已添加 with元素到 UI Binder 模板: <ui:with type="correct.package.Resources" field="res"/>

4.在 UI Binder 模板中添加了对样式的引用:addStyleNames="{res.style.grayedOut}"

但是它不起作用。 View 呈现为完全未应用 grayedOut 样式。

但我观察到两件事:

1. 在 Firebug/Chrome Dev Tools 中，我可以看到该元素已分配了一个与我尝试添加的样式相对应的无效样式名称:class="GAWERH0MI gwt-TabLayoutPanelContent" (GAWERH0MI 似乎对应于我的 grayedOut 类)但我无法在“元素样式”面板中找到它，这可能意味着此类是空的(没有正文)。 (我做了实验并将空类分配给在该工具中具有相同效果的元素)。
2. 当我在 .css 中更改样式名称时，我会收到该样式的运行时错误 grayedOut找不到，这似乎意味着我的样式类通常已成功找到，但由于某种原因没有按预期工作。

Answer 1

您可能忘记调用 ensureInjected()在 Resources.Style 上实例。

这是自动为 <ui:style> 完成的(因为你没有编写 ClientBundle 和 CssResource 接口(interface)，它们是由 UiBinder 为你生成的)，但不是为任何其他 CssResource 生成的.

您可以使用 @UiField Resources res不过，这将注入(inject) <ui:with field="res"> 的值, 从而调用 res.style().ensureInjected()在调用 createAndBindUi 之后.
IMO，你最好注入(inject)一个 Resources实例到您的 View 中并使用 @UiField(provided=true) ，因此要么确保 ensureInjected()在将实例注入(inject)您的 View 之前调用，或者选择调用 ensureInjected()在你的每一个观点中。如 https://developers.google.com/web-toolkit/doc/latest/DevGuideUiBinder#Share_resource_instances