Introducing PrimeFaces Extensions | Learning PrimeFaces Extensions Development

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.

Tech Concepts

Programming languages

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Learning PrimeFaces Extensions Development

By : Sudheer Jonna

Learning PrimeFaces Extensions Development

By: Sudheer Jonna

Overview of this book

Creating a HelloWorld application using PrimeFaces Extensions

Learning PrimeFaces Extensions Development

By : Sudheer Jonna

Learning PrimeFaces Extensions Development

By: Sudheer Jonna

Overview of this book

Creating a HelloWorld application using PrimeFaces Extensions

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access