I tried using a toggle like below. Although it works, it breaks when used inside of a composite component - changing the singleSelect value outside of the component never updates inside the component:
<h:commandButton disabled="#{cc.attrs.singleSelect}"
image="/resources/img/collapse-single.gif">
<f:ajax listener="#{cc.toggleSingleSelect}" render="#{cc.clientId}"/>
</h:commandButton>
<h:commandButton disabled="#{! cc.attrs.singleSelect}"
image="/resources/img/expand-single.gif">
<f:ajax listener="#{cc.toggleSingleSelect}" render="#{cc.clientId}"/>
</h:commandButton>
But if I use a simple checkbox, it works fine:
<h:selectBooleanCheckbox value="#{cc.attrs.singleSelect}">
<f:ajax render="#{cc.clientId}"/>
</h:selectBooleanCheckbox >
Is there something that behaves like a checkbox, but uses images?
I've decided to go with an ICEfaces solution and use their ace:checkboxButton:
You are able to style it to use images:
http://icefaces-showcase.icesoft.org/showcase.jsf?grp=aceMenu&exp=checkboxButtonCustom