Creating a HelloWorld application using PrimeFaces Extensions
After installing and configuring the PrimeFaces Extensions environment, we have to add the PrimeFaces Extensions xmlns:pe="http://primefaces.org/ui/extensions" namespace in the web page to work with the extension components. You should have at least one PF Extensions component on the XHTML page, otherwise the core JavaScript with the namespace PrimeFacesExt will not be loaded.
Let us create a simple HelloWorld application to make sure PrimeFaces Extensions has been installed and configured properly.
First, we will create the layout.xhtml page, which will render the HelloWorld message in the center pane of the layout component as shown in the following code (this layout can be used to maintain the templating mechanism of the web pages):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:pe="http://primefaces.org/ui/extensions">
<f:view contentType="text/html" locale="en">
<pe:head title="PrimeFaces Extensions HelloWorld" shortcutIcon="#{request.contextPath}/favicon.ico">
<f:facet name="first">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="pragma" content="no-cache"/>
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="expires" content="0"/>
</f:facet>
</pe:head>
<h:body>
<pe:layout resizerTip="Resize Me" togglerTipClosed="Open Me" togglerTipOpen="Close Me">
<pe:layoutPane position="north">
North Block
</pe:layoutPane>
<pe:layoutPane position="east">
East Block
</pe:layoutPane>
<pe:layoutPane position="center">
<h1>Hello, Welcome to Primefaces Extensions world</h1>
</pe:layoutPane>
<pe:layoutPane position="west" size="200">
West Block
</pe:layoutPane>
<pe:layoutPane position="south">
South Block
</pe:layoutPane>
</pe:layout>
</h:body>
</f:view>
</html>In the code section, we used pe:head instead of the standard JSF h:head. There is not much difference between these two tags, but pe:head only provides two additional properties named title and shortcutIcon.
Just build and run the HelloWorld application using Maven as your build tool. Then make a request to the browser using the following URL path:
http://localhost:8080/helloworld/layout.jsf
After you have made the browser request, you should see something like the following screenshot:
Now, the application will render or output the helloworld greeting message in the layout component.
