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