正しく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の名前を難読化されますので。そして.childWidgetStyleでParentWidgetのための難読化の名前は.childWidgetStyleでWidget1とは異なります。その結果、CSSは次のようになります。

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

だから、余白の設定が文句を言わない適用されます。どのように私はこれを正しく行うのですか？

Answer 1

トリックはParentWidgetにCSSクラス名をインポートすることです。

<!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>

あなたが使用していない場合は重要な部分は、ある<のhref =「http://www.gwtproject.org/javadoc/latest/com/google/gwt/resources/client/CssResource.Import.html」のrel =「nofollowをnoreferrer」> ImportedWithPrefix の注釈GWTは、CSSクラスが含まれているリソースのクラス名を持つインポートされたスタイル名の前に付けます。そうするchildWidgetStyleが.Widget1Style-childWidgetStyleになります。

（編集：@Shared以下のコメントについての除去された部分とドキュメント。）