GWTのサイズ変更可能なパネル

Question

GWT で「サイズ変更可能」パネルを使用する方法はありますか。

サイズ変更可能とは、パネルの端をドラッグすると、それに応じてサイズを変更できることを意味します。

Answer 1

自分で考えたので、例を示します：

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

こちらをご覧ください： http://code.google.com/p/resizepanel/ FF / IE / GChromeの完全に機能する例があります

Answer 3

最新のブラウザでは、GWT とは独立してこれを解決できます。はるかに簡単でクリーンです。CSS3を使用するだけです resize プロパティを指定し、 overflow デフォルト以外の値 (visible).

おそらくオーバーライドする必要があることに注意してください。 resize 子要素のプロパティを使用して、すべての子要素がサイズ変更ハンドルを継承しないようにします。

私の場合、私の中にはこのようなものがあります .ui.xml ファイル：

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

そして、私のスタイルシートには次のようなものがあります（GWTはいくつかの追加のdivを追加するため、場合によってはセレクターを調整する必要があるかもしれません）。

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

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

これにより、私は FlexTable 次のように、右下隅にあるサイズ変更ハンドル:

ユーザーはハンドルを下にドラッグして、私の画像を含むパネルの垂直方向のサイズを変更できます。 FlexTable. 。もちろん、代わりに vertical, 、サイズ変更を許可することもできます。 horizontal または both.

UiBinder の方法よりもプログラムで物事を行うことを好む場合は、コード内の要素に適切なスタイルを追加するだけで適応できると思います。

欠点は？IE/Edge では動作しません (ねえ、私は言いました) モダンな ブラウザ...そして CSS3)、しかし、 他のほとんどの.

Answer 4

GWT-Ext ウィジェット拡張には、必要なものが含まれているようですサイズ変更可能なパネル

Answer 5

上記のonBrowserEvent（...）のコードでは、挿入を忘れないでください

 event.preventDefault();

または、Firefoxの画像のドラッグで問題が発生します！