GWT resizable Panel

Question

Gibt es eine Möglichkeit, eine 'Resizable' Panel in GWT haben.

Mit der Größe veränderbar Ich meine, wenn man Sie am Rande des Panels ziehen sie entsprechend der Größe verändert werden.

Answer 1

ich es herausgefunden, hier ein Beispiel:

public class DraggablePanel extends VerticalPanel {
    private boolean isBeingDragged = false;
    private boolean isBeingMoved = false;
    private Element movingPanelElement;

    public void setMovingPanelElement(Element movingPanelElement) {
        this.movingPanelElement = movingPanelElement;
    }

    public DraggablePanel() {
        super();
        DOM.sinkEvents(getElement(), Event.ONMOUSEDOWN | Event.ONMOUSEMOVE
                | Event.ONMOUSEUP | Event.ONMOUSEOVER);
    }

    @Override
    public void onBrowserEvent(Event event) {
        final int eventType = DOM.eventGetType(event);
        if (Event.ONMOUSEOVER == eventType) {
            if (isCursorResize(event)) {
                getElement().getStyle().setProperty("cursor", "s-resize");
            } else if (isCursorMove(event)) {
                getElement().getStyle().setProperty("cursor", "move");
            } else {
                getElement().getStyle().setProperty("cursor", "default");
            }
        }
        if (Event.ONMOUSEDOWN == eventType) {
            if (isCursorResize(event)) {
                if (!isBeingDragged) {
                    isBeingDragged = true;
                    DOM.setCapture(getElement());
                }
            } else if (isCursorMove(event)) {
                DOM.setCapture(getElement());
                isBeingMoved = true;
            }
        } else if (Event.ONMOUSEMOVE == eventType) {
            if (!isCursorResize(event) && !isCursorMove(event)) {
                getElement().getStyle().setProperty("cursor", "default");
            }
            if (isBeingDragged) {
                int currentY = event.getClientY();
                int originalY = getElement().getAbsoluteTop();
                if (currentY > originalY) {
                    Integer height = currentY - originalY;
                    this.setHeight(height + "px");
                }
            } else if (isBeingMoved) {
                RootPanel.get().setWidgetPosition(this,
                        event.getClientX(), event.getClientY());
            }
        } else if (Event.ONMOUSEUP == eventType) {
            if (isBeingMoved) {
                isBeingMoved = false;
                DOM.releaseCapture(getElement());
            }
            if (isBeingDragged) {
                isBeingDragged = false;
                DOM.releaseCapture(getElement());
            }
        }
    }

    protected boolean isCursorResize(Event event) {
        int cursor = event.getClientY();
        int initial = getAbsoluteTop();
        int height = getOffsetHeight();
        return initial + height - 20 < cursor && cursor <= initial + height;
    }

    protected boolean isCursorMove(Event event) {
        int cursor = event.getClientY();
        int initial = movingPanelElement.getAbsoluteTop();
        int height = movingPanelElement.getOffsetHeight();
        return initial <= cursor && cursor <= initial + height;
    }
}

Answer 2

Sehen Sie nur hier: http://code.google.com/p/resizepanel/ Es ist ein voll funktionsfähiges Beispiel für FF / IE / GChrome

Answer 3

In der modernen Browsern können Sie diese unabhängig von GWT lösen. Viel einfacher und sauberer. Verwenden Sie einfach die CSS3 resize Eigenschaft, und geben Sie eine overflow anderer Wert als der Standardwert (visible).

Beachten Sie, dass Sie wahrscheinlich die resize Eigenschaft für untergeordnete Elemente außer Kraft setzen wollen, so dass sie alle nicht erben die Größe Griff.

In meinem Fall, ich habe so etwas in meiner .ui.xml-Datei:

<g:HTMLPanel addStyleNames="myTableContainer">
    <g:ScrollPanel>
        <g:FlexTable ui:field="myTable"></g:FlexTable>
    </g:ScrollPanel>
</g:HTMLPanel>

Und etwas wie dies in meinem Sheet (GWT fügt einige zusätzliche divs, so müssen Sie möglicherweise Wähler einstellen für Ihren Fall arbeiten):

.myTableContainer div {
    resize: vertical;
    overflow: auto;
}

.myTableContainer div div {
    resize: none;
    overflow: visible;
}

Das gibt mein FlexTable einen Anfasser in der unteren rechten Ecke, wie folgt aus:

Der Benutzer kann den Griff nach unten ziehen, um vertikal die Platte enthält meine FlexTable zu ändern. Selbstverständlich kann anstelle von vertical, können Sie auch horizontal oder both zu Größenanpassung zulassen.

Wenn Sie es vorziehen, Dinge programmatisch auf die UiBinder Art und Weise zu tun, ich bin sicher, dass Sie es, indem Sie einfach die entsprechenden Stile Ihre Elemente im Code anpassen können.

Die Nachteile? Funktioniert nicht in IE / Edge (hey, ich sagte, moderne Browser ... und CSS3 ), aber in die meisten anderen .

Answer 4

Es sieht aus wie der GWT-Ext Widget Erweiterungen enthält, was Sie wollen in seine Resizable-Panel

Answer 5

Für den Code oben in onBrowserEvent (...) nicht vergessen Einfügen

 event.preventDefault();

oder Sie haben Probleme mit firefox Bild Schleppen!