GWT共享的CSS样式无法生效。

Question

GWT共享的CSS样式无法生效。

3

我需要在几个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类相同的目录中创建shared.css文件：

.grayedOut{ background-color: red; }

3. 在UI Binder模板中添加with元素： 4. 在UI Binder模板中添加样式引用：

addStyleNames="{res.style.grayedOut}"

但是它不起作用。视图呈现的方式就像grayedOut样式根本没有应用一样。

但是我观察到了两件事情：

1. 在Firebug / Chrome Dev Tools中，我可以看到元素分配了一个对应于我正在尝试添加的样式的混淆样式名称：class="GAWERH0MI gwt-TabLayoutPanelContent"（GAWERH0MI似乎对应于我的grayedOut类），但我无法在“元素样式”面板中找到它，这可能意味着此类为空（没有主体）。（我进行了实验，并将空类分配给具有相同效果的元素）。

2. 当我更改.css中的样式名称时，然后我会收到运行时错误，指示找不到样式grayedOut，这似乎意味着我的样式类通常被成功找到，但由于某种原因无法按预期工作。

- Piotr Sobczyk

2个回答

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" />

and

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

- venat0r888

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Thomas Broyer · Accepted Answer

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

对于<ui:style>，这是自动完成的(因为您不需要编写ClientBundle和CssResource接口，它们会被UiBinder为您生成)，但对于其他任何CssResource都不是如此。

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