GWT - Как компоновать компоненты по горизонтали в FlowPanel?

Ответ 1

Правильно сказано в документах:

и использовать float: left; Свойство CSS для его детей.

Как установить стиль в виджет GWT:

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

Ответ 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>

Или вы можете заменить все ссылки HorizontalPanel на этот класс HorizontalFlowPanel:

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