GWT Resizable 패널

Question

GWT에 'Resizable'패널이있는 방법이 있습니까?

RESIZIZAL에 의해 패널의 가장자리에서 드래그하면 그에 따라 크기를 조정할 수 있습니다.

Answer 1

스스로 알아 냈습니다. 여기에 예가 있습니다.

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

여기서 봐 : http://code.google.com/p/resizepanel/FF/IE/GCHROME에 대한 완벽한 기능 예가 있습니다.

Answer 3

현대식 브라우저에서는이를 GWT와 독립적으로 해결할 수 있습니다. 훨씬 쉽고 깨끗합니다. CSS3 만 사용하십시오 resize 속성 및 지정 overflow 기본값 이외의 값 (visible).

당신은 아마도 그것을 무시하고 싶을 것입니다 resize 자식 요소에 대한 속성은 모두 상속 조정 핸들을하지 않습니다.

제 경우에는 이와 같은 것이 있습니다. .ui.xml 파일:

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

그리고 내 스타일 시트에서 이와 같은 내용 (GWT는 일부 추가 DIV를 추가하므로 케이스를 위해 작동하도록 선택기를 조정해야 할 수도 있습니다).

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

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

이것은 내를 준다 FlexTable 다음과 같이 오른쪽 하단 코너의 크기 조정 핸들.

사용자는 핸들을 아래로 끌어 내고 포함 된 패널을 수직 크기를 조정할 수 있습니다. FlexTable. 물론 대신 vertical, 당신은 또한 크기 조정을 허용 할 수 있습니다 horizontal 또는 both.

Uibinder 방식으로 프로그래밍 방식으로 작업을 선호하는 경우 코드의 요소에 적절한 스타일을 추가하여 적응할 수 있다고 확신합니다.

다운 사이드? IE/Edge에서 작동하지 않습니다 (이봐, 난 말했어 현대의 브라우저 ... 그리고 CSS3),하지만 대부분의 다른 사람들.

Answer 4

그것은처럼 보인다 GWT-EXT 위젯 확장에는 원하는 내용이 포함되어 있습니다 Resizedable 패널

Answer 5

onbrowserevent (...)의 위의 코드는 삽입을 잊지 마십시오.

 event.preventDefault();

또는 Firefox 이미지 드래그로 문제가 생길 것입니다!