How can I display this using SelectOneRadio?

[Rob Micah]

What I need is a layout like this:

<ul> <li> <input type="radio" name="format" value="pdf"/> <img src="../resources/images/pdf-icon-48-bw.png"/> <span class="ext">PDF</span> </li> </ul>

Notice that it has 3 elements grouped together. When I use the SelectOneRadio I can't get it to render anything more than 1 input element. The following produces all elements before a table element with the table element containing all the radio buttons.

<h:selectOneRadio layout="pageDirection" value="#{params.outputFormat}"> <f:selectItem itemValue="PDF"/> <img src="../resources/images/pdf-icon-48-bw.png"/> <span class="ext">PDF</span> </h:selectOneRadio>

So how can I do this in JSF?

[Tim Holloway]

I just reviewed the Oracle docs. They're awful.

The selectOneRadio generates an HTML table (not an HTML list). The elements within the table are rendered from the f:selectItem child elements.

Members of the "f" tag library do not generate HTML. They may contain data that is used by container elements as part of the container rendering process, as is true in this case, but they don't directly render anything. You'll notice that there are no rendering attributes for selectItem except for the "disabled" attribute.

Simply jamming HTML into the body of the JSF tag won't work. I don't recommend mixing JSF and HTML to begin with, but in this case, the tag is so abstract relative to what gets generated that there's simply no meaningful place to put stuff like that.

There may be SOME hope, though. Try this:

<f:selectItem itemValue="PDF" escape="false" itemLabel="&lt;img src=&quot;../resources/images/pdf-icon-48-bw.png&quot;/&gt;PDF"/>

The "escape=false" attribute allows you to use raw HTML in the itemLabel. Unfortunately, this is XML, so you must use the entity escapes or it won't parse properly. Don't forget the ";" that terminates each entity.

[Rob Micah]

Yeah this is awful all the way around. Really I don't necessarily have to have a list element I just need a containing box for the radio button and 2 other elements with it. Or even a table that had a row with those 3 elements in the same row might work.

[Tim Holloway]

The hard part is getting the radio action where selecting one pops up the others.

There are 2 ways you could deal with this.

1. Apply CSS to set the image elements on each HTML radiobutton element under that control.

2. Render a panelGrid and checkbox controls with Javascript attached to do the 'pop up' function and CSS to provide alternative (radiobutton-shaped) checkbox images.

[Rob Micah]

I think I found the best way. I used a h:inputHidden element within a <div> with an id on it. Then I created the radio buttons and their layouts myself. I hooked some javascript (jQuery) onto the change event of the radios and changed the value of the hidden element to match the radio in the event handler. It works so far and is much smaller and cleaner. Here's the code:

<!-- The actual jsf components don't display the way I want them to so I am hiding them and will set them via javascript. --> <div id="hiddenFormat" style="display: none;"> <h:inputHidden value="#{paramsHolder.outputFormat}"/> </div> <ul id="formatlist"> <li> <input type="radio" name="format" value="PDF"/> <img src="../resources/images/pdf-icon-48-bw.png"/> <span class="ext">PDF</span> </li> <li> <input type="radio" name="format" value="Excel"/> <img src="../resources/images/excel-icon-48-bw.png"/> <span class="ext">Excel</span> </li> <li> <input type="radio" name="format" value="Word"/> <img src="../resources/images/word-icon-48-bw.png"/> <span class="ext">Word</span> </li> <li> <input type="radio" name="format" value="HTML"/> <img src="../resources/images/ie-icon-48-bw.png"/> <span class="ext">HTML</span> </li> </ul> <script type="text/javascript"> $(document).ready(init); function init() { // This only executes when the radio button is checked. $("#formatlist input[type=radio]").change(function() { changeFormat($(this)); }); } // Set the hidden field for the report format whenever an output format // option is chosen. function changeFormat(radio) { $("#hiddenFormat input[type=hidden]").val(radio.get(0).value); } </script>