如何正确地在 GWT 中使用导入的 CSS 样式

Question

想象一下您使用UiBinder创建了以下简单的小部件：

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui">

    <ui:style type="my.package.Widget1.Widget1Style">
        .childWidgetStyle {
            border-width: 1px;
            border-style: dotted;
        }
    </ui:style>

    <g:TextArea styleName="{style.childWidgetStyle}"/>
</ui:UiBinder>

---

package my.package;
// some imports here

public class Widget1 extends Composite {
    private static Widget1UiBinder uiBinder = GWT.create(Widget1UiBinder.class);

    interface Widget1UiBinder extends UiBinder<Widget, Widget1> {
    }

    public interface Widget1Style extends CssResource {
        String childWidgetStyle();
    }

    @UiField
    TextArea textArea;

    public Widget1(String text) {
        initWidget(uiBinder.createAndBindUi(this));
        textArea.setText(text);
    }
}

然后您可以在另一个（父级）小部件中使用此简单小部件：

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui">

    <ui:style>
        .parentWidgetStyle .childWidgetStyle {
            margin-bottom: 10px;
        }
    </ui:style>
    <g:VerticalPanel ui:field="listPanel" addStyleNames="{style.parentWidgetStyle}" />
</ui:UiBinder>

---

package my.package;
// imports go here
public class ParentWidget extends Composite {
    private static ParentWidgetUiBinder uiBinder = GWT.create(ParentWidgetUiBinder.class);

    interface ParentWidgetUiBinder extends UiBinder<Widget, ParentWidget> {
    }

    @UiField
    VerticalPanel listPanel;

    public ParentWidget(final String... texts) {
        initWidget(uiBinder.createAndBindUi(this));
        for (final String text : texts) {
            final Widget1 entry = new Widget1(text);
            listPanel.add(entry);
        }
    }
}

你想要实现的是使用css在列表中的Widget1条目之间获得一些空白间隔。但是这种方法行不通，因为GWT会混淆css名称。而ParentWidget中.childWidgetStyle的混淆名称将与Widget1中的.childWidgetStyle不同。最终的css将类似于以下内容：

.G1unc9fbE {
    border-style:dotted;
    border-width:1px;
}
.G1unc9fbBB .G1unc9fDa {
    margin-bottom:10px;
}

所以边距设置不会生效。我该如何正确执行此操作？

- Eduard Wirch

---

另一种看法，请参见我在长时间的、令人沮丧的在线资源使用后创建的帖子。 - stevec

Answer 1

关键是将CSS类名导入到ParentWidget中：

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui">

    <ui:style import="my.widget.Widget1.Widget1Style">
        .parentWidgetStyle .Widget1Style-childWidgetStyle {
            margin-bottom: 10px;
        }
    </ui:style>
    <g:VerticalPanel addStyleNames="{style.parentWidgetStyle}" />
</ui:UiBinder>

重要的部分是，如果您不使用ImportedWithPrefix注释，GWT将在导入的样式名称前缀中添加css类所在资源的类名。因此，childWidgetStyle变成了.Widget1Style-childWidgetStyle。

- Eduard Wirch

---

Eduard - 为什么需要@Shared注释？根据文档，它不是必需的：http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#Shared_scopes - logan

@logan - 那个链接似乎指定了共同的超类必须具有共享注释：“简而言之，如果不同的CSS类型需要共享混淆类名，则它们所附加的CssResource子类型必须共享一个定义访问器和具有Shared注释的名称的公共超类型。” - David Mann

@Stembrain- 我同意，共享的超类必须具有@Shared注释。话虽如此，在这个答案中没有共享的超类。这是“导入范围”的一个例子，而不是“共享范围”，在我看来，这是注释的误用。 - logan