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

Related Tags for Creating Tab Panel using GWT:
c, ui, gwt, build, panel, using, this, tab, basic, for, example, exam, basics, ld, e, il, des, ics, in, cs, as, m, building, es, pan, describe, xa, xamp, s, pane, is, mpl, wt, scr, s, s, ri, th, bes, ab, ple, pl, o

«Previous Index Next»