Time for action – creating a HelloWorld program using PrimeFaces
Let us create a helloworld.xhtml file with the PrimeFaces namespace configuration, and use the PrimeFaces editor component to display a rich HTML editor. Perform the following steps:
- To start using PrimeFaces components all we need to do is add the namespace
xmlns:p=http://primefaces.org/uiin JSF facelets page.<!DOCTYPE html> <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"> <f:view contentType="text/html"> <h:head> <title>First PrimeFaces Page</title> </h:head> <body> <h:form> <p:editor value="Hello World, PrimeFaces Rocks!!"/> </h:form> </body> </f:view> </html> - Run the application and point your browser to
http://localhost:8080/chapter01/helloworld.jsf. We can see the rich text editor as follows:
What just happened?
We have tested PrimeFaces configuration by using PrimeFaces editor component <p:editor/>. As we have configured PrimeFaces properly, we are able to see rich HTML editor.
- Make sure you have the
<h:head>tag in your facelets page to avoid "PrimeFaces not found" JavaScript error. - To make PrimeFaces work properly on webkit layout engine-based browsers such as, Chrome/Safari, enforce
contentTypeto text/html using<f:view contentType="text/html">.
