Cómo usar estilos CSS importados en GWT correctamente

Question

Imagínese que ha creado los siguientes componentes sencillo con 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); 
    } 
} 

de las que usa este widget simple en otro (padre) widget que ha creado:

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

Lo que quiere lograr es obtener un margen entre las entradas de Widget1 en la lista usando css. Pero esto no funcionará Porque GWT ofuscará los nombres de css. Y el nombre ofuscado para .childWidgetStyle en ParentWidget será diferente del .childWidgetStyle en Widget1. El css resultante tendrá un aspecto similar al siguiente:

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

De modo que la configuración del margen no se aplicará. ¿Cómo hago esto correctamente?

Answer 1

El truco es importar el nombre de clase CSS en 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> 

La parte importante es que, si no se utiliza ImportedWithPrefix anotación GWT se prefijar los nombres de los estilos importados con el nombre de la clase del recurso la clase css está en. Entonces childWidgetStyle se convierte en .Widget1Style-childWidgetStyle.

(edit:. Pieza retirada acerca siguientes comentarios y documentation @Shared)