| |||||||
FRAMES NO FRAMES |
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:
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.
None.
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.
|
setProps(props) |
Use this function to change any of the following supported
properties:
|
When the accordion component is manipulated client-side, some functions may
publish event topics for custom AJAX implementations to listen for.
Using the Dojo event system, you can instruct Ajax to listen for the refresh event topic by using:
<webuijsf:script>
var processEvents =
{
update: function(props) {
//
Do something...
}
}
// Subscribe to refresh event.
dojo.subscribe(webui.suntheme.widget.accordion.event.<eventname>.endTopic,
processEvents, "update");
</webuijsf:script>
The following events are supported.
Event | Description |
webui.suntheme.widget.accordion.event.refresh.beginTopic | Event topic published before asynchronously refreshing the
component. Supported properties include:
|
webui.suntheme.widget.accordion.event.refresh.endTopic | Event topic published after asynchronously refreshing the
component. Supported properties include: See setProps() function.
|
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>
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 Class | com.sun.webui.jsf.component.AccordionTag |
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 binding allows the Java bean that contains the UIComponent to manipulate the UIComponent, its properties, and its children. |
refreshIcon | false | false | java.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. |
multipleSelect | false | false | java.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. |
toggleControls | false | false | java.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. |
htmlTemplate | false | false | java.lang.String | Alternative HTML template to be used by this component. |
loadOnSelect | false | false | java.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. |
styleClass | false | false | java.lang.String | CSS style class or classes to be applied to the outermost HTML element when this component is rendered. |
selectedTabs | false | false | java.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. |
style | false | false | java.lang.String | CSS style class or classes to be applied to the outermost HTML element when this component is rendered. |
visible | false | false | java.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. |
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. |
| |||||||
FRAMES NO FRAMES |