Home Tutorials Gwt Creating Tab Panel using GWT
Questions:Ask|Latest


 
 

Share on Google+Share on Google+

Creating Tab Panel using GWT

Advertisement
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

     

Advertisements

Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: October 8, 2008

Ask Questions?    Discuss: Creating Tab Panel using GWT   View All Comments

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments
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.
DMCA.com