Panneau redimensionnable GWT

Question

Existe-t-il un moyen de créer un panneau 'Redimensionnable' dans GWT.

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

Answer 1

Je l'ai compris 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 suffit de regarder ici: http://code.google.com/p/resizepanel/ Il existe un exemple entièrement fonctionnel pour FF / IE / GChrome

Answer 3

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

Notez que vous voudrez 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 ceci dans mon fichier .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 des div supplémentaires, vous devrez donc peut-être ajuster les sélecteurs pour qu'ils fonctionnent dans votre cas):

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

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

Ceci donne à ma FlexTable une poignée de redimensionnement dans le coin inférieur droit, comme ceci:

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

Si vous préférez utiliser UiBinder par programmation, je suis sûr que vous pouvez l'adapter en ajoutant simplement les styles appropriés à vos éléments dans le code.

Inconvénients? Ne fonctionne pas dans IE / Edge (hé, j’ai dit les navigateurs modernes ... et CSS3 ), mais dans la plupart des autres .

Answer 4

Il semble que les extensions de widget GWT-Ext contiennent ce que vous souhaitez. son panneau redimensionnable

Answer 5

Pour le code ci-dessus dans onBrowserEvent (...), n'oubliez pas d'insérer

 event.preventDefault();

ou vous aurez des problèmes avec l'image de firefox en train de glisser!