Returning list of images on JSF page

Question

Hi,

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

Answer 2

BalusC's answer is (as always :) correct, but as you noticed there will be a list of URLs in the selectOneMenu. That is exactly why I asked you how do you store your images. The way I usually do it: (and from what I know that's the standard way of doing it, hopefully someone will correcty me if I'm wrong) you store the image somewhere on the server and in your DB you store its location. That's why I would suggest to make a MyImage class (which will be mapped to a DB table) where you would store the name of the image and a way to get its location on the server (for example you can do it using namespaces like cats will have a String namespace = "cats" and a String imageName and a method that will return the url like String getImageLocation() {return "http://something.com/images/"+namespace+"/"+imageName;} remember that it's important to make it look like a getter so the JSF can use it). Then all you have to do is to get the list of MyImages for a given namespace from your DB and render the images in a dataTable, something like this:

<h:dataTable value="#{myBeanWithAListOfImages.images}" var="img">
    <h:column>
        <h:graphicImage value="img.imageLocation"/>
    </h:column>
</h:dataTable>

Where images is a List<MyImage>. This should work and print the images in a single column.