Question

I have a dropdown list of items a user can select from (the view is JSF). I would like for an image to appear on the same JSF page after a user selects an item from the dropdown list (i.e. A user select the word “Cat” from the dropdown list, and group of different cat images appear)

How would I code this in JSF?

Note* I’m using JSF 2.0 with facelets, not JSPs.

Answer 1

Provide a list with image URL’s in the dropdown and use h:graphicImage to display an image on the selected URL. Then, use f:ajax to re-render the image on change the dropdown.

Here’s a kickoff example:

<h:form>
    <h:selectOneMenu value="#{bean.imageURL}">
        <f:selectItems value="#{bean.imageURLs}" />
        <f:ajax event="change" render="image" />
    </h:selectOneMenu>
    <h:graphicImage id="image" value="#{bean.imageURL}" /> 
</h:form>

Bean:

private List<String> imageURLs; // +getter
private String imageURL; // +getter +setter