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.

TagPanel
Component Classorg.primefaces.component.panel.Panel
Component Typeorg.primefaces.component.Panel
Component Familyorg.primefaces.component
Renderer Typeorg.primefaces.component.PanelRenderer
Renderer Classorg.primefaces.component.panel.PanelRenderer

Primefaces Panel Attributes

NameDefaultTypeDescription
idnullStringUnique identifier of the component
renderedtrueBooleanBoolean value to specify the rendering of the component, when set to false component will not be rendered.
bindingnullObjectAn el expression that maps to a server side UIComponent instance in a backing bean
headernullStringHeader text
footernullStringFooter text
toggleablefalseBooleanMakes panel toggleable.
toggleSpeed1000IntegerSpeed of toggling in milliseconds
collapsedfalseBooleanRenders a toggleable panel as collapsed.
stylenullStringStyle of the panel
styleClassnullStringStyle class of the panel
closablefalseBooleanMake panel closable.
closeSpeed1000IntegerSpeed of closing effect in milliseconds
visibletrueBooleanRenders panel as visible.
closeTitlenullStringTooltip for the close button.
toggleTitlenullStringTooltip for the toggle button.
menuTitlenullStringTooltip for the menu button.
toggleOrientationverticalStringDefines the orientation of the toggling, valid values are vertical and horizontal.
widgetVarnullStringName of the client side widget

Primefaces Panel Example

Typically, Panel used for encapsulating other components.

panel.xhtml

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui"> <h:head> <title>Panel, PanelGrid, PanelMenu</title> <script name="jquery/jquery.js" library="primefaces"></script> </h:head> <h:form> <p:panel> <p:outputLabel value="Name of tutorial you're looking for:"></p:outputLabel> <p:inputText value="#{panelManagedBean.tutorial}"></p:inputText> <p:commandButton value="Search" action="#{panelManagedBean.search}" update="result"></p:commandButton> <p:dataTable value="#{panelManagedBean.tutorials}" var="tutorial" id="result"> <p:column> <f:facet name="header"> <p:outputLabel value="Tutorial Name"></p:outputLabel> </f:facet> <p:outputLabel value="#{tutorial}"></p:outputLabel> </p:column> </p:dataTable> </p:panel> </h:form></html>

PanelManagedBean.java

package com.journaldev.prime.faces.beans;import java.util.ArrayList;import java.util.List;import javax.faces.bean.ManagedBean;import javax.faces.bean.SessionScoped;@[email protected] class PanelManagedBean { private String tutorial; private List<String> tutorials = new ArrayList<String>(); public String getTutorial() { return tutorial; } public void setTutorial(String tutorial) { this.tutorial = tutorial; } public List<String> getTutorials() { return tutorials; } public void setTutorials(List<String> tutorials) { this.tutorials = tutorials; } public String search(){ for(int i = 1 ; i < 11; i++){ this.tutorials.add(this.tutorial+" Tutorial "+i); } return ""; }}

Primefaces Panel, PanelGrid & PanelMenu Example Tutorial

Primefaces Panel – Header & Footer

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

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui"> <h:head> <title>Panel, PanelGrid, PanelMenu</title> <script name="jquery/jquery.js" library="primefaces"></script> </h:head> <h:form> <p:panel> <f:facet name="header"> <p:outputLabel value="Tutorials Provided"></p:outputLabel> </f:facet> <p:outputLabel value="Name of tutorial you're looking for:"></p:outputLabel> <p:inputText value="#{panelManagedBean.tutorial}"></p:inputText> <p:commandButton value="Search" action="#{panelManagedBean.search}" update="result"></p:commandButton> <p:dataTable value="#{panelManagedBean.tutorials}" var="tutorial" id="result"> <p:column> <f:facet name="header"> <p:outputLabel value="Tutorial Name"></p:outputLabel> </f:facet> <p:outputLabel value="#{tutorial}"></p:outputLabel> </p:column> <f:facet name="footer"> <p:outputLabel value="Provided By Jouranldev.com"></p:outputLabel> </f:facet> </p:dataTable> </p:panel> </h:form></html>

Primefaces Panel, PanelGrid & PanelMenu Example Tutorial

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

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui"> <h:head> <title>Panel, PanelGrid, PanelMenu</title> <script name="jquery/jquery.js" library="primefaces"></script> </h:head> <h:form> <p:panel id="Panel1" toggleable="true" closable="true"> <p:ajax event="toggle" listener="#{panelManagedBean.toggleHandle}"></p:ajax> <p:ajax event="close" listener="#{panelManagedBean.closeHandle}"></p:ajax> <f:facet name="header"> <p:outputLabel value="Tutorials Provided"></p:outputLabel> </f:facet> <p:outputLabel value="Name of tutorial you're looking for:"></p:outputLabel> <p:inputText value="#{panelManagedBean.tutorial}"></p:inputText> <p:commandButton value="Search" action="#{panelManagedBean.search}" update="result"></p:commandButton> <p:dataTable value="#{panelManagedBean.tutorials}" var="tutorial" id="result"> <p:column> <f:facet name="header"> <p:outputLabel value="Tutorial Name"></p:outputLabel> </f:facet> <p:outputLabel value="#{tutorial}"></p:outputLabel> </p:column> <f:facet name="footer"> <p:outputLabel value="Provided By Jouranldev.com"></p:outputLabel> </f:facet> </p:dataTable> </p:panel> </h:form></html>

PanelManagedBaen.java

package com.journaldev.prime.faces.beans;import java.util.ArrayList;import java.util.List;import javax.faces.bean.ManagedBean;import javax.faces.bean.SessionScoped;import org.primefaces.event.CloseEvent;import org.primefaces.event.ToggleEvent;@[email protected] class PanelManagedBean { private String tutorial; private List<String> tutorials = new ArrayList<String>(); public String getTutorial() { return tutorial; } public void setTutorial(String tutorial) { this.tutorial = tutorial; } public List<String> getTutorials() { return tutorials; } public void setTutorials(List<String> tutorials) { this.tutorials = tutorials; } public String search(){ for(int i = 1 ; i < 11; i++){ this.tutorials.add(this.tutorial+" Tutorial "+i); } return ""; } public void toggleHandle(ToggleEvent event){ System.out.println("Panel #"+event.getComponent().getId()+" Is Toggled"); } public void closeHandle(CloseEvent event){ System.out.println("Panel #"+event.getComponent().getId()+" Is Closed"); }}

Primefaces Panel, PanelGrid & PanelMenu Example TutorialPrimefaces Panel, PanelGrid & PanelMenu Example TutorialPrimefaces Panel, PanelGrid & PanelMenu Example Tutorial

Primefaces Panel – Popup Menu

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

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui"> <h:head> <title>Panel, PanelGrid, PanelMenu</title> <script name="jquery/jquery.js" library="primefaces"></script> </h:head> <h:form> <p:panel id="Panel1" closable="true" toggleable="true"> <f:facet name="options"> <p:menu> <p:menuitem value="Primefaces Tutorials"></p:menuitem> <p:menuitem value="Hibernate Tutorials"></p:menuitem> <p:menuitem value="JPA Tutorials"></p:menuitem> </p:menu> </f:facet> <p:ajax event="toggle" listener="#{panelManagedBean.toggleHandle}"></p:ajax> <p:ajax event="close" listener="#{panelManagedBean.closeHandle}"></p:ajax> <f:facet name="header"> <p:outputLabel value="Tutorials Provided"></p:outputLabel> </f:facet> <p:outputLabel value="Name of tutorial you're looking for:"></p:outputLabel> <p:inputText value="#{panelManagedBean.tutorial}"></p:inputText> <p:commandButton value="Search" action="#{panelManagedBean.search}" update="result"></p:commandButton> <p:dataTable value="#{panelManagedBean.tutorials}" var="tutorial" id="result"> <p:column> <f:facet name="header"> <p:outputLabel value="Tutorial Name"></p:outputLabel> </f:facet> <p:outputLabel value="#{tutorial}"></p:outputLabel> </p:column> <f:facet name="footer"> <p:outputLabel value="Provided By Jouranldev.com"></p:outputLabel> </f:facet> </p:dataTable> </p:panel> </h:form></html>

Primefaces Panel, PanelGrid & PanelMenu Example Tutorial

Primefaces Panel – Custom Actions

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

panel-CustomActions.xhtml

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui"> <h:head> <title>Panel, PanelGrid, PanelMenu</title> <script name="jquery/jquery.js" library="primefaces"></script> </h:head> <h:form> <p:panel id="Panel1" closable="true" toggleable="true"> <f:facet name="actions"> <p:commandButton value="Search Using Tutorial's Author"></p:commandButton> <p:commandButton value="Search Using Tutorial's Name"></p:commandButton> <p:commandButton value="Search Using Tutorial's Category"></p:commandButton> </f:facet> <p:ajax event="toggle" listener="#{panelManagedBean.toggleHandle}"></p:ajax> <p:ajax event="close" listener="#{panelManagedBean.closeHandle}"></p:ajax> <f:facet name="header"> <p:outputLabel value="Tutorials Provided"></p:outputLabel> </f:facet> <p:outputLabel value="Name of tutorial you're looking for:"></p:outputLabel> <p:inputText value="#{panelManagedBean.tutorial}"></p:inputText> <p:commandButton value="Search" action="#{panelManagedBean.search}" update="result"></p:commandButton> <p:dataTable value="#{panelManagedBean.tutorials}" var="tutorial" id="result"> <p:column> <f:facet name="header"> <p:outputLabel value="Tutorial Name"></p:outputLabel> </f:facet> <p:outputLabel value="#{tutorial}"></p:outputLabel> </p:column> <f:facet name="footer"> <p:outputLabel value="Provided By Jouranldev.com"></p:outputLabel> </f:facet> </p:dataTable> </p:panel> </h:form></html>

Primefaces Panel, PanelGrid & PanelMenu Example Tutorial

Primefaces PanelGrid

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

TagPanelGrid
Component Classorg.primefaces.component.panelgrid.PanelGridRenderer
Component Typeorg.primefaces.component.PanelGrid
Component Familyorg.primefaces.component
Renderer Typeorg.primefaces.component.PanelGridRenderer
Renderer Classorg.primefaces.component.panelgrid.PanelGridRenderer

Primefaces PanelGrid Attributes

NameDefaultTypeDescription
idnullStringUnique identifier of the component
renderedtrueBooleanBoolean value to specify the rendering of the component, when set to false component will not be rendered.
bindingnullObjectAn el expression that maps to a server side UIComponent instance in a backing bean
columnsfalseIntegerNumber of columns in grid.
stylenullStringInline style of the panel.
styleClassnullStringStyle class of the panel.
columnClassesnullStringComma 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

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui"> <h:head> <title>Panel, PanelGrid, PanelMenu</title> <script name="jquery/jquery.js" library="primefaces"></script> </h:head> <h:form> <p:panelGrid columns="2"> <p:outputLabel value="Component"></p:outputLabel> <p:outputLabel value="Component"></p:outputLabel> <p:outputLabel value="Component"></p:outputLabel> </p:panelGrid> </h:form></html>

Primefaces Panel, PanelGrid & PanelMenu Example Tutorial

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

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui"> <h:head> <title>Panel, PanelGrid, PanelMenu</title> <script name="jquery/jquery.js" library="primefaces"></script> </h:head> <h:form> <p:panelGrid columns="2"> <p:panelGrid columns="2"> <p:outputLabel value="Component"></p:outputLabel> <p:outputLabel value="Component"></p:outputLabel> </p:panelGrid> <p:outputLabel value="Component"></p:outputLabel> </p:panelGrid> </h:form></html>

Primefaces Panel, PanelGrid & PanelMenu Example Tutorial

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

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui"> <h:head> <title>Panel, PanelGrid, PanelMenu</title> <script name="jquery/jquery.js" library="primefaces"></script> </h:head> <h:form> <p:panelGrid columns="2"> <f:facet name="header"> <p:outputLabel value="Header"></p:outputLabel> </f:facet> <p:panelGrid columns="2"> <p:outputLabel value="Component"></p:outputLabel> <p:outputLabel value="Component"></p:outputLabel> </p:panelGrid> <p:outputLabel value="Component"></p:outputLabel> <f:facet name="footer"> <p:outputLabel value="Footer"></p:outputLabel> </f:facet> </p:panelGrid> </h:form></html>

Primefaces Panel, PanelGrid & PanelMenu Example Tutorial

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

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui"> <h:head> <title>Panel, PanelGrid, PanelMenu</title> <script name="jquery/jquery.js" library="primefaces"></script> </h:head> <h:form> <p:panelGrid> <p:row> <p:column> <p:outputLabel value="Enter Username:"></p:outputLabel> </p:column> <p:column> <p:inputText></p:inputText> </p:column> </p:row> <p:row> <p:column> <p:outputLabel value="Enter Password:"></p:outputLabel> </p:column> <p:column> <p:inputText></p:inputText> </p:column> </p:row> <p:row> <p:column> <p:commandButton value="Login"></p:commandButton> </p:column> <p:column> </p:column> </p:row> </p:panelGrid> </h:form></html>

Primefaces Panel, PanelGrid & PanelMenu Example Tutorial

Primefaces PanelMenu

PanelMenu is hybrid component of accordionPanel and tree component.

TagPanelMenu
Component Classorg.primefaces.component.panelmenu.PanelMenu
Component Typeorg.primefaces.component.PanelMenu
Component Familyorg.primefaces.component
Renderer Typeorg.primefaces.component.PanelMenuRenderer
Renderer Classorg.primefaces.component.panelmenu.PanelMenuRenderer

Primefaces PanelMenu Attributes

NameDefaultTypeDescription
idnullStringUnique identifier of the component
renderedtrueBooleanBoolean value to specify the rendering of the component, when set to false component will not be rendered.
bindingnullObjectAn el expression that maps to a server side UIComponent instance in a backing bean
modelnullMenuModelMenuModel instance to build menu dynamically.
stylenullStringInline style of the component.
styleClassnullStringStyle class of the component.
widgetVarnullStringName of the client side widget.

Primefaces PanelMenu Example

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

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui"><h:head> <title>Panel, PanelGrid, PanelMenu</title> <script name="jquery/jquery.js" library="primefaces"></script></h:head><h:form> <p:panelMenu style="width:200px"> <p:submenu label="JournalDev Tutorials"> <p:submenu label="Links" icon="ui-icon-extlink"> <p:submenu label="Tutorials" icon="ui-icon-heart"> <p:menuitem value="Primefaces Tutorials" url="https://www.journaldev.com/dev/primefaces" /> <p:menuitem value="Java EE Tutorials" url="https://www.journaldev.com/dev/java/j2ee" /> </p:submenu> </p:submenu> <p:menuitem value="Go To JournalDev" url="http://www.primefaces.org" /> </p:submenu> </p:panelMenu> </h:form></html>

Primefaces Panel, PanelGrid & PanelMenu Example Tutorial

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.

Download Primefaces Panel Project
  • 49