86

PrimeFaces Layout

It is a highly customizable borderLayout model. It is easy to create complex layouts even if we are not familiar with web design. It consists of 5 different layout units which are top, left, center, right and bottom. We can refer that as east, west, north, south and center.

PrimeFaces provides <p:layout> component which is used to layout our page in JSF application.

Layout Attributes

Attribute	Default value	Type	Description
rendered	true	Boolean	It takes boolean value to specify the rendering of the component.
fullPage	false	Boolean	It specifies whether layout should span all page or not.
style	null	String	It is used to set style to apply on container element.
onResize	null	String	It executes when a layout unit is resized.
onClose	null	String	It executes when a layout unit is closed.
onToggle	null	String	It executes when a layout unit is toggled.
resizeTitle	null	String	It is used to set title label of the resize button.
collapseTitle	null	String	It is used to set title label of the collapse button.
expandTitle	null	String	It is used to set title label of the expand button.
closeTitle	null	String	It is used to set title label of the close button.

Example

Here, in the following example, we are implementing <p:layout> component. This example contains the following files.

JSF File

// layout.xhtml

Output: