65
PrimeFaces User Guide
Name
Default
Type
Description
hideEvent
click
String
Event on target to hide the panel.
showEffect
null
String
Animation to display when showing the panel.
hideEffect
null
String
Animation to display when hiding the panel.
appendToBody
0
Boolean When true, panel is appended to document body.
onShow
null
String
Client side callback to execute when panel is shown.
onHide
null
String
Client side callback to execute when panel is hidden.
my
left top
String
Position of the panel relative to the target.
at
left bottom
String
Position of the target relative to the panel.
dynamic
false
Boolean Defines content loading mode.
dismissable
true
Boolean When set true, clicking outside of the panel hides the
overlay.
showCloseIcon
false
Boolean Displays a close icon to hide the overlay, default is false.
Getting started with OverlayPanel
OverlayPanel needs a component as a target in addition to the content to display. Example below
demonstrates an overlayPanel attached to a button to show a chart in a popup.
<p:commandButton id="chartBtn" value="Basic" type="button" />
<p:overlayPanel for="chartBtn">
<p:pieChart value="#{chartBean.pieModel}" legendPosition="w"
title="Sample Pie Chart" style="width:400px;height:300px" />
</p:overlayPanel>
Events
Default event on target to show and hide the panel is mousedown. These are customized using
showEvent and hideEvent options.
<p:commandButton id="chartBtn" value="Basic" type="button" />
<p:overlayPanel showEvent="mouseover" hideEvent="mousedown">
//content
</p:overlayPanel>
Effects
blind, bounce, clip, drop, explode, fold, highlight, puff, pulsate, scale, shake, size, slide are
available values for showEffect and hideEffect options if you’d like display animations.
342
35
PrimeFaces User Guide
Positioning
By default, left top corner of panel is aligned to left bottom corner of the target if there is enough
space in window viewport, if not the position is flipped on the fly to find the best location to
display. In order to customize the position use my and at options that takes combinations of left,
right, bottom and top e.g. “right bottom”.
Dynamic Mode
Dynamic mode enables lazy loading of the content, in this mode content of the panel is not rendered
on page load and loaded just before panel is shown. Also content is cached so consecutive displays
do not load the content again. This feature is useful to reduce the page size and reduce page load
time.
Standalone
OverlayPanel is positioned relative to its target based on a one-to-one relationship, this causes
limitations when used inside a data iteration because every row needs an overlaypanel which is far
from ideal, requires client side memory and slows down page performance. Instead a single
overlayPanel can be used by calling show passing the client id of the component to be relatively
positioned. See overlayPanel demo
in showcase for an example.
Skinning
Panel resides in a main container which style and styleClass attributes apply. Following is the list of
structural style classes;
Style Class
Applies
.ui-overlaypanel
Main container element of panel
As skinning style classes are global, see the main theming section for more information.
Tips
•Enable appendToBody when overlayPanel is in other panel components like layout, dialog ...
•
If there is a component with a popup like calendar, autocomplete placed inside the overlay panel,
popup part might exceed the boundaries of panel and clicking the outside hides the panel. This is
undesirable so in cases like this use overlayPanel with
dismissable false and optional
showCloseIcon settings.
343
65
PrimeFaces User Guide
3.84 Panel
Panel is a grouping component with content toggle, close and menu integration.
Info
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
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
344
64
PrimeFaces User Guide
Name
Default
Type
Description
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
Getting started with Panel
Panel encapsulates other components.
<p:panel>
//Child components here...
</p:panel>
Header and Footer
Header and Footer texts can be provided by header and footer attributes or the corresponding facets.
When same attribute and facet name are used, facet will be used.
<p:panel header="Header Text">
<f:facet name="footer">
<h:outputText value="Footer Text" />
</f:facet>
//Child components here...
</p:panel>
Ajax Behavior Events
Panel provides custom ajax behavior events for toggling and closing features.
Event
Listener Parameter
Fired
toggle
org.primefaces.event.ToggleEvent
When panel is expanded or collapsed.
close
org.primefaces.event.CloseEvent
When panel is closed.
345
43
PrimeFaces User Guide
Popup Menu
Panel has built-in support to display a fully customizable popup menu, an icon to display the menu
is placed at top-right corner. This feature is enabled by defining a menu component and defining it
as the options facet.
<p:panel closable="true">
//Child components here...
<f:facet name="options">
<p:menu>
//Menuitems
</p:menu>
</f:facet>
</p:panel>
Custom Action
If you’d like to add custom actions to panel titlebar, use actions facet with icon markup;
<p:panel>
<f:facet name="actions">
<h:commandLink styleClass="ui-panel-titlebar-icon
ui-corner-all ui-state-default">
<h:outputText styleClass="ui-icon ui-icon-help" />
</h:commandLink>
</f:facet>
//content
</p:panel>
Skinning Panel
Panel resides in a main container which style and styleClass attributes apply. Following is the list of
structural style classes;
Style Class
Applies
.ui-panel
Main container element of panel
.ui-panel-titlebar
Header container
.ui-panel-title
Header text
.ui-panel-titlebar-icon
Option icon in header
.ui-panel-content
Panel content
.ui-panel-footer
Panel footer
As skinning style classes are global, see the main theming section for more information.
346
42
PrimeFaces User Guide
3.85 PanelGrid
PanelGrid is an extension to the standard panelGrid component with additional features such as
theming and colspan-rowspan.
Info
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
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.
347
45
PrimeFaces User Guide
Name
Default
Type
Description
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.
layout
tabular
String
Displays data in a 'table' layout or 'grid' layout. The
grid layout is a responsive layout.
Getting started with PanelGrid
Basic usage of panelGrid is same as the standard one.
<p:panelGrid columns="2">
<h:outputLabel for="firstname" value="Firstname:" />
<p:inputText id="firstname" value="#{bean.firstname}" label="Firstname" />
<h:outputLabel for="surname" value="Surname:" />
<p:inputText id="surname" value="#{bean.surname}" label="Surname"/>
</p:panelGrid>
Header and Footer
PanelGrid provides facets for header and footer content.
<p:panelGrid columns="2">
<f:facet name="header">
Basic PanelGrid
</f:facet>
<h:outputLabel for="firstname" value="Firstname: *" />
<p:inputText id="firstname" value="#{bean.firstname}" label="Firstname" />
<h:outputLabel for="surname" value="Surname: *" />
<p:inputText id="surname" value="#{bean.surname}" label="Surname"/>
<f:facet name="footer">
<p:commandButton type="button" value="Save" icon="ui-icon-check" />
</f:facet>
</p:panelGrid>
348
40
PrimeFaces User Guide
Rowspan and Colspan
PanelGrid supports rowspan and colspan options as well, in this case row and column markup
should be defined manually.
<p:panelGrid>
<p:row>
<p:column rowspan="3">AAA</p:column>
<p:column colspan="4">BBB</p:column>
</p:row>
<p:row>
<p:column colspan="2">CCC</p:column>
<p:column colspan="2">DDD</p:column>
</p:row>
<p:row>
<p:column>EEE</p:column>
<p:column>FFF</p:column>
<p:column>GGG</p:column>
<p:column>HHH</p:column>
</p:row>
</p:panelGrid>
* Note that this approach does not support grid layout.
Borders
To remove borders add ui-noborder style class to the component using styleClass attribute.
Skinning
PanelGrid resides in a main container which style and styleClass attributes apply. Following is the
list of structural style classes;
Style Class
Applies
.ui-panelgrid
Main container element of panelGrid.
.ui-panelgrid-header
Header.
.ui-panelgrid-footer
Footer.
.ui-panelgrid-even
Even numbered rows.
.ui-panelgrid-odd
Odd numbered rows.
As skinning style classes are global, see the main theming section for more information.
349
53
PrimeFaces User Guide
3.86 PanelMenu
PanelMenu is a hybrid component of accordionPanel and tree components.
Info
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
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
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.
350
Documents you may be interested
Documents you may be interested
