Monday, March 31, 2014

Resource Library Contracts with NetBeans 8 and PrimeFaces

It is critical to organize an application in such a way that it is easy for users to navigate and perform their work.  PrimeFaces includes a layout component that makes it easy to select the most fitting layout for your application.  Assuming that the layout should be utilized across all application views, a Facelets template should be created, and the PrimeFaces layout should be configured within the template.  

To create the template within NetBeans 8.0, add a resource library contract to the application.  To do so, right-click on the “Web Pages” application directory and then choosing “New”->”Other…”, and select “JavaServer Faces” from the category menu, and finally choose “JSF Resource Library Contract” as the file type (Figure 1). 

Figure 1:  Adding Resource Library Contract within NetBeans

On the “New JSF Resource Library Contract” dialog, enter a contract name and click on the “Create Initial Template” checkbox (Figure 2).

Figure 2: New JSF Resource Library Contract

PrimeFaces offers a number of layouts to develop a user-friendly interface.  To use the layouts, declare the PrimeFaces namespace within the template, and then specify the PrimeFaces Layout component as the first element within the body of the template.  The layout component creates a complex borderLayout model, enabling the development of sophisticated user interfaces.  To add the layout component, use the <p:layout> tag, and specify attributes to customize the layout such as style along with a number of client side callback attributes.  In this post, the fullPage="true" attribute is specified to ensure that the layout spans the entire page.

A series of layout units can be specified within the layout component, and these units are used to arrange the layout in a particular order.  There are 5 different layout units:  top, left, right, top, and bottom. Each layout unit is specified with a <p:layoutUnit> element, and the position attribute indicates where the unit should be placed within the layout.  Add <ui:insert> tags into each of the <p:layout> sections as shown in Listing 1.  The code in Listing 1 specifies a full-page layout for an application.

Listing 1:  PrimeFaces Template Layout

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns=""

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <h:outputStylesheet name="./css/default.css"/>
        <h:outputStylesheet name="./css/cssLayout.css"/>
        <ui:insert name="title">Acme Pools</ui:insert>


        <p:layout fullPage="true"> 

            <p:layoutUnit position="north" size="150" header="Acme Pools" resizable="false" closable="false" collapsible="false"> 
              <ui:insert name="top"></ui:insert>

            <p:layoutUnit position="south" size="70" style="background-color: #dddddd" resizable="false" closable="false" collapsible="false"> 
                Copyright 2014
                Author: J. Juneau

            <p:layoutUnit position="west" size="200" header="Navigation" resizable="false" closable="false" collapsible="true"> 
                <ui:insert name="left"/> 


            <p:layoutUnit position="center"> 
                <ui:insert name="content">Content</ui:insert>



After applying the template to the index view, it will resemble the layout shown in Figure 3.

Figure 3:  PrimeFaces Page Layout

The layout in the example utilizes custom animation to hide the navigation pane, and PrimeFaces provides this functionality without any additional configuration.  As you can see, PrimeFaces and NetBeans 8.0 make it easy to generate a sophisticated user layout.

No comments:

Post a Comment

Please leave a comment...