Question

我需要在一些UI Binder模板中使用相同的样式，所以我按照https://developers.google.com/web-toolkit/doc/latest/DevGuideUiBinder#Using_an_external_resource中所述完成了所有操作。

所以我做了以下事情：

1。创建资源界面：

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

    public interface Style extends CssResource {
        String grayedOut();
    }
}

2。在与Resources class：

相同的目录中创建了shared.css文件

.grayedOut{
    background-color: red;
}

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似乎与我的{{1}相对应但是我无法在“元素样式”面板中找到它，这可能意味着这个类是空的（没有主体）。（我做了实验，并将空类分配给元素，并在该工具中具有相同的效果）。
当我在.css中更改样式名称时，我收到运行时错误，找不到样式grayedOut，这似乎意味着我的样式类通常已成功找到，但由于某种原因没有找到按预期工作。

Answer 1

您可能忘记在ensureInjected()个实例上致电Resources.Style。

这是<ui:style>自动完成的（因为您不对ClientBundle和CssResource接口进行编码，它们是由UiBinder为您生成的，但不适用于任何其他{ {1}}。

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

中一样

Answer 2

ui widget java file：

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

ui widget xml文件：

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

和

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

GWT共享CSS样式不起作用

2 个答案: