gwt - 如何跨 GWT 小部件共享样式表类型

Question

我正在尝试创建一个复合小部件，它将显示子小部件的“列表”，但我在让 CSS 在此设置中工作时遇到了一些问题。构建了一个简单的演示，试图找出解决方案。曾尝试像这样指定父小部件

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
   xmlns:g='urn:import:com.google.gwt.user.client.ui'>

 <ui:with field='res' type='egov.widgets.discussion.client.poc.Resources' />

 <g:FlowPanel ui:field="childPanel" stylePrimaryName='{res.style.parentStyle}'>

 </g:FlowPanel>

</ui:UiBinder>

代码

public class CssParent extends Composite{

interface MyUiBinder extends UiBinder<Widget, CssParent> {}
private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);

@UiField FlowPanel childPanel;

   public CssParent() {
      initWidget(uiBinder.createAndBindUi(this));

       CssChild child = new CssChild();
      childPanel.add(child);
   }  
}

子部件简单地指定为

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
   xmlns:g='urn:import:com.google.gwt.user.client.ui'>

 <ui:with field='res' type='egov.widgets.discussion.client.poc.Resources' />

    <g:HTMLPanel stylePrimaryName='{res.style.childStyle}'>
       Howdy folks
    </g:HTMLPanel>

  </ui:UiBinder>

现在，如您所见，它们都引用了一个资源包:

public interface Resources extends ClientBundle {

@Source("CssDemo.css")
Style style();

  public interface Style extends CssResource{
     String parentStyle();
     String childStyle();
  }
}

再次引用 CssDemo.css: .parentStyle{ 背景色:灰色；

.parentStyle .childStyle{
    background-color: yellow;
}

但由于某些原因，这些 css 规则从未应用于上面的两个 div 元素。关于为什么失败的任何想法？或者当样式包含不同 css 类之间的依赖规则时，在小部件之间共享 .css 样式表的更好方法？

Answer 1

发现需要注入(inject)这样使用的样式

 static{
     Resources.INSTANCE.style().ensureInjected();
 }

(将这个单例实例字段添加到包中)

public interface Resources extends ClientBundle {

    public static final Resources INSTANCE =  GWT.create(Resources.class);

    @Source("Resources.css")
    Style style();

它现在可以工作了，但我真的不喜欢这样做(“{res.style.someClass}”)+ 我必须在 CssResource 接口(interface)中定义的所有方法。

如果可以做一个共享的 ui:style 声明(可能基于一个 css 文件)，并且像普通的内部样式 block 一样使用它，那就太好了。