The major aim of this tutorial is to cover the main menu components that get used with Primefaces implementation. Typically, a huge amount of applications spread over internet use a different form of menus. This tutorial will cover the following types of menu:
- Menu: Is a navigation component with submenus and menu items.
- MenuBar: Is a horizontal navigation component.
- MenuButton: Is used to display different commands in a popup menu.
- TieredMenu: Is used to display nested submenus with overlays.
- SlideMenu: Is used to display nested submenus with sliding animation.
Let’s get started explaining all of these menu types to see all of those featured functionalities that Primefaces provide for this kind of components.
Primefaces Menu – Basic Info
Primefaces Menu – Attributes
Primefaces Menu – Getting Started
A menu is composed of submenus and menuitems. Submenus are used to group menuitems, while menuitems correspond to those actions required. Following example shows you the most simplest use of Menu component.
index.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:ui="https://java.sun.com/jsf/facelets" xmlns:h="https://java.sun.com/jsf/html" xmlns:f="https://java.sun.com/jsf/core" xmlns:p="https://primefaces.org/ui"> <h:head> <script name="jquery/jquery.js" library="primefaces"></script> </h:head> <h:form> <p:menu> <p:submenu label="File"> <p:menuitem value="Open"></p:menuitem> <p:menuitem value="Edit"></p:menuitem> <p:separator/> <p:menuitem value="Exit"></p:menuitem> </p:submenu> <p:submenu label="Help"> <p:menuitem value="About Primefaces"></p:menuitem> <p:menuitem value="Contact Us"></p:menuitem> <p:separator/> <p:menuitem value="Help"></p:menuitem> </p:submenu> </p:menu> </h:form> </html> |
Primefaces Menu – Overlay Menu
Menu can be positioned in two ways; static or dynamic. Static position means that the menu is in normal page flow. In contrast dynamic menus isn’t in the normal flow of the page allowing them to overlay other elements. For defining menu dynamically, you should pass through below steps:
- Define your menu normally by setting overlay attribute to true and associating the menu’s trigger attribute with the idof the triggered action.
- Tune both of my and at menu’s attribute for specifying the corner of the menu to align with trigger element and corner of trigger to align with menu element, respectively.
- Pairs of left, right, bottom and top are the only values accepted for my and at attributes.
index1.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:ui="https://java.sun.com/jsf/facelets" xmlns:h="https://java.sun.com/jsf/html" xmlns:f="https://java.sun.com/jsf/core" xmlns:p="https://primefaces.org/ui"> <h:head> <script name="jquery/jquery.js" library="primefaces"></script> </h:head> <h:form> <p:menu overlay="true" trigger="triggerButton" my="left top" at="right top"> <p:submenu label="File"> <p:menuitem value="Open"></p:menuitem> <p:menuitem value="Edit"></p:menuitem> <p:separator/> <p:menuitem value="Exit"></p:menuitem> </p:submenu> <p:submenu label="Help"> <p:menuitem value="About Primefaces"></p:menuitem> <p:menuitem value="Contact Us"></p:menuitem> <p:separator/> <p:menuitem value="Help"></p:menuitem> </p:submenu> </p:menu> <p:commandButton id="triggerButton" value="Trigger Menu"></p:commandButton> </h:form> </html> |
- Once Trigger Menu action has activated, your defined menu has been displayed.
Primefaces Menu – Ajax and Non-Ajax Actions
As now, you’ve developed a simple static menu and more complicated dynamic one. Both of these menus are containing menuitems that correspond to required actions that menu aim to provide. Those menuitems are actually actions likewise p:commandButton, so it’s also applicable for you to ajaxify them.
index2.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:ui="https://java.sun.com/jsf/facelets" xmlns:h="https://java.sun.com/jsf/html" xmlns:f="https://java.sun.com/jsf/core" xmlns:p="https://primefaces.org/ui"> <h:head> <script name="jquery/jquery.js" library="primefaces"></script> </h:head> <h:form> <p:growl id="message"></p:growl> <p:menu overlay="true" trigger="triggerButton" my="left top" at="right top"> <p:submenu label="File"> <p:menuitem value="Open" action="#{menuManagedBean.openAction}" update="message"></p:menuitem> <p:menuitem value="Edit"></p:menuitem> <p:separator/> <p:menuitem value="Exit"></p:menuitem> </p:submenu> <p:submenu label="Help"> <p:menuitem value="About Primefaces"></p:menuitem> <p:menuitem value="Contact Us"></p:menuitem> <p:separator/> <p:menuitem value="Help"></p:menuitem> </p:submenu> </p:menu> <p:commandButton id="triggerButton" value="Trigger Menu"></p:commandButton> </h:form> </html> |
MenuManagedBean.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
package com.journaldev.prime.faces.beans; import javax.faces.application.FacesMessage; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; import javax.faces.context.FacesContext; @ManagedBean @SessionScoped public class MenuManagedBean { public String openAction(){ FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Open action has activiated asynchrounsly !")); return ""; } } |
Primefaces Menu – Dynamic Menus
Menus can be created programmatically as well, this is more flexible compared to the declarative approach. You can define like that menu by using org.primefaces.model.MenuModel instance. Components like p:submenu, p:menuitem and p:separator have also their default implementation that are used for define programmatic menu. Following example shows you the same business scenario that you’ve developed before, this time the menu will be rendered programmatically.
index3.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:ui="https://java.sun.com/jsf/facelets" xmlns:h="https://java.sun.com/jsf/html" xmlns:f="https://java.sun.com/jsf/core" xmlns:p="https://primefaces.org/ui"> <h:head> <script name="jquery/jquery.js" library="primefaces"></script> </h:head> <h:form> <p:growl id="message"></p:growl> <p:menu overlay="true" trigger="triggerButton" my="left top" at="right top" model="#{menuManagedBean.menu}"> </p:menu> <p:commandButton id="triggerButton" value="Trigger Menu"></p:commandButton> </h:form> </html> |
MenuManagedBean.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
package com.journaldev.prime.faces.beans; import javax.faces.application.FacesMessage; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; import javax.faces.context.FacesContext; import org.primefaces.model.menu.DefaultMenuItem; import org.primefaces.model.menu.DefaultMenuModel; import org.primefaces.model.menu.DefaultSeparator; import org.primefaces.model.menu.DefaultSubMenu; import org.primefaces.model.menu.MenuModel; @ManagedBean @SessionScoped public class MenuManagedBean { private MenuModel menu = new DefaultMenuModel(); public MenuManagedBean(){ // Create submenu DefaultSubMenu file = new DefaultSubMenu("File"); // Create submenu DefaultSubMenu help = new DefaultSubMenu("Help"); // Create menuitem DefaultMenuItem open = new DefaultMenuItem("Open"); // Create menuitem DefaultMenuItem edit = new DefaultMenuItem("Edit"); // Create menuitem DefaultMenuItem exit = new DefaultMenuItem("Exit"); // Create menuitem DefaultMenuItem about = new DefaultMenuItem("About Primefaces"); // Create menuitem DefaultMenuItem contact = new DefaultMenuItem("Contact Us"); // Create menuitem DefaultMenuItem helpMenuItem = new DefaultMenuItem("Help"); // Determine menuitem action open.setCommand("#{menuManagedBean.openAction}"); // Associate menuitem with submenu file.addElement(open); file.addElement(edit); file.addElement(new DefaultSeparator()); file.addElement(exit); help.addElement(about); help.addElement(contact); help.addElement(new DefaultSeparator()); help.addElement(helpMenuItem); // Associate submenu with menu menu.addElement(file); menu.addElement(help); } public MenuModel getMenu() { return menu; } public void setMenu(MenuModel menu) { this.menu = menu; } public String openAction(){ FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Open action has activiated asynchrounsly !")); return ""; } } |
Primefaces Menubar – Basic Info
Menubar is a horizontal navigation component.
Primefaces Menubar – Attributes
Primefaces Menubar – Getting Started
Similar to Menu component, Menubar requires p:submenu and p:menuitem as a child to compose the menubar.
Primefaces Menubar – Nested Menus
Menubar supports nested menus, that is by providing a submenus within another parent submenus.
index5.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:ui="https://java.sun.com/jsf/facelets" xmlns:h="https://java.sun.com/jsf/html" xmlns:f="https://java.sun.com/jsf/core" xmlns:p="https://primefaces.org/ui"> <h:head> <script name="jquery/jquery.js" library="primefaces"></script> </h:head> <h:form style="width:400px;"> <p:menubar> <p:submenu label="File"> <p:submenu label="Open"> <p:menuitem value="Open Excel File"></p:menuitem> <p:menuitem value="Open Word File"></p:menuitem> <p:menuitem value="Open Power Point File"></p:menuitem> </p:submenu> <p:menuitem value="Edit"></p:menuitem> <p:separator/> <p:menuitem value="Exit"></p:menuitem> </p:submenu> <p:submenu label="Help"> <p:menuitem value="About JournalDev"></p:menuitem> <p:menuitem value="Contact Us"></p:menuitem> <p:separator/> <p:menuitem value="Help"></p:menuitem> </p:submenu> </p:menubar> </h:form> </html> |
Primefaces Menubar – Root Menuitem
Menubar has also supported rooted menuitem, that is by providing a direct p:menuitem child component within p:menubar.
index6.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:ui="https://java.sun.com/jsf/facelets" xmlns:h="https://java.sun.com/jsf/html" xmlns:f="https://java.sun.com/jsf/core" xmlns:p="https://primefaces.org/ui"> <h:head> <script name="jquery/jquery.js" library="primefaces"></script> </h:head> <h:form style="width:400px;"> <p:menubar> <p:menuitem value="Open"></p:menuitem> </p:menubar> </h:form> </html> |
Primefaces Menubar – Ajax and Non-Ajax Actions
Likewise p:commandButton component, p:menuitem has also supported ajaxifying actions. You’ve already experienced this in p:menu section. You can use p:menuitem for doing actions – Ajax and Non-Ajax – and navigation as well.
Following sample shows you the different usage of p:menuitem.
index7.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:ui="https://java.sun.com/jsf/facelets" xmlns:h="https://java.sun.com/jsf/html" xmlns:f="https://java.sun.com/jsf/core" xmlns:p="https://primefaces.org/ui"> <h:head> <script name="jquery/jquery.js" library="primefaces"></script> </h:head> <h:form style="width:400px;"> <p:growl id="message"></p:growl> <p:menubar> <p:submenu label="File"> <p:submenu label="Open"> <p:menuitem value="Ajax Action" action="#{menubarManagedBean.ajaxAction}" update="message"></p:menuitem> <p:menuitem value="Non Ajax Action" action="#{menubarManagedBean.nonAjaxAction}" ajax="false"></p:menuitem> <p:menuitem value="Go To JournalDev" url="https://www.journaldev.com"></p:menuitem> </p:submenu> <p:menuitem value="Edit"></p:menuitem> <p:separator/> <p:menuitem value="Exit"></p:menuitem> </p:submenu> <p:submenu label="Help"> <p:menuitem value="About JournalDev"></p:menuitem> <p:menuitem value="Contact Us"></p:menuitem> <p:separator/> <p:menuitem value="Help"></p:menuitem> </p:submenu> </p:menubar> </h:form> </html> |
MenubarManagedBean.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
package com.journaldev.prime.faces.beans; import javax.faces.application.FacesMessage; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; import javax.faces.context.FacesContext; @ManagedBean @SessionScoped public class MenubarManagedBean { public String ajaxAction(){ FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Ajax Update")); return ""; } public String nonAjaxAction(){ return ""; } } |
Primefaces Menubar – Dynamic Menus
Menubar has also supported dynamic creation of it, you can create Menubar programmatically and providing Ajax, Non-Ajax and URL actions likewise you did in the Ajax and Non-Ajax actions section.
index8.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:ui="https://java.sun.com/jsf/facelets" xmlns:h="https://java.sun.com/jsf/html" xmlns:f="https://java.sun.com/jsf/core" xmlns:p="https://primefaces.org/ui"> <h:head> <script name="jquery/jquery.js" library="primefaces"></script> </h:head> <h:form style="width:400px;"> <p:growl id="message"></p:growl> <p:menubar model="#{menubarManagedBean.menubar}"> </p:menubar> </h:form> </html> |
MenubarManagedBean.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
package com.journaldev.prime.faces.beans; import javax.faces.application.FacesMessage; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; import javax.faces.context.FacesContext; import org.primefaces.model.menu.DefaultMenuItem; import org.primefaces.model.menu.DefaultMenuModel; import org.primefaces.model.menu.DefaultSeparator; import org.primefaces.model.menu.DefaultSubMenu; import org.primefaces.model.menu.MenuModel; @ManagedBean @SessionScoped public class MenubarManagedBean { private MenuModel menubar = new DefaultMenuModel(); public MenubarManagedBean(){ // Create submenus required DefaultSubMenu file = new DefaultSubMenu("File"); DefaultSubMenu open = new DefaultSubMenu("Open"); DefaultSubMenu help = new DefaultSubMenu("Help"); // Create menuitems required DefaultMenuItem edit = new DefaultMenuItem("Edit"); DefaultMenuItem exit = new DefaultMenuItem("Exit"); // Create menuitems required DefaultMenuItem ajaxAction = new DefaultMenuItem("Ajax Action"); ajaxAction.setUpdate("message"); ajaxAction.setCommand("#{menubarManagedBean.ajaxAction}"); DefaultMenuItem nonAjaxAction = new DefaultMenuItem("Non Ajax Action"); nonAjaxAction.setAjax(false); nonAjaxAction.setCommand("#{menubarManagedBean.nonAjaxAction}"); DefaultMenuItem urlAction = new DefaultMenuItem("Go To JournalDev"); urlAction.setUrl("https://www.journaldev.com"); DefaultMenuItem about = new DefaultMenuItem("About JournalDev"); DefaultMenuItem contactUs = new DefaultMenuItem("Contact Us"); DefaultMenuItem helpMenuItem = new DefaultMenuItem("Help"); // Associate menuitems with open submenu open.addElement(ajaxAction); open.addElement(nonAjaxAction); open.addElement(urlAction); // Associate menuitems with help submenu help.addElement(about); help.addElement(contactUs); help.addElement(new DefaultSeparator()); help.addElement(helpMenuItem); // Associate open submenu with file submenu file.addElement(open); file.addElement(edit); file.addElement(new DefaultSeparator()); file.addElement(exit); // Associate submenus with the menubar this.menubar.addElement(file); this.menubar.addElement(help); } public MenuModel getMenubar() { return menubar; } public void setMenubar(MenuModel menubar) { this.menubar = menubar; } public String ajaxAction(){ FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Ajax Update")); return ""; } public String nonAjaxAction(){ return ""; } } |
Primefaces MenuButton – Basic Info
MenuButton displays different commands in a popup menu.
Primefaces MenuButton – Attributes
Primefaces MenuButton – Getting Started
MenuButton consists of one or more menuitems. Those menuitems that would be defined have the same similarities as those already used before, Ajax, non-ajax and navigation actions are also supported here.
index9.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:ui="https://java.sun.com/jsf/facelets" xmlns:h="https://java.sun.com/jsf/html" xmlns:f="https://java.sun.com/jsf/core" xmlns:p="https://primefaces.org/ui"> <h:head> <script name="jquery/jquery.js" library="primefaces"></script> </h:head> <h:form style="width:400px;"> <p:growl id="message"></p:growl> <p:menuButton value="MenuButton"> <p:menuitem value="Ajax Action" action="#{menuButtonManagedBean.ajaxAction}" update="message"></p:menuitem> <p:menuitem value="Non Ajax Action" action="#{menuButtonManagedBean.nonAjaxAction}" ajax="false"></p:menuitem> <p:menuitem value="Go To JournalDev" url="https://www.journaldev.com"></p:menuitem> </p:menuButton> </h:form> </html> |
MenuButtonManagedBean.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
package com.journaldev.prime.faces.beans; import javax.faces.application.FacesMessage; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; import javax.faces.context.FacesContext; import org.primefaces.model.menu.DefaultMenuItem; import org.primefaces.model.menu.DefaultMenuModel; import org.primefaces.model.menu.DefaultSeparator; import org.primefaces.model.menu.DefaultSubMenu; import org.primefaces.model.menu.MenuModel; @ManagedBean(name="menuButtonManagedBean") @SessionScoped public class MenuButtonManagedBean { private MenuModel menuButton = new DefaultMenuModel(); public MenuButtonManagedBean(){ } public MenuModel getMenuButton() { return menuButton; } public void setMenuButton(MenuModel menuButton) { this.menuButton = menuButton; } public String ajaxAction(){ FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Ajax Update")); return ""; } public String nonAjaxAction(){ return ""; } } |
Primefaces MenuButton – Dynamic Menus
MenuButton can be created programmatically as well. The same example of MenuButton that is provided in the previous section has actually implemented below using programmatic methodology.
index10.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:ui="https://java.sun.com/jsf/facelets" xmlns:h="https://java.sun.com/jsf/html" xmlns:f="https://java.sun.com/jsf/core" xmlns:p="https://primefaces.org/ui"> <h:head> <script name="jquery/jquery.js" library="primefaces"></script> </h:head> <h:form style="width:400px;"> <p:growl id="message"></p:growl> <p:menuButton value="MenuButton" model="#{menuButtonManagedBean.menuButton}"> </p:menuButton> </h:form> </html> |
MenuButtonManagedBean.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
package com.journaldev.prime.faces.beans; import javax.faces.application.FacesMessage; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; import javax.faces.context.FacesContext; import org.primefaces.model.menu.DefaultMenuItem; import org.primefaces.model.menu.DefaultMenuModel; import org.primefaces.model.menu.MenuModel; @ManagedBean(name="menuButtonManagedBean") @SessionScoped public class MenuButtonManagedBean { private MenuModel menuButton = new DefaultMenuModel(); public MenuButtonManagedBean(){ // Create menuitems required DefaultMenuItem ajaxAction = new DefaultMenuItem("Ajax Action"); ajaxAction.setUpdate("message"); ajaxAction.setCommand("#{menubarManagedBean.ajaxAction}"); DefaultMenuItem nonAjaxAction = new DefaultMenuItem("Non Ajax Action"); nonAjaxAction.setAjax(false); nonAjaxAction.setCommand("#{menubarManagedBean.nonAjaxAction}"); DefaultMenuItem urlAction = new DefaultMenuItem("Go To JournalDev"); urlAction.setUrl("https://www.journaldev.com"); this.menuButton.addElement(ajaxAction); this.menuButton.addElement(nonAjaxAction); this.menuButton.addElement(urlAction); } public MenuModel getMenuButton() { return menuButton; } public void setMenuButton(MenuModel menuButton) { this.menuButton = menuButton; } public String ajaxAction(){ FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Ajax Update")); return ""; } public String nonAjaxAction(){ return ""; } } |
Primefaces TieredMenu – Basic Info
TieredMenu is used to display nested submenus with overlays.
Primefaces TieredMenu – Attributes
Primefaces TieredMenu – Getting Started
TieredMenu consists of submenus and menuitems, submenus can be nested and each nested submenu will be displayed in an overlay. Those menuitems that get involved within p:tieredMenu component are targeted for Ajax, non-Ajax and navigation actions like all of these menuitems used previously. Following example shows you the most simplest applicable use for p:tieredMenu that is containing for a set of mixed actions.
index11.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:ui="https://java.sun.com/jsf/facelets" xmlns:h="https://java.sun.com/jsf/html" xmlns:f="https://java.sun.com/jsf/core" xmlns:p="https://primefaces.org/ui"> <h:head> <script name="jquery/jquery.js" library="primefaces"></script> </h:head> <h:form style="width:400px;"> <p:growl id="message"></p:growl> <p:tieredMenu> <p:submenu label="Ajax Menuitem"> <p:menuitem value="Ajax Action" action="#{tieredMenuManagedBean.ajaxAction}" update="message"></p:menuitem> </p:submenu> <p:submenu label="Non Ajax Menuitem"> <p:menuitem value="Non Ajax Action" action="#{tieredMenuManagedBean.nonAjaxAction}"></p:menuitem> </p:submenu> <p:separator/> <p:submenu label="Navigations"> <p:submenu label="Primefaces links"> <p:menuitem value="Prime" url="https://www.prime.com.tr"></p:menuitem> <p:menuitem value="Primefaces" url="https://www.primefaces.org"></p:menuitem> </p:submenu> <p:submenu label="Prime Blogs"> <p:menuitem value="JournalDev" url="https://www.journaldev.com"></p:menuitem> </p:submenu> </p:submenu> </p:tieredMenu> </h:form> </html> |
TieredMenuManagedBean.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
package com.journaldev.prime.faces.beans; import javax.faces.application.FacesMessage; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; import javax.faces.context.FacesContext; @ManagedBean @SessionScoped public class TieredMenuManagedBean { public String ajaxAction(){ FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Ajax Update")); return ""; } public String nonAjaxAction(){ return ""; } } |
Primefaces TieredMenu – AutoDisplay
By default, submenus are displayed when mouse is over root menuitems, set autoDisplay to false require a click on root menuitems to enable autoDisplay mode.
The same example will be used to set autoDisplay to false against p:tieredMenu component.
Primefaces TieredMenu – Overlay
Likewise Menu component, TieredMenu can also be overlaid using the same way that is used for overlaying the Menu component (See Menu Overlay).
index11.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:ui="https://java.sun.com/jsf/facelets" xmlns:h="https://java.sun.com/jsf/html" xmlns:f="https://java.sun.com/jsf/core" xmlns:p="https://primefaces.org/ui"> <h:head> <script name="jquery/jquery.js" library="primefaces"></script> </h:head> <h:form style="width:400px;"> <p:growl id="message"></p:growl> <p:tieredMenu autoDisplay="false" trigger="triggerBtn" overlay="true" my="left top" at="right top"> <p:submenu label="Ajax Menuitem"> <p:menuitem value="Ajax Action" action="#{tieredMenuManagedBean.ajaxAction}" update="message"></p:menuitem> </p:submenu> <p:submenu label="Non Ajax Menuitem"> <p:menuitem value="Non Ajax Action" action="#{tieredMenuManagedBean.nonAjaxAction}"></p:menuitem> </p:submenu> <p:separator/> <p:submenu label="Navigations"> <p:submenu label="Primefaces links"> <p:menuitem value="Prime" url="https://www.prime.com.tr"></p:menuitem> <p:menuitem value="Primefaces" url="https://www.primefaces.org"></p:menuitem> </p:submenu> <p:submenu label="Prime Blogs"> <p:menuitem value="JournalDev" url="https://www.journaldev.com"></p:menuitem> </p:submenu> </p:submenu> </p:tieredMenu> <p:commandButton value="Show Menu" id="triggerBtn"></p:commandButton> </h:form> </html> |
Primefaces TieredMenu – Client Side API
It’s also applicable for you to control TieredMenu component through using of Primefaces’ Client Side API.
index11.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:ui="https://java.sun.com/jsf/facelets" xmlns:h="https://java.sun.com/jsf/html" xmlns:f="https://java.sun.com/jsf/core" xmlns:p="https://primefaces.org/ui"> <h:head> <script name="jquery/jquery.js" library="primefaces"></script> <script> function showMenu(){ PF('tieredMenu').show(); } function hideMenu(){ PF('tieredMenu').hide(); } </script> </h:head> <h:form style="width:400px;"> <p:growl id="message"></p:growl> <p:tieredMenu autoDisplay="false" trigger="triggerBtn" overlay="true" my="left top" at="right top" widgetVar="tieredMenu"> <p:submenu label="Ajax Menuitem"> <p:menuitem value="Ajax Action" action="#{tieredMenuManagedBean.ajaxAction}" update="message"></p:menuitem> </p:submenu> <p:submenu label="Non Ajax Menuitem"> <p:menuitem value="Non Ajax Action" action="#{tieredMenuManagedBean.nonAjaxAction}"></p:menuitem> </p:submenu> <p:separator/> <p:submenu label="Navigations"> <p:submenu label="Primefaces links"> <p:menuitem value="Prime" url="https://www.prime.com.tr"></p:menuitem> <p:menuitem value="Primefaces" url="https://www.primefaces.org"></p:menuitem> </p:submenu> <p:submenu label="Prime Blogs"> <p:menuitem value="JournalDev" url="https://www.journaldev.com"></p:menuitem> </p:submenu> </p:submenu> </p:tieredMenu> <p:commandButton value="Show Menu - Normal Trigger" id="triggerBtn"></p:commandButton> <p:commandButton value="Show Menu - JavaScript function" onclick="showMenu()"></p:commandButton> <p:commandButton value="Hide Menu - JavaScript function" onclick="hideMenu()"></p:commandButton> </h:form> </html> |
Primefaces SlideMenu – Basic Info
SlideMenu is used to display nested submenus with sliding animation.
Primefaces Slide Menu – Attributes
Primefaces Slide Menu – Getting Started – Overlay & Client Side API
SlideMenu consists of submenus and menuitems, submenus can be nested and each nested submenus will be displayed with a slide animation. SlideMenu functionlaities are similar to these defined in the TieredMenu that discussed in the previous section.
index12.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:ui="https://java.sun.com/jsf/facelets" xmlns:h="https://java.sun.com/jsf/html" xmlns:f="https://java.sun.com/jsf/core" xmlns:p="https://primefaces.org/ui"> <h:head> <script name="jquery/jquery.js" library="primefaces"></script> <script> function showMenu(){ PF('tieredMenu').show(); } function hideMenu(){ PF('tieredMenu').hide(); } </script> </h:head> <h:form style="width:400px;"> <p:growl id="message"></p:growl> <p:slideMenu autoDisplay="false" trigger="triggerBtn" overlay="true" my="left top" at="right top" widgetVar="tieredMenu"> <p:submenu label="Ajax Menuitem"> <p:menuitem value="Ajax Action" action="#{slideMenuManagedBean.ajaxAction}" update="message"></p:menuitem> </p:submenu> <p:submenu label="Non Ajax Menuitem"> <p:menuitem value="Non Ajax Action" action="#{slideMenuManagedBean.nonAjaxAction}"></p:menuitem> </p:submenu> <p:separator/> <p:submenu label="Navigations"> <p:submenu label="Primefaces links"> <p:menuitem value="Prime" url="https://www.prime.com.tr"></p:menuitem> <p:menuitem value="Primefaces" url="https://www.primefaces.org"></p:menuitem> </p:submenu> <p:submenu label="Prime Blogs"> <p:menuitem value="JournalDev" url="https://www.journaldev.com"></p:menuitem> </p:submenu> </p:submenu> </p:slideMenu> <p:commandButton value="Show Menu - Normal Trigger" id="triggerBtn"></p:commandButton> <p:commandButton value="Show Menu - JavaScript function" onclick="showMenu()"></p:commandButton> <p:commandButton value="Hide Menu - JavaScript function" onclick="hideMenu()"></p:commandButton> </h:form> </html> |
SlideMenuManagedBean.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
package com.journaldev.prime.faces.beans; import javax.faces.application.FacesMessage; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; import javax.faces.context.FacesContext; @ManagedBean @SessionScoped public class SlideMenuManagedBean { public String ajaxAction(){ FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Ajax Update")); return ""; } public String nonAjaxAction(){ return ""; } } |
Summary
Primefaces provides you a vast amount of Primefaces’ UI Menu components, that are set the developer in front of interesting collection that the user may select from. This tutorial intended to clarify part of these menu types. Contribute us by commenting below and find the source code for this tutorial.