JSF RichFaces locale dropdown list with flag icons

Question

I was browsing to find a solution for a long time, but I did not find a suitable answer. I'm developing a JSF web appication using RichFaces library. Application supports different locales, and user is able to change them by selecting from dropdown list. I want the items in dropdown list to have a flag icons along the locale name.

Unfortunately, I could not find the way to do it with JSF.

The xthml code for the dropdown list is:

<h:panelGroup>
    <h:form id="languageForm" prependId="false">
        <h:outputText value="#{usermsg['locale.select.message']}" styleClass="userMessage"/>
        <h:selectOneMenu id="dropdown" value="#{localeBean.selectedLocale}" onchange="submit()">
            <f:selectItems value="#{localeBean.locales}" />
        </h:selectOneMenu>
    </h:form>
</h:panelGroup>

Flag icons are simply done with plain HTML and JQuery, like I've found here: http://www.ixtendo.com/polyglot-language-switcher-jquery-plugin/

To put the icon in the dropdown list item, I have to apply the css for each element in list, like:

#en { 
    background-image: url(/resources/images/flags/gb.png);
}

#fr { 
    background-image: url(/resources/images/flags/fr.png);
}

The problems here are:

f:selectItems (as well as f:selectItem) does not seem to support style property.
I could apply styles to tags using javascript, but I need to have IDs for tags, which f:selectItem (seems) does not allow as well.

The other thing I thougt is to use JQuery control mentioned in the link above, but here is another problem: how to set the value of the selected option to JSF bean. In other words, can I set #{localeBean.selectedLocale} through JQuery or Javascript and plain HTML?

I have found that PrimeFaces has a selectOneMenu control, which allows adding icons http://www.primefaces.org/showcase/ui/selectOneMenu.jsf (the one named 'Content with Filter') but I'm affraid we cannot afford to switch from RichFaces to PrimeFaces at the moment.

Any help is appreciated.

I suggest you to ask your question also in Rich Faces forum: community.jboss.org/en/richfaces What you want to do is easy but it is sure that a hand is needed from the developers. Paste here your answer when you get it. — Rodmar Conde
Are you using JSF 1.2 + RichFaces 3.x or JSF 2.x + RichFaces 4.x? — Luiggi Mendoza
Rodmar Conde, I asked them bud did not get any reply, so I closed that case because I've already resolved the issue. — mp_loki

mp_loki mp_loki · Accepted Answer · 2013-04-07T13:23:01

I have found a solution myself. I figured that I'm able to add ids or classes to html tags with jQuery, so what I've done, I've added the following script:

<script type="text/javascript">
    $(document).ready(function() {
       $('option').each(function(){
          $(this).addClass(this.value);
       });
    });
</script>

And css:

    option {
        background-repeat: no-repeat;
        background-position: right;
    }

    .en {
        background-image: url(/resources/images/flags/gb.png);
    }

    .fr {
        background-image: url(/resources/images/flags/fr.png);
    }
    ...

I used classes because I have two menus with flags in my app, but this works with ids as well.

The script adds the class to JSF-generated tags, so there is no longer an issue to send value back to managedBean.

Thanks everyone.

JSF RichFaces locale dropdown list with flag icons

1 Answers