Không thể nhận SplitLayoutPanel hoạt động - GWT + UIBinder đang khiến tôi phát điên

Question

... 
<g:VerticalPanel styleName="{style.mainVerticalPanel}"> 
    <g:SplitLayoutPanel> 
    <g:north size="700"> 
     <g:VerticalPanel> 
       <g:ScrollPanel styleName="{style.conversationPanelContainer}"> 
        <g:FlexTable ui:field="conversationPanel" styleName="{style.conversationPanel}"></g:FlexTable> 
       </g:ScrollPanel> 
       <g:HorizontalPanel styleName="{style.messageTextAndSendPanel}"> 
        <g:TextBox ui:field="messageText" styleName="{style.messageText}"></g:TextBox><g:Button ui:field="sendButton">Send</g:Button> 
       </g:HorizontalPanel> 
     </g:VerticalPanel> 
    </g:north> 
    <g:south size="300"> 
    <g:button>TestButton</g:button> 
    </g:south> 
    </g:SplitLayoutPanel> 
</g:VerticalPanel> 
... 

Có gì sai với điều này? Tất cả những gì tôi đang cố gắng làm là tạo một bảng phân chia đơn giản nhưng bất cứ khi nào tôi chạy tất cả những gì tôi nhận được là một trang trống. Không có bất kỳ công cụ nào trong số SplitPanel, nó hoạt động tốt. Điều tương tự cũng xảy ra với DockLayoutPanel.

Answer 1

OK, đã nhận nó làm việc (xem cũ các phiên bản của câu trả lời này cho các lần thử trước;)).

Giải pháp của tôi dựa trên Mail example. Mã làm việc:

public class SplitTest implements EntryPoint { 

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

    interface TestUiBinder extends UiBinder<SplitLayoutPanel, SplitTest> { 
    } 

    /** 
    * This is the entry point method. 
    */ 
    public void onModuleLoad() { 
     SplitLayoutPanel outer = uiBinder.createAndBindUi(this); 

     RootLayoutPanel.get().add(outer); 
    } 
} 

UiBinder * .ui.xml:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"> 
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" 
    xmlns:g="urn:import:com.google.gwt.user.client.ui"> 
    <ui:style> 
    .conversationPanelContainer, .conversationPanel, .messageTextAndSendPanel, .messageText { 
     font-weight: bold; 
    } 
    </ui:style> 
    <g:SplitLayoutPanel> 
    <g:north size="700"> 
     <g:VerticalPanel> 
       <g:ScrollPanel styleName="{style.conversationPanelContainer}"> 
        <g:FlexTable ui:field="conversationPanel" styleName="{style.conversationPanel}"></g:FlexTable> 
       </g:ScrollPanel> 
       <g:HorizontalPanel styleName="{style.messageTextAndSendPanel}"> 
        <g:TextBox ui:field="messageText" styleName="{style.messageText}"></g:TextBox><g:Button ui:field="sendButton">Send</g:Button> 
       </g:HorizontalPanel> 
     </g:VerticalPanel> 
    </g:north> 
    <g:south size="300"> 
    <g:Button>TestButton</g:Button> 
    </g:south> 
    </g:SplitLayoutPanel> 
</ui:UiBinder> 

Lưu ý một số điều:

• Trước hết: bạn đã có một lỗi trong XML UiBinder của bạn mẫu: đó là <g:Button>, không phải <g:button> (phân biệt chữ hoa chữ thường)
• Việc sử dụng RootLayoutPanel thay vì chúng tôi ual RootPanel
• tôi vẫn còn một chút nhầm lẫn về toàn bộ LayoutPanel s thingy - trong Mail example họ sử dụng một SplitLayoutPanel lồng trong một DockLayoutPanel, tuy nhiên chỉ có DockLayoutPanel được bổ sung một cách rõ ràng đến RootLayoutPanel - tôi hiểu rằng SplitLayoutPanel Automagically cũng được thêm vào (để nó có thể nhận được các sự kiện thay đổi kích thước, vv)? Làm thế nào về một số Widgets khác lồng nhau trong LayoutPanel chính - họ có phải được thêm một cách rõ ràng vào RootLayoutPanel hoặc chỉ khi chúng là gốc của Widget/Composite hoặc là thậm chí không thể? Tôi không thực sự có thời gian để theo đuổi điều này thêm nữa - tôi sẽ để nó như một bài tập về nhà cho người khác;)

BTW: Tôi đã kiểm tra mã này dưới chế độ Quirks và chế độ Chuẩn - I don ' t thấy một sự khác biệt, cả hai công việc O_o (mặc dù, đây là một sử dụng đơn giản của SplitLayoutPanel - ví dụ phức tạp hơn có thể dẫn đến một số hành vi lạ trong chế độ Quirks và/hoặc lỗi hiển thị)

Answer 2

Bạn đang sử dụng loại tài liệu nào? Những tấm này chỉ hoạt động ở chế độ tiêu chuẩn (ít nhất là với một số broswers). Nếu bạn sử dụng chế độ quirks, sau đó nó thường xảy ra, mà bạn nhận được một trang trống với các bảng.

Kiểm tra tệp HTML của bạn. Nó lý tưởng nên bắt đầu với:

<!DOCTYPE html> 

Hoặc cách khác một số loại tài liệu khác mà kết quả trong chế độ tiêu chuẩn (nhưng hãy chắc chắn để gõ nó trong 100% nguyên văn), xem http://hsivonen.iki.fi/doctype/