I'm trying what I call a "dynamic tooltip" - I have a inputNumber field with a button and on button click I want to show tooltip if value is not poositive.
Page
<?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:f="http://xmlns.jcp.org/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui"
xmlns:sec="http://www.springframework.org/security/tags" xmlns:ui="http://java.sun.com/jsf/facelets">
<h:body>
<p:growl id="msgs" showDetail="true" />
<h:form>
<p:outputLabel value="Enter positive integer" />
<p:inputNumber id="val" value="#{dynamicTooltipView.val}" decimalPlaces="0" />
<p:tooltip id="tooltip" for="val" value="Test" />
<p:commandButton value="Validate" actionListener="#{dynamicTooltipView.validate}" update="val" process="val"/>
</h:form>
</h:body>
</html>
Bean
package com.codenotfound.primefaces.model;
import javax.faces.view.ViewScoped;
import javax.inject.Named;
#Named
#ViewScoped
public class DynamicTooltipView {
Integer val;
boolean isValid;
public void validate() {
isValid = val != null && val > 0;
}
public Integer getVal() {
return val;
}
public void setVal(Integer val) {
this.val = val;
}
public boolean isValid() {
return isValid;
}
public void setValid(boolean isValid) {
this.isValid = isValid;
}
}
The problem is, that when I click the validate button, tooltip is lost and I do not understand why and how to fix it...
Problem seems to be in process="val", when I specified this, my actionListener (#{dynamicTooltipView.validate}) is not called anymore (but I'd like to understand why)...
Additionally, update="val tooltip" is not working too, I had to specify update="#form" to make it work, but this is not exactly what I wanted...
I ended up with this solution (I used p:fragment without update on button):
<?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:f="http://xmlns.jcp.org/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui"
xmlns:sec="http://www.springframework.org/security/tags" xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<style>
span.invalid>input {
border-color: orange;
}
</style>
</h:head>
<h:body>
<p:growl id="msgs"/>
<h:form>
<p:fragment autoUpdate="true">
<p:outputLabel value="Enter positive integer" />
<p:inputNumber id="val" value="#{dynamicTooltipView.val}" decimalPlaces="0" styleClass="#{dynamicTooltipView.isValid() ? '' : 'invalid'}"/>
<p:tooltip id="tooltip" for="val" value="Entered value is not positive integer ;-)" rendered="#{dynamicTooltipView.isValid() == false}" />
<p:commandButton value="Validate" actionListener="#{dynamicTooltipView.validate}" />
<p:outputLabel value="#{dynamicTooltipView.isValid()}" />
</p:fragment>
</h:form>
</h:body>
</html>
p:outputLabel is there for debugging only...
I'd like to integrate pe:ckeditor to my XHTML page.
After googling, I found this helpful link
www.primefaces.org/showcase-ext/sections/ckEditor/multipleEditors.jsf
The Bean class is:
package com.esprit.util;
import java.io.Serializable;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.context.FacesContext;
#ManagedBean
#ViewScoped
public class EditorController implements Serializable {
private static final long serialVersionUID = 20111020L;
private String content;
private String secondContent;
private String color = "#33fc14";
public EditorController() {
content = "Hi Showcase User";
secondContent = "This is a second editor";
}
public void saveListener() {
content = content.replaceAll("\\r|\\n", "");
final FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Content",
content.length() > 150 ? content.substring(0, 100) : content);
FacesContext.getCurrentInstance().addMessage(null, msg);
}
public void secondSaveListener() {
secondContent = secondContent.replaceAll("\\r|\\n", "");
final FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Second Content",
secondContent.length() > 150 ? secondContent.substring(0, 100) : secondContent);
FacesContext.getCurrentInstance().addMessage(null, msg);
}
public void changeColor() {
if (color.equals("#1433FC")) {
color = "#33fc14";
} else {
color = "#1433FC";
}
}
// Getters & Setters
}
The page XHTML is:
<!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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:pe="http://primefaces.org/ui/extensions">
<body>
<h:form>
<p:growl id="growl" showDetail="true" />
<pe:ckEditor id="editor"
value="#{editorController.content}"
toolbar="[['Cut','Copy','Paste','PasteText','PasteFromWord','-', 'SpellChecker', 'Scayt']]">
<p:ajax event="save" listener="#{editorController.saveListener()}" update="growl"/>
</pe:ckEditor>
<br/>
<br/>
<pe:ckEditor id="secondEditor"
value="#{editorController.secondContent}"
toolbar="[['Cut','Copy','Paste','PasteText','PasteFromWord','-', 'SpellChecker', 'Scayt']]">
<p:ajax event="save" listener="#{editorController.secondSaveListener()}" update="growl"/>
</pe:ckEditor>
</h:form>
</body>
</html>
The added this to file web.xml:
<context-param>
<param-name>
org.primefaces.extensions.DELIVER_UNCOMPRESSED_RESOURCES
</param-name>
<param-value>false</param-value>
</context-param>
After running my project: I got this screenshot.
As you see, I didn't have the same editor as displayed by the tutorial: I have an Editor without Header.
Have you please any idea about solving this. Any proposition is appreciated. Thanks a lot.
Additional to the attribute toolbar that #ArgaPK mentioned, you have to:
Verify that those required jars exist:
commons-io-2.4.jar
commons-lang3-3.5.jar
gson-2.2.4.jar
primefaces-6.0.jar
primefaces-extensions-6.0.0.jar
resources-ckeditor-6.0.0.jar
Update your XHTML by adding <h:head/>
<!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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:pe="http://primefaces.org/ui/extensions">
<h:head/>
<h:body>
<h:form style="width: 800px; margin: 0 auto;">
<p:growl id="growl" showDetail="true" />
<pe:ckEditor id="editor" value="#{editorController.content}" toolbar="[['Cut','Copy','Paste','PasteText','PasteFromWord','-', 'SpellChecker', 'Scayt']]">
<p:ajax event="save" listener="#{editorController.saveListener}" update="growl"/>
</pe:ckEditor>
<br/>
<br/>
<pe:ckEditor id="secondEditor" value="#{editorController.secondContent}" toolbar="[['Cut','Copy','Paste','PasteText','PasteFromWord','-', 'SpellChecker', 'Scayt']]">
<p:ajax event="save" listener="#{editorController.secondSaveListener}" update="growl"/>
</pe:ckEditor>
</h:form>
</h:body>
</html>
HTH
You have to add the toolbar attribute
<p:growl id="growl" showDetail="true" />
<pe:ckEditor id="editor" value="#{editorController.content}" toolbar="[['Cut','Copy','Paste','PasteText','PasteFromWord','-', 'SpellChecker', 'Scayt']]">
<p:ajax event="save" listener="#{editorController.saveListener}" update="growl"/>
</pe:ckEditor
<br/>
<br/>
<pe:ckEditor id="secondEditor" value="#{editorController.secondContent}" toolbar="[['Cut','Copy','Paste','PasteText','PasteFromWord','-', 'SpellChecker', 'Scayt']]">
<p:ajax event="save" listener="#{editorController.secondSaveListener}" update="growl"/>
</pe:ckEditor>
and add the following dependency also:
<dependency>
<groupId>org.primefaces.extensions</groupId>
<artifactId>primefaces-extensions</artifactId>
<version>6.0.0</version>
</dependency>
<dependency>
<groupId>org.primefaces.extensions</groupId>
<artifactId>resources-ckeditor</artifactId>
<version>6.0.0</version>
</dependency>
see this helfull link
Getting started with primefaces extensions
I have two pages of jsf. dashboard.xhtml has a <p:poll /> tag that updates "form1" every second, while input.xhtml is just a basic crud page that updates display in dashboard.xhtml. I'm wondering because when the dashboard.xhtml is open on a different tab or a second window of browser, input.xhtml keeps losing its state and causes the view to expire ViewExpiredException. When I tried to put <o:enableRestorableView /> in template_2.xhtml, the ViewExpiredException is gone but my input values is resetting when I submit the form. The resetting is not occuring when dashboard.xhtml is not open. When it's open, the input resets randomly.
What I want to accomplish is when I input some data in the input.xhtml, I want it to display in dashboard.xhtml in realtime. Anybody knows how to do this without (ViewExpiredException)? The application runs in WebSphere 8.5(MyFaces 2.0), Primefaces 6.0, OmniFaces 1.8.3
dashboard.xhtml:
<ui:composition template="/WEB-INF/template_1.xhtml"
xmlns:p="http://primefaces.org/ui"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:o="http://omnifaces.org/ui">
<ui:define name="content">
<h:form id="form1">
<p:poll interval="1" listener="#{dashboardBacking.updateValues}" update="form1"
global="false" />
<!-- dashboard content -->
</h:form>
</ui:define>
</ui:composition>
input.xhtml:
<ui:composition template="/WEB-INF/template_2.xhtml"
xmlns:p="http://primefaces.org/ui"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:o="http://omnifaces.org/ui">
<ui:define name="content">
<h:form id="form2">
<p:panelGrid>
<p:row>
<p:column>
<p:inputText value="#{inputBacking.values.description}" />
</p:column>
</p:row>
<p:row>
<p:column>
<p:commandButton id="#{inputBacking.save}" update="form2"/>
</p:column>
</p:row>
</p:panelGrid>
</h:form>
</ui:define>
</ui:composition>
Backing bean (dashboard.xhtml):
#ManagedBean
#ViewScoped
public class DashboardBacking {
#EJB
private Dashboard dashboard;
private DashboardValues values;
#PostConstruct
public void postConstruct(){
values = new DashboardValues();
updateValues();
}
public void updateValues(){
DashboardValues newValues = dashboard.getValue();
if(!newValues.exactlyEqual(values)){
values = newValues;
}
}
public DashboardValues getValues(){
return values;
}
}
Backing bean (input.xhtml):
#ManagedBean
#ViewScoped
public class InputBacking {
#EJB
private DashboardDao dao;
private DashboardValues values;
public void save(){
dao.save(values)
}
//Getters and Setters
}
Dashboard singleton class:
#Singleton
#Startup
public class Dashboard {
#EJB
private DashboardDao dao;
private DashboardValue value;
#Schedule(second="*/5") //update dashboard value every 5 seconds
private void updater(){
value = dao.getLatest();
}
public DashvoardValue getValue(){
return value;
}
}
template_1.xhtml:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui" xmlns:o="http://omnifaces.org/ui"
xmlns:of="http://omnifaces.org/functions">
<f:view contentType="text/html">
<f:metadata>
<o:enableRestorableView />
</f:metadata>
<h:head>
</h:head>
<h:body>
<ui:insert name="content"/>
</h:body>
</f:view>
</html>
template_2.xhtml:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui" xmlns:o="http://omnifaces.org/ui"
xmlns:of="http://omnifaces.org/functions">
<f:view contentType="text/html">
<h:head>
</h:head>
<h:body>
<ui:insert name="content"/>
</h:body>
</f:view>
</html>
This is my xhtml with the main tabview is set dynamic="true" and cache="false"
<?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:p="http://primefaces.org/ui"
xmlns:pe="http://primefaces.org/ui/extensions">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</h:head>
<h:body>
<h:form id="form">
<p:commandButton id="save" value="save"
action="#{nestedTabviewTestBean.savePersonValues}" process="#form"
update="#form" />
<p:tabView activeIndex="#{nestedTabviewTestBean.activeIndex}" dynamic="true" cache="false"
value="#{nestedTabviewTestBean.tabsList}" var="tab">
<p:ajax event="tabChange" listener="#{nestedTabviewTestBean.tabChangeListener}" update="#form"></p:ajax>
<p:tab title="#{tab.title}">
<p:tabView activeIndex="0">
<p:tab title="testingNestedTabs">
<p:selectOneMenu id="selectOneMenu" value="#{nestedTabviewTestBean.activePerson.title}">
<f:selectItem itemLabel="Mr" itemValue="mr" ></f:selectItem>
<f:selectItem itemLabel="Misses" itemValue="misses" ></f:selectItem>
<f:selectItem itemLabel="Miss" itemValue="miss" ></f:selectItem>
</p:selectOneMenu>
<p:inputText id="name" value="#{nestedTabviewTestBean.activePerson.name}"></p:inputText>
<p:selectBooleanCheckbox id="majorOrMinor"
value="#{nestedTabviewTestBean.activePerson.isMajor}"></p:selectBooleanCheckbox>
</p:tab>
</p:tabView>
</p:tab>
</p:tabView>
</h:form>
</h:body>
</html>
This is my view scoped bean
public class NestedTabviewTestBean {
private List<Tab> tabsList = new ArrayList<>();
private Integer activeIndex = 0;
private List<Person> personsList = new ArrayList<>();
private Person activePerson;
#PostConstruct
public void load() {
Tab tab1 = new Tab();
tab1.setId("tab1");
tab1.setTitle("tab1");
tabsList.add(tab1);
Tab tab2 = new Tab();
tab2.setId("tab2");
tab2.setTitle("tab2");
tabsList.add(tab2);
personsList.add(new Person("mr", "Srikanth", true));
personsList.add(new Person("mr", "Madhu", false));
activePerson = personsList.get(activeIndex);
}
public void tabChangeListener(TabChangeEvent event) {
System.out.println("save start");
activePerson = personsList.get(activeIndex);
System.out.println("title :"+activePerson.getTitle()+": Name:"+activePerson.getName()+" :major :"+activePerson.getIsMajor());
System.out.println("save End");
}
public void savePersonValues() {
System.out.println("save start");
System.out.println("title :"+activePerson.getTitle()+": Name:"+activePerson.getName()+" :major :"+activePerson.getIsMajor());
System.out.println("save End");
}
}
On page load first tab content is loaded by default. Now if I click on save button the drop down values is being set to null and the checkbox value is being set to false always.
If I navigate to the last tab in main tabview and click on save button the values are properly binded.
This is kind of strange issue which I couldn't figure out.
I am using primefaces 4.0 and mojarra jsf 2.2.4
Primefaces tabview is currently a little bit broken (I'm using version 5.1). Try to avoid it or satisfy with dirty workarounds like this one:
Primefaces TabView does not maintain selectOneMenu Values
Yet another post on primefaces dialog framework.
I've been watching all of these previous posts:
Primefaces Dialog Framework - Not Working
primefaces dialog using dialog framework not popping up
Primefaces dialog framework not working while using ajax listener
I've been trying all of these but still the dialog just doesn't show up.\
I'm using primefaces 5.1.
Let me add some details.
Page with a button that should call the dialog:
<!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:form>
<p:commandButton
value="prova popup"
actionListener="#{codTribEr.chooseCodiceErario('/popup/codice-erario.xhtml')}">
</p:commandButton>
</h:form>
</html>
Java code:
package it.iwb.ubiss.poc.popup;
import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import org.primefaces.context.RequestContext;
#ManagedBean(name="codTribEr")
#ViewScoped
public class CodiceTributoErario implements Serializable{
private static final long serialVersionUID = 1L;
public void chooseCodiceErario(String s) {
RequestContext.getCurrentInstance().openDialog(s);
}
}
You use incorrect structure of JSF.
You did not use JSF Standard tags(h:head, h:body).
You pass cannot pass parameter through argument of actionListener because the actionListener only accept ActionEvent parameter. If you want to pass parameter through actionListener, you can achieve by f:attribute
The example code is shown below.
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:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>prova popup</title>
</h:head>
<h:body>
<h:form>
<p:commandButton value="prova popup"
actionListener="#{codTribEr.chooseCodiceErario}"
>
<f:attribute name="url" value="/popup/codice-erario.xhtml" />
</p:commandButton>
</h:form>
</h:body>
</html>
managedbean
package it.iwb.ubiss.poc.popup;
import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.event.ActionEvent;
import org.primefaces.context.RequestContext;
#ManagedBean(name = "codTribEr")
#ViewScoped
public class CodiceTributoErario implements Serializable {
private static final long serialVersionUID = 1L;
public void chooseCodiceErario(ActionEvent event) {
String url = (String)event.getComponent().getAttributes().get("url");
System.out.println(url);
RequestContext.getCurrentInstance().openDialog(url);
}
}
codice-erario.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:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>codice-erario</title>
</h:head>
<h:body>
Show codice-erario.xhtml
</h:body>
</html>