<p:imageSwitch> 图片幻灯片的标签

Question

我是 Jsf 的新手，我的要求是获取图像名称列表（如 n1.jpg、n2.jpg..etc for id=1 and n3.jpg、n4.jpg,n5.jpg...等 id=2) 对于数据库中的特定 id，将其附加到 "resources/Images/" 并在浏览器中显示带有暂停和恢复按钮的幻灯片放映。我正在使用 primefaces 4.0、jsf 2.2、mojarra 2.2.0。我正在使用 p:imageswitch 执行幻灯片放映任务，但未显示图像。谁能帮我找出我的错误，我也没有收到任何错误。以下是xhtml代码：

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

这是我的 java 代码，用于执行查询并获取图像名称列表。我能够生成列表：

 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

好吧，有一点很清楚，您的 commandButton 是默认配置的，即使用 ajax，但它不会更新您的 imageSwitch 组件。

你必须给你的 imageSwitch 组件一个 id，然后从 commandButton 更新它。

类似于：

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

如果您正确管理图像，则必须如此。我不清楚您的情况，因此，如果按照建议更改代码不足以解决您的问题，您将不得不向我们提供更多信息。

Answer 2

这里只是一个疯狂的猜测，因为我不知道你的 Image 长什么样。

给你 return 图片列表：

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

但在这里你使用它就好像它是 String:

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

你看，ui:repeat从getImages()循环到List<Image>你return，但你需要的是String（图像名称） .因此，如果您的 Image 中没有方法来 return 图像名称，您可能需要一个。

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

然后你可以将页面代码修改成这样：

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

更新

一句警告 - 我可以在您的代码中看到您正在混合使用 JSF 和 PrimeFaces 组件来构建您的页面。虽然这通常不是问题，但在行为上存在一些差异 - 例如，PrimeFaces 提供的 p:commandButton 默认发出 Ajax 请求，但 h:commandButton 只是重新加载整个页面，除非你明确为它启用Ajax。

因此 malaguna 关于不更新 p:imageSwitch 的评论只有在您使用 p:commandButton 时才有效。此外，您似乎在按钮的 action 属性中有拼写错误 - 缺少左大括号。所以它可能看起来像这样：

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

更新 #2

PrimeFaces 4.0 似乎有一些问题 - 如果我打开浏览器控制台并重新加载页面，我可以看到消息 Uncaught TypeError: Cannot read property 'msie' of undefined，来自 imageswitch.js

如果您能够切换到 5.2，您问题中的代码应该可以按预期工作 - 您只需将两个按钮添加到 start/stop 幻灯片：

<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();" />

cycle('fade') 使用给定的效果开始幻灯片放映（您可以在那里提供任何支持的效果）。

<p:imageSwitch> 图片幻灯片的标签

<p:imageSwitch> tag for imageslideshow

jsf

primefaces

imageswitcher