如何在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; 
} 

所以邊距設置不適用。我如何正確地做到這一點？

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類是in。所以childWidgetStyle變成了.Widget1Style-childWidgetStyle。

（編輯：約@Shared以下意見和documentation去除的部分）