A menu button is a button that displays multiple menu items in a popup when it is clicked on or pressed. A popup is an absolutely positioned element (overlay) in terms of CSS.
In this recipe, we will learn the structure of p:menuButton
—a JSF tag for the menuButton
component.
The p:menuButton
tag incorporates one or more menu items. The following code snippet demonstrates four menu items that send AJAX and GET requests:
<p:menuButton value="CRUD Operations" iconPos="right"> <p:menuitem value="Save" actionListener="#{menuButtonBean.save}" icon="ui-icon-disk" update="growl"/> <p:menuitem value="Update" actionListener="#{menuButtonBean.update}" icon="ui-icon-arrowrefresh-1-w" update="growl"/> <p:menuitem value="Delete" actionListener="#{menuButtonBean.delete}" icon="ui-icon-close" update="growl"/> <p:separator/> <p:menuitem value="PrimeFaces" url="http://primefaces.org"/> </p:menuButton>
The open menu looks as shown in the screenshot:
Only p:menuitem
and p:separator
are allowed as child tags by p:menuButton
. The iconPos
attribute defines the position of the displayed icon. The valid values are left
(default) and right
. We set the right
value in the example.
There is also the appendTo
attribute that defines the element that the pop-up menu is appended to. The value of this attribute is a search expression in terms of Search Expression Framework described in Chapter 1, Getting Started with PrimeFaces. A missing value means that the pop-up menu is appended to the document body. The document body is a good place for any kind of overlays when working with layouts such as p:layout
.
Menus can be created programmatically as well. This approach is described in the Creating programmatic menus recipe of this chapter.
This recipe is available in the demo web application on GitHub (https://github.com/ova2/primefaces-cookbook/tree/second-edition). Clone the project if you have not done it yet, explore the project structure, and build and deploy the WAR file on application servers compatible with Servlet 3.x, such as JBoss WildFly and Apache TomEE.
The showcase for the recipe is available at http://localhost:8080/pf-cookbook/views/chapter6/menuButton.jsf
.
3.129.210.102