GWT - TabPanel Widget

Advertisements


Introduction

The TabPanel widget represents panel that represents a tabbed set of pages, each of which contains another widget. Its child widgets are shown as the user selects the various tabs associated with them. The tabs can contain arbitrary HTML.

Class declaration

Following is the declaration for com.google.gwt.user.client.ui.TabPanel class:

@Deprecated
public class TabPanel
   extends Composite
      implements TabListener, SourcesTabEvents, 
         HasWidgets, HasAnimation, IndexedPanel.ForIsWidget,
            HasBeforeSelectionHandlers<java.lang.Integer>, 
               HasSelectionHandlers<java.lang.Integer>

Class constructors

S.N.Constructor & Description
1TabPanel()
Deprecated. Creates an empty tab panel.

Class methods

S.N.Function name & Description
1void add(IsWidget w, IsWidget tabWidget)
Deprecated. Convenience overload to allow IsWidget to be used directly.
2void add(IsWidget w, java.lang.String tabText)
Deprecated. Convenience overload to allow IsWidget to be used directly.
3void add(IsWidget w, java.lang.String tabText, boolean asHTML)
Deprecated. Convenience overload to allow IsWidget to be used directly.
4void add(Widget w)
Deprecated. Adds a child widget.
5void add(Widget w, java.lang.String tabText)
Deprecated. Adds a widget to the tab panel.
6void add(Widget w, java.lang.String tabText, boolean asHTML)
Deprecated. Adds a widget to the tab panel.
7void add(Widget w, Widget tabWidget)
Deprecated. Adds a widget to the tab panel.
8HandlerRegistration addBeforeSelectionHandler(BeforeSelectionHandler<java.lang.Integer> handler)
Deprecated. Adds a BeforeSelectionEvent handler.
9HandlerRegistration addSelectionHandler(SelectionHandler<java.lang.Integer> handler)
Deprecated. Adds a SelectionEvent handler.
10void addTabListener(TabListener listener)
Deprecated. Use addBeforeSelectionHandler(com.google.gwt.event.logical.shared.BeforeSelectionHandler) and addSelectionHandler(com.google.gwt.event.logical.shared.SelectionHandler) instead
11void clear()
Deprecated. Removes all child widgets.
12protected SimplePanel createTabTextWrapper()
Deprecated. Create a SimplePanel that will wrap the contents in a tab.
13DeckPanel getDeckPanel()
Deprecated. Gets the deck panel within this tab panel.
14TabBar getTabBar()
Deprecated. Gets the tab bar within this tab panel.
15Widget getWidget(int index)
Deprecated. Gets the child widget at the specified index.
16int getWidgetCount()
Deprecated. Gets the number of child widgets in this panel.
17int getWidgetIndex(IsWidget child)
Deprecated. Convenience overload to allow IsWidget to be used directly.
18int getWidgetIndex(Widget widget)
Deprecated. Gets the index of the specified child widget.
19void insert(IsWidget widget, IsWidget tabWidget, int beforeIndex)
Deprecated. Convenience overload to allow IsWidget to be used directly.
20void insert(IsWidget widget, java.lang.String tabText, boolean asHTML, int beforeIndex)
Deprecated. Convenience overload to allow IsWidget to be used directly.
21void insert(IsWidget widget, java.lang.String tabText, int beforeIndex)
Deprecated. Convenience overload to allow IsWidget to be used directly.
22void insert(Widget widget, java.lang.String tabText, boolean asHTML, int beforeIndex)
Deprecated. Inserts a widget into the tab panel.
23void insert(Widget widget, java.lang.String tabText, int beforeIndex)
Deprecated. Inserts a widget into the tab panel.
24void insert(Widget widget, Widget tabWidget, int beforeIndex)
Deprecated. Inserts a widget into the tab panel.
25boolean isAnimationEnabled()
Deprecated. Returns true if animations are enabled, false if not.
26java.util.Iterator<Widget> iterator()
Deprecated. Gets an iterator for the contained widgets.
27boolean onBeforeTabSelected(SourcesTabEvents sender, int tabIndex)
Deprecated. Use BeforeSelectionHandler.onBeforeSelection(com.google.gwt.event.logical.shared.BeforeSelectionEvent) instead
28protected void onEnsureDebugId(java.lang.String baseID)
Deprecated. Affected Elements: -bar = The tab bar. -bar-tab# = The element containing the content of the tab itself. -bar-tab-wrapper# = The cell containing the tab at the index. -bottom = The panel beneath the tab bar.
29void onTabSelected(SourcesTabEvents sender, int tabIndex)
Deprecated. Use SelectionHandler.onSelection(com.google.gwt.event.logical.shared.SelectionEvent) instead
30boolean remove(int index)
Deprecated. Removes the widget at the specified index.
31boolean remove(Widget widget)
Deprecated. Removes the given widget, and its associated tab.
32void removeTabListener(TabListener listener)
Deprecated. Use the HandlerRegistration.removeHandler() method on the object returned by and add*Handler method instead
33void selectTab(int index)
Deprecated. Programmatically selects the specified tab and fires events.
34void selectTab(int index, boolean fireEvents)
Deprecated. Programmatically selects the specified tab.
35void setAnimationEnabled(boolean enable)
Deprecated. Enable or disable animations.

Methods inherited

This class inherits methods from the following classes:

  • com.google.gwt.user.client.ui.UIObject

  • com.google.gwt.user.client.ui.Widget

  • com.google.gwt.user.client.ui.Composite

  • java.lang.Object

TabPanel Widget Example

This example will take you through simple steps to show usage of a TabPanel Widget in GWT. Follow the following steps to update the GWT application we created in GWT - Create Application chapter:

StepDescription
1Create a project with a name HelloWorld under a package com.tutorialspoint as explained in the GWT - Create Application chapter.
2Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html and HelloWorld.java as explained below. Keep rest of the files unchanged.
3Compile and run the application to verify the result of the implemented logic.

Following is the content of the modified module descriptor src/com.tutorialspoint/HelloWorld.gwt.xml.

<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='helloworld'>
  <!-- Inherit the core Web Toolkit stuff.                        -->
  <inherits name='com.google.gwt.user.User'/>

  <!-- Inherit the default GWT style sheet.                       -->
  <inherits name='com.google.gwt.user.theme.clean.Clean'/>

  <!-- Specify the app entry point class.                         -->
  <entry-point class='com.tutorialspoint.client.HelloWorld'/>

  <!-- Specify the paths for translatable code                    -->
  <source path='client'/>
  <source path='shared'/>

</module>

Following is the content of the modified Style Sheet file war/HelloWorld.css.

body{
   text-align: center;
   font-family: verdana, sans-serif;
}
h1{
   font-size: 2em;
   font-weight: bold;
   color: #777777;
   margin: 40px 0px 70px;
   text-align: center;
}

Following is the content of the modified HTML host file war/HelloWorld.html.

<html>
<head>
<title>Hello World</title>
   <link rel="stylesheet" href="HelloWorld.css"/>
   <script language="javascript" src="helloworld/helloworld.nocache.js">
   </script>
</head>
<body>

<h1>TabPanel Widget Demonstration</h1>
<div id="gwtContainer"></div>

</body>
</html>

Let us have following content of Java file src/com.tutorialspoint/HelloWorld.java which will demonstrate use of TabPanel widget.

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.HTMLPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TabPanel;

public class HelloWorld implements EntryPoint {

   public void onModuleLoad() {
      //Create an empty tab panel 
      TabPanel tabPanel = new TabPanel();

      //create contents for tabs of tabpanel
      Label label1 = new Label("This is contents of TAB 1");
      label1.setHeight("200");
      Label label2 = new Label("This is contents of TAB 2");
      label2.setHeight("200");
      Label label3 = new Label("This is contents of TAB 3");
      label3.setHeight("200");

      //create titles for tabs
      String tab1Title = "TAB 1";
      String tab2Title = "TAB 2";
      String tab3Title = "TAB 3";

      //create tabs 
      tabPanel.add(label1, tab1Title);
      tabPanel.add(label2, tab2Title);
      tabPanel.add(label3, tab3Title);

      //select first tab
      tabPanel.selectTab(0);

      //set width if tabpanel
      tabPanel.setWidth("400");

      // Add the widgets to the root panel.
      RootPanel.get().add(tabPanel);
   }
}

Once you are ready with all the changes done, let us compile and run the application in development mode as we did in GWT - Create Application chapter. If everything is fine with your application, this will produce following result:

GWT TabPanel Widget

Advertisements
Advertisements