كيفية استخدام أنماط CSS المستوردة في GWT بشكل صحيح

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

ما تريد تحقيقه هو الحصول على بعض الهامش بين إدخالات Widget1 في القائمة باستخدام CSS. لكن هذا لن ينجح. لأن 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>

الجزء المهم هو ، إذا لم تستخدم استيراد مع prefix سيقوم GWT بالشرح ببادئة أسماء الأنماط المستوردة مع اسم فئة المورد الذي يوجد فيه فئة CSS. لذلك childWidgetStyle يصبح .Widget1Style-childWidgetStyle.

(تحرير: تم إزالته حول @Shared بعد التعليقات و توثيق.)