Primefaces Panel, PanelGrid & PanelMenu Example Tutorial

Welcome to Primefaces Panel and PanelGrid example tutorial. We will also look into PanelMenu that provides a way of organizing submenus and menuitems in a hierarchical form mixed with accordionPanel behavior.

Primefaces Panel

Primefaces Panel is a grouping component with content toggle, close and menu integration.

Tag Panel
Component Class org.primefaces.component.panel.Panel
Component Type org.primefaces.component.Panel
Component Family org.primefaces.component
Renderer Type org.primefaces.component.PanelRenderer
Renderer Class org.primefaces.component.panel.PanelRenderer

Primefaces Panel Attributes

Name Default Type Description
id null String Unique identifier of the component
rendered true Boolean Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding null Object An el expression that maps to a server side UIComponent instance in a backing bean
header null String Header text
footer null String Footer text
toggleable false Boolean Makes panel toggleable.
toggleSpeed 1000 Integer Speed of toggling in milliseconds
collapsed false Boolean Renders a toggleable panel as collapsed.
style null String Style of the panel
styleClass null String Style class of the panel
closable false Boolean Make panel closable.
closeSpeed 1000 Integer Speed of closing effect in milliseconds
visible true Boolean Renders panel as visible.
closeTitle null String Tooltip for the close button.
toggleTitle null String Tooltip for the toggle button.
menuTitle null String Tooltip for the menu button.
toggleOrientation vertical String Defines the orientation of the toggling, valid values are vertical and horizontal.
widgetVar null String Name of the client side widget

Primefaces Panel Example

Typically, Panel used for encapsulati
ng other components.

panel.xhtml

PanelManagedBean.java

Panel-Custom-Actions-1024x216

Primefaces provides you capability of specifying of Header and Footer by adding two facet components; one for header and the other for footer.

panel.xhtml

Panel-Custom-Actions-1024x216

Primefaces Panel – Ajax Behavior Events

Primefaces provides you custom ajax behavior events that can be listened against Panel component. Toggling and closing are the only ajax events that might be fired and listened as well. By setting toggleable and closeable attribute to true, you are mostly ready for listening these events. One remaining step is by providing p:ajax for determining the methods that are responsible for handling these events.

panel.xhtml

PanelManagedBaen.java

Panel has built-in support to display a fully customizable popup menu. For make use Panel component as a popup menu, you should define facet options which contained your defined menu.

panel-PopupMenu.xhtml

Primefaces Panel – Custom Actions

It’s also permitted to add custom actions into your panel titlebar by using facet actions.

panel-CustomActions.xhtml

Primefaces PanelGrid

PanelGrid is an extension to the standard panelGrid component with additional features such as theming and colspan-rowspan.

Tag PanelGrid
Component Class org.primefaces.component.panelgrid.PanelGridRenderer
Component Type org.primefaces.component.PanelGrid
Component Family org.primefaces.component
Renderer Type org.primefaces.component.PanelGridRenderer
Renderer Class org.primefaces.component.panelgrid.PanelGridRenderer

Primefaces PanelGrid Attributes

Name Default Type Description
id null String Unique identifier of the component
rendered true Boolean Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding null Object An el expression that maps to a server side UIComponent instance in a backing bean
columns false Integer Number of columns in grid.
style null String Inline style of the panel.
styleClass null String Style class of the panel.
columnClasses null String Comma separated list of column style classes.

Primefaces PanelGrid Example

PanelGrid component is used mainly for laying out form’s components into rows and columns. Typically, you specify columns attribute to determine the number of columns your panelGrid component has. However, no need to specify the number of rows, every defined component has occupied one column and once the number of columns has reached a new row will be added.

panelGrid.xhtml

PanelGrid-Simple-Example-Inner-PanelGrid

Just to clarify, your PanelGrid has defined three components inside, with number of columns equal for 2. The first and second components will occupy first and second columns respectively. A new row will be added into your PanelGrid for holding last defined component and for sure it will be located at the long of the first column. You can make use of different PanelGrid inside each other, every single PanelGrid will occupy one column as well.

panelGrid.xhtml

PanelGrid-Simple-Example-Inner-PanelGrid

All of your components are located at a single row, for sure that’s happened because of using inner PanelGrid which has located at the first column.

Primefaces PanelGrid – Header And Footer

PanelGrid provides facets for Header and Footer as Panel component does well.

panelGrid.xhtml

PanelGrid-Simple-Example-Header-And-Footer

Primefaces PanelGrid – Rowspan & Colspan

PanelGrid supports rowspan and colspan as well, in this case row and column markup should be defined manually.

panelGrid-Rowspan-Colspan.xhtml

PanelGrid-Simple-Example-Rowspan-And-Colspan

PanelMenu is hybrid component of accordionPanel and tree component.

Tag PanelMenu
Component Class org.primefaces.component.panelmenu.PanelMenu
Component Type org.primefaces.component.PanelMenu
Component Family org.primefaces.component
Renderer Type org.primefaces.component.PanelMenuRenderer
Renderer Class org.primefaces.component.panelmenu.PanelMenuRenderer

Name Default Type Description
id null String Unique identifier of the component
rendered true Boolean Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding null Object An el expression that maps to a server side UIComponent instance in a backing bean
model null MenuModel MenuModel instance to build menu dynamically.
style null String Inline style of the component.
styleClass null String Style class of the component.
widgetVar null String Name of the client side widget.

PanelMenu consists of submenus and menuitems. First level of submenu are rendered as AccordionPanel and descendant submenus are rendered as tree nodes. Like in any other menu components had discussed before, menuitems can be used for achieving ajax, non-ajax and simple GET requests.

panelMenu.xhtml

Primefaces PanelMenu

Primefaces Panel PanelGrip and PanelMenu Summary

This tutorial provides you a detailed explanation for how can you use Panel, PanelGrid and PanelMenu for organizing and laying out your different components. Contribute us by commenting below and find given source code.

By admin

Leave a Reply