GWT redimensionable panel

Question

¿Hay alguna manera de tener un panel 'Redimensionable' en GWT.

Al cambiar el tamaño me refiero a que si arrastra en el borde del Panel, se puede cambiar el tamaño en consecuencia.

Answer 1

pensé que fuera a mí mismo, aquí es 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

Parece que los GWT-Ext extensiones widgets contiene lo que quiere en su Resizable Panel

Answer 3

Basta con mirar aquí: http://code.google.com/p/resizepanel/ No es un completo y funcional ejemplo para FF/IE/GChrome

Answer 4

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

event.preventDefault(); 

o tendrá problemas con el arrastre de la imagen de firefox!

Answer 5

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

Tenga en cuenta que es probable que desee sobrescribir la propiedad resize para los elementos secundarios, por lo que no heredan 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 estilo (GWT añade algunos divs adicionales, por lo que es posible que tenga que ajustar los selectores para trabajar para su caso):

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

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

esto da a mi un mango FlexTable tamaño de la esquina inferior derecha, como esto:

Los usuarios pueden arrastrar el controlador hacia abajo para cambiar el tamaño verticalmente 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 a UiBinder, estoy seguro de que puedes adaptarlo simplemente agregando los estilos apropiados a tus elementos en el código.

Downsides? No funciona en IE/Edge (hey, dije navegadores modernos ... y CSS3), pero en most others.