Cách thêm thanh cuộn vào bố cục Vaadin

Question

Tôi đã tìm thấy nhiều câu hỏi mà mọi người đang hỏi cách ẩn thanh cuộn trong bố cục Vaadin, nhưng vấn đề của tôi là Vaadin không hiển thị cho tôi bất kỳ thanh cuộn nào. Ví dụ tôi có thể có mã này:

HorizontalLayout layout = new HorizontalLayout(); 
layout.setSizeUndefined(); // I also tried setSizeFull() 
for(Integer i = 1; i <= 15; i++) { 
    layout.addComponent(new Button("Test button #" + i.toString()); 
} 

Nhưng khi tôi chạy mã này, các nút trên trang chỉ đơn giản là cắt đứt khi cửa sổ trình duyệt là quá nhỏ để hiển thị tất cả. Không có thanh cuộn nào xuất hiện.

Tôi cũng đã cố gắng tạo Bảng điều khiển và sau đó thêm bố cục của tôi vào bảng điều khiển này. Tôi đã thử nghiệm cả hai - panel.addComponent(foo) và cũng là panel.setContent(foo) và tôi cũng đã cố gắng đặt panel.setScrollable(true). Không thành công.

Có cách nào để thêm thanh cuộn vào một số loại bố cục Vaadin không? Tôi sử dụng Vaadin 6.8.7. Cảm ơn bạn trước!

---

Có là mã đầy đủ của tôi:

private ComponentContainer openZoomifyLayout() { 
    Panel panel = new Panel(); 
    Panel panel2 = new Panel(); 

    middlePanel = new MiddlePanel(); 

    VerticalLayout mw = new VerticalLayout(); 
    mw.setSizeFull(); 

    HorizontalLayout sp = new HorizontalLayout(); 
    Panel photos = new Panel(); 
    photos.setSizeUndefined(); 

    mw.addComponent(panel); 
    mw.addComponent(panel2); 
    mw.addComponent(sp); 

    mw.setExpandRatio(sp, 99); 
    mw.setExpandRatio(panel, 0); 
    mw.setExpandRatio(panel2, 0); 

    panel2.addComponent(middlePanel); 

    mw.setComponentAlignment(panel, Alignment.TOP_CENTER); 
    mw.setComponentAlignment(panel2, Alignment.TOP_CENTER); 

    photos.setContent(table); 
    photos.setScrollable(true); 
    sp.addComponent(photos); 
    sp.addComponent(createMainDetail()); 

    return mw; 
} 

Phương pháp này được sử dụng trong lớp mà mở rộng cửa sổ, và như vậy trong thời điểm khởi tạo là có: setContent(openZoomifyLayout());

Answer 1

spHorizontalLayout và photosPanel của bạn cần phải có kích thước đầy đủ.

Như bạn có thể đọc trong chương Vaadin Sách 6.6.1

Thông thường, nếu một bảng điều khiển đã không xác định kích thước theo một hướng, vì nó có bởi mặc định theo chiều dọc, nó sẽ phù hợp với kích thước của nội dung và phát triển là nội dung phát triển. Tuy nhiên, nếu nó có kích thước cố định hoặc phần trăm và nội dung của nó quá lớn để vừa với khu vực nội dung, thanh cuộn sẽ xuất hiện theo hướng cụ thể. Các thanh cuộn trong Bảng điều khiển là được trình duyệt xử lý nguyên bản với thuộc tính tràn: auto trong CSS.

Answer 2

Bạn sẽ cần một bảng điều khiển. Bạn cũng cần phải đảm bảo rằng kích thước của bảng điều khiển được cố định và không phải là "tự nhiên". Nếu kích thước của nó là "tự nhiên", bảng điều khiển sẽ được mở rộng cho đến khi nội dung của nó có thể được hiển thị đầy đủ. Kích thước mặc định cho các bảng là tự nhiên, và đó là lý do tại sao bạn không thấy bất kỳ thanh cuộn nào.

Answer 3

Thực hiện theo các bước sau:

• nhu cầu bố trí bên ngoài cố định hoặc kích thước percentual theo hướng có liên quan (ví dụ VerticalLayout cần chiều cao cố định hoặc percentual)
• cách bố trí bên trong cần kích thước không xác định theo hướng đó
• bố cục bên ngoài cần tên mẫu v-scrollable

ví dụ:

public class SomeView extends CustomComponent implements View 
{ 
     this.addStyleName("v-scrollable"); 
     this.setHeight("100%"); 
     VerticalLayout content = new VerticalLayout(); 
     // content has undefined height by default - just don't set one 
     setCompositionRoot(content); 
... 
} 

Điều này sẽ làm cho thanh cuộn content phát triển khi cần.