GWT - How zu layout-Komponenten, die horizontal in ein FlowPanel?

Die GWT-Dokumentation empfiehlt mit einem FlowPanel (float: left legen Sie auf Ihre Kinder) als Ersatz für die HorizontalPanel layout-Komponenten. Aber wie mache ich das?

InformationsquelleAutor helpermethod | 2011-02-15

  1. 16

    Sagt so richtig in den docs:

    und verwenden die float: left; CSS-Eigenschaft auf Ihre Kinder.

    Wie man ein style auf GWT-widgets:

    widget.getElement().getStyle().setProperty("float", "left");
    Bevorzugt die Nutzung widget.getElement().getStyle().setFloat(Float.LEFT);
    Kann ich eine CSS-Klasse für das?
    Sie können absolut. Dies war nur der inline-Weg, es zu tun, - pro Objekt. widget.setStyleName("cssClass");

    InformationsquelleAutor stan229

  2. 4

    Zu vermeiden, mit HorizontalPanel ich verwende den folgenden code, wo möglich:

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

    Und mit einem UIBinder ich etwas wie:

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

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

    Oder Sie ersetzen können alle HorizontalPanel Verweise, die von dieser HorizontalFlowPanel Klasse: 

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

    InformationsquelleAutor Italo Borssatto

Schreibe einen Kommentar