Question

有没有办法在GWT中设置'可调整大小'面板。

通过调整大小我的意思是，如果你拖动Panel的边缘，它可以相应调整大小。

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/ OF / IE / Chrome

有一个功能齐全的例子

Answer 3

在现代浏览器中，您可以独立于GWT解决此问题。更简单，更清洁。只需使用CSS3 resize属性，并指定默认值（.container）以外的overflow值。

请注意，您可能希望覆盖子元素的visible属性，这样他们就不会继承resize-handle。

就我而言，我的resize文件中有类似的内容：

.ui.xml

在我的样式表中有类似的东西（GWT增加了一些额外的div，所以你可能需要调整选择器以适应你的情况）：

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

这为我的.myTableContainer div { resize: vertical; overflow: auto; } .myTableContainer div div { resize: none; overflow: visible; }提供了一个右下角的调整大小句柄，如下所示：

用户可以向下拖动手柄以垂直调整包含FlexTable的面板的大小。当然，除了FlexTable，您还可以允许调整大小为vertical或horizontal。

如果您更喜欢以编程方式使用UiBinder方式，我确信您可以通过在代码中为元素添加适当的样式来调整它。

缺点？不能在IE / Edge中工作（嘿，我说现代浏览器......和 CSS3 ），但在most others中。

Answer 4

GWT-Ext小部件扩展程序在Resizable Panel

中包含您想要的内容

Answer 5

对于onBrowserEvent（...）中的上述代码，请不要忘记插入

 event.preventDefault();

或者你会遇到firefox图片拖动的麻烦！

GWT可调整大小的面板

5 个答案: