GWT 2.0: Using TabLayoutPanel with UiBinder

Post to Twitter

The point to this article is to take a particular Widget, in this case the TabLayoutPanel and to create and show instance of it the old way (which is still supported) and then to show how to do the same but using UiBinder.

Using the GWT Plugin for Eclipse I created a new project. I removed the default demo code and then the entry point code:

package com.giantflyingsaucer.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.user.client.ui.RootLayoutPanel;
import com.google.gwt.user.client.ui.TabLayoutPanel;
import com.google.gwt.user.client.ui.HTML;


public class TabPanelExample1 implements EntryPoint
{
	/**
	 * This is the entry point method.
	 */
	public void onModuleLoad()
	{
		TabLayoutPanel tabPanel = new TabLayoutPanel(1.5, Unit.EM);

	    tabPanel.add(new HTML("Hello tab 1<br />Good bye!"), "Tab 1");
	    tabPanel.add(new HTML("<h2>Hello tab 2</h2>"), "Tab 2");
	    tabPanel.add(new HTML("<strong><i><u>Hello tab number 3</u></i></strong>"), "Tab 3");

	    tabPanel.addStyleName("tabPanelExample1");
	    tabPanel.setWidth("250px");
	    tabPanel.setHeight("150px");
	    tabPanel.selectTab(0);

	    RootLayoutPanel.get().add(tabPanel);
	}
}
.tabPanelExample1
{
  margin: 10px;
}

Running this code presents us with the following result:

In order to convert this to use UiBinder I used the create new wizard and selected “UiBinder” under “Google Web Toolkit”.

This adds the code/files needed to get started. I cleaned up the files a bit and was left with this minimal code:

package com.giantflyingsaucer.client;

import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.TabLayoutPanel;
import com.google.gwt.user.client.ui.Widget;

public class TabPanelExample2 extends Composite
{

	private static TabPanelExample2UiBinder uiBinder = GWT
			.create(TabPanelExample2UiBinder.class);

	interface TabPanelExample2UiBinder extends UiBinder<widget, TabPanelExample2> {}

	@UiField
	TabLayoutPanel tabPanel;

	public TabPanelExample2()
	{
		initWidget(uiBinder.createAndBindUi(this));
		tabPanel.selectTab(0);
	}
}

And the UI.XML file looks like this:

<!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>
	    .tabPanelExample1
	   	{
			margin: 10px;
		}
	 </ui:style>
	<g:TabLayoutPanel addStyleNames="{style.tabPanelExample1}" ui:field="tabPanel" barUnit="PX" barHeight="60" width="375px" height="150px">
		<g:tab>
			<g:header>
				UiBinder Tab 1
			</g:header>
			<g:HTML>Hello tab 1<br />Good bye!</g:HTML>
		</g:tab>
		<g:tab>
			<g:header>
				UiBinder Tab 2
			</g:header>
			<g:HTML><h2>Hello tab 2</h2></g:HTML>
		</g:tab>
		<g:tab>
			<g:header>
				UiBinder Tab 3
			</g:header>
			<g:HTML><strong><i><u>Hello tab number 3</u></i></strong></g:HTML>
		</g:tab>
	</g:TabLayoutPanel>
</ui:UiBinder>

The functionality should now be the same as the original code. If we modify the entry point code like below and run the project we should see the same results as before.

package com.giantflyingsaucer.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootLayoutPanel;

public class TabPanelExample1 implements EntryPoint
{
	/**
	 * This is the entry point method.
	 */
	public void onModuleLoad()
	{
	    TabPanelExample2 tabPanelExample2 = new TabPanelExample2();
	    RootLayoutPanel.get().add(tabPanelExample2);
	}
}

The result:

Simple as that!

Post to Twitter

This entry was posted in GWT. Bookmark the permalink.

5 Responses to GWT 2.0: Using TabLayoutPanel with UiBinder

  1. Pingback: Daily del.icio.us for March 31st through April 5th — Vinny Carpenter's blog

  2. Jing says:

    Great example !
    Could you provide the clue how to figure out the template of ui.xml ?

  3. Trevor says:

    What if I wanted to nest the tab layout panel in another panel, or a element so I could have some HTML around it? Since I have to use the RootLayoutPanel.get() method which doesn’t except any arguments for attaching to a particular element, how can I achieve this?

  4. Juhi Bhatia says:

    Hi,

    I have tried using tabLayoutPanel in my application the same way in my maven-gwt app. But it gives me the following error:

    [ERROR] Missing required attribute “barHeight” Element (:12)

    [ERROR] Errors in ‘file:/C:/Users/Entrib/codebase/EMG/trunk/admin/webapp/src/main/java/com/entrib/emg/admin/webapp/client/db/Tags.java’

    [ERROR] Line 20: Failed to resolve ‘com.entrib.emg.admin.webapp.client.db.Tags.TagsUiBinder’ via deferred binding

    I added the barHeight as 5px in the css and added it the styleName.
    How do i proceed?

Comments are closed.