examples - gwt tutorial

Panel redimensionable GWT

Question

¿Hay alguna manera de tener un panel de "Tamaño variable" en GWT?

Al cambiar el tamaño, quiero decir que si arrastras el borde del Panel, se puede cambiar el tamaño en consecuencia.

Answer 1

Parece que las extensiones de widget GWT-Ext contienen lo que quieres en su Panel de tamaño variable

Answer 2

Solo mira aquí: http://code.google.com/p/resizepanel/ Hay un ejemplo completamente funcional para FF / IE / GChrome

Answer 3

Para el código de arriba en onBrowserEvent (...) no olvides insertar

 event.preventDefault();

¡o tendrás problemas con el arrastre de imágenes de Firefox!

Answer 4

En los navegadores modernos, puede resolver esto independientemente de GWT. Mucho más fácil y más limpio. Simplemente use la propiedad de resize CSS3 y especifique un valor de overflow diferente al predeterminado ( visible ).

Tenga en cuenta que probablemente desee anular la propiedad de cambio de resize para elementos secundarios para que no hereden todos los identificadores de tamaño.

En mi caso, tengo algo como esto en mi archivo .ui.xml :

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

Y algo como esto en mi hoja de estilos (GWT agrega algunos divs adicionales, por lo que puede necesitar ajustar selectores para que funcionen para su caso):

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

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

Esto le da a mi FlexTable un mango de cambio de tamaño en la esquina inferior derecha, así:

Los usuarios pueden arrastrar el controlador hacia abajo para cambiar el tamaño vertical del panel que contiene mi FlexTable . Por supuesto, en lugar de vertical , también puede permitir que el cambio de tamaño sea horizontal o both .

Si prefieres hacer las cosas de forma programática con UiBinder, estoy seguro de que puedes adaptarlo simplemente agregando los estilos apropiados a tus elementos en el código.

Desventajas? No funciona en IE / Edge (hey, dije navegadores modernos ... y CSS3 ), pero en la mayoría de los demás .

Answer 5

Me imaginé a mí mismo, aquí hay un ejemplo:

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;
    }
}