每 n 秒更新一次 p:graphicImage答案

【问题标题】：Updating p:graphicImage every n seconds每 n 秒更新一次 p:graphicImage
【发布时间】：2014-07-06 04:11:26
【问题描述】：

我想知道是否有人可以解释或指出一个很好的资源来帮助我了解如何在 Primefaces 5.0 中更新 p:graphicImage。我要做的很简单。

<p:graphicImage value="myImage.png"/>

文件名永远不会改变，但它会每 n 秒更新一次。我试图找出每 n 秒更新一次该图像的最简单方法。在这种情况下，我们会说每 5 个。

提亚

更新：我已经尝试了以下建议，但民意调查没有更新。我已经在 IE、FF 和 Chrome 中对此进行了测试。我在主要面孔上使用示例代码。这是我的豆子：

@ManagedBean
@ViewScoped
public class CounterView implements Serializable {

    private int number;

    public int getNumber() {
        return number;
    }

    public void increment() {
        System.out.println("test");
        number++;
    }
}

我正在输出到控制台以查看是否曾执行 increment()，但实际上并没有。

这是我的 xhtml：

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title></title>
    </h:head>
    <h:body>
        <h:form>       
            <p>Welcome, #{loginBean.uname}</p>
        <p:commandButton action="#{loginBean.logout}" value="Logout"  ajax="false"></p:commandButton>
        <br/>
        <h:form>
          <h:outputText id="txt_count" value="#{counterView.number}" />
          <p:poll interval="3" listener="#{counterView.increment}" update="txt_count" />
        </h:form>
    </h:form>
    </h:body>
</html>

以上是我成功登录后重定向到的页面。所有输出都是正确的，除了 txt_count....它保持为 0。我在将其应用于图像更新之前取出图像以使其正常工作。

更新 2：让 int 计数器正常工作

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title></title>
    </h:head>
    <h:body>
        <h:form>       
            <p>Welcome, #{loginBean.uname}</p>
        <p:commandButton action="#{loginBean.logout}" value="Logout"  ajax="false"></p:commandButton>
        <br/>
                  <h:outputText id="txt_count" value="#{counterView.number}" />
          <p:poll interval="3" listener="#{counterView.increment}" update="txt_count" />
    </h:form>
    </h:body>
</html>

【问题讨论】：

标签： jsf-2 primefaces

【解决方案1】：

您可以使用带有更改图像的侦听器方法的轮询组件。

<p:poll interval="3" listener="#{your_method_to_change_the_image()}" update="myImage" />
<p:graphicImage id="myImage" value="myImage.png"/>

免责声明：未经测试。

【讨论】：

【解决方案2】：

根据 Primefaces 用户指南 p。 247 您可以使用 p:imageSwitch 进行幻灯片放映。例如：

p:imageSwitch effect="FlyIn">
   <p:graphicImage value="/images/nature1.jpg" />
   <p:graphicImage value="/images/nature2.jpg" />
   <p:graphicImage value="/images/nature3.jpg" />
   <p:graphicImage value="/images/nature4.jpg" />
</p:imageSwitch>

您还可以设置速度。如果我理解正确并且您更改了图像服务器端，我想您可以在 2 个具有相同 url 的图像之间交替。如果浏览器读取缓存的图像而不是更新的图像，我认为您可以将当前日期附加到 url。

【讨论】：