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。