1

Is it possible to show images in <option> elements rendered by <h:selectOneMenu> tag of JSF?

I use <f:selectItems> to generate the options that I get from the database. But the content I want to show in <h:selectOneMenu> is the image associated with each item.

How can I achieve that?

skuntsel
  • 11,624
  • 11
  • 44
  • 67
Diego Sabino
  • 47
  • 3
  • 9

1 Answers1

3

It is impossible to embed images within JSF's <h:selectOneMenu>/<f:selectItem>/<f:selectItems>, as there are no attributes designed for that purpose. Moreover, there is hardly a cross-browser compatible solution for that.

Though you could use a component library for that, like PrimeFaces. It has <p:selectOneMenu> component that basically wraps <select>/<option> with some HTML/jQuery magic, so that a 'substitute' is displayed onscreen. Example usage can be found in a showcase example. To recite it:

<p:selectOneMenu value="#{autoCompleteBean.selectedPlayer2}" converter="player" var="p">  
    <f:selectItem itemLabel="Select One" itemValue="" />  
    <f:selectItems value="#{autoCompleteBean.players}" var="player" itemLabel="#{player.name}" itemValue="#{player}"/>  

    <p:column>  
        <p:graphicImage value="/images/barca/#{p.photo}" width="40" height="50"/>  
    </p:column>  

    <p:column>  
        #{p.name} - #{p.number}  
    </p:column>  
</p:selectOneMenu>

Of course, you can load the images in a different manner.

Community
  • 1
  • 1
skuntsel
  • 11,624
  • 11
  • 44
  • 67
  • Yes, i am using primefaces.. In this case, i have to implement a converter class, or primefaces do it for me? – Diego Sabino May 06 '13 at 20:48
  • That's not related to your question. The structure of `` closely resembles that of ``, but with some 'extras'. As for the converter, it is needed in case you'd like to map a string (the one from the selected option) to anything else, like your model class (like `Player` in PrimeFaces example). To repeat, in case it's needed in JSF it is as well needed in PrimeFaces. – skuntsel May 06 '13 at 20:53
  • Is it normal it is insanely slow ? When I say slow I mean like 1 MINUTE to load a page. Where the selectOneMenu has 250 elements and 250 images, images add up to 130 ko though so it isn't so high. – Ced Jun 12 '15 at 01:27