| |||||||
FRAMES NO FRAMES |
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.
The tabSet component renders <div>
and <table>
elements, which will contain the hyperlinks produced by the Tab component.
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 mini and lite tabs are used, then a border will be shown
around the content area panel
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.
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.
None.
None.
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>
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;
}
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>
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;
}
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 Class | com.sun.webui.jsf.component.TabSetTag |
TagExtraInfo Class | None |
Body Content | JSP |
Display Name | None |
Attributes | ||||
Name | Required | Request-time | Type | Description |
binding | false | false | java.lang.String | A ValueExpression that resolves to the UIComponent that corresponds to this tag. This attribute allows the Java bean that contains the UIComponent to manipulate the UIComponent, its properties, and its children. |
value | false | false | java.lang.String | The current value of this component. |
styleClass | false | false | java.lang.String | CSS style class(es) to be applied to the outermost HTML element when this component is rendered. |
selected | false | false | java.lang.String | The id of the selected tab. |
actionListenerExpression | false | false | java.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.
|
lite | false | false | java.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. |
visible | false | false | java.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. |
style | false | false | java.lang.String | CSS style(s) to be applied to the outermost HTML element when this component is rendered. |
mini | false | false | java.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. |
lastSelectedChildSaved | false | false | java.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. |
immediate | false | false | java.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. |
rendered | false | false | java.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. |
valueChangeListenerExpression | false | false | java.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 .
|
id | false | true | java.lang.String | No Description |
Variables | No Variables Defined. |
| |||||||
FRAMES NO FRAMES |