webuijsf
Tag accordionTab
Use the webuijsf:accordionTab
tag within webuijsf:accordion
to create an
accordion tab within an accordion in the rendered HTML page. The webuijsf:accordionTab
tag represents a container within which an arbitrary number of
components can be placed.
These components will render within the content area of the given tab
inside the accordion.
HTML Elements and Layout
The accordionTab component renders an XHTML <div>
tag.
Configuring the webuijsf:accordionTab Tag
The webuijsf:accordionTab
tag should be configured to
have a label
that will appear in the accordion body even when the tab is not
selected. The height
of the content area can also be specified. Tabs with larger content can
have greater height.
Facets
None.
Client Side Javascript Functions
When the accordinTab component is rendered, a DOM object corresponding to the
accordionTab component is created. To manipulate the component on the client side,
you can call functions on the DOM object. Call
document.getElementById(id).setProps({
multipleSelect
:
true})
.
Function |
Description |
getProps() |
Used to get widget properties. See the setProps()
function for a list of supported properties. |
refresh(execute)
|
Used to
asynchronously refresh the component.
- [optional] execute: Comma separated string containing a
list of client
ids against which the
execute portion of the request
processing lifecycle must be run.
|
setProps(props) |
Used to change any of the following supported
properties:
- contentClass
- contentHeight
- contentStyle
- label
- labelClass
- labelStyle
- accordionTab
- visible
|
subscribe(topic, obj, func) |
Use this function to subscribe
to an event topic.
- topic: The event topic to subscribe to.
- obj: The object in which a function will be invoked, or
null for default scope.
- func The name of a function in context, or a function
reference to invoke when topic is published.
|
Client-Side JavaScript Events
When the component is manipulated on the client side, some functions might
publish event topics for custom Ajax implementations to listen for.
For example, you can listen for the refresh event topic by using:
<webuijsf:script>
var processEvents =
{
update: function(props) {
//
Do something...
}
}
// Subscribe to refresh event.
var domNode = document.getElementById("form1:test1");
domNode.subscribe(domNode.event.refresh.endTopic,
processEvents, "update");
</webuijsf:script>
The following events are supported.
Even |
Description |
<Node>.event.refresh.beginTopic |
Event topic published before asynchronously refreshing the
component. Supported properties include:
- [optional] execute - List of the components to be executed
along with
this component
- id - The client ID to process the event for
|
<Node>.event.refresh.endTopic |
Event topic published after asynchronously refreshing the
component. Supported properties include: See setProps() function.
- props - JSON object containing properties of the component.
See
setProps()
function for details on properties and their usage
|
<Node>.event.load.beginTopic |
Event topic published before
asynchronously loading the tab contents. Supported properties include:
- id - The client ID to process the event for
|
<Node>.event.load.endTopic |
Event topic published after
asynchronously loading the contents of an accordionTab. Supported properties include:
setProps() function.
- props - JSON object containing properties of the component.
See
setProps()
function for details on properties and their usage
|
<Node>.event.title.selectedTopic |
Event topic published when an accordionTab is
selected. Supported properties include:
- id - The client ID of the selected accordionTab
|
Examples
Example 1: Using the AccordionTab in an Accordion.
In this example, the accordionTab component is populated with
hyperlink components that act as navigational elements.
<webuijsf:accordion id="acc1" style="width:70%">
<webuijsf:accordionTab id="tab1" label="Buttons and links" >
<webuijsf:hyperlink id="hyper1" text="Button Examples"
url="/faces/button/index.jsp"
target="rightFrame"/>
<br/>
<webuijsf:hyperlink id="hyper2" text="Link Examples"
url="/faces/hyperlink/index.jsp"
target="rightFrame"/>
<br/>
<webuijsf:hyperlink id="hyper3" text="Image Link Examples"
url="/faces/imagehyperlink/index.jsp"
target="rightFrame"/>
</webuijsf:accordionTab>
<webuijsf:accordionTab id="tab2" label="Input Elements" >
<webuijsf:hyperlink id="hyper1" text="CheckBoxes"
url="/faces/clientsideCheckbox/checkbox.jsp"
target="rightFrame"/>
<br/>
<webuijsf:hyperlink id="hyper2" text="CheckBox group"
url="/faces/clientsideCheckbox/index.jsp"
target="rightFrame"/>
<br/>
<webuijsf:hyperlink id="hyper3" text="Radio Button Group"
url="/faces/clientsiderbcbGroup/index.jsp"
target="rightFrame"/>
</webuijsf:accordionTab>
<webuijsf:accordionTab id="tab3" label="label1" >
<webuijsf:hyperlink id="hyper1" text="Calendar"
url="/faces/calendar/index.jsp"
target="rightFrame"/>
</webuijsf:accordionTab>
</webuijsf:accordion>
Tag Information |
Tag Class | com.sun.webui.jsf.component.AccordionTabTag |
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.
|
focusId | false | false | java.lang.String | The client ID of the first element to focus on when the user tabs to
an open(selected) accordionTab. This attribute helps make
the accordionTab accessible. Once inside the accordionTab's content
section one can tab through all the tabable elements until it reaches
the end after which pressing the tab key will cause the accordion to lose
focus.
|
multipleSelect | false | false | java.lang.String | Use when the AccordionTab is itself a container of AccordionTabs.
Returns true if multiple tabs can be selected at the same time.
By default this setting is false and only one accordion tab can be
selected at any given time. Note that when only a single tab is
selected the accordion will not supply expand or collapse icons even if
the application developer provides facets for these icons.
|
contentHeight | false | false | java.lang.String | The height of each tab content. This height is applied to the style of
the content section of AccordionTab. It can be listed either in pixels,
or in em or en. By default the height is set to 100 pixels.
|
htmlTemplate | false | false | java.lang.String | Alternative HTML template to be used by this component.
|
styleClass | false | false | java.lang.String | CSS style class or classes to be applied to the outermost HTML element of the
TabContent.
|
selected | false | false | java.lang.String | Returns true if this tab is selected. False otherwise. Set to false by
default.
|
title | false | false | java.lang.String | The title of this tab.
|
style | false | false | java.lang.String | CSS style(s) to be applied to the outermost HTML element when this
component is rendered.
|
visible | false | false | java.lang.String | Indicates 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, this setting is set to true, so
HTML for the tab component 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.
|
rendered | false | false | java.lang.String | Use the rendered attribute to indicate 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.
|
id | false | true | java.lang.String | No 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.