Panneau redimensionnable GWT

Question

Y at-il un moyen d'avoir un panneau 'Redimensionnable' dans GWT.

Par redimensionnable, je veux dire que si vous faites glisser sur le bord du panneau, il peut être redimensionné en conséquence.

Answer 1

figured it moi-même, voici un exemple:

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

Il semble que les extensions de widget GWT-Ext contient ce que vous voulez dans son Resizable Panel

Answer 3

regarder juste ici: http://code.google.com/p/resizepanel/ Il est entièrement fonctionnel exemple pour FF/IE/GChrome

Answer 4

Pour le code ci-dessus dans onBrowserEvent (...) ne pas oublier d'insérer

event.preventDefault(); 

ou vous aurez des problèmes avec le déplacement de l'image firefox!

Answer 5

Dans les navigateurs modernes, vous pouvez résoudre ceci indépendamment de GWT. Beaucoup plus facile et propre. Utilisez simplement la propriété CSS3 resize et spécifiez une valeur overflow autre que celle par défaut (visible).

Notez que vous souhaiterez probablement remplacer la propriété resize pour les éléments enfants afin qu'ils n'héritent pas tous des poignées de redimensionnement.

Dans mon cas, j'ai quelque chose comme ça dans mon dossier .ui.xml:

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

Et quelque chose comme ça dans ma feuille de style (GWT ajoute quelques divs supplémentaires, de sorte que vous devrez peut-être ajuster sélecteurs de travailler pour votre cas):

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

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

cela donne mon FlexTable une poignée de redimensionnement dans le coin en bas à droite, comme ceci:

Les utilisateurs peuvent faire glisser la poignée vers le bas pour redimensionner verticalement le panneau contenant mon FlexTable. Bien sûr, au lieu de vertical, vous pouvez également autoriser le redimensionnement à horizontal ou both.

Si vous préférez faire des choses par programme à la manière d'UiBinder, je suis sûr que vous pouvez l'adapter en ajoutant simplement les styles appropriés à vos éléments dans le code.

Les inconvénients? Ne fonctionne pas dans IE/Edge (hé, j'ai dit modernes navigateurs ... et CSS3), mais dans most others.