JSF: attach rich:toggleControl to radio buttons or select items.

Question

Has anyone had any success attaching a rich:toggleControl component to a radio button component (h:selectOneRadio) or alternatively any of its children select items (in this case s:enumItem).

Basic code example:

<h:selectOneRadio value="#{backingValue}">
   <s:enumItem enumValue="VAL_1" itemLabel="Value One" />
   <s:enumItem enumValue="VAL_2" itemLabel="Value Two" />
   <s:convertEnum />
</h:selectOneRadio>

The ideal thing would be to attach the toggle control to the enumItems so I could have it switch to a particular state. However at this point I'd be happy if the toggle control can just be attached to the selectOneRadio. I've tried the toggle control as a child of the selectOneRadio and enumItems; neither works. I've also tried wrapping the toggleControl around the selectOneRadio, the toggle control works in this case but the radio buttons don't :(

Answer 1

This isn't strictly an answer to my above question but it's a work around I'm using for now until I figure out how to do it 'better' re- above.

Anyway the workaround: add an onclick event to the h:selectOneRadio which calls the rich:togglePanel's javascript API:

onclick="TogglePanelManager.toggleOnClient('TOGGLE_PANEL_ID_HERE',null);"

Still I would like to do this 'properly' using the rich:toggleControl component if possible ...

Answer 2

Just tie your rich:togglePanel to the same value on your backing bean, and use an a4j support tag to update the value and re-render the panel.

One thing to keep in mind is that the rich:togglePanel #value attribute must resolve to a String, so you'll probably need to bind to #{backingValue.name()} (don't use toString() since somone might override it on you later...)

something like this should work:

<h:selectOneRadio id="radioButtons" value="#{backingValue}">
   <a4j:support event="onclick" 
                ajaxSingle="true" 
                reRender="radioButtons, togglePanel"/>

   <s:enumItem enumValue="VAL_1" itemLabel="Value One" />
   <s:enumItem enumValue="VAL_2" itemLabel="Value Two" />
   <s:convertEnum />
</h:selectOneRadio>


<rich:togglePanel id="togglePanel" 
                  switchType="ajax"
                  value="#{backingValue.name()}" >

   <f:facet name="VAL_1">
      <h:outputText value="Selected enum value 1"/>
   </f:facet>

   <f:facet name="VAL_2">
      <h:outputText value="Selected enum value 2"/>
   </f:facet>
</rich:togglePanel>

You might have to play with the ajax support event binding as well. I've found that the "onchange" and "onselect" events with radio buttons can be a little bit spotty where AJAX4JSF is concerned. I've done this with Strings, where an action in my backing bean changes the toggle panel state by setting the value - but it SHOULD Work with enum's as well.