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.selectTopic 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 Classcom.sun.webui.jsf.component.AccordionTabTag
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 attribute allows the Java bean that contains the UIComponent to manipulate the UIComponent, its properties, and its children.
focusIdfalsefalsejava.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.
multipleSelectfalsefalsejava.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.
contentHeightfalsefalsejava.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.
htmlTemplatefalsefalsejava.lang.String Alternative HTML template to be used by this component.
styleClassfalsefalsejava.lang.String CSS style class or classes to be applied to the outermost HTML element of the TabContent.
selectedfalsefalsejava.lang.String Returns true if this tab is selected. False otherwise. Set to false by default.
titlefalsefalsejava.lang.String The title of this tab.
stylefalsefalsejava.lang.String CSS style(s) to be applied to the outermost HTML element when this component is rendered.
visiblefalsefalsejava.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.

renderedfalsefalsejava.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.
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.