Problems in using TabLayoutPanel with UiBinder

[Abhishek]

Here is my 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:with type="com.company.group.resources.project" field="resource"/
>
<g:DockLayoutPanel unit='EM'>
<g:north size='12'>
<g:VerticalPanel>
<g:HorizontalPanel>
<g:Image resource = "{resource.Logo}" />
<g:TabLayoutPanel ui:field="tab" barHeight="20"
barUnit="PX">
<g:tab><g:header>Tab1</
g:header><g:HTMLPanel>Tab1</g:HTMLPanel></g:tab>
<g:tab><g:header>Tab2</
g:header><g:HTMLPanel>Tab2</g:HTMLPanel></g:tab>
</g:TabLayoutPanel>
</g:HorizontalPanel>
</g:VerticalPanel>
</g:north>
<g:west size ='20'>
<g:VerticalPanel>
</g:VerticalPanel>
</g:west>
<g:center>
<g:VerticalPanel>
</g:VerticalPanel>
</g:center>
</g:DockLayoutPanel>
</ui:UiBinder>


Here is my java code -


public class PrototypeView extends Composite
{
/** UIBinder instance. */
private static MyViewUiBinder uiBinder =
GWT.create(MyViewUiBinder.class);

/** Custom UIBinder interface for this view's widgets. */
interface MyViewUiBinder extends UiBinder<Widget, PrototypeView>
{}

public PrototypeView()
{
initWidget(uiBinder.createAndBindUi(this));
}

}

public class MyEntryPoint implements EntryPoint {


@Override
public void onModuleLoad() {

RootLayoutPanel.get().add(new PrototypeView());
}

}

When I run my app, the Tabs do not show up. Please Help.

[Thad]

Maybe your DockLayoutPanel needs to use PX units. That has been a problem with IE.

https://groups.google.com/d/msg/google-web-toolkit/yPdM13GXO_M/cELkQjsKg64J

I'm using PX units on a DockLayoutPanel that contains a TabLayoutPanel. It works for me.

[Thomas Broyer]

On Tuesday, May 15, 2012 7:25:37 AM UTC+2, Abhishek wrote:

Here is my 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:with type="com.company.group.resources.project" field="resource"/
>
   <g:DockLayoutPanel unit='EM'>
              <g:north size='12'>
                      <g:VerticalPanel>
                              <g:HorizontalPanel>
                                      <g:Image resource = "{resource.Logo}" />
                                      <g:TabLayoutPanel ui:field="tab" barHeight="20"
barUnit="PX">

RequiresResize widgets (which includes all "layout panels") have to be put into ProvidesResize widgets (again, all "layout panels") or be given an explicit size (and one that's independent of the size of the parent, so % won't work for instance).

See https://developers.google.com/web-toolkit/doc/latest/DevGuideUiPanels#Resize

(see also “Using a LayoutPanel without RootLayoutPanel” on the same page)