No se puede obtener trabajando SplitLayoutPanel - GWT + UiBinder me están volviendo loco

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>
...

mal parece en nada con esto? Todo lo que estoy tratando de hacer es hacer un simple panel de división, pero cada vez que corro esto todo lo que consigo es una página en blanco. Sin ninguna de las cosas SplitPanel, funciona bien. Lo mismo sucede con DockLayoutPanel.

Answer 1

OK, tengo trabajo (ver versiones anteriores de esta respuesta para los intentos anteriores;)).

Mi solución se basa en correo ejemplo . El código de trabajo:

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> 

Tenga en cuenta una serie de cosas:

• En primer lugar: que ha habido un error en la plantilla XML UiBinder: Es <g:Button>, no <g:button> (mayúsculas y minúsculas)
• El uso de RootLayoutPanel en lugar de la habitual RootPanel
• Todavía estoy un poco confundido acerca de todo el LayoutPanels cosita - en el ejemplo correo que utilizan una SplitLayoutPanel anidado en una DockLayoutPanel, sin embargo, sólo la DockLayoutPanel se añade explícitamente a la RootLayoutPanel - ¿debo entender que la SplitLayoutPanel automagicamente también se agrega (de modo que pueda recibir eventos de cambio de tamaño, etc.)? ¿Qué tal unos a otros Reproductores anidados en el principal LayoutPanel - ¿tienen que ser añadido explícitamente a la RootLayoutPanel o sólo si son la raíz de esa Widget / Compuesto o es que ni siquiera es posible? Realmente no tengo tiempo atm a continuar esta labor - Lo dejo como tarea para otra persona;)

Por cierto: he comprobado el código en el modo no estándar y el modo de Normas - No veo la diferencia, tanto el trabajo O_o (sin embargo, esto es un simple uso de la SplitLayoutPanel - ejemplos más complejos, probablemente como resultado de alguna extraña el comportamiento en el modo no estándar y / o la prestación de errores)

Answer 2

¿Qué tipo de documento está usando? Estos paneles sólo funcionan en modo estándar (por lo menos con algunos broswers). Si utiliza el modo de peculiaridades, a continuación, a menudo sucede, que se obtiene una página en blanco con estos paneles.

Compruebe su archivo HTML. Idealmente debería comenzar con:

<!DOCTYPE html>

O, alternativamente algún otro tipo de documento que se traduce en modo estándar (pero asegúrese de que escribirla en el 100% pie de la letra), consulte http://hsivonen.iki.fi/doctype/