Incrustar un manteleutpanel dentro de un DockLayoutpanel

Question

Estoy tratando de incrustar un mantautpanel dentro de un DockLayoutPanel pero las pestañas no aparecen :(

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
    xmlns:g='urn:import:com.google.gwt.user.client.ui'>
    <g:DockLayoutPanel unit='PX'>
        <g:north size='200'>
            <g:HTML>
                <h1>
                    My Header
      </h1>
            </g:HTML>
        </g:north>
        <g:center>

            <g:TabLayoutPanel barUnit='PX' barHeight='3'>
                <g:tab>
                    <g:header size='7'>
                        <b>HTML</b>
                        header
                    </g:header>
                    <g:Label>able</g:Label>
                </g:tab>
                <g:tab>
                    <g:customHeader size='7'>
                        <g:Label>Custom header</g:Label>
                    </g:customHeader>
                    <g:Label>baker</g:Label>
                </g:tab>
            </g:TabLayoutPanel>



        </g:center>
        <g:west size='192'>
            <g:HTML>
                <ul>
                    <li>Sidebar</li>
                    <li>Sidebar</li>
                    <li>Sidebar</li>
                </ul>
            </g:HTML>
        </g:west>
    </g:DockLayoutPanel>
</ui:UiBinder>

Answer 1

Si no está viendo nada en absoluto, asegúrese de que el mantautpanel (a) tenga un tamaño explícito, o (b) esté finalmente unido al RootLapeOutPanel (ver http://code.google.com/webtoolkit/doc/latest/devguideuipanels.html#resize para más detalles).

Si el problema es la falta de estilo en las pestañas (es decir, solo está viendo el texto crudo donde deberían estar las pestañas), deberá agregar algunos estilos (las reglas CSS que necesitará se describen en Javadoc de TableAyoutPanel) . Todavía no hay estilos predeterminados para TablAyOutPanel, pero pronto agregaremos algunos.

Answer 2

El ejemplo del Javadoc es algo engañoso: la altura de la barra de 3 ocultará los encabezados de pestañas y se debe especificar una altura para el cuerpo. Usa algo como:

<g:TabLayoutPanel barUnit='PX' barHeight='25' height="200px" >

o

<ui:style>
.tab {
    height: 200px;
}

<g:TabLayoutPanel barUnit='PX' barHeight='25' styleName="{style.tab}" >

Además, puede encontrar un estilo CSS básico para TableAtPanel en el comentario #5 en el siguiente número:

http://code.google.com/p/google-web-toolkit/issues/detail?id=4429

Answer 3

También he tenido el mismo problema usando el nuevo TablayOutPanel (las pestañas no aparecen incluso si es lo único en la página). Decidí volver a usar el Tabpanel (ahora en desuso). Intenta ver si eso funciona en su lugar:

Código de ejemplo:

<g:TabPanel width="100%" height="100%" ui:field="gwtimeTabPanel">
    <g:Tab>
    <g:TabHTML>Tab title</g:TabHTML>
    <g:FlowPanel>
            <!-- tab contents goes here -->
        </g:FlowPanel>
    </g:Tab>
</g:TabPanel>

Answer 4

Para las personas que usan principalmente el código Java para definir la interfaz de usuario.

---

Explicación

---

Debe establecer el tamaño del parentpanel del manteleutpanel y del mantenimiento de manta en sí. Por ejemplo, tuve un Panel vertical y un manteleutpanel, agregué este manteleutpanel al verticalpanel (lo que lo convierte en el parentpanel de la tabla de tablas) como este:

veticalPanel.add(tabLayoutPanel); 
RootPanel.get().add(verticalPanel);

que no hizo nada ...

---

Responder

---

Debe declarar el tamaño de sus paneles como esto

//set size
vertialPanel.setSize("100%","100%");
tabLayoutPanel.setSize("100%","100%")
RootPanel.get().add(verticalPanel);