webuijsf
Tag tabSet


Use the webuijsf:tabSet tag to create a set of tabs in the rendered HTML page. The tabs are used for navigation in the web application, and do not contain page content. The individual tabs in the set can be specified with webuijsf:tab tags used as children of the webuijsf:tabSet tag. The tab set and tabs can alternatively be specified in a backing bean.

You can make multiple levels of tabs by nesting tab components within other tab components, inside a single tab set component.

The TabSet component keeps track of the currently selected child tab, and applies any specified ActionListener to each child tab.

HTML Elements and Layout

The tabSet component renders <div> and <table> elements, which will contain the hyperlinks produced by the Tab component.

Configuring the webuijsf:tabSet Tag

The webuijsf:tabSet tag can be used in either of the following ways:

Examples of both approaches are shown in the Examples section below.

In either approach, the webuijsf:tabSet tag attributes can be specified in the JSP page. The initial selection for the TabSet component is specified with the selected attribute. You can use the mini and lite attributes to create tabs that are smaller and lighter in appearance. The mini attribute can be used to make smaller tabs. The lite attribute can be used with the mini attribute to create small tabs that have less shading and bolding. Note that mini tab sets will not display properly if more than one level of tabs are specified.

If you specify an actionListener attribute for the TabSet component, the specified listener is applied to the action listener list of each of the child Tab components.

The lastSelectedChildSaved attribute can be used to enable the tab set to maintain the selected state of its child tabs. This enables the selection to be "remembered" when the user goes to another tab level. When the user returns to first set of tabs, the originally selected tab is still selected.

Content of Tabs

The Tab component itself does not have any content, but is used to display another page or update something in the current page when the tab is clicked. Use the url or action attributes to specify another JSP page that corresponds to the clicked tab. Use the actionListener to update data in the page when a given tab is clicked.

For example, you might define a single TabSet instance in a backing bean that is shared among many pages. The tabs in those pages would each specify an appropriate url that contains the content for the corresponding tab. See Example 1.

Alternatively, you might have a single page containing a TabSet and a Table of data corresponding to the currently selected Tab. When the TabSet selection changes, the actionListener on the clicked Tab is invoked and the Table is updated to display the appropriate data for the tab that is clicked. See Example 2.

Facets

None.

Client Side Javascript Functions

None.

Examples

Example 1: Define the TabSet in a Backing Bean and Use TabSet in a Single JSP Page
    TabsBean Backing Bean for Example 1
Example 2: Define TabSet in Backing Bean and Use in Multiple JSP Pages
    TabSetBackingBean for Example 2
Example 3: Define the TabSet in your JSP Page

Example 1: Define the TabSet in a Backing Bean and Use TabSet in a Single JSP Page

This example shows how to create a JSF component binding to a TabSet instance that is defined in a backing bean. The webuijsf:tabSet tag is used in only one JSP page. When the tabs in this page are clicked, their associated action events are launched. In this example, the action is simply to display the id of the tab clicked and the tab selected. The action event approach might be used to update table data when the tab is clicked, for example.

The tabs.jsp file

<f:view>
  <webuijsf:page>
    <webuijsf:html>
    <webuijsf:head title="Tabs Example Page" />
    <webuijsf:body>
      <webuijsf:form id="tabsexample">
        <webuijsf:masthead id="Masthead" productImageURL="../images/webconsole.png"
            productImageDescription="Java Web Console" userInfo="test_user"
            serverInfo="test_server" />
                <webuijsf:breadcrumbs id="breadcrumbs">
        <webuijsf:hyperlink url="../index.jsp" text="Tests Index"/>
        <webuijsf:hyperlink url="../tabs/index.jsp" text="Tab Tests"/>
         <webuijsf:hyperlink url="../tabs/tabs.jsp" text="Test 1"/>
      </webuijsf:breadcrumbs>

        <webuijsf:tabSet binding="#{TabsBean.sportsTabs}" />
        <p align="center">
          <strong><webuijsf:staticText escape="false" text="#{TabsBean.message}" /></strong>
         </p>

      </webuijsf:form>
    </webuijsf:body>
    </webuijsf:html>
  </webuijsf:page>
</f:view>

TabsBean Backing Bean

The backing bean code for this example is shown below.

import java.util.List;
import java.lang.Class;
import javax.faces.FactoryFinder;
import javax.faces.el.MethodBinding;
import javax.faces.event.ActionEvent;
import javax.faces.application.Application;
import javax.faces.application.ApplicationFactory;
import com.sun.webui.jsf.component.Tab;
import com.sun.webui.jsf.component.TabSet;

public class TabsBean {
    private TabSet sportsTabs = null;

    // Creates a new instance of TabsBean
    public TabsBean() {
       
        sportsTabs = new TabSet();
        List kids = sportsTabs.getChildren();

        Tab level1Tab = new Tab("Baseball");
        level1Tab.setId("Baseball");
        Tab level2Tab = addTab(level1Tab, "National");
        addTab(level2Tab, "Mets");
        addTab(level2Tab, "Pirates");
        addTab(level2Tab, "Cubs");

        level2Tab = addTab(level1Tab, "American");
        addTab(level2Tab, "Yankees");
        addTab(level2Tab, "Tigers");
        addTab(level2Tab, "Mariners");

        level2Tab = addTab(level1Tab, "AAA");
        addTab(level2Tab, "Spinners");
        addTab(level2Tab, "Renegades");
        addTab(level2Tab, "Clippers");

        kids.add(level1Tab);

        level1Tab = new Tab("Football");
        level1Tab.setId("Football");
        level2Tab = addTab(level1Tab, "NFC");
        addTab(level2Tab, "Giants");
        addTab(level2Tab, "Bears");
        addTab(level2Tab, "Falcons");

        level2Tab = addTab(level1Tab, "AFC");
        addTab(level2Tab, "Jets");
        addTab(level2Tab, "Patriots");
        addTab(level2Tab, "Colts");

        level2Tab = addTab(level1Tab, "College");
        addTab(level2Tab, "Wolverines");
        addTab(level2Tab, "Hurricanes");
        addTab(level2Tab, "Buckeyes");

        kids.add(level1Tab);

        level1Tab = new Tab("Hockey");
        level1Tab.setId("Hockey");
        level2Tab = addTab(level1Tab, "East");
        addTab(level2Tab, "Islanders");
        addTab(level2Tab, "Rangers");
        addTab(level2Tab, "Bruins");

        level2Tab = addTab(level1Tab, "West");
        addTab(level2Tab, "Oilers");
        addTab(level2Tab, "Blackhawks");
        addTab(level2Tab, "Blues");

        level2Tab = addTab(level1Tab, "Minors");
        addTab(level2Tab, "Phantoms");
        addTab(level2Tab, "Monsters");
        addTab(level2Tab, "Freeze");

        kids.add(level1Tab);

        Class[] args = new Class[] { ActionEvent.class };
        MethodBinding binding = createBinding("#{TabsBean.tabClicked}", args);

        sportsTabs.setActionListener(binding);

        sportsTabs.setSelected("Jets");

            }

    private MethodBinding createBinding(String expr, Class[] args) {
        ApplicationFactory factory = (ApplicationFactory)
            FactoryFinder.getFactory(FactoryFinder.APPLICATION_FACTORY);
        Application app = factory.getApplication();

        return app.createMethodBinding(expr, args);
    }

    private Tab addTab(Tab parent, String newTabLabel) {
        Tab tab = new Tab(newTabLabel);
        tab.setId(newTabLabel);

        parent.getChildren().add(tab);

        return tab;
    }
               
    public TabSet getSportsTabs() {
        return sportsTabs;
    }

    public void setSportsTabs(TabSet tabs) {
        sportsTabs = tabs;
    }

    public void tabClicked(ActionEvent event) {
        message = "Action listener invoked! <br/> <br/> Tab clicked has id of ";
        message += event.getComponent().getId();
        message += ". Selected tab id is " + sportsTabs.getSelected();
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String m) {
        message = m;
    } 

Example 2: Define TabSet in Backing Bean and Use in Multiple JSP Pages

In this example, each tab has its own JSP page. The example below shows a JSP page for "Tab 1". The selected attribute of the webuijsf:tabSet is set to the id of Tab 1, and the content to be displayed when Tab 1 is clicked is provided after the webuijsf:tabSet tag. The JSP pages for the other tabs in the set would be very similar, with the references to the specific tab updated appropriately, e.g. "Tab 2" and "tab2" and so on.

The tab1.jsp file

<f:view>
  <webuijsf:page>
    <webuijsf:html>
    <webuijsf:head title="Tab 1 Page" />
    <webuijsf:body>
      <webuijsf:form id="tabsexample">
        <webuijsf:masthead id="Masthead" productImageURL="../images/webconsole.png"
            productImageDescription="Java Web Console" userInfo="test_user"
            serverInfo="test_server" />
      <webuijsf:breadcrumbs id="breadcrumbs">
        <webuijsf:hyperlink url="../index.jsp" text="Tests Index"/>
        <webuijsf:hyperlink url="../tabs/index.jsp" text="Tab Tests"/>
         <webuijsf:hyperlink url="../tabs/tabs.jsp" text="Test 5"/>
      </webuijsf:breadcrumbs>

        <webuijsf:tabSet binding="#{TabsBean.myTabSet}" selected="tab1" />

        <p align="center"><strong>Tab 1</strong></p>

        ... other stuff for this tab...

      </webuijsf:form>
    </webuijsf:body>
    </webuijsf:html>
  </webuijsf:page>
</f:view>

TabSetBackingBean for Example 2

The backing bean that defines this TabSet creates the tabs named Tab 1 through Tab 4, and sets their url properties to tab1.jsp through tab4.jsp.

public class TabSetBackingBean {
    ...

    public TabSet getMyTabSet() {
    TabSet = new TabSet();
        tabSet.setId("myTabSet");
    
    for (int i = 1; i < 5; i++) {
        Tab tab = new Tab("Tab " + i);
        tab.setId("tab" + i);
        tab.setUrl("tab" + i + ".jsp");
        tabSet.getChildren().add(tab);
    }

    return tabSet;
    }

    ...
}

Example 3: Define the TabSet in your JSP Page

This example shows how to define the tab set completely in a JSP file. It defines a set of tabs that includes three level-1 tabs (labeled "One", "Two" and "Three"). Each level-1 tab also has two level-2 tab children, labelled "XxxA" and "XxxB" where Xxx is the top level tab number. The initially selected tab for this tab set will be "TwoA".

<webuijsf:tabSet selected="TwoA">
    <webuijsf:tab id="One" text="One">
        <webuijsf:tab id="OneA" text="One A" />
        <webuijsf:tab id="OneB" text="One B" />
    </webuijsf:tab>
    <webuijsf:tab id="Two" text="Two">
        <webuijsf:tab id="TwoA" text="Two A" />
        <webuijsf:tab id="TwoB" text="Two B" />
    </webuijsf:tab>
    <webuijsf:tab id="Three" text="Three">
        <webuijsf:tab id="ThreeA" text="Three A" />
        <webuijsf:tab id="ThreeB" text="Three B" />
    </webuijsf:tab>
</webuijsf:tabSet>



Tag Information
Tag Classcom.sun.webui.jsf.component.TabSetTag
TagExtraInfo ClassNone
Body ContentJSP
Display NameNone

Attributes
NameRequiredRequest-timeTypeDescription
bindingfalsefalsejava.lang.String A ValueExpression that resolves to the UIComponent that corresponds to this tag. This binding allows the Java bean that contains the UIComponent to manipulate the UIComponent, its properties, and its children.
valuefalsefalsejava.lang.String The current value of this component.
styleClassfalsefalsejava.lang.String CSS style class(es) to be applied to the outermost HTML element when this component is rendered.
selectedfalsefalsejava.lang.String The id of the selected tab.
actionListenerExpressionfalsefalsejava.lang.String Set the method expression that identifies a method that handles the action event fired when one of this tab set's tabs is used to submit the page. The signature of the bound method must correspond to {@link javax.faces.event.ActionListenerExpression#processAction}. The class that defines the method must implement the java.io.Serializable interface or javax.faces.component.StateHolder interface.
litefalsefalsejava.lang.String Returns true if the tabs should render in a visually lighter style, with reduced shading and bolding. This attribute can only be used with mini tabs, so you must also set the mini attribute to true to render lightweight tabs.
visiblefalsefalsejava.lang.String Use the visible attribute to indicate whether the component should be viewable by the user in the rendered HTML page. If set to false, the HTML code for the component is present in the page, but the component is hidden with style attributes. By default, visible is set to true, so HTML for the component HTML is included and visible to the user. If the component is not visible, it can still be processed on subsequent form submissions because the HTML is present.
stylefalsefalsejava.lang.String CSS style(s) to be applied to the outermost HTML element when this component is rendered.
minifalsefalsejava.lang.String Set this attribute to true in a first level tab set, to create tabs that have the smaller "mini" tab style. Note that mini tab sets will not display properly if more than one level of tabs are specified.
lastSelectedChildSavedfalsefalsejava.lang.String Returns true if the tabs in this tab set should remember which of their tab children was last selected. This enables the user to choose other tabs in the set, and have the child tab selection in the original tab be retained when the user returns to the original tab.
immediatefalsefalsejava.lang.String Flag indicating that event handling for this component should be handled immediately (in Apply Request Values phase) rather than waiting until Invoke Application phase.
renderedfalsefalsejava.lang.String Indicates whether the HTML code for the component should be included in the rendered HTML page. If set to false, the rendered HTML page does not include the HTML for the component. If the component is not rendered, it is also not processed on any subsequent form submission.
valueChangeListenerExpressionfalsefalsejava.lang.String Specifies a method to handle a value-change event that is triggered when the user enters data in the input component. The attribute value must be a JavaServer Faces EL expression that resolves to a backing bean method. The method must take a single parameter of type javax.faces.event.ValueChangeEvent, and its return type must be void. The backing bean where the method is defined must implement java.io.Serializable or javax.faces.component.StateHolder.
idfalsetruejava.lang.StringNo Description

Variables
No Variables Defined.


Output Generated by Tag Library Documentation Generator. Java, JSP, and JavaServer Pages are trademarks or registered trademarks of Sun Microsystems, Inc. in the US and other countries. Copyright 2002-4 Sun Microsystems, Inc. 4150 Network Circle Santa Clara, CA 95054, U.S.A. All Rights Reserved.