Search code examples
javaajaxjsfjsf-2

Returning Multiple Images to JSF page


With this code, I am able to return one image based off of a dropdown selection. Any ideas on how to return multiple images (I have attempted to create an ArrayList with the images and use the UI:Repeat tag to render it back to my view, but I was unsuccessful. Here is my current code now, which works but only returns one image. Any ideas on what approach to take to get more than one image?

Java Code:

(Person class has attribute: private String theImage;)

public String getTheImage(){

    if(this.theSchoolChoice.equals("University of Alabama")){
        theImage = "/resources/gfx/UofALogo.png";
    }

    if(this.theSchoolChoice.equals("Harvard University")){

    }
    return theImage;
}

JSF Code:

    <h:selectOneMenu value="#{person.theSchoolChoice}" style="width : 179px; height : 21px;">
        <f:selectItems value="#{person.theOptions}"/>
    </h:selectOneMenu>
    <h:outputLabel value="  "/>

    <h:commandButton action="submit" value="Get templates" style="FONT-SIZE: medium; FONT-FAMILY: 'Rockwell';width : 128px; height : 25px;">
    <f:ajax event="change" render="image" />
    </h:commandButton>
    <br></br>
    <br></br>
    <h:graphicImage id="image" value="#{person.theImage}"/>

Solution

  • As told in your first question about the subject, I have suggested to get hold of all images in a Map<String, List<String>> where the map key is the dropdown value and the map value is the collection of images.

    Since you can't seem to figure it out, here's a kickoff example how the JSF page should look like:

    <h:form>
        <h:selectOneMenu value="#{bean.groupName}">
            <f:selectItem itemValue="Please select one" />
            <f:selectItems value="#{bean.groupNames}" />
            <f:ajax event="change" render="images" />
        </h:selectOneMenu>
        <h:panelGroup id="images">
            <ui:repeat value="#{bean.images}" var="image">
                <h:graphicImage value="#{image}" /> 
            </ui:repeat>
        </h:panelGroup>
    </h:form>
    

    And here's how the associated Bean should look like:

    @ManagedBean
    @ViewScoped
    public class Bean {
    
        private Map<String, List<String>> allImages = new LinkedHashMap<String, List<String>>();
        private List<String> groupNames;
        private String groupName;
    
        public Bean() {
            allImages.put("group1", Arrays.asList("group1a.jpg", "group1b.jpg", "group1c.jpg"));
            allImages.put("group2", Arrays.asList("group2a.jpg", "group2b.jpg", "group2c.jpg"));
            allImages.put("group3", Arrays.asList("group3a.jpg", "group3b.jpg", "group3c.jpg"));
            groupNames = new ArrayList<String>(allImages.keySet());
        }
    
        public List<String> getImages() {
            return allImages.get(groupName);
        }
    
        public List<String> getGroupNames() {
            return groupNames;
        }
    
        public String getGroupName() {
            return groupName;
        }
    
        public void setGroupName(String groupName) {
            this.groupName = groupName;
        }
    
    }