Conditionally setting the font color of an item in a drop down box in JSF

Question

I'm a newbie to web programming, so please bear with me. I am using JSF 1.2 and I want to conditionally set the color of the items in my drop down list.

In other words, I have a collection of items that, along with a key and a value, also have a boolean property, warning, that is dynamically set by user action. I want the drop down to show all of the items, but those whose warning property is set to true should be displayed in red.

I assume I have to extend the SelectItem class to add in the boolean property. How do I then conditionally set the color of the font of those items whose warning property is set to true in my JSP pages?

Thanks in advance

Answer 1

Unfortunately, the JSF standard implementation of the HTML <select> element, the h:selectOneMenu doesn't provide facilities to set style classes on each individual <option> element.

You can however create a custom renderer which does that and configure your webapp to use that renderer instead. Basically you just need to add an extra attribute to the component wherein you pass some separated string with all option style classes which are to be applied on the options repeatedly. The renderer should then take care about picking this attribute and applying the style classes on the option elements accordingly.

You can find code examples and explanations in this article. You can then end up with something like:

<h:form>
    <h:selectOneMenu value="#{myBean.selectedItem}">
        <f:attribute name="optionClasses" value="option1, option2" />
        <f:selectItems value="#{myBean.selectItems}" />
    </h:selectOneMenu>
    <h:commandButton value="submit" action="#{myBean.submit}" />
</h:form>

You can of course also generate and return the value from the bean:

        <f:attribute name="optionClasses" value="#{myBean.optionClasses}" />