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, я уверен, что вы можете адаптировать его, просто добавив соответствующие стили к вашим элементам в коде.

Downsides? Не работает в IE / Edge (эй, я сказал современные браузеры ... и CSS3 ), но в большинство других .

Answer 4

Для кода выше в onBrowserEvent (...) не забудьте вставить

 event.preventDefault();

или у вас будут проблемы с перетаскиванием изображений Firefox!

Answer 5

Похоже, что расширение виджета GWT-Ext содержит то, что вы хотите, в изменяемой панели