OverviewSince 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.
Getting StartedTo 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
Define the mutualExclusive attribute if you want to only allow a single button in the group to be selected: <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 ListenersAlthough not containing any of its own action Listeners, each button child will have it's own ability to have an actionListener. Client Behavior EventsNo direct client behavior is currently associated with this component. JavaScript APINot applicable. Keyboard SupportCSS ClassesThe 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 IssuesNone. Other NotesWhen 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 ResourcesTutorialsThis component appears in the following ICEfaces tutorials: None |
ButtonGroup
© Copyright 2021 ICEsoft Technologies Canada Corp.