tag for imageslideshow

Question

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;
        }

Answer 1

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).

Answer 2

Well, there is one thing clear, your commandButton is configured by default, that is, using ajax, but it is not updating your imageSwitch component.

You have to give an id to your imageSwitch component, and then update it from commandButton.

Something like:

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

<div id="slider">
  <p:imageSwitch  id="switchComponent"
      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>

Then you have to be if you are managing correctly images. It is not clear to me how are you doing, so, if changing the code as suggested is not sufficient to solve your problem, you will have to give us more info.