ButtonGroup

Overview

Since 4.0

The ace:buttonGroup component is a container for ace:checkboxButton and ace:radioButton components The attribute "mutuallyExclusive" can be set to true which enforces mutual exclusivity between buttons in the group. This means that only a single button in each group can be selected at any time. Otherwise, multiple buttons may be selected.

See the ICEfaces Showcase Live Demo of this component, complete with source code.

Getting Started

To use the buttonGroup component, first the ace component name-space has to be added in your page.

<html ... xmlns:ace="http://www.icefaces.org/icefaces/components">

Now you ready to use breadcrumbMenu component, here is the basic example:

    <ace:buttonGroup header="Using ace:radioButton" >
	<ace:radioButton value="#{buttonGroup.r1}">
	    <ace:ajax execute="@form" event="activate" render="@form"/>
	</ace:radioButton>
	<ace:radioButton value="#{buttonGroup.r2}">
            <ace:ajax execute="@form" event="activate" render="@form"/>
	</ace:radioButton>
	<ace:radioButton value="#{buttonGroup.r3}">
	    <ace:ajax execute="@form" event="activate" render="@form"/>
	</ace:radioButton>
    </ace:buttonGroup>

Attributes

TagLib Documentation
This section covers attributes involved in the typical use-cases for this component. For reference, the complete taglib documentation for this component will become available here.

Define the mutualExclusive attribute if you want to only allow a single button in the group to be selected:
The model attribute of breadcrumbMenu allows the user to create and maintain a dynamic list of links representing an action or URL.

 
   <ace:buttonGroup header="Using ace:radioButton" mutuallyExclusive="true">
	<ace:radioButton value="#{buttonGroup.r1}">
	    <ace:ajax execute="@form" event="activate" render="@form"/>
	</ace:radioButton>
	<ace:radioButton value="#{buttonGroup.r2}">
            <ace:ajax execute="@form" event="activate" render="@form"/>
	</ace:radioButton>
	<ace:radioButton value="#{buttonGroup.r3}">
	    <ace:ajax execute="@form" event="activate" render="@form"/>
	</ace:radioButton>
	<ace:radioButton value="#{buttonGroup.r4}">
	    <ace:ajax execute="@form" event="activate" render="@form"/>
	</ace:radioButton>
    </ace:buttonGroup>

Event Listeners

Although not containing any of its own action Listeners, each button child will have it's own ability to have an actionListener.

Client Behavior Events

No direct client behavior is currently associated with this component.

JavaScript API

Not applicable.

Keyboard Support

CSS Classes

The following markup represents the basic HTML structure of the component and the CSS classes it uses.

<div class="[user defined classes] ui-widget ui-widget-content ui-corner-all" style="[user defined styles]">
	<div class="ui-widget-header ui-corner-top">Title</div>
		<!-- Radio or checkbox buttons go here -->
</div>

Known Issues

None.

Other Notes

When using ajax events on the child checkbox and radio buttons, the execute and render attributes should be set to cover the entire button group, at least. This is so because when a checkbox or radio button is in a button group, it's very likely that by changing its state, the state of other sibling buttons will have to be changed indirectly, and if an ajax event doesn't cover all the buttons in the button group, then these changes won't be reflected in the server-side state of the application.

Additional Resources

Tutorials

This component appears in the following ICEfaces tutorials:

None