GWT共享CSS样式不起作用

我需要在几个用户界面活页夹模板中使用相同的样式，因此我按照https://developers.google.com/web-toolkit/doc/latest/DevGuideUiBinder#Using_an_external_resource中所述完成了所有操作。GWT共享CSS样式不起作用

所以我做了以下内容：

1.创建资源接口：

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

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

2.创建shared.css文件在同一目录下的资源类：

 
.grayedOut{ 
    background-color: red; 
}

3.增加with元素为UI的Binder模板： <ui:with type="correct.package.Resources" field="res"/>

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

但是它不起作用。该视图呈现为与grayedOut样式完全不同。

但是我观察了两两件事：

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

来源

2012-07-06 Piotr Sobczyk

您可能忘记了在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

来源

2012-07-06 14:14:55

谢谢，托马斯。但要拨打资源。style（）我需要一个'Resources'实例，并且它由UIBinder内部化（'您可以通过元素为您的模板提供资源，但以它们为您实例化为代价）“。说。那么何时/如何调用这种方法？另外可惜的是，在我连接的文档中有一些看起来像完整的工作示例，但没有提到调用'ensureInjected（）'，这对于此代码的工作非常重要:(。很容易浪费大量的实时复制来自不工作的文档的示例 – 2012-07-06 14:30:02

调用'ensureInjected'是一种痛苦，幸运的是，在CssResource的第二个实例上对'ensureInjected'的调用适用于相同类型的所有CssResources。在每个UiBinder的Java文件的顶部有一个快速的'static {GWT.create（）; css.ensureInjected（）;}''''''''' ensureInjected在''编辑的ClientBundles的所有CssResource子代中自动调用。 – 2012-07-06 14:42:34

@PiotrSobczyk：它在https://developers.google.com/web-toolkit/doc/latest/DevGuideClientBundle#CssResource_Overview中记录 – 2012-07-06 14:47:12

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>

来源

2012-09-26 13:33:15 venat0r888

GWT共享CSS样式不起作用

回答

相关问题