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

它看起來像GWT-Ext小部件擴展包含您在Resizable Panel

Answer 3

只要看看這裏：http://code.google.com/p/resizepanel/ 有一個功能齊全FF/IE/GChrome示例

Answer 4

對於onBrowserEvent（...）中的上述代碼，不要忘記插入

event.preventDefault(); 

或者你將有拖動Firefox圖像的麻煩！

Answer 5

在現代瀏覽器中，您可以獨立於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），但在most others。