Làm thế nào để sử dụng phong cách css nhập khẩu trong GWT đúng

Question

Hãy tưởng tượng bạn đã tạo widget đơn giản sau đây với 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); 
    } 
} 

hơn bạn sử dụng tiện ích này đơn giản trong một (mẹ) phụ tùng mà bạn đã tạo:

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

Những gì bạn muốn đạt được là để có được một số lợi nhuận giữa các mục Widget1 trong danh sách bằng cách sử dụng css. Nhưng điều này sẽ không hiệu quả. Bởi vì GWT sẽ làm xáo trộn tên css. Và tên bị làm mờ cho .childWidgetStyle trong ParentWidget sẽ khác với .childWidgetStyle trong Widget1. Kết quả css sẽ trông giống như sau:

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

Vì vậy, cài đặt lề sẽ không áp dụng. Làm thế nào để tôi làm điều này một cách chính xác?

Answer 1

Bí quyết là để nhập tên lớp css vào 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> 

Phần quan trọng là, nếu bạn không sử dụng ImportedWithPrefix chú thích GWT sẽ tiền tố tên phong cách nhập khẩu với tên lớp của tài nguyên lớp css là. Vì vậy, childWidgetStyle trở thành .Widget1Style-childWidgetStyle.

(chỉnh sửa:. Phần loại bỏ về ý kiến ​​sau đây @Shared và documentation)