3

我正在尝试创建一个复合小部件，它将显示子小部件的“列表”，但我在让 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{ background-color: gray; }

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

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

4

2 回答 2

2

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

 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 文件），并且像普通的内部样式块一样使用它，那就太好了。

于 2010-02-20T17:58:50.237 回答
1

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

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

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

还有一些建议：

  1. 使用DevMode并在加载页面时查看它是否显示任何错误（它们将以红色文本显示） - 滚动到 DevMode 窗口顶部窗格的底部。
  2. 你可以用一个更简单的例子来试试这个，用一个复合类而不是两个。
于 2010-02-20T17:30:51.150 回答