Creating Tab Panel using GWT

This example describes the Basics for building the Tab Panel using GWT. The steps involved in Building the Tab Panel are described below:-

final Label label = new Label("Click the Tab below to view content")
Here we are declaring label. Label is a widget that contains text.

TabPanel tp = new TabPanel()
Here we are creating object of TabPanel class. TabPanel is a panel that represents a tabbed set of pages, each of which contains another widget.

HTML index = new HTML("Tab you have selected is Index.")
Creating an object of class HTML named index. HTML is a widget that can contain arbitrary HTML.

tp.add(index, "Index ")
This is a method of Tab Panel class for adding a widget to the tab panel.

RootPanel.get().add(tp)
By this method we are adding label to the root panel. Root panel is a panel to which all other widgets must be added. it is not created directly.

TabPanelEx.java


package org.yournamehere.client;



import com.google.gwt.user.client.ui.HTML;

import com.google.gwt.user.client.ui.Label;

import com.google.gwt.user.client.ui.TabPanel;

import com.google.gwt.user.client.ui.RootPanel;



public class TabPanelEx {



  public void onModuleLoad() {

  final Label label = new 

  
	Label("Click the Tab below to view content");

  final Label label1 = new 

  Label("   ");

  

  TabPanel tp = new TabPanel();

  tp.setWidth("200px");

  HTML index1 = new HTML("");

  HTML index = new HTML("Tab you have selected is Index.");

  tp.add(index, "Index ");



  HTML homeText = new HTML("Tab you have selected is Home.");

  tp.add(homeText, " Home  ");



  HTML moreInfo = new

    HTML("Tab you have selected is MoreInfo.");

  tp.add(moreInfo, "  MoreInfo  ");

  tp.selectTab(0);

  RootPanel.get().add(label);

  RootPanel.get().add(label1);

  RootPanel.get().add(tp);



  }

}

Main.gwt.xml


<?xml version="1.0" encoding="UTF-8"?>

<module>

  <inherits name="com.google.gwt.user.User"/>

  <entry-point class="org.yournamehere.client.TabPanelEx"/>

</module>

Output of the program

Download sourcecode

Creating Tab Panel using GWT

Posted on: October 8, 2008 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Related Tutorials

Building Suggestion Box Using GWT

Getting message from the server using RPC( Remote Procedure Call )

Retrieving XML Data Using GWT

Creating Composite Widgets using GWT

Creating Hyperlink using GWT

Discuss: Creating Tab Panel using GWT View All Comments

Post your Comment

Comments:1

Rosicler
June 14, 2012
tlnhJNjqrRe

GWT has changed the laandcspe. It turned millions of server-side java developers into browser-based developers. I hesitate to call them JavaScript developers since one really doesn't touch any JavaScript when using GWT. We wouldn't call Java developer that uses JNI a C programmer.You did hit on the GWTs biggest challenge: HTML/CSS integration. The library basically lets you know that you are on your own when it comes to styling your application. It will be interesting to see how people create HTML/CSS frameworks around the GWT plumbing.

Ads

Creating Tab Panel using GWT

Creating Tab Panel using GWT

Spring Framework Training

R Programming Training

Creating Tab Panel using GWT