Is there a JSF toggle component or a way to theme an h:selectBooleanCheckbox with images?

Question

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?

Answer 1

I've decided to go with an ICEfaces solution and use their ace:checkboxButton:

<ace:checkboxButton value="#{cc.attrs.singleSelect}" styleClass="toggle">
    <ace:ajax render="#{cc.clientId}"/>
</ace:checkboxButton>

You are able to style it to use images:

http://icefaces-showcase.icesoft.org/showcase.jsf?grp=aceMenu&exp=checkboxButtonCustom