Geek Answers Handbook

Insert TabLayoutPanel inside DockLayoutPanel

I am trying to embed a TabLayoutPanel inside a DockLayoutPanel, but the tabs are not showing :(

<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>
+4
source share
4 answers

If you can't see anything, make sure the TabLayoutPanel either (a) has an explicit size or (b) is ultimately bound to the RootLayoutPanel (see http://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html #Resize for more details).

If the problem is due to the lack of style on the tabs (i.e. you just see the source text where the tabs should be), you need to add some styles (the CSS rules you need are described in the TabLayoutPanel javadoc). There are no default styles for TabLayoutPanel yet, but we will add them soon.

+4
source

The example from JavaDoc is somewhat misleading - the height of line 3 will hide the tab headers, and the height should be specified for the body. Use something like:

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

or

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

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

Alternatively, you can find the basic CSS style for TabLayoutPanel in comment # 5 in the following problem:

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

+2
source

I also had a problem with the new TabLayoutPanel tab (tabs are not displayed, even if this is the only one on the page). I decided to revert to using the (now deprecated) TabPanel. Try and see if this works:

Code example:

 <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>
0
source

For people who mostly use Java code to define a user interface.

Explenation

You must set the size of the parent panel TabLayoutPanel and the TabLayoutPanel itself. For example, I had a VerticalPanel and TabLayoutPanel, I added this TabLayoutPanel to the VerticalPanel (which makes it the parent panel of TabLayoutPanel) as follows:

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

who did nothing ...

Answer

you should declare the size of your panels like this

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

More articles:


All Articles