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:

  1. To start using PrimeFaces components all we need to do is add the namespace xmlns:p=http://primefaces.org/ui in 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>
  2. Run the application and point your browser to http://localhost:8080/chapter01/helloworld.jsf. We can see the rich text editor as follows:
    Time for action – creating a HelloWorld program using PrimeFaces

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 contentType to text/html using <f:view contentType="text/html">.
本周热推：
Windows 10入门与提高新编电脑办公（Windows 10+ Office 2013版）从入门到精通完美应用RHEL 8Powershell Core 6.2 Cookbook鸿蒙应用开发教程
上一章目录下一章