जीडब्ल्यूटी आकार बदलने योग्य पैनल

Question

क्या जीडब्ल्यूटी में 'आकार बदलने योग्य' पैनल रखने का कोई तरीका है।

आकार बदलने योग्य मेरा मतलब है कि यदि आप पैनल के किनारे पर खींचते हैं तो इसे तदनुसार बदल दिया जा सकता है।

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

यह GWT-Ext विजेट एक्सटेंशन की तरह लग रहा होता है क्या आप अपने Resizable Panel

Answer 3

बस यहाँ देखो: http://code.google.com/p/resizepanel/ वहाँ एक पूरी तरह कार्यात्मक है एफएफ/आईई/जीसीरोम

Answer 4

पर ऊपर दिए गए कोड के लिए उदाहरण के लिए

event.preventDefault(); 

या आपको फ़ायरफ़ॉक्स छवि खींचने में परेशानी होगी!

Answer 5

आधुनिक ब्राउज़रों में, आप इसे स्वतंत्र रूप से जीडब्ल्यूटी के हल कर सकते हैं। बहुत आसान और क्लीनर। बस CSS3 resize संपत्ति का उपयोग करें, और डिफ़ॉल्ट (visible) के अलावा overflow मान निर्दिष्ट करें।

ध्यान दें कि आप संभवतः resize संपत्ति को बाल तत्वों के लिए ओवरराइड करना चाहते हैं ताकि वे सभी आकार बदलने वाले हैंडल प्राप्त न करें।

मेरे मामले में, मैं अपने .ui.xml फ़ाइल में कुछ इस तरह है:

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

और मेरे स्टाइलशीट में कुछ इस तरह (GWT ताकि आप के लिए काम करने के लिए चयनकर्ताओं समायोजित करने की आवश्यकता हो सकती है, कुछ अतिरिक्त divs कहते हैं अपने मामले):

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

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

यह नीचे-दाएं कोने में मेरी FlexTable एक आकार बदलने के हैंडल देता है, इस तरह:

उपयोगकर्ता अपने FlexTable वाले पैनल को लंबवत आकार देने के लिए हैंडल को नीचे खींच सकते हैं। बेशक, vertical के बजाय, आप आकार बदलने की अनुमति भी दे सकते हैं horizontal या both।

यदि आप UiBinder तरीके से प्रोग्रामेटिक रूप से चीजें करना पसंद करते हैं, तो मुझे यकीन है कि आप कोड में अपने तत्वों को उचित शैलियों को जोड़कर इसे अनुकूलित कर सकते हैं।

डाउनसाइड्स? आईई/एज में काम नहीं करता है (हे, मैंने कहा आधुनिक ब्राउज़र ... और CSS3), लेकिन most others में।