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
Related
I'm in a situation where I want a whole Widget to be a link to another page. Both Anchor and Hyperlink only accept Strings or SafeHTML as visual representation. However, I need e.g. a <div>...</div> to be a link.
This would be similar to:
<div><p>This whole thing is a link</p></div>
Is there a way to do this withou custom coding my own SafeHTML? To be more concrete, I want a GXT HBoxLayoutContainer to be clickable and bookmarkable.
The easiest solution would be using UiBinder:
<ui:UiBinder
xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:container="urn:import:com.sencha.gxt.widget.core.client.container">
...
<g:HTMLPanel>
<a href="somesite">
<container:HBoxLayoutContainer>...</container:HBoxLayoutContainer>
</a>
</g:HTMLPanel>
I am using TabPanel in my GWt application
<g:HTMLPanel>
<div class="center">
<g:TabLayoutPanel ui:field="tabPanel" barUnit="PX"
barHeight="40" width="100%;">
<g:tab>
<g:header>
DashBoard
</g:header>
</ g:TabLayoutPanel>
using this for my tabpanel height
.gwt-TabLayoutPanel {
min-height:500px;
}
its working fine , BUT i want this height to be 100%, But when I make it to 100% ,The whole TabPanel disappears ,
Any solution for that ..coz when my stuff hights increase , the lower are start cutting off ..
thanks
Put your TabLayoutPanel in a LayoutPanel or any other panel that provides size to its children. For example, if you put your panel directly into the RootLayoutPanel, it will take 100% of the screen automatically, and it will resize with the browser window.
The problem with 100% height is it will be 1px if the parent container does not have a height set.
You might find the following article intresting as a possible workarround.
http://www.tutwow.com/htmlcss/quick-tip-css-100-height/
I'm trying to add in a verticalPanel to an HTMLPanel I'm getting errors trying to add this into the html code.
What I'm trying to do is create a panel that has a border around my widgets and as it's more of a vertical alignment pattern, I chose to use verticalPanel.
I get compile errors when I try to add in outside of my html table, tr, or td tags, but that is what I thought I wanted to do in order to show a border.
Here is a code snippet:
<g:HTMLPanel ui:field="mainPanel" >
//Putting verticalPanel here causes a compile error
<table width="100%">
//Putting verticalPanel here causes a compile error
<tr>
//Putting verticalPanel here causes a compile error
<td>
<g:Label ui:field="title"></g:Label>
</td>
</tr>
Is this a good approach and if so, how do I do this, or is there a better way?
You need to read the javadoc of a widget.
if a widget implements HasText, you can place text between its tags
if it implements HasHTML, you can place HTML between its tags
otherwise (since all widgets implements HasWidgets), you can only place widgets between its tags.
some widgets have configurative subtags, where the subtag names start in lowercase.
some widgets allow only one child widget. These are extensions of SimplePanel.
So, if you try to put HTML tags in between a VerticalPanel, you will encounter errors because VerticalPanel does not implement hasText or hasHtml.
HTMLPanel does not implement HasHTML, BUT you are allowed to place a mix of widgets and HTML, because its content parser is specially designed to recognise HTML placed inside its tags. That is why it is called HTMLPanel.
The following is not acceptable and results in compilation error:
<g:HTMLPanel>
<g:VerticalPanel>
<TABLE><TR><TD>Hello</TD></TR></TABLE>
</g:VerticalPanel>
</g:HTMLPanel>
because the HTML sits inside the VerticalPanel tags.
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.
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);