如何在 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

发现需要注入这种方式使用的样式

 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 接口中定义的所有方法。

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

Answer 2

对我来说，有什么问题并不明显 - 您的代码至少接近正确（我一直在使用 styleName=<whatever> 而不是 stylePrimaryName=<whatever>，所以这是您可能会研究的一件事）。

调试此类问题的方法是使用 Firebug 查看 (1) 哪些类名已应用于 DOM 元素，以及 (2) 哪些 CSS 规则基于这些样式生效。

如果您将 @external parentStyle, childStyle; 放在 CSS 文件的开头，则 GWT 不会混淆样式名称，您将能够在 Firebug 中分辨出应用了哪些名称。

更多建议：

1. 使用DevMode 并在加载页面时查看它是否显示任何错误（它们将以红色文本显示） - 滚动到 DevMode 窗口顶部窗格的底部。
2. 您可以使用一个更简单的示例来尝试此操作，使用单个复合类而不是两个。