Cách bố trí các tiện ích con bằng cách sử dụng DockLayoutPanel và UiBinder trong GWT 2.0?

Question

Tôi đang cố gắng để có được một bố trí đơn giản làm việc theo GWT 2.0 bằng cách sử dụng UiBinder. Bố cục mà tôi đang cố gắng bắt đầu là bố cục bắt chước BorderLayout của Java ở nơi bạn có thể chỉ định các bảng khác nhau ở hướng bắc, nam, đông, tây và trung tâm; cho rằng tôi đang sử dụng DockLayoutPanel. Tôi muốn có được đầu trang và chân trang, cả hai đều có chiều rộng cố định. Không gian khung nhìn còn lại sẽ bị chiếm bởi tiện ích được gán cho vị trí trung tâm DockLayoutPanel.

File .ui.xml hiện tại tôi nhận được là:

<g:DockLayoutPanel unit='EM'> 
    <g:north size='2'> 
     <g:HTML>HEADER</g:HTML> 
    </g:north> 

    <g:south size='2'> 
     <g:HTML>FOOTER</g:HTML> 
    </g:south> 

    <g:center> 
     <g:HTML> 
      <div id='loginform'>Hello!</div> 
     </g:HTML> 
    </g:center> 
</g:DockLayoutPanel> 

Trình duyệt chỉ làm cho HEADER ở góc trên cùng bên trái. Làm cách nào tôi có thể đạt được bố cục mà tôi đang tìm kiếm? Dường như có nhiều CSS bạn phải biết trước khi bạn có thể sử dụng bảng bố cục GWT, nhưng loại đó đánh bại mục đích tạo giao diện người dùng với nó.

Answer 1

Điều này làm việc cho tôi mà không có hack được gợi ý bởi RaphaelO.

Ví dụ Javadoc trên DockLayoutPanel sử dụng 192 làm chiều rộng cho phương Tây. Điều này là sai - tác giả có thể nghĩ rằng anh ta đang sử dụng PX, nhưng anh ta đang sử dụng EM. Vì vậy, nếu bạn thu nhỏ, bạn sẽ thấy rằng Trung tâm nằm ở bên phải.

Bạn đã kiểm tra chế độ tiêu chuẩn của mình chưa? Điều này là bắt buộc đối với DockLayoutPanel.

Ngoài ra, quên đề cập rằng bạn nên sử dụng RootLayoutPanel khi bạn thêm DockLayout vào lớp nhập cảnh của bạn - không sử dụng RootPanel.

Answer 2

Tôi đã thử khối mã của bạn cũng như khối mẫu trên trang javadoc cho DockLayoutPanel và tôi nhận được kết quả tương tự. Chỉ dữ liệu trong phần Bắc của DockLayoutPanel mới được hiển thị. Tuy nhiên khi tôi tìm kiếm trang (sử dụng firefox và safari trên máy Mac), các phần tử khác được tìm thấy nhưng chúng không hiển thị ở bất kỳ đâu. Có vẻ như có lỗi với bảng điều khiển này và UiBinder.

Answer 3

Việc sử dụng Bảng bố cục mới được giới thiệu thực sự khá khó hiểu. Có một cách để làm cho bố trí chiếm toàn bộ khu vực khách hàng. Nó yêu cầu một chút mã Java ngoài tệp ui.xml.

Trong lớp EntryPoint của bạn, thêm một định nghĩa UiBinder với một chú thích vào file ui.xml mà tuyên bố bố trí:

@UiTemplate("LayoutDeclarationFile.ui.xml") 
interface DockLayoutUiBinder extends 
     UiBinder<DockLayoutPanel, TheEntryPointChildClass> { 
} 

private static DockLayoutUiBinder uiBinder = GWT 
     .create(DockLayoutUiBinder.class); 

trong hàm onModuleLoad, nhanh chóng UiBinder, lấy rễ của nó và trực tiếp thêm nó với DOM:

public void onModuleLoad() { 
    DockLayoutPanel layout = uiBinder.createAndBindUi(this); 
    // Make sure we use the whole client area 
    Window.setMargin("0px"); 

    // Add the panel to the DOM 
    RootLayoutPanel.get().add(layout); 
}