Bảng điều khiển có thể thay đổi kích thước GWT

Question

Có cách nào để có bảng điều khiển 'có thể thay đổi kích thước' trong GWT hay không.

Bằng cách thay đổi kích thước, có nghĩa là nếu bạn kéo trên cạnh của Bảng điều khiển, nó có thể được thay đổi kích cỡ cho phù hợp.

Answer 1

đặn nó ra bản thân mình, đây là một ví dụ:

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

Dường như GWT-Ext mở rộng phụ tùng chứa những gì bạn muốn trong nó Resizable Panel

Answer 3

Chỉ cần nhìn ở đây: http://code.google.com/p/resizepanel/ Có một đầy đủ chức năng ví dụ cho FF/IE/GChrome

Answer 4

Đối với mã ở trên trong onBrowserEvent (...) đừng quên chèn

event.preventDefault(); 

hoặc bạn sẽ gặp khó khăn khi kéo hình ảnh bằng firefox!

Answer 5

Trong trình duyệt hiện đại, bạn có thể giải quyết điều này một cách độc lập với GWT. Dễ dàng hơn và sạch hơn. Chỉ cần sử dụng thuộc tính CSS3 resize và chỉ định giá trị overflow khác với giá trị mặc định (visible).

Lưu ý rằng bạn có thể muốn ghi đè thuộc tính resize cho các phần tử con để chúng không thừa kế tất cả các nút điều chỉnh kích thước.

Trong trường hợp của tôi, tôi có một cái gì đó như thế này trong tập tin .ui.xml tôi:

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

Và một cái gì đó như thế này trong stylesheet của tôi (GWT cho biết thêm một số divs thêm, vì vậy bạn có thể cần phải điều chỉnh bộ chọn để làm việc cho bạn trường hợp):

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

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

Điều này cho phép FlexTable một tay cầm thay đổi kích thước của tôi ở góc dưới bên phải, như thế này:

Người dùng có thể kéo tay cầm xuống để đổi kích thước theo chiều dọc bảng điều khiển chứa FlexTable của mình. Tất nhiên, thay vì vertical, bạn cũng có thể cho phép thay đổi kích thước thành horizontal hoặc both.

Nếu bạn thích làm mọi thứ theo cách lập trình theo cách UiBinder, tôi chắc chắn bạn có thể điều chỉnh nó bằng cách thêm các kiểu thích hợp vào các phần tử của bạn trong mã.

Nhược điểm? Không hoạt động trong IE/Edge (hey, tôi đã nói hiện đại trình duyệt ... và CSS3), nhưng trong most others.