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>
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.
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.
Related
Need help here. I'm trying to make my current project bookmarkable. My current design can basically be summed up in this code snippet:
<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<f:metadata>
<f:viewParam name="contentUrl" value="#{navigationBean.contentUrl}"/>
</f:metadata>
<h:body>
<ui:composition template="/views/template/template.xhtml">
<ui:define name="leftpane">
<ui:include src="/views/admin/menu_administrator.xhtml"/>
</ui:define>
<ui:define name="rightpane">
<p:growl showDetail="true" sticky="false" />
<ui:decorate template="/views/admin/content/#{navigationBean.contentUrl}.xhtml"/>
</ui:define>
</ui:composition>
</h:body>
</html>
So I have this template to make the site 30/70 look having the "leftpane" contain the menu and the "rightpane" to display the output content. What I want is to be able to change the output in the "rightpane" depending on the URL sent:
www.mysite.com/projectitle/views/admin/Administrator.xhtml?faces-redirect=true&contentUrl=cont_admin_rapptmnttype
Whatever will be constructed in this url: /views/admin/content/#{navigationBean.contentUrl}.xhtml on the "rightpane" also has a corresponding backing bean to generate the needed output
I'm using Primefaces3.5, MyFaces2.0, WAS8.5
Hope someone could help me out on this. Thanks.
UPDATE:
I am using a p:menuitem to set the contentUrl like
<p:menuitem value="Appointment Type" id="cont_admin_rapptmnttype"
ajax="false" outcome="#{navigationBean.currentMode}" >
<f:param name="contentUrl" value="cont_admin_rapptmnttype"/>
</p:menuitem>
But when I click on the menuitem I get a Stackoverflow exception which, as it turns, is caused by:
<ui:decorate template="/views/admin/content/#{navigationBean.contentUrl}.xhtml"/>
Which is the one I'm trying to update.
Here is the recurring exception in the stacktrace:
at org.apache.myfaces.view.facelets.tag.ui.DecorateHandler.apply(DecorateHandler.java:137)
at javax.faces.view.facelets.CompositeFaceletHandler.apply(CompositeFaceletHandler.java:51)
at javax.faces.view.facelets.DelegatingMetaTagHandler.applyNextHandler(DelegatingMetaTagHandler.java:59)
at org.apache.myfaces.view.facelets.tag.jsf.ComponentTagHandlerDelegate.apply(ComponentTagHandlerDelegate.java:324)
at javax.faces.view.facelets.DelegatingMetaTagHandler.apply(DelegatingMetaTagHandler.java:54)
at javax.faces.view.facelets.CompositeFaceletHandler.apply(CompositeFaceletHandler.java:51)
at javax.faces.view.facelets.DelegatingMetaTagHandler.applyNextHandler(DelegatingMetaTagHandler.java:59)
at org.apache.myfaces.view.facelets.tag.jsf.ComponentTagHandlerDelegate.apply(ComponentTagHandlerDelegate.java:324)
at javax.faces.view.facelets.DelegatingMetaTagHandler.apply(DelegatingMetaTagHandler.java:54)
at javax.faces.view.facelets.CompositeFaceletHandler.apply(CompositeFaceletHandler.java:51)
at org.apache.myfaces.view.facelets.tag.ui.CompositionHandler.apply(CompositionHandler.java:150)
at org.apache.myfaces.view.facelets.compiler.NamespaceHandler.apply(NamespaceHandler.java:57)
at org.apache.myfaces.view.facelets.compiler.EncodingHandler.apply(EncodingHandler.java:45)
at org.apache.myfaces.view.facelets.impl.DefaultFacelet.include(DefaultFacelet.java:322)
at org.apache.myfaces.view.facelets.impl.DefaultFacelet.include(DefaultFacelet.java:369)
at org.apache.myfaces.view.facelets.impl.DefaultFacelet.include(DefaultFacelet.java:347)
at org.apache.myfaces.view.facelets.impl.DefaultFaceletContext.includeFacelet(DefaultFaceletContext.java:215)
In the following simple faces page, I am trying to instruct JSF to NOT to validate the input fields.
<?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:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:body>
<h:form id="createPatientForm_id">
<p:panelGrid columns="3">
<p:outputLabel value="First Name" />
<p:inputText id="firstNameInput_id" label="First Name" required="true" requiredMessage="First Name is required"/>
<p:message for="firstNameInput_id"/>
</p:panelGrid>
<p:commandButton value="Submit" ajax="false" validateClient="false" />
</h:form>
</h:body>
</html>
When I click on the 'Submit' button, validation does occur. Screen shot below:
I know I have configured required="true". But, shouldn't the validation be skipped as I have also specified validateClient="false"?
What am I missing here?
You need to use immediate="true", perhaps in addition to the Primefaces specific validateClient. Odds are you have disabled client side validation, but not the server side.
I'm trying to change Locale using primefaces in vain, here's my bean code :
// more imports here
#ManagedBean
#SessionScoped
public class DateBean implements Serializable{
private Date startDate, endDate;
private Locale locale = FacesContext.getCurrentInstance().getViewRoot().getLocale();
public void setLocale(Locale locale) {
this.locale = locale;
}
public Locale getLocale(){
return locale;
}
public void changeLocale(String loc){
FacesContext context = FacesContext.getCurrentInstance();
locale = new Locale(loc);
context.getViewRoot().setLocale(locale);
}
}
facelet :
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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:p="http://primefaces.org/ui"
xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core">
<f:view locale="#{dateBean.locale}">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Insert title here</title>
<h:outputScript library="scripts" name="#{dateBean.locale}.js"></h:outputScript>
</h:head>
<h:body>
<h:form>
<p:commandButton value="de" action="#{dateBean.changeLocale('de')}" >
<p:ajax update="#form" process="#form"></p:ajax>
</p:commandButton>
<p:calendar id="cc" value="#{dateBean.startDate}" required="true" showOn="both"
requiredMessage="Start date required"/>
<p:message for="cc"></p:message>
</h:form>
</h:body>
</f:view>
</html>
Calendar locale does not change to deutsch when i click on the locale button, and i got no exception .
However it's like a breeze doing this task using old JSF2.* CommandButton component this way :
<h:commandButton value="portugal" action="#{dateBean.changeLocale('pt')}" >
<f:ajax render="#form"></f:ajax>
</h:commandButton>
May you guys help me figure it out please ?
Primefaces library doesn't provide German translation for its components. You need to download the javascript piece and attach it to your code. Then, make the calendar use the locale you want. Take a look at this site and here you have more info about your issue.
You also are including a Javascript file depending on your locale (<h:outputScript library="scripts" name="#{dateBean.locale}.js">) that makes the javascript file to be included dinamically depending on your locale. Since you're only refreshing the h:form part with your ajax request, you could get in trouble with that, since this tag is rendered with the whole view, so your translation file is not available for your locale at the moment. Appropiate solution: just include all the javascript files you need since the begining.
I have a h:form with two p:commandButtons. One button is nested inside of ui:repeat inside a component. The button outside of the ui:include seems to navigate properly to the target destination returned by the action method. However the identical button nested inside of ui:include and ui:repeat appears to reinitialize the view scoped bean instead of navigating to the action destination. Does anyone have an explanation and a solution or workaround?
The code is roughly this. mybean is view scoped.
<h:form id="myform">
<p:commandButton value="DoIt" action="#{mybean.doit()}" ajax="true"/> <!-- this works! -->
<ui:include src="/sections/util/mycomp.xhtml">
<ui:param name="backingbean" value="#{mybean}"/>
</ui:include>
</h:form>
Here is the component.
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
...
xmlns:p="http://primefaces.org/ui">
<ui:repeat value="#{backingbean.mylit}" var="item" varStatus="status">
<p:commandButton value="DoIt" action="#{backinbean.doit()}" ajax="true"/> <!-- this doesn't -->
</ui:repeat>
</ui:composition>
Strangely if I reposition the nested p:commandButton inside the ui:component but outside of the ui:repeat, then it works.
Any ideas?
Hi I copied your codes and tried to reproduce the problem but it seems that mine is working OK. By the way, if you want to use that button for navigation probably you should set ajax to false. Below are my codes:
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head></h:head>
<h:body>
<h:form id="myform">
<p:commandButton value="DoIt" action="#{backingBean.goToAnotherPage()}" ajax="true"/> <!-- this works! -->
<ui:include src="firstpage.xhtml">
<ui:param name="bb" value="#{backingBean}"/>
</ui:include>
</h:form>
</h:body>
</html>
And here the second page firstpage.xhtml:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<ui:repeat value="#{bb.myList}" var="item" varStatus="status">
<p:commandButton value="DoItInRepeat" action="#{bb.goToAnotherPage()}" ajax="true"/> <!-- this doesn't -->
</ui:repeat>
<ui:debug hotkey="x" />
</ui:composition>
And finally the backing bean:
#ManagedBean
#ViewScoped
public class BackingBean {
private List<String> myList = new ArrayList<String>();
#PostConstruct
public void init(){
myList.add("1");
myList.add("2");
myList.add("3");
}
public String goToAnotherPage(){
return "destpage.xhtml";
}
//Getters and Setters
}
I have this issue, i think is a bug, i have a composite component with a simple inputtext, then i try to use my composite component in a modal dialog, at first look all it's ok, you can type inside the inputtext, but when the inputtext lost the focus and try to type again you cant, even you can't erase what you typed before.
In the issue tracker, there are a similiar problem reported:
LINK!!!!!
But this is with autocomplete not with input (maybe can be the same), but is marked as fixed, and i tried with PrimeFaces 3.3.1 and 3.4-SNAPSHOT but the problem persist.
Im using 3.4-SNAPSHOT
Here is a "reproducible test cases", i add an other input to my composite component for lost the focus more easily from first input.
Composite component:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:cc="http://java.sun.com/jsf/composite"
xmlns:p="http://primefaces.org/ui">
<body>
<cc:implementation>
<p:commandButton value="Open dialog composite component" onclick="dialog.show()"/>
<p:dialog widgetVar="dialog">
<p:inputText/>
<p:inputText value="Click here for lost focus of the first input"/>
</p:dialog>
</cc:implementation>
</body>
</ui:composition>
test.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:mycomp="http://java.sun.com/jsf/composite/components"
xmlns:p="http://primefaces.org/ui"
xml:lang="es">
<f:view contentType="text/html">
<h:head>
</h:head>
<h:body>
<h:form id="myform">
<p:commandButton value="Open first dialog" onclick="firstDialog.show()"/>
</h:form>
<h:form id="myform2">
<p:dialog widgetVar="firstDialog" modal="true">
<mycomp:test />
</p:dialog>
</h:form>
</h:body>
</f:view>
</html>
I tried to replace p:inputText with h:inputText and the problem persist.
Im using:
MyFaces 2.1.8, Primefaces 3.4-SNAPSHOT