GWT 共享 CSS 样式不起作用答案

【问题标题】：GWT shared CSS styles doesn't workGWT 共享 CSS 样式不起作用
【发布时间】：2012-07-06 13:58:55
【问题描述】：

我需要在几个 UI Binder 模板中使用相同的样式，所以我按照以下说明进行了所有操作：https://developers.google.com/web-toolkit/doc/latest/DevGuideUiBinder#Using_an_external_resource。

所以我做了以下事情：

1。创建资源接口：

公共接口资源扩展 ClientBundle { @Source("shared.css") 风格风格（）；公共接口样式扩展 CssResource { 字符串 grayedOut(); } }

2。在 Resources 类的同一目录中创建了shared.css 文件：

.grayedOut{ 背景颜色：红色； }

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

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

但是它不起作用。视图被渲染，就像 grayedOut 样式根本没有应用一样。

但我观察到两件事：

在 Firebug/Chrome 开发工具中，我可以看到该元素分配了一个与我要添加的样式相对应的被滥用的样式名称：class="GAWERH0MI gwt-TabLayoutPanelContent"（GAWERH0MI 似乎对应于我的 grayedOut 类）但我无法在“元素样式”面板中找到它，这可能意味着这个类是空的（没有正文）。（我做了实验并将空类分配给在该工具中具有相同效果的元素）。
当我在 .css 中更改样式名称时，出现运行时错误，提示样式 grayedOut 找不到，这似乎意味着我的样式类通常已成功找到，但由于某种原因无法正常工作正如预期的那样。

【问题讨论】：

标签： css gwt uibinder gwt2

【解决方案1】：

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

这是为<ui:style> 自动完成的（因为您不编写ClientBundle 和CssResource 接口，它们是由UiBinder 为您生成的），但不是为任何其他CssResource。

你可以使用@UiField Resources res，它会被注入<ui:with field="res">的值，因此在调用createAndBindUi之后调用res.style().ensureInjected()。
IMO，您最好将Resources 实例注入您的视图并使用@UiField(provided=true)，因此请确保在将实例注入您的视图之前调用ensureInjected()，或者选择在每个视图中调用ensureInjected()你的意见。如https://developers.google.com/web-toolkit/doc/latest/DevGuideUiBinder#Share_resource_instances

【讨论】：

谢谢，托马斯。但是要调用 Resources.style() 我需要有一个 Resources 的实例，它是由 UIBinder (You can make resources available to your template via the <ui:with> element, but at the cost of having them instantiated for you.) 内部实例化的，正如文档所说。那么我应该何时/如何调用此方法？同样遗憾的是，在我链接的文档中，有一些看起来很完整的工作示例，但没有提到调用 ensureInjected() 这对于此代码的工作至关重要:(。很容易浪费大量时间进行复制来自不起作用的文档的示例。
打电话给ensureInjected很痛苦。幸运的是，在 CssResource 的第二个实例上对 ensureInjected 的调用适用于相同类型的所有 CssResources。我已经在每个 UiBinder 的 Java 文件顶部快速找到了 static {GWT.create(); css.ensureInjected();}。 @Thomas Broyer：在 <ui:with>ed ClientBundles 的所有 CssResource 子项上自动调用 ensureInjected 会很方便（而且不是更贵？）。
@PiotrSobczyk：它记录在developers.google.com/web-toolkit/doc/latest/…
@RileyLark：你也可以使用@UiField Resources res，它会被注入<ui:with field="res">的值，从而在调用createAndBindUi之后调用res.style().ensureInjected()。自动调用ensureInjected() 意味着将特定于CssResource 的行为添加到完全通用的<ui:with> 和/或{expansions}（更不用说你GWT.create 是ClientBundle，而不是CssResource，以及您可以在 UiBinder 模板中使用 ClientBundle 中定义的任何/任何/所有 CssResources。所以不，这不会发生。
Thomas，您能否更新您的答案以包含以下语句：“您可以使用 @UiField Resources res 将注入的值并因此调用res.style().ensureInjected() 就在调用 createAndBindUi 之后。”因为这部分对我解决问题最重要。当您这样做时，我会将您的答案标记为已接受。我认为它比静态初始化器优雅得多:)。无论如何，感谢您的投入莱利！

【解决方案2】：

ui 小部件 java 文件：

@UiField
Resources res;
public YourWidget() {
        initWidget(uiBinder.createAndBindUi(this));     
        res.style().ensureInjected();
    }

ui 小部件 xml 文件：

<ui:with field='res' type="your path to Resource class" />

和

<g:Label addStyleNames="{res.style.grayedOut}" ui:field="icon"></g:Label>

【讨论】：