Quy ước bố cục GWT Html

Question

Tôi vừa bắt đầu làm việc với GWT và tôi đã công nhận sức mạnh phi thường mà nó sở hữu. Tôi đến từ thế giới giao diện để Java là một đường cong học tập lớn, nhưng tôi nghĩ điều đó thực sự sẽ giúp tôi xây dựng một ứng dụng được đặt đúng (html-wise) thay vì chỉ dựa vào các bảng GWT mặc định thường kết thúc bằng cách sử dụng các bảng để bố trí, hoặc các div thừa, vị trí tuyệt đối.

Điều lớn nhất làm chậm tôi ngay bây giờ tuy nhiên là quyết định cách bố trí đúng cách thiết kế trang web của tôi. Tôi đã có một tiêu chuẩn khá 2-col tiêu đề/chân trang web (cố định chiều rộng) mà tôi muốn thiết kế, nhưng tôi không phải là một fan hâm mộ của tất cả các divs thêm/kiểu dáng vv mà đi kèm với DockLayoutPanel ví dụ.

Tôi nghĩ rằng tôi chỉ nên viết Layout phụ tùng riêng mở rộng composite tôi có HTMLPanels cho cách bố trí trang web chung
(Tôi nghĩ ... vẫn chưa tìm đầy đủ mà ra được nêu ra, tức là. Làm thế nào để tôi thêm ID để những divs bảng "# header", "#nav" vv ...)
sau đó tôi có thể thêm các widget khác vào cách bố trí này

Nhưng điều khác tôi nhìn thấy là tôi có thể viết một lớp Layout mở rộng UiBuilder và đã thẳng hàng các div trong tệp ui.xml.

Tôi tự hỏi, phương pháp ưa thích cho bố cục trang web bằng GWT là gì? Điều này sẽ không được tái sử dụng trong ý nghĩa của các vật dụng khác, nó sẽ được sử dụng một lần và điều khiển của tôi vv sẽ được đặt bên trong.

Bất kỳ mẹo hoặc thủ thuật nào được đánh giá cao! Và nếu tôi đã hoàn toàn bỏ lỡ chiếc thuyền về cách làm điều này, hãy cho tôi biết

Answer 1

Kết hợp UI Binder và HTML Panel hoạt động tốt nhất cho chúng tôi.

Trong .ui.xml của bạn, nơi mã tương tự như -

<gwt:HTMLPanel ui:field="container"> 



    <gwt:FlowPanel ui:field="header"></gwt:FlowPanel> 



     <gwt:HTMLPanel styleName="secondarynav"> 

      <gwt:FlowPanel ui:field="menuWidget"></gwt:FlowPanel> 

      <gwt:FlowPanel ui:field="someOtherWidget"></gwt:FlowPanel> 

     </gwt:HTMLPanel> 



     <gwt:FlowPanel styleName="secondarycontent"> 

      <gwt:FlowPanel ui:field="faqWidget"></gwt:FlowPanel> 

      <gwt:FlowPanel ui:field="advertisingWidget"></gwt:FlowPanel> 

     </gwt:FlowPanel> 



     <div class="content"> 
     <gwt:FlowPanel ui:field="mainContentWidget"/> 

     </div> 


     <div class="clearingDiv"/> 

    </div> 



    <gwt:FlowPanel ui:field="footer"></gwt:FlowPanel> 

</gwt:HTMLPanel> 

Trong java lớp tương ứng, bạn sẽ có những phương pháp như setHeader(), setSecondaryNav(), setMenu(), setFooter() v.v.

Bằng cách này, bố cục của bạn được xác định hoàn toàn trong tệp ui.xml của bạn. Ngoài ra, bạn có thể sử dụng abstractions widget. Có nghĩa là bạn có thể tạo một Header Widget và sau đó gọi phương thức setHeader() trong layout của bạn để đặt nó đúng cách.

Answer 2

Tiếp tục sử dụng bố cục của bạn. GWT rất thích nghi.

Tùy chọn bạn có thể muốn thử là giữ bố cục HTML/CSS tĩnh hiện tại của mình. Bạn có thể sử dụng RootPanel.get ("id") để lấy tham chiếu đến phần tử (theo id), dưới dạng Bảng điều khiển, trong đó bạn có thể thêm tiện ích GWT (bao gồm các bảng khác).

Bạn cũng có thể di chuyển bố cục của mình vào mẫu UiBinder. Những lợi ích ở đây là giảm thiểu CSS và obfuscation (nhiều UiBinders có thể chia sẻ một tài nguyên CSS)

Answer 3

Nếu bạn chỉ muốn xây dựng trang bằng cách sử dụng div của riêng bạn, cách dễ nhất là sử dụng div trong tệp XML UiBinder. Ở đó bạn cũng có thể thiết lập các thuộc tính id như thường lệ:

<g:HTML> 
    <div id="header">...</div> 
    ... 
</g:HTML> 

Các tấm bố trí được cung cấp bởi GWT có thể hữu ích, quá - có thể bạn sẽ muốn chơi xung quanh với họ hơn một chút, và xem nếu họ cung cấp bất kỳ giá trị nào (như tránh một số vấn đề trình duyệt chéo) cho bạn, hay không.