CODEWITHSUNDEEP
javajsffaceletsjsf-2
curiousgeorge
curiousgeorge

Reputation: 1273

Returning list of images on JSF page

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.

Upvotes: 4

Views: 2512

Answers (2)

Mateusz Dymczyk
Mateusz Dymczyk

Reputation: 15141

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.

Upvotes: 0

BalusC
BalusC

Reputation: 1109685

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

Upvotes: 1

Related Questions