Incorporation d'un TabLayoutPanel dans un DockLayoutPanel

Question

J'essaie d'intégrer un TabLayoutPanel à l'intérieur d'un DockLayoutPanel mais les onglets ne s'affichent pas :(

<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 vous ne voyez rien du tout, assurez-vous que le TabLayoutPanel (a) a une taille explicite, ou (b) est finalement attaché au RootLayoutPanel (voir http://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html#Resize pour plus de détails).

Si le problème est un manque de style sur les onglets (c'est-à-dire que vous voyez juste du texte brut à la place des onglets), vous devrez ajouter des styles (les règles CSS dont vous aurez besoin sont décrites dans la javadoc de TabLayoutPanel). Il n'y a pas encore de styles par défaut pour TabLayoutPanel, mais nous en ajouterons bientôt.

Answer 2

L'exemple de la JavaDoc est quelque peu trompeur - la hauteur de barre de 3 masquera les en-têtes de l'onglet et une hauteur doit être spécifiée pour le corps. Utilisez quelque chose comme :

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

ou

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

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

Vous trouverez également un style CSS de base pour TabLayoutPanel dans le commentaire n° 5 du numéro suivant :

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

Answer 3

J'ai eu le même problème en utilisant le nouveau TabLayoutPanel (les onglets ne s'affichent pas même si c'est la seule chose sur la page). J'ai décidé de revenir à l'utilisation du TabPanel (maintenant déprécié). Essayez et voyez si cela fonctionne à la place :

Exemple de code :

<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

Pour les personnes qui utilisent principalement le code Java pour définir l'interface utilisateur.

---

Explosion

---

Vous devez définir la taille du panneau parent du TabLayoutPanel et du TabLayoutPanel lui-même. Par exemple, j'avais un VerticalPanel et un TabLayoutPanel, j'ai ajouté ce TabLayoutPanel au VerticalPanel (ce qui en fait le panneau parent du TabLayoutPanel) comme ceci :

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

qui n'a rien fait...

---

Réponse :

---

vous devez déclarer la taille de vos panneaux comme ceci

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