Panel redimensionable GWT

Question

¿Hay alguna forma de tener un panel 'redimensionable' en GWT?

Por cambio de tamaño, quiero decir que si arrastra en el borde del Panel se puede cambiar el tamaño según corresponda.

Answer 1

Lo descubrí yo 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;
    }
}

Answer 2

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

Answer 3

En los navegadores modernos, puedes resolver esto independientemente de GWT. Mucho más fácil y limpio. Simplemente use la <3> > tamaño de CSS3 resize . y especifique un valor de overflow distinto al predeterminado ( visible ).

Tenga en cuenta que probablemente querrá anular la propiedad resize para los elementos secundarios, de modo que no todos hereden los controladores 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 es posible que deba ajustar los selectores para que funcionen en su caso):

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

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

Esto le da a mi FlexTable un controlador de tamaño en la esquina inferior derecha, como esto:

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

Si prefieres hacer las cosas de manera programática a la manera 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 (bueno, dije los navegadores modernos ... y CSS3 ), pero en la mayoría de los demás .

Answer 4

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

Answer 5

Para el código anterior en onBrowserEvent (...) no olvide insertar

 event.preventDefault();

¡

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