דוגמא לתפריט Primefaces, MenuBar, MenuButton, TieredMenu, SlideMenu

מדריכים
JSF

המטרה העיקרית של המדריך הזה היא לכסות את רכיבי תפריט הראשי שמשמשים ביישום Primefaces. בדרך כלל, כמויות רבות מאוד של אפליקציות המתפשטות ברחבי האינטרנט משתמשות בסוגים שונים של תפריטים. המדריך יכסה את הסוגים הבאים של תפריט:

בואו נתחיל להסביר את כל סוגי התפריטים הללו כדי לראות את כל הפונקציות המוצעות של Primefaces לרכיבים כאלה.

תפריט Primefaces – מידע בסיסי

Tag menu
Component Class org.primefaces.component.menu.Menu
Component Type org.primefaces.component.Menu
Component Family org.primefaces.component
Renderer Type org.primefaces.component.MenuRenderer
Renderer Class org.primefaces.component.menu.MenuRenderer

תפריט Primefaces – מאפיינים

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.
widgetVar null String Name of the client side widget.
model null MenuModel A menu model instance to create menu programmatically.
trigger null String Target component to attach the overlay menu.
my null String Corner of menu to align with trigger element.
at null String Corner of trigger to align with menu element.
overlay false Boolean Defines positioning type of menu, either static or overlay.
style null String Inline style of the main container element.
styleClass null String Style class of the main container element.
triggerEvent click String Event to show the dynamic positioned menu.

תפריט Primefaces – להתחיל

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

<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 – תפריט השקפה

ניתן למקם את התפריט בשני דרכים: סטטית או דינמית. מיקום סטטי אומר שהתפריט נמצא בזרימת הדף הרגילה. להפך, תפריטים דינמיים אינם בזרימה הרגילה של הדף, ולכן יש להם אפשרות להשקיף על אלמנטים אחרים. כדי להגדיר תפריט דינמי, עליך לעבור דרך השלבות הבאות:

  • הגדר את התפריט שלך כרגיל על ידי הגדרת המאפיין overlay ל-true ושיוך המאפיין trigger למזהה של פעולה המפעילה את התפריט.
  • כוון את שני המאפיינים של התפריט שלך, my וגם at, לצורך קביעת פינה נכונה של התפריט ביחס לרכיב הפועל ופינה של הרכיב הפועל ביחס לתפריט, בהתאמה.
  • זוגות של שמאל, ימין, למטה ולמעלה הם הערכים היחידים המתקבלים עבור המאפיינים my ו-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 – פעולות Ajax ולא-Ajax

כעת, פיתחת תפריט סטטי פשוט ותפריט דינמי יותר מורכב. שני התפריטים אלה מכילים פריטי תפריט המתאימים לפעולות הנדרשות שהתפריט מתמקד לספק. אלה פריטי תפריט בעצם הם פעולות כמו p:commandButton, ולכן ניתן גם להפוך אותם ל-Ajax. 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 "";
	}
}

תפריט Primefaces – תפריטים דינמיים

תפריטים ניתן ליצור בדרך תכנותית כמו כן, זה יותר גמיש בהשוואה לגישה דקלרטיבית. באפשרותך להגדיר תפריט כזה באמצעות org.primefaces.model.MenuModel. רכיבים כמו p:submenu, p:menuitem ו־p:separator גם יש להם ברירת מחדל שמשמשת להגדרת תפריט תכנותי. הדוגמה הבאה מראה לך את תרחיש העסקים אותו פיתחת לפני כן, הפעם התפריט יוצג באופן תכנותי. 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(){
		// יצירת תת־תפריט
		DefaultSubMenu file = new DefaultSubMenu("File");
		// יצירת תת־תפריט
		DefaultSubMenu help = new DefaultSubMenu("Help");
		// יצירת פריט תפריט
		DefaultMenuItem open = new DefaultMenuItem("Open");
		// יצירת פריט תפריט
		DefaultMenuItem edit = new DefaultMenuItem("Edit");
		// יצירת פריט תפריט
		DefaultMenuItem exit = new DefaultMenuItem("Exit");

		// יצירת פריט תפריט
		DefaultMenuItem about = new DefaultMenuItem("About Primefaces");
		// יצירת פריט תפריט
		DefaultMenuItem contact = new DefaultMenuItem("Contact Us");
		// יצירת פריט תפריט
		DefaultMenuItem helpMenuItem = new DefaultMenuItem("Help");		

		// קביעת פעולת פריט התפריט
		open.setCommand("#{menuManagedBean.openAction}");

		// הקשרת פריט התפריט עם תת־תפריט
		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);

		// הקשרת תת־תפריט עם התפריט
		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 – מידע בסיסי

תפריט עליון הוא רכיב ניווט אופקי.

Tag Menubar
Component Class org.primefaces.component.menubar.Menubar
Component Type org.primefaces.component.Menubar
Component Family org.primefaces.component
Renderer Type org.primefaces.component.MenubarRenderer
Renderer Class org.primefaces.component.menubar.MenubarRenderer

Primefaces Menubar – מאפיינים

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.
widgetVar null String Name of the client side widget
model null MenuModel MenuModel instance to create menus
programmatically
style null String Inline style of menubar
styleClass null String Style class of menubar
autoDisplay false Boolean Defines whether the first level of submenus will be displayed on mouseover or not. When set to false, click event is required to display.

תפריט ראשי של Primefaces – התחלה

דומה לרכיב התפריט, נדרשים p:submenu ו-p:menuitem כילדים כדי להרכיב את תפריט המקם.

תפריט ראשי של Primefaces – תפריטים מקוננים

תפריט המקם תומך בתפריטים מקוננים, זאת על ידי הצגת תת-תפריטים בתוך תפריטי הורים נוספים. 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 – פריטי תפריט ראשי

תפריט ניווט תומך גם באיברי תפריט מורכבים, באמצעות ספק ילד ישיר של p:menuitem בתוך p:menubar. 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 תפריט ניווט – פעולות אג'קס ולא-אג'קס

בדומה לרכיב p:commandButton, גם p:menuitem תומך באג'קסיפיקציה של פעולות. כבר חווית את זה במקטע p:menu. תוכל להשתמש ב-p:menuitem לביצוע פעולות – אג'קס ולא-אג'קס – וגם לניווט. הדוגמה הבאה מציגה את השימושים השונים של 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 – תפריטים דינמיים

התפריט מסוג Menubar תומך גם ביצירה דינמית שלו, תוכל ליצור את התפריט דרך קוד תוכנה ולספק פעולות Ajax, Non-Ajax ו-URL בדיוק כמו שעשית בקטעי הפעולות Ajax ו-Non-Ajax. 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(){
		// יצירת תת-תפריטים נדרשים
		DefaultSubMenu file = new DefaultSubMenu("File");
		DefaultSubMenu open = new DefaultSubMenu("Open");
		DefaultSubMenu help = new DefaultSubMenu("Help");

		// יצירת פריטי תפריט נדרשים
		DefaultMenuItem edit = new DefaultMenuItem("Edit");
		DefaultMenuItem exit = new DefaultMenuItem("Exit");

		// יצירת פריטי תפריט נדרשים
		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");

		// התחברות פריטי תפריט עם תת-תפריט פתוח
		open.addElement(ajaxAction);
		open.addElement(nonAjaxAction);
		open.addElement(urlAction);

		// התחברות פריטי תפריט עם תת-תפריט עזר
		help.addElement(about);
		help.addElement(contactUs);
		help.addElement(new DefaultSeparator());
		help.addElement(helpMenuItem);

		// התחברות תת-תפריט פתוח לתת-תפריט קובץ
		file.addElement(open);
		file.addElement(edit);
		file.addElement(new DefaultSeparator());
		file.addElement(exit);

		// התחברות תת-תפריטים לתפריט הראשי
		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 – מידע בסיסי

ה-MenuButton מציג פקודות שונות בתפריט קופץ.

Tag menuButton
Component Class org.primefaces.component.menubutton.MenuButton
Component Type org.primefaces.component.MenuButton
Component Family org.primefaces.component
Renderer Type org.primefaces.component.MenuButtonRenderer
Renderer Class org.primefaces.component.menubutton.MenuButtonRenderer

Primefaces MenuButton – מאפיינים

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.
value null String Label of the button
style null String Style of the main container element
styleClass null String Style class of the main container element
widgetVar null String Name of the client side widget
model null MenuModel MenuModel instance to create menus programmatically
disabled false Boolean Disables or enables the button.
iconPos left String Position of the icon, valid values are left and right.
appendTo null String Appends the overlay to the element defined by search expression. Defaults to document body.

כפתור תפריט של Primefaces – התחלה

כפתור התפריט מורכב מתפריט רשות או יותר. אלה הפריטים שיהיו מוגדרים יש להם את אותן דמיונים כפי שנעשה כבר, פעולות Ajax, לא-Ajax וניווט נתמכות גם כאן. 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 – תפריטים דינמיים

כפתור התפריט יכול להיות נוצר גם באמצעות קוד. אותו הדוגמה לכפתור התפריט שסופק בקטע הקודם בעצם הוטמעה למטה באמצעות מתודולוגיה פרוגרמטית. 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(){

		// יצירת הפריטים הנדרשים
		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 – מידע בסיסי

התפריט ברמות משמש להצגת תפריטי משנה מקוננים עם חפיפות.

Tag TieredMenu
Component Class org.primefaces.component.tieredmenu.TieredMenu
Component Type org.primefaces.component.TieredMenu
Component Family org.primefaces.component
Renderer Type org.primefaces.component.TieredMenuRenderer
Renderer Class org.primefaces.component.tieredmenu.TieredMenuRenderer

Primefaces TieredMenu – מאפיינים

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
widgetVar null String Name of the client side widget.
model null MenuModel MenuModel instance for programmatic menu.
style null String Inline style of the component.
styleClass null String Style class of the component.
autoDisplay true Boolean Defines whether the first level of submenus will be displayed on mouseover or not. When set to false, click event is required to display.
trigger null String Id of the component whose triggerEvent will show the dynamic positioned menu.
my null String Corner of menu to align with trigger element.
at null String Corner of trigger to align with menu element.
overlay false Boolean Defines positioning, when enabled menu is displayed with absolute position relative to the trigger. Default is false, meaning static positioning.
triggerEvent click String Event name of trigger that will show the dynamic positioned menu.

Primefaces TieredMenu – התחלת עבודה

התפריט ברמות מורכב מתפריטי משנה ופריטי תפריט, תפריטי משנה יכולים להיות מקוננים וכל תפריט משנה מקונן יוצג בחפיפה. פריטי התפריט שמשתתפים בתוך הרכיב p:tieredMenu מיועדים לפעולות אג'קס, לא אג'קס וניווט כמו כל אחד מפריטי התפריט הללו שנמצאו בשימוש בעבר. הדוגמה הבאה מראה את השימוש הכי פשוט ומיוחד ביותר עבור p:tieredMenu שמכיל לסט של פעולות מעורבות. 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 – תצוגה אוטומטית

ברירת המחדל, תת-תפריטים מוצגים כאשר העכבר נמצא מעל פריטי התפריט הראשיים, הגדר את autoDisplay ל־false כדי לדרוש לחיצה על פריטי התפריט הראשיים כדי להפעיל את מצב התצוגה האוטומטית. אותו דוגמה תשמש להגדרת autoDisplay ל־false נגד רכיב p:tieredMenu.

תפריט מקונן של Primefaces – עטיפה

באופן דומה לרכיב התפריט, תפריט מקונן יכול להיות גם מונח עטיפה באמצעות אותו הדרך שמשמשת לעטוף את רכיב התפריט (ראה עטיפה של תפריט). 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 – API צד לקוח

זה גם רלוונטי עבורך לשלוט ברכיב תפריט מקונן באמצעות שימוש ב־API צד לקוח של Primefaces.

Method Params Return Type Description
show() – void Shows overlay menu.
hide() – void Hides overlay menu.
align() – void Aligns overlay menu with 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>

פרייםפייס תפריט החלקה – מידע בסיסי

SlideMenu משמש לתצוגה של תת-תפריטים מקוננים עם אנימציה החלקה.

Tag slideMenu
Component Class org.primefaces.component.slidemenu.SlideMenu
Component Type org.primefaces.component.SlideMenu
Component Family org.primefaces.component
Renderer Type org.primefaces.component.SlideMenuRenderer
Renderer Class org.primefaces.component.slidemenu.SlideMenuRenderer

תפריט החלקה של פרייםפייס – תכונות

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
widgetVar null String Name of the client side widget.
model null MenuModel MenuModel instance for programmatic menu.
style null String Inline style of the component.
styleClass null String Style class of the component.
backLabel Back String Text for back link.
trigger null String Id of the component whose triggerEvent will show the dynamic positioned menu.
my null String Corner of menu to align with trigger element.
at null String Corner of trigger to align with menu element.
overlay false Boolean Defines positioning, when enabled menu is displayed with absolute position relative to the trigger. Default is false, meaning static positioning.
triggerEvent click String Event name of trigger that will show the dynamic positioned menu.

תפריט החלקה של פרייםפייס – התחלה – השקפפה ו- API לצד הלקוח

SlideMenu מורכב מתת-תפריטים ופריטי תפריט, תת-תפריטים יכולים להיות מקוננים וכל תת-תפריט מקונן יוצג עם אנימציה החלקה. פונקציות החלקה של SlideMenu דומות לאלו שמוגדרות ב-TieredMenu שדובר עליהן בחלק הקודם. 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 מספקת לך כמויות רבות של רכיבי תפריט ממשק משתמש (UI Menu), שמציעים למפתח מגוון מעניין שהמשתמש יכול לבחור מתוכו. המדריך הזה מתכוון להבהיר חלק מסוגי התפריטים הללו. תוכל לתרום לנו על ידי הגבהה למטה ומציאת קוד המקור של מדריך זה.

הורד את פרויקט PrimeFaces Menu

Source:
https://www.digitalocean.com/community/tutorials/primefaces-menu-menubar-menubutton-tieredmenu-slidemenu-example