Wie importierte CSS-Stile in GWT richtig verwenden

Question

Stellen Sie sich das folgende einfache Widget mit UiBinder erstellt:

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

als Sie dieses einfache Widget in einem anderen (Eltern) verwenden Widget Sie erstellt:

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

Was Sie erreichen möchten, ist es, einen gewissen Spielraum zwischen den Widget1-Einträgen in der Liste mit CSS zu bekommen. Aber das wird nicht funktionieren. Weil GWT die CSS-Namen verschleiern wird. Und der verdeckte Name für .childWidgetStyle in ParentWidget wird sich von .childWidgetStyle in Widget1 unterscheiden. Die sich ergebende CSS sieht etwa wie folgt aus:

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

So ist die Randeinstellung wird nicht gelten. Wie mache ich das richtig?

Answer 1

Der Trick ist, die CSS-Klasse Namen in ParentWidget zu importieren:

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

Der wichtigste Teil ist, wenn Sie nicht ImportedWithPrefix Anmerkung GWT verwenden Sie werden die importierten Stil Namen mit dem Klassennamen der Ressource Präfix die css-Klasse ist in. So childWidgetStyle wird .Widget1Style-childWidgetStyle.

(edit:. Entfernte Teil etwa @Shared folgende Kommentare und documentation)