Панель изменяемого размера 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!