GWT لوحة يمكن تغيير حجم

Question

هل هناك أي طريقة لجعل لوحة "متغير الحجم" في GWT.

وبواسطة يمكن تغيير حجم أعني أنه إذا قمت بسحب على حافة الفريق أنه يمكن تغيير حجم وفقا لذلك.

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 الملكية، وتحديد <أ href = ل "https://developer.mozilla.org/en-US/docs/Web/CSS/overflow" يختلط = "نوفولو noreferrer"> 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 / حافة (مهلا، قلت <م> الحديثة المتصفحات ... و<م> CSS3 )، ولكن في <لأ href = "http://caniuse.com / # الفذ = المغلق تغيير الحجم "يختلط =" نوفولو noreferrer "> معظم البلدان الأخرى .

Answer 4

ويبدو ملحقات القطعة على GWT-تحويلة يحتوي على ما تريد في يمكن تغيير حجم لوحة

Answer 5

لرمز أعلاه في onBrowserEvent (...) لا ننسى إدخال

 event.preventDefault();

وأو سيكون لديك مشاكل مع فايرفوكس سحب الصورة!