Creating Tab Panel using GWT

Ads
 

Creating Tab Panel using GWT

This example describes the Basics for building the Tab Panel using GWT.

This example describes the Basics for building the Tab Panel using GWT.

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

     

Ads

Ads