imagesIideshow的<p:imageswitch>标签

时间:2015-09-24 11:50:18

标签: jsf primefaces imageswitcher

我是Jsf的新手,我的要求是获取图片名称列表(例如n1.jpg,n2.jpg..etc为id = 1和n3.jpg,n4.jpg,n5.jpg等等for 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;
        }

2 个答案:

答案 0 :(得分:2)

这是一个疯狂的猜测,因为我不知道你的Image是怎样的。

在此处返回图像列表:

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

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

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

您可以看到ui:repeat循环通过List<Image>返回的getImages(),但您需要的是String(图片名称)。因此,如果您的Image中没有方法可以返回图片名称,则可能需要一个方法。

/* 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,你问题中的代码应该按预期工作 - 你只需添加两个按钮来开始/停止幻灯片放映:

<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')使用给定效果启动幻灯片显示(您可以在那里提供任何支持的效果)。

答案 1 :(得分:0)

嗯,有一件事是清楚的,默认情况下配置了commandButton,即使用ajax,但它没有更新imageSwitch组件。

您必须向id组件提供imageSwitch,然后从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>

如果您正确管理图像,那么您必须是。我不清楚你是怎么做的,因此,如果按照建议改变代码不足以解决你的问题,你将不得不向我们提供更多信息。