<p:imageSwitch> tag for imageslideshow

I am new to Jsf and my requirement is to fetch list of images names(like n1.jpg,n2.jpg..etc for id=1 and n3.jpg,n4.jpg,n5.jpg...etc for id=2) for particular id from database, append it to "resources/Images/" and display slide show with pause and resume button in browser. I am using primefaces 4.0, jsf 2.2, mojarra 2.2.0. I am implementing the slide show task using p:imageswitch but the images are not displayed. Can anyone help me to trace my mistake, I am not getting any error also. The following is the xhtml code:

<h:selectOneMenu value="#{imageBean.selectedmp}" id="ulist">
      <f:selectItems value="#{imageBean.dropdownValues}"/>
 </h:selectOneMenu>
 <h:commandButton value="Display Images" action="#{imageBean.executeQueryImages}" />
    <div id="slider">
      <p:imageSwitch  widgetVar="switcher2" effect="none"         slideshowSpeed="100" slideshowAuto="false" >
         <ui:repeat value="#{imageBean.images}" var="image">
             <p:graphicImage value="/resources/images/#{image}" />
        </ui:repeat>
    </p:imageSwitch>  
  </div>

This is my java code for executing query and get the list of images names. I able to produce the list:

 public void executeQueryImages() {
      String query1 = "some query";
        ResultSet rs = null;
            try {
                connection = ConnectionFactory.getConnection();
                statement = connection.createStatement();
                rs = statement.executeQuery(query1);
                images = new ArrayList<String>();
                   while (rs.next()) {
                     Events ev = new Events();
                     ev.setImagename(rs.getString("simagename"));
                     String Imagename = ev.getImagename();
                     System.out.println("path:::"+Imagename);
                     images.add(Imagename);                 
                }
              }
            catch(Exception e)
            {
             e.printStackTrace();
            }
            finally
            {
                DBUtil.close(rs);
                DBUtil.close(statement);
                DBUtil.close(connection);
            }
        }
         public List<String> getImages() {
            return images;
        }

Solution

Just a wild guess here since I do not know how does your Image look like.

Here you return a list of images:

public List<Image> getImages() {
    return images;
}

But here you use it as if it was String:

<ui:repeat value="#{imageBean.images}" var="image">
     <p:graphicImage value="/resources/images/#{image}" />
</ui:repeat>

You see, the ui:repeat loops through the List<Image> you return from getImages(), but what you need is String (the image name). So in case you don't have a method in your Image to return the image name, you will likely need one.

/* this assumes you have field imageName in your Image class */
public String getImageName() {
    return this.imageName;
}

And then you could modify the page code to something like this:

<ui:repeat value="#{imageBean.images}" var="image">
     <p:graphicImage value="/resources/images/#{image.imageName}" />
</ui:repeat>

UPDATE

A word of warning - I can see in your code you are mixing JSF and PrimeFaces components to build your page. While this is generally not a problem, there are some differences in behavior - for example, p:commandButton provided by PrimeFaces by default issues Ajax requests, but h:commandButton just reloads the whole page unless you explicitly enable Ajax for it.

So the comment from malaguna about not updating your p:imageSwitch would be valid only if you used p:commandButton. In addition, you seem to have typo in the button's action attribute - the left curly brace is missing. So it could look like this:

<p:commandButton value="Display Images" update="switchComponent"
    action="#{imageBean.executeQueryImages}" />

UPDATE #2

There seems to be some problem with PrimeFaces 4.0 - if I open the browser console and reload the page, I can see message Uncaught TypeError: Cannot read property 'msie' of undefined, coming from imageswitch.js

If you are able to switch to 5.2, the code you have in your question should work as expected - you just add two buttons to start/stop the slideshow:

<p:commandButton id="btnPlay" widgetVar="btnPlayWidget"
    type="button" value="Start"
    onclick="PF('switcher2').getJQ().cycle('fade'); PF('btnPlayWidget').disable(); PF('btnStopWidget').enable();" />

<p:commandButton id="btnStop" widgetVar="btnStopWidget"
    type="button" value="Stop" disabled="true"
    onclick="PF('switcher2').getJQ().cycle('stop'); PF('btnStopWidget').disable(); PF('btnPlayWidget').enable();" />

The cycle('fade') starts the slideshow using the given effect (you can supply any supported effect there).