Working Example of TabLayoutPanel with UIBinder?

[crojay78]

Hi,

does anyone have a running example how to use the TabLayoutPanel with
UIBinder. It does not work in my MVP-Example Project.

I have MVP structured app and want to use a TabLayoutPanel in my view.
Therefore I defined a ui.xml

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:style>
.important {
font-weight: bold;
}
</ui:style>
<g:TabLayoutPanel barUnit="PX" barHeight="3">
<g:tab>
<g:header size='7'>test</g:header>
<g:Label ui:field="question"></g:Label>
<g:Button ui:field="startButton"></g:Button>
</g:tab>
</g:TabLayoutPanel>

</ui:UiBinder>

But it does not work, I cannot see any result in the develop mode. Is
there a problem because I use ui:fields?? It worked in my previous
example, where I did not use a TableLayoutPanel

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:style>
.important {
font-weight: bold;
}
</ui:style>
<g:HTMLPanel>
<g:Label styleName="{style.important}" text="test"
ui:field="question" />
<g:Button styleName="{style.important}" text="ja" ui:field="button" /
>
</g:HTMLPanel>
</ui:UiBinder>

Can somebody help me with that?

Thanks

[Paul Stockley]

You need to make sure you are using the latest version of GWT (at
least 2.02 I think) because the styles where missing from prior
versions. It works fine for me in UIBinder. Also make BarHeight
bigger, say 20px. You don't really need the size set on the header for
it to work.

[crojay78]

Hi,

great now it works I updated to Version 2.0.3.

Does anyone has a good example or tutorial for using TabLayoutpanel
with uibinder. I do not know how i can fill the different tabs with
content??

[Paul Stockley]

In your example just do this:

<g:TabLayoutPanel barUnit="PX" barHeight="20">
<g:tab>
<g:>test</g:header>
<g:HTMLPanel>

<g:Label ui:field="question"></g:Label>
<g:Button ui:field="startButton"></g:Button>

</g:HTMLPanel>
</g:tab>
</g:TabLayoutPanel>

The first widget after the header should be some form of container. I
pretty much use HTMLPanel (or my own subclasses of) exclusively with
UIBinder.

[Mike]

I can't get it to work either... The headers show up nicely but the
content stays empty. Does anyone have a pointer to a working example?

[Mike]

Solution:
I was using RootPanel instead of RootLayoutPanel. Changing that fixed
it. Thanks to phil. http://www.filsa.net/2010/01/21/gwt-notes-tablayoutpanel/
Bye, Mike

[Paul Stockley]

I was going to also suggest you make sure you add it to the
RootLayoutPanel. However, I thought the documentation was pretty clear
on this. You can add a TabLayoutPanel to something other than the
RootLayoutPanel as long as you set an explicit size on the
TabLayoutPanel. This is very useful if you want to add tabs in a
DialogBox.

[starmandell]

hi, i was wondering if you could help me. you wrote the code...

> > In your example just do this:
>
> > <g:TabLayoutPanel barUnit="PX" barHeight="20">
> > <g:tab>
> > <g:>test</g:header>
> > <g:HTMLPanel>
> > <g:Label ui:field="question"></g:Label>
> > <g:Button ui:field="startButton"></g:Button>
> > </g:HTMLPanel>
> > </g:tab>
> > </g:TabLayoutPanel>

and i have just that. but i keep getting a runtime exception when im debugging.
this is the exact code i have

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">

<ui:UiBinder xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:style>
</ui:style>

<g:TabLayoutPanel barUnit="PX" barHeight="20">
<g:tab>
<g:>test</g:header>
<g:HTMLPanel>
<g:Label ui:field="question"></g:Label>
<g:Button ui:field="startButton"></g:Button>
</g:HTMLPanel>
</g:tab>
</g:TabLayoutPanel>

</ui:UiBinder>

it says...[ERROR] Generator 'com.google.gwt.uibinder.rebind.UiBinderGenerator'
threw an exception while rebinding....[directory and filename ]
-- exception: DOMException

ive been stuck at this for so long. i really have no idea what to do.
im very new to this gwt. im trying to make a multiple tabbed panel.
thank you so much.