I want to put some anchor inside the body of tab panel with two tabs. But my anchors are not visible. The code is as follows
<g:TabLayoutPanel ui:field="lhsTabPanel" barUnit="PX" barHeight="60">
<g:tab>
<g:header>Analysis</g:header>
<g:FlowPanel>
<g:Anchor ui:field='personalInformation'>Personal Information</g:Anchor>
</g:FlowPanel>
</g:tab>
<g:tab>
<g:header>Comparison</g:header>
<g:FlowPanel ui:field="comparisonContent"/>
</g:tab>
</g:TabLayoutPanel>
The personal information tab is not visible
TabLayoutPanels must be added to other widgets that implement ProvidesResize. For example, if you are adding this TabLayoutPanel to RootPanel instead of RootLayoutPanel, you won't be able to see the TabLayoutPanel because RootPanel does not implement ProvidesResize.
You can't see the contents of the tabs because the TabLayoutPanel does not know how big it should be. Try adding it to some descendant of a LayoutPanel and setting its size explicitly with the setWidgetLeftRight and related functions.
Check out http://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html#LayoutPanels for more information.
Related
Child view has DocLayoutPanel and Want to embed it into SimplePanel. center position is ScrollView and it is not displayed properly.
position in Parent View
<ui:SimplePanel ui:field="plageHolderID"/>
layout in Child view
<ui:Binder>
<g:DoclayoutPanel>
<g:north>
</g:north>
<g:center>
<g:ScrollPanel>
<g:VerticalPanel ui:field="paneForList">
<!-- Display List here-->
</g:VerticalPanel>
</g:ScorllPanel>
</g:center>
<g:south>
</g:south>
</ui:DoclayoutPanel>
</ui:Binder>
I am assuming you mean DockLayoutPanel.
The issue with the center not showing correctly is caused by the SimplePanel, which does not implement ProvidesResize.
DockLayoutPanel implements RequiresResize and therfore either needs to be placed in a panel, which implements ProvidesResize, or it needs to be given a specific height by calling [setSize()](http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/client/ui/UIObject.html#setSize(java.lang.String, java.lang.String)).
So I am using a dock layout panel. In the north I have a title and menubar and center has a table. My problem is when the title gets long and wraps the text, it pushed the menubar down and you can no longer see it. This is because you have to set fixed sizes for all panels except center.
I thought about moving it all to center panel but the problem is that when my table gets big and a scroll bar appears I want to always see the header and menubar even when scrolling on the table. So I cant just put everything in scroll panel.
How can I create a layout that fills these requirements:
1. Always see the title and menubar
2. Scrollable table
3. When the window is resized and text from title wraps it resizes the whole thing correctly.
here is Layout right now:
<g:DockLayoutPanel >
<g:north size="80">
<g:VerticalPanel width="100%">
<g:HorizontalPanel width="100%">
<g:HTML ui:field="title" styleName="{style.title}"></g:HTML>
</g:HorizontalPanel>
<g:HorizontalPanel styleName="{style.infoBar}" width="100%">
<g:MenuBar animationEnabled="true" styleName="{res.css.menuBar}" focusOnHoverEnabled="false" ui:field="menuBar"></g:MenuBar>
</g:HorizontalPanel>
</g:VerticalPanel>
</g:north>
<g:center>
<g:ScrollPanel>
<g:SimplePanel ui:field="content" styleName="{style.content}">Table or tree goes here
</g:SimplePanel>
</g:ScrollPanel>
</g:center>
<g:south size="20">
<g:VerticalPanel styleName="{style.footerPanel}">
<g:HTML ui:field="messageBar">Fotter text here</g:HTML>
</g:VerticalPanel>
</g:south>
</g:DockLayoutPanel>
Have you tried to use two DockLayoutPanel?
The first has the title in the center area and in the south another DockLayoutPanel with the menu in the north area and the table in the center?
If title and menu may be shown underneath each other you can put title and menu in separate north-panels (that actually works).
With that you can at least ensure that the menu gets shown.
How to define TabPanel in UiBinder in GWT. What's difference between TabPanel and TabLayoutPanel. Where to find additional info about TabPanel uibinder parameters.
Sample:
<g:TabPanel ui:field="mainTab">
<g:Tab text="Header #1">
<g:FlowPanel ui:field="tabPanel1"/>
</g:Tab>
<g:Tab text="Header #2">
<g:FlowPanel ui:field="tabPanel2"/>
</g:Tab>
</g:TabPanel>
There are two main differents in TabPanel and TabLayoutPanel:
TabLayoutPanel requires ProvidesResize container, TabPanel have no additional requirements
TabPanel translates to simple html table, TabLayoutPanel translates to pack of divs with relativly complex layout.
You can find more info about TabPanel in TabPanelParser class.
Take a look at this for the difference between TabPanel and TabLayoutPanel
My existing layout is a stack of two divs - g:layers in a LayoutPanel. The top div should be as big as it needs to be to contain its contents. The bottom div should take up the rest of the space on the screen, without causing scrollbars to appear.
The contents of the top div can change, so the size of the top div can change.
My current solution is a callback that's triggered whenever the contents of the top div change. The containing LayoutPanel can then recalculate the size of the top div and explicitly set the top and bottom attributes of the second layer to take up the rest of the space. Is there a better way? Something like,
<g:LayoutPanel>
<g:layer top="0px" height="whatever you need, baby">
<c:SomeWidget/>
</g:layer>
<g:layer top="the bottom of the first layer" bottom="0px">
<c:Anotherwidget/>
</g:layer>
</g:LayoutPanel>
What about using DockLayoutPanel?
<g:DockLayoutPanel unit='PX'>
<north size="10" ui:field='northWidget'>
<c:SomeWidget/>
</north>
<center>
<c:Anotherwidget/>
</center>
</g:DockLayoutPanel>
Then the center will take up the rest of the space. If you want to resize the top, call
setWidgetSize(northWidget, newSize); and the center widget will be recalculated.
The answer seems to be that there is not a better way. Manual recalculation isn't so bad when you get used to it!
I think HeaderPanel is the standard Widget to do this. Maybe it was added after the question was asked. We missed it too and had our own version for a while.
I'm trying to embed a TabLayoutPanel inside a DockLayoutPanel but the tabs are not showing up :(
<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>
If you're seeing nothing at all, make sure that the TabLayoutPanel either (a) has an explicit size, or (b) is ultimately attached to the RootLayoutPanel (see http://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html#Resize for more details).
If the problem is a lack of styling on the tabs (i.e., you're just seeing raw text where the tabs should be), you'll need to add some styles (the CSS rules you'll need are described in TabLayoutPanel's javadoc). There are not yet any default styles for TabLayoutPanel, but we'll be adding some soon.
The example from the JavaDoc is somewhat misleading - the bar height of 3 will hide the tab headings and a height needs to 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}" >
Also, you can find a basic CSS style for TabLayoutPanel on comment #5 in the following issue:
http://code.google.com/p/google-web-toolkit/issues/detail?id=4429
I have been having the same issue using the new TabLayoutPanel too (the tabs doesn't show up even if it's the only thing on the page). I decided to back to using the (now deprecated) TabPanel instead. Try and see if that works instead:
Example 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>
For the people who mainly use Java code to define the UI.
Explenation
You should set the size of the parentpanel of the TabLayoutPanel and of the TabLayoutPanel itself. For instance I had a VerticalPanel and a TabLayoutPanel, I added this TabLayoutPanel to the VerticalPanel (which makes it the parentpanel of TabLayoutPanel) like this:
veticalPanel.add(tabLayoutPanel);
RootPanel.get().add(verticalPanel);
which 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);