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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<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>
</h:head>
<h:body>
<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>
<p:layoutUnit position="south" size="70"
style="background-color: #dddddd" resizable="false"
closable="false" collapsible="false">
Copyright 2014
<br/>
Author: J. Juneau
</p:layoutUnit>
<p:layoutUnit position="west" size="200" header="Navigation"
resizable="false" closable="false"
collapsible="true">
<ui:insert name="left"/>
</p:layoutUnit>
<p:layoutUnit position="center">
<ui:insert name="content">Content</ui:insert>
</p:layoutUnit>
</p:layout>
</h:body>
</html>
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.
