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();
 }

（将此singleton-ish实例字段添加到包中）

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中告诉我们应用了哪些名称。

还有一些建议：

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

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

2 个答案: