webuijsf
Tag accordion


Use the webuijsf:accordion tag to display an accordion component in the rendered HTML page. Think of an accordion as a vertical tab set. This set can contain one or more tabs each of which can contain virtually any HTML markup and have the following characteristics:

The accordion component, however, allows muliple tabs to be open simultaneously. Note: use an alternate navigational component if the number of tabs in the accordion are exceeding ten. The accordion tag also supports "expandAll" and "collapseAll" icons. An accordion can be refreshed if the application using it supports this function. Each attribute of the accordion is described in detail in the TLD document.

Unless otherwise specified the accordion dows not display the expand all, collapse all and refresh icons. To display these icons, set the toggleControls and refreshIcon attributes to true.

Facets

None.

Theme Identifiers

None.

Client Side Javascript Functions

When the Accordion component is rendered, a DOM object corresponding to the Accordion component is created. To manipulate the accordion component on the client side, you can call functions on the DOM object. To disable the component, call document.getElementById(id).setProps({multipleSelect: true}).

Function Description
getProps() Use this function to get widget properties. See setProps() function for a list of supported properties.
refresh(execute)
Use this function to asynchronously refresh the component.
  • [optional] execute: Comma separated string containing a list of client ID against which the execute portion of the request processing lifecycle must be run.
setProps(props) Use this function to change any of the following supported properties:
  • collapseAllImage
  • expandAllImage
  • loadOnSelect
  • multipleSelect
  • refreshImage
  • tabs
  • toggleControls
  • type
  • style
  • styleClass
  • 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 accordion component is manipulated client-side, some functions may 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.

Event 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

Code Examples

Example 1: Accordion as a navigational Element.

In this example, the component is used for navigational purposes.

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

Example 2: TBD

This example shows the how Ajax is used to refresh the accordion component as a whole or simply a single AccorionTab.

<webuijsf:accordion id="acc1" toggleControls="true" refreshIcon="true">
         
                   <webuijsf:accordionTab id="tab1" title="#{msgs.accordion_tab1}" 
                     contentHeight="50px" > 
                     <webuijsf:staticText binding="#{AccordionBean.text1}"/> 
                   </webuijsf:accordionTab> 
<webuijsf:accordionTab id="tab2" title="#{msgs.accordion_tab2}" contentHeight="50px"> <webuijsf:staticText binding="#{AccordionBean.text2}"/> </webuijsf:accordionTab >
<webuijsf:accordionTab id="tab3" title="#{msgs.accordion_tab3}" contentHeight="50px" > <webuijsf:staticText binding="#{AccordionBean.text3}"/> </webuijsf:accordionTab >
<webuijsf:accordionTab id="tab4" title="#{msgs.accordion_tab4}" contentHeight="50px" > <webuijsf:staticText binding="#{AccordionBean.text4}"/> </webuijsf:accordionTab >
</webuijsf:accordion >
<webuijsf:script > function refreshAccordion1() { var acc = document.getElementById("accordionExample:acc1:tab1"); acc.refresh("accordionExample:acc1:tab1"); return false; } </webuijsf:script >

The corresponding backing bean.

public class AccordionBackingBean { 
    
    public final static String SHOW_ACCORDION = "showAccordionIndex"; 
/** Creates a new instance of AccordionBackingBean */ public AccordionBackingBean() { }
public StaticText text1 = new StaticText(); public StaticText text2 = new StaticText(); public StaticText text3 = new StaticText(); public StaticText text4 = new StaticText();
public StaticText getText1() { this.text1.setText(getTime()); return text1; }
public void setText1(StaticText text1) { this.text1 = text1; this.text1.setText(getTime()); }
public StaticText getText2() { this.text2.setText(getTime()); return text2; }
public void setText2(StaticText text2) { this.text2 = text2; this.text2.setText(getTime()); }
public StaticText getText3() { this.text3.setText(getTime()); return text3; }
public void setText3(StaticText text3) { this.text3 = text3; this.text3.setText(getTime()); }
public StaticText getText4() { this.text4.setText(getTime()); return text4; }
public void setText4(StaticText text4) { this.text4 = text4; this.text4.setText(getTime()); }
private String getTime() { Calendar calendar = Calendar.getInstance(); return calendar.getTime().toString(); }
}


Tag Information
Tag Classcom.sun.webui.jsf.component.AccordionTag
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.
refreshIconfalsefalsejava.lang.String Should be set to true if the accordion container is to display a refresh icon. A refresh icon would generally be provided on the accordion header. When clicked it would refresh the accordion and its tabs asynchronously.
multipleSelectfalsefalsejava.lang.String 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/collapse icons even if the application developer provides facets for these.
toggleControlsfalsefalsejava.lang.String Set to true if the accordion container should display expandAll and collapseAll control features. Note that this setting applies only in the case where multipleSelect has been set to true. In the case of single select accordions only one tab can be open at any given time.
htmlTemplatefalsefalsejava.lang.String Alternative HTML template to be used by this component.
loadOnSelectfalsefalsejava.lang.String Returns true if the tabs should be loaded when first selected. After tabs are loaded they are not reloaded until the container is refreshed or the user performs some action on the tab in question.
styleClassfalsefalsejava.lang.String CSS style class or classes to be applied to the outermost HTML element when this component is rendered.
selectedTabsfalsefalsejava.lang.String An array of selected tabs. In some cases, only a single tab can be selected which specifies that the array contains just one tab.
stylefalsefalsejava.lang.String CSS style class or classes to be applied to the outermost HTML element when this component is rendered.
visiblefalsefalsejava.lang.String

Indicates whether the accordion 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 true, so HTML for the component is included and visible to the user. If the accordion 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.
tabIndexfalsefalsejava.lang.String

Position of this element in the tabbing order of the current document. Tabbing order determines the sequence in which elements receive focus when the tab key is pressed. The value must be an integer between 0 and 32767.

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.