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를 사용하여 목록의 위젯 1 항목 사이에 약간의 마진을 얻는 것입니다. 그러나 이것은 작동하지 않습니다. GWT는 CSS 이름을 난독 화 할 것이기 때문입니다. 그리고 난독 화 된 이름 .childWidgetStyle 안에 ParentWidget 다음과 같습니다 .childWidgetStyle 안에 Widget1. 결과 CSS는 이것과 유사하게 보입니다.

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

따라서 여백 설정이 적용되지 않습니다. 이것을 올바르게하는 방법은 무엇입니까?

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 becomes .Widget1Style-childWidgetStyle.

(편집 : @shared 다음 주석에 대한 부분을 제거하고 선적 서류 비치.)