CODEWITHSUNDEEP
jsf-2primefaces
user3780616
user3780616

Reputation: 1273

Updating p:graphicImage every n seconds

I was wondering if someone could either explain or point me to a good resource that will help me understand how to update a p:graphicImage in Primefaces 5.0. What I'm trying to do is pretty simple.

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

The filename never changes, but it will be updated every n seconds. I'm trying to figure out the easiest way to update that image every n seconds. In this case we'll say every 5.

tyia

Update: I've tried the suggestions below but poll isn't updating. I've tested this in IE, FF, and Chrome. I'm using the sample code on the prime faces. Here's my bean:

@ManagedBean
@ViewScoped
public class CounterView implements Serializable {

    private int number;

    public int getNumber() {
        return number;
    }

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

I'm outputting to the console to see if increment() is ever executed, which it isn't.

Here's my 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>

The above is the page that I'm redirecting to after a successful login. All output is correct except for txt_count....it stays at 0. I took the image out to get this working before applying it to the image update.

Update 2: Got the int counter working 

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

Upvotes: 0

Views: 729

Answers (2)

user2880020
user2880020

Reputation:

You might use a poll component with a listener method that changes the image.

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

Disclaimer : Not tested.

Upvotes: 1

Jaqen H&#39;ghar
Jaqen H&#39;ghar

Reputation: 4345

According to Primefaces user guide p. 247 you can use a p:imageSwitch for a slideshow. For example:

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>

You can also set the speed. If I understand you correctly and you change the image serverside I guess you can just alternate between 2 images with the same url. If the browser reads the cached image instead of the updated one I think you can append the current date to the url.

Upvotes: 0

Related Questions