应用程序可调整的小组

Question

是否有任何方式有一个可调整的小组中的应用程序.

通过调整大小我的意思是如果你拖上的边缘板，它可以调整。

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

在现代的浏览器就可以解决这种独立的应用程序.更容易和更清洁。只是使用CSS3 resize 财产，并指定一个 overflow 值等于默认(visible).

注意，你可能会想要重写 resize 酒店对儿童的元素，因此他们没有继承调整-处理。

在我的情况下，我有这样的事情在我 .ui.xml 文件：

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

而这样的事情在我的样式表(应用程序增加了一些额外的div，因此可能需要调节器的工作对于你的情况):

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

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

这给了我 FlexTable 一个大小调整处理在右下角，像这样：

用户可以将处理下垂直调整的小组包含我的 FlexTable.当然，而不是的 vertical, 你还可以允许调整是 horizontal 或 both.

如果你喜欢做的事情编程方式的UiBinder的方式，我肯定你能够适应它通过简单地添加适当的风格你的要素。

缺点?不工作，在IE/边缘(嘿，我说 现代的 浏览器...和 CSS3)，但在 大多数人.

Answer 4

GWT-Ext 小部件扩展程序包含您想要的内容其可调整大小的面板

Answer 5

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

 event.preventDefault();

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