GWT - 如何在FlowPanel中水平佈局組件？

Question

GWT文檔recommends使用FlowPanel（float：設置在其子級上的左側）作爲Horizo​​ntalPanel到佈局組件的替代品。但如何做到這一點？

Answer 1

說，在文檔這樣的權利：

，並使用浮動：左; CSS屬性的子項。

如何設置GWT部件的樣式：

widget.getElement().getStyle().setProperty("float", "left"); 

Answer 2

爲了避免使用HorizontalPanel我用下面的代碼在可能：

FlowPanel panel = new FlowPanel() { 
    @Override 
    public void add(Widget child) { 
     super.add(child); 
     child.getElement().getStyle().setDisplay(Display.INLINE_BLOCK); 
    } 
}; 

，並使用UiBinder的我做這樣的事情：

<ui:UiBinder ...> 
    <ui:style> 
     .vertical > * { 
      display: inline-block; 
     } 
    </ui:style> 

    <g:FlowPanel styleName="{style.vertical}"> 
     ... 
    </g:FlowPanel> 
</ui:UiBinder> 

或者你可以通過這個HorizontalFlowPanel類替代所有HorizontalPanel引用：

public class HorizontalFlowPanel extends FlowPanel { 
    private static final String BASIC_CLASS_NAME = "___" + Math.abs(Random.nextInt()); 
    private static final String HORIZONTAL_CLASS_NAME = BASIC_CLASS_NAME + "_H_"; 
    private static final String VERTICAL_CLASS_NAME = BASIC_CLASS_NAME + "_V_"; 

    static { 
     newCssClass(HORIZONTAL_CLASS_NAME + " > *", "display: inline-block; vertical-align: top;"); 
     newCssClass(VERTICAL_CLASS_NAME + " > *", "display: block;"); 
    } 

    private static int count = 0; 

    private final String myClassName = BASIC_CLASS_NAME + count++; 

    public HorizontalFlowPanel() { 
     super(); 
     setStylePrimaryName(HORIZONTAL_CLASS_NAME + " " + myClassName); 
    } 

    public void setSpacing(int spacing) { 
     newCssClass(myClassName + " > *", "margin-bottom: " + spacing + "px; margin-right: " + spacing + "px;"); 
    } 

    public void setPadding(int padding) { 
     newCssClass(myClassName, "padding: " + padding + "px;"); 
    } 

    public static void newCssClass(String className, String content) { 
     StringBuilder builder = new StringBuilder(); 
     builder.append("." + className + " { " + content + " }\n"); 

     Element style = DOM.createElement("style"); 
     style.setAttribute("type", "text/css"); 
     style.setInnerHTML(builder.toString()); 

     Document.get().getHead().appendChild(style); 
    } 
}