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
Related
I am trying to disable the combobox when it processes the ajax event, but it sends null to the bean setter instead of the selected value. It sends the correct value once I remove the code onstart="PF('testA').disable();".
Does anyone have a solution for this. Thanks.
I am using Primefaces 6.2, JSF2.2, Java 7 and Glassfish 4.1.
<?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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</h:head>
<h:body>
<h:form id="themeForm">
<p:selectOneMenu value="#{selectOneMenuViewA.theme}" widgetVar="testA">
<p:ajax process="#form" event="itemSelect" update=":themeForm:themeId" onstart="PF('testA').disable();" oncomplete="PF('testA').enable()"/>
<f:selectItems value="#{selectOneMenuViewA.themes}" var="theme" itemLabel="#{theme}" itemValue="#{theme}" />
</p:selectOneMenu>
<h:outputText id="themeId" value="#{selectOneMenuViewA.theme}"/>
</h:form>
</h:body>
public class SelectOneMenuViewA {
private String theme;
private List<String> themes;
#PostConstruct
public void init() {
themes = Arrays.asList("a", "b", "c");
}
public String getTheme() {
return theme;
}
public void setTheme(String theme) {
this.theme = theme;
}
public List<String> getThemes() {
return themes;
}
}
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 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
This question already has answers here:
commandButton/commandLink/ajax action/listener method not invoked or input value not set/updated
(12 answers)
Closed 5 years ago.
Am a newbie to JSF. Am using JSF 2 and primefaces 4.0 in my application. As stated in the Title, the input value given in the xhtml page, does not set the value to the ManagedBean. I have tried all the possible combination.
growlMessage.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<h:form>
<p:growl id="growl" showDetail="true" sticky="true" />
<p:panel id="panelID" header="Growl">
<h:panelGrid columns="2" cellpadding="5">
<h:outputLabel for="msg" value="Message:" />
<p:inputText id="msg" value="#{growlView.message}" required="true" />
</h:panelGrid>
<p:commandButton value="Save" actionListener="#{growlView.saveMessage}"/>
</p:panel>
</h:form>
</h:body>
</html>
`
GrowlView.java:
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 GrowlView implements Serializable{
private String message;
public GrowlView() {
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
public void saveMessage(){
System.out.println("##### hello");
System.out.println("#####"+ getMessage());
FacesContext context = FacesContext.getCurrentInstance();
context.addMessage(null, new FacesMessage("Successful", "Your message: "+message));
context.addMessage(null, new FacesMessage("Second message", "Additional Message details"));
}
}
Do you have a good reason to use JSF 2.0 instead of 2.2? You should use CDI instead of JSF managed beans, which is more or less deprecated. So, use
#Named
#ViewScoped
public class GrowlView implements Serializable
Be sure the ViewScoped annotation is from javax.faces.view. And the beginning of the xhtml should use the new namespace:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
Your commandButton should look like this (according to PrimeFaces showcase):
<p:commandButton value="Save" actionListener="#{growlView.saveMessage}" update="growl"/>
Have you tried setting a larger scope to your managed bean, for example #SessionScoped ?
(just for testing purposes). So you could exclude a possible scope problem.
try this following code: using the process and partialSubmit attributes:
<p:commandButton value="Save" actionListener="#{growlView.saveMessage}" update="growl" process="#form" partialSubmit="true"/>
hy,
change for
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<h:form>
<p:growl id="growl" showDetail="true" sticky="true" autoUpdate="true"/>
<p:panel id="panelID" header="Growl">
<h:panelGrid columns="2" cellpadding="5">
<h:outputLabel for="msg" value="Message:" />
<p:inputText id="msg" value="#{pageView.message}" required="true" />
</h:panelGrid>
<p:commandButton value="Save" action="#{pageView.saveMessage}" update="growl"/>
</p:panel>
</h:form>
</h:body>
</html>
and replace
#ManagedBean
with
#ManagedBean(name="pageView")