GWT 可调整大小的面板答案

【问题标题】：GWT resizable panelGWT 可调整大小的面板
【发布时间】：2009-01-02 05:06:50
【问题描述】：

有没有办法在 GWT 中设置一个“可调整大小”的面板。

我所说的可调整大小的意思是，如果您在 Panel 的边缘拖动，它可以相应地调整大小。

【问题讨论】：

标签： gwt

【解决方案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;
    }
}

【讨论】：

【解决方案2】：

请看这里：http://code.google.com/p/resizepanel/ FF/IE/GChrome 有一个功能齐全的例子

【讨论】：

【解决方案3】：

在现代浏览器中，您可以独立于 GWT 来解决这个问题。更容易和更清洁。只需使用 CSS3 resize 属性，并指定除默认值 (visible) 以外的 overflow 值。

请注意，您可能希望覆盖子元素的 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（嘿，我说的是 modern 浏览器...和 CSS3），但在 most others.

【讨论】：

【解决方案4】：

看起来GWT-Ext 小部件扩展在其Resizable Panel 中包含您想要的内容

【讨论】：

我没有使用gwt-ext，只是gwt是我的方式，我认为dom操作可以做到

【解决方案5】：

对于上面 onBrowserEvent(...) 中的代码，不要忘记插入

 event.preventDefault();

否则你会遇到firefox图片拖拽的问题！

【讨论】：