• Về CyStack
  • Sản phẩm
  • Dịch vụ
  • Dành cho doanh nghiệp
  • Công ty
  • Tài liệu
Trang chủHướng dẫnPrimeFaces Menu toàn tập – Cách dùng Menu, Menubar, MenuButton, TieredMenu & SlideMenu

PrimeFaces Menu toàn tập – Cách dùng Menu, Menubar, MenuButton, TieredMenu & SlideMenu

CyStack blog 15 phút để đọc
CyStack blog26/09/2025
Locker Avatar

Chris Pham

Technical Writer

Locker logo social
Reading Time: 15 minutes

PrimeFaces Menu là thành phần điều hướng mạnh mẽ trong PrimeFaces, cho phép bạn xây dựng nhiều loại menu khác nhau như Menu, Menubar, MenuButton, TieredMenu và SlideMenu. Với sự linh hoạt trong cấu hình, hỗ trợ Ajax, overlay và menu động, PrimeFaces Menu giúp ứng dụng web Java trở nên trực quan, hiện đại và dễ sử dụng hơn.

PrimeFaces Menu toàn tập

Dưới đây là các thành phần menu phổ biến trong PrimeFaces:

  • Menu: Là một thành phần điều hướng có chứa các menu con và mục menu.
  • MenuBar: Là một thành phần điều hướng theo chiều ngang.
  • MenuButton: Được dùng để hiển thị nhiều lệnh khác nhau trong một menu dạng popup.
  • TieredMenu: Được dùng để hiển thị các menu con lồng nhau dưới dạng lớp phủ (overlay).
  • SlideMenu: Được dùng để hiển thị các menu con lồng nhau với hiệu ứng trượt.

Hãy bắt đầu tìm hiểu chi tiết về tất cả các loại menu này để thấy được đầy đủ các tính năng mà PrimeFaces cung cấp cho dạng thành phần này.

PrimeFaces Menu – Thông tin cơ bản

Thẻ menu
Lớp thành phần (Component Class) org.primefaces.component.menu.Menu
Loại thành phần (Component Type) org.primefaces.component.Menu
Nhóm thành phần (Component Family) org.primefaces.component
Loại trình kết xuất (Renderer Type) org.primefaces.component.MenuRenderer
Lớp trình kết xuất (Renderer Class) org.primefaces.component.menu.MenuRenderer

PrimeFaces Menu – Các thuộc tính

Thuộc tính Giá trị mặc định Kiểu dữ liệu Mô tả
id null String Định danh duy nhất của thành phần.
rendered true Boolean Giá trị boolean để xác định việc hiển thị thành phần. Nếu đặt là false thì thành phần sẽ không được render.
binding null Object Một biểu thức EL ánh xạ đến một thể hiện UIComponent phía server trong backing bean.
widgetVar null String Tên của widget phía client.
model null MenuModel Một thể hiện của MenuModel để tạo menu bằng lập trình.
trigger null String Thành phần đích để gắn menu overlay.
my null String Góc của menu để căn chỉnh với phần tử trigger.
at null String Góc của trigger để căn chỉnh với phần tử menu.
overlay false Boolean Xác định kiểu định vị của menu: tĩnh (static) hoặc phủ (overlay).
style null String Kiểu CSS nội tuyến (inline style) của phần tử chứa chính.
styleClass null String Lớp CSS của phần tử chứa chính.
triggerEvent click String Sự kiện dùng để hiển thị menu được định vị động.

PrimeFaces Menu – Bắt đầu sử dụng

Một menu được cấu thành từ submenu (menu con) và menuitem (mục menu). Submenu được dùng để nhóm các menuitem, trong khi menuitem tương ứng với những hành động cần thực hiện. Ví dụ sau đây minh họa cách sử dụng đơn giản nhất của thành phần Menu: index.xhtml

<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

PrimeFaces Menu – Overlay Menu

Menu có thể được định vị theo hai cách: tĩnh (static) hoặc động (dynamic). Vị trí tĩnh nghĩa là menu nằm trong luồng thông thường của trang. Ngược lại, menu động không nằm trong luồng thông thường của trang, cho phép nó hiển thị chồng lên các phần tử khác. Để định nghĩa menu động, bạn cần thực hiện các bước sau:

  • Đầu tiên, định nghĩa menu như bình thường nhưng đặt thuộc tính overlay thành true và liên kết thuộc tính trigger của menu với id của hành động được kích hoạt.
  • Tiếp theo, điều chỉnh cả hai thuộc tính my và at của menu để xác định góc của menu cần căn chỉnh với phần tử trigger và góc của trigger cần căn chỉnh với phần tử menu.
  • Cuối cùng, cặp giá trị left, right, bottom, và top là những giá trị duy nhất được chấp nhận cho các thuộc tính my và at.

index1.xhtml

<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>

PrimeFaces Menu toàn tập

  • Khi hành động Trigger Menu được kích hoạt, menu mà bạn đã định nghĩa sẽ được hiển thị.

PrimeFaces Menu – Các hành động Ajax và Non-Ajax

Cho đến lúc này, bạn đã xây dựng được một menu tĩnh đơn giản và một menu động phức tạp hơn. Cả hai menu này đều chứa menuitems tương ứng với những hành động mà menu cần cung cấp. Các menuitem này thực chất cũng giống như các hành động của p:commandButton, vì vậy bạn cũng có thể áp dụng Ajax cho chúng. Ví dụ dưới đây minh họa điều này: index2.xhtml

<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

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 "";
	}
}

tìm hiểu PrimeFaces Menu

PrimeFaces Menu – Menu động (Dynamic Menus)

Menu cũng có thể được tạo ra bằng lập trình, đây là cách tiếp cận linh hoạt hơn so với khai báo trực tiếp trong file xhtml. Bạn có thể định nghĩa menu kiểu này bằng cách sử dụng một thể hiện của org.primefaces.model.MenuModel. Các thành phần như p:submenu, p:menuitem và p:separator cũng đã có sẵn các cài đặt mặc định để phục vụ việc định nghĩa menu bằng lập trình. Ví dụ sau minh họa cùng một kịch bản nghiệp vụ mà bạn đã phát triển trước đó, nhưng lần này menu sẽ được render thông qua lập trình: index3.xhtml

<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

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 Menu

Thẻ (Tag) Menubar
Lớp thành phần (Component Class) org.primefaces.component.menubar.Menubar
Loại thành phần (Component Type) org.primefaces.component.Menubar
Nhóm thành phần (Component Family) org.primefaces.component
Loại trình kết xuất (Renderer Type) org.primefaces.component.MenubarRenderer
Lớp trình kết xuất (Renderer Class) org.primefaces.component.menubar.MenubarRenderer

Primefaces Menubar – Attributes

Thuộc tính (Name) Giá trị mặc định (Default) Kiểu dữ liệu (Type) Mô tả (Description)
id null String Định danh duy nhất của thành phần.
rendered true Boolean Xác định việc hiển thị thành phần. Nếu đặt là false, Menubar sẽ không được render.
binding null Object Biểu thức EL ánh xạ tới một thể hiện UIComponent phía server trong backing bean.
widgetVar null String Tên của widget phía client.
model null MenuModel Thể hiện MenuModel để tạo menu bằng lập trình.
style null String CSS nội tuyến (inline style) cho Menubar.
styleClass null String Lớp CSS của Menubar.
autoDisplay false Boolean Xác định xem submenu cấp 1 có tự động hiển thị khi di chuột qua hay không. Nếu false, cần nhấp chuột để hiển thị.

PrimeFaces Menubar – Bắt đầu sử dụng

Tương tự như thành phần Menu, Menubar cũng cần có p:submenu và p:menuitem làm phần tử con để tạo thành thanh menu ngang.

PrimeFaces Menu

PrimeFaces Menubar – Menu lồng nhau (Nested Menus)

Menubar hỗ trợ các menu lồng nhau, tức là có thể đặt các submenu bên trong một submenu cha khác. Ví dụ minh họa được thể hiện trong index5.xhtml.

<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 Menu

PrimeFaces Menubar – Mục gốc (Root Menuitem)

Menubar cũng hỗ trợ menuitem gốc, tức là có thể khai báo trực tiếp thành phần con p:menuitem bên trong p:menubar. Ví dụ minh họa được thể hiện trong index6.xhtml.

<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 Menu

PrimeFaces Menubar – Các hành động Ajax và Non-Ajax

Tương tự như thành phần p:commandButton, p:menuitem cũng hỗ trợ thực hiện các hành động dưới dạng Ajax. Bạn đã từng thấy điều này trong phần p:menu trước đó. Bạn có thể sử dụng p:menuitem để thực hiện hành động (Ajax hoặc Non-Ajax) cũng như cho điều hướng. Ví dụ sau minh họa các cách sử dụng khác nhau của p:menuitem: index7.xhtml.

<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

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 Menu

PrimeFaces Menu

khám phá PrimeFaces Menu

PrimeFaces Menubar – Menu động (Dynamic Menus)

Menubar cũng hỗ trợ việc tạo động, bạn có thể xây dựng Menubar bằng lập trình và cung cấp các hành động Ajax, Non-Ajax cũng như URL, tương tự như cách bạn đã làm trong phần hành động Ajax và Non-Ajax. Ví dụ minh họa được thể hiện trong index8.xhtml.

<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

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 – Thông tin cơ bản

MenuButton được dùng để hiển thị nhiều lệnh khác nhau trong một menu dạng popup.

Thẻ menuButton
Lớp thành phần (Component Class) org.primefaces.component.menubutton.MenuButton
Loại thành phần (Component Type) org.primefaces.component.MenuButton
Nhóm thành phần (Component Family) org.primefaces.component
Loại trình kết xuất (Renderer Type) org.primefaces.component.MenuButtonRenderer
Lớp trình kết xuất (Renderer Class) org.primefaces.component.menubutton.MenuButtonRenderer

PrimeFaces MenuButton – Các thuộc tính

Thuộc tính (Name) Giá trị mặc định (Default) Kiểu dữ liệu (Type) Mô tả (Description)
id null String Định danh duy nhất của thành phần.
rendered true Boolean Xác định việc hiển thị thành phần. Nếu đặt false, thành phần sẽ không được render.
binding null Object Biểu thức EL ánh xạ tới một thể hiện UIComponent phía server trong backing bean.
value null String Nhãn (label) hiển thị trên nút.
style null String Kiểu CSS nội tuyến của phần tử chứa chính.
styleClass null String Lớp CSS của phần tử chứa chính.
widgetVar null String Tên của widget phía client.
model null MenuModel Thể hiện MenuModel để tạo menu bằng lập trình.
disabled false Boolean Kích hoạt hoặc vô hiệu hóa nút.
iconPos left String Vị trí của biểu tượng, giá trị hợp lệ: left, right.
appendTo null String Gắn overlay vào phần tử được định nghĩa bằng biểu thức tìm kiếm. Mặc định là document body.

PrimeFaces MenuButton – Bắt đầu sử dụng

MenuButton bao gồm một hoặc nhiều menuitem. Các menuitem được định nghĩa trong MenuButton có đặc điểm tương tự như những gì đã được sử dụng trước đó, đồng thời cũng hỗ trợ các hành động Ajax, Non-Ajax và điều hướng. Ví dụ minh họa được thể hiện trong index9.xhtml.

<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

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 – Menu động (Dynamic Menus)

MenuButton cũng có thể được tạo ra bằng lập trình. Ví dụ về MenuButton đã được trình bày ở phần trước thực chất cũng được triển khai lại dưới đây bằng phương pháp lập trình. Minh họa được thể hiện trong index10.xhtml.

<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

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 – Thông tin cơ bản

TieredMenu được sử dụng để hiển thị các menu con lồng nhau dưới dạng overlay.

Thẻ TieredMenu
Lớp thành phần (Component Class) org.primefaces.component.tieredmenu.TieredMenu
Loại thành phần (Component Type) org.primefaces.component.TieredMenu
Nhóm thành phần (Component Family) org.primefaces.component
Loại trình kết xuất (Renderer Type) org.primefaces.component.TieredMenuRenderer
Lớp trình kết xuất (Renderer Class) org.primefaces.component.tieredmenu.TieredMenuRenderer

PrimeFaces TieredMenu – Các thuộc tính

Thuộc tính (Name) Giá trị mặc định (Default) Kiểu dữ liệu (Type) Mô tả (Description)
id null String Định danh duy nhất của thành phần.
rendered true Boolean Xác định việc hiển thị thành phần. Nếu đặt false, thành phần sẽ không được render.
binding null Object Biểu thức EL ánh xạ tới một thể hiện UIComponent phía server trong backing bean.
widgetVar null String Tên của widget phía client.
model null MenuModel Thể hiện MenuModel để tạo menu bằng lập trình.
style null String CSS nội tuyến (inline style) của thành phần.
styleClass null String Lớp CSS của thành phần.
autoDisplay true Boolean Xác định liệu submenu cấp 1 có tự động hiển thị khi di chuột qua hay không. Nếu đặt false, cần nhấp chuột để hiển thị.
trigger null String id của thành phần mà sự kiện triggerEvent của nó sẽ hiển thị menu được định vị động.
my null String Góc của menu cần căn chỉnh với phần tử trigger.
at null String Góc của trigger cần căn chỉnh với phần tử menu.
overlay false Boolean Xác định cách định vị. Khi bật, menu sẽ hiển thị với vị trí tuyệt đối so với trigger. Mặc định là false, nghĩa là định vị tĩnh.
triggerEvent click String Tên sự kiện của trigger sẽ hiển thị menu được định vị động.

Primefaces TieredMenu – Bắt đầu

TieredMenu bao gồm các submenu (menu con) và menuitem (mục menu). Các submenu có thể được lồng nhau, và mỗi submenu lồng sẽ được hiển thị trong một lớp phủ (overlay). Những menuitem được sử dụng bên trong thành phần p:tieredMenu có thể được dùng cho các hành động Ajax, non-Ajax và điều hướng (navigation), tương tự như các menuitem được sử dụng trước đây. Ví dụ sau đây minh họa cách sử dụng đơn giản nhất cho p:tieredMenu, trong đó chứa một tập hợp các hành động hỗn hợp. index11.xhtml

<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

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 – Tự động hiển thị (AutoDisplay)

Theo mặc định, các submenu sẽ được hiển thị khi con trỏ chuột di chuyển qua các menuitem gốc. Nếu thiết lập autoDisplay=”false”, người dùng sẽ cần nhấp chuột vào các menuitem gốc để kích hoạt chế độ hiển thị. Ví dụ trước đó sẽ được sử dụng lại, nhưng lần này ta cấu hình autoDisplay=”false” cho thành phần p:tieredMenu.

Primefaces TieredMenu – Overlay (Hiển thị chồng lớp)

Tương tự như thành phần Menu, TieredMenu cũng có thể được hiển thị dưới dạng overlay (chồng lớp) bằng cùng một cách đã được sử dụng để tạo overlay cho thành phần Menu (xem Menu Overlay). index11.xhtml

<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 – API phía Client (Client Side API)

Bạn cũng có thể điều khiển thành phần TieredMenu thông qua Client Side API của Primefaces.

Phương thức Tham số Kiểu trả về Mô tả
show() – void Hiển thị menu overlay.
hide() – void Ẩn menu overlay.
align() – void Căn chỉnh menu overlay với phần tử kích hoạt (trigger).

index11.xhtml

<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 – Thông tin cơ bản

SlideMenu được dùng để hiển thị các submenu lồng nhau với hiệu ứng trượt.

Thuộc tính Giá trị
Thẻ (Tag) slideMenu
Lớp thành phần (Component Class) org.primefaces.component.slidemenu.SlideMenu
Loại thành phần (Component Type) org.primefaces.component.SlideMenu
Nhóm thành phần (Component Family) org.primefaces.component
Loại bộ kết xuất (Renderer Type) org.primefaces.component.SlideMenuRenderer
Lớp bộ kết xuất (Renderer Class) org.primefaces.component.slidemenu.SlideMenuRenderer

Primefaces SlideMenu – Thuộc tính

Tên thuộc tính Giá trị mặc định (Default) Kiểu dữ liệu Mô tả
id null String Định danh duy nhất của thành phần.
rendered true Boolean Xác định việc hiển thị thành phần. Nếu đặt là false, thành phần sẽ không được render.
binding null Object Biểu thức EL ánh xạ tới một instance UIComponent phía server trong backing bean.
widgetVar null String Tên của widget phía client.
model null MenuModel Instance MenuModel để tạo menu bằng lập trình (programmatic menu).
style null String CSS inline style cho thành phần.
styleClass null String CSS class cho thành phần.
backLabel Back String Văn bản hiển thị cho liên kết “quay lại” (Back link).
trigger null String Id của thành phần mà sự kiện triggerEvent sẽ hiển thị menu.
my null String Góc (corner) của menu để căn chỉnh với phần tử trigger.
at null String Góc (corner) của phần tử trigger để căn chỉnh với menu.
overlay false Boolean Xác định chế độ định vị. Nếu true, menu sẽ hiển thị với vị trí tuyệt đối (absolute) so với trigger. Mặc định là false (nghĩa là định vị tĩnh).
triggerEvent click String Tên sự kiện của trigger sẽ hiển thị menu (ví dụ: click).

Primefaces SlideMenu – Bắt đầu với Overlay & Client Side API

SlideMenu bao gồm các submenu (menu con) và menuitem (mục menu). Các submenu có thể được lồng nhau, và mỗi submenu lồng sẽ được hiển thị với hiệu ứng trượt (slide animation). Chức năng của SlideMenu khá tương tự với những gì đã được định nghĩa trong TieredMenu mà chúng ta đã thảo luận ở phần trước. index12.xhtml

<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

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 "";
	}
}

PrimeFaces Menu toàn tập

tìm hiểu về PrimeFaces Menu

Tóm tắt

Primefaces cung cấp cho bạn một số lượng lớn các thành phần Menu UI khác nhau. Bộ thành phần này mang đến cho lập trình viên một tập hợp phong phú, trong đó người dùng có thể lựa chọn. Mục đích của hướng dẫn này là giúp làm rõ một phần trong số các loại menu đó. Hãy đóng góp cho chúng tôi bằng cách để lại bình luận phía dưới và tìm mã nguồn của hướng dẫn này.

0 Bình luận

Đăng nhập để thảo luận

Chuyên mục Hướng dẫn

Tổng hợp các bài viết hướng dẫn, nghiên cứu và phân tích chi tiết về kỹ thuật, các xu hướng công nghệ mới nhất dành cho lập trình viên.

Đăng ký nhận bản tin của chúng tôi

Hãy trở thành người nhận được các nội dung hữu ích của CyStack sớm nhất

Xem chính sách của chúng tôi Chính sách bảo mật.

Đăng ký nhận Newsletter

Nhận các nội dung hữu ích mới nhất