primefaces教程_Primefaces面板，PanelGrid和PanelMenu示例教程

最新推荐文章于 2020-07-19 22:41:30 发布

cunchi4221

最新推荐文章于 2020-07-19 22:41:30 发布

阅读量714

点赞数

文章标签： java webgl vue javascript css3 ViewUI

原文链接：https://www.journaldev.com/3917/primefaces-panel-panelgrid-panelmenu-example-tutorial

版权

primefaces教程

Welcome to Primefaces Panel and PanelGrid example tutorial. We will also look into PanelMenu that provides a way of organizing submenus and menuitems in a hierarchical form mixed with accordionPanel behavior.

欢迎使用Primefaces Panel和PanelGrid示例教程。我们还将研究PanelMenu，它提供了一种以分层的形式组织子菜单和菜单项的方法，并混合了AccordionPanel行为。

Primefaces面板 (Primefaces Panel)

Primefaces Panel is a grouping component with content toggle, close and menu integration.

Primefaces Panel是具有内容切换，关闭和菜单集成的分组组件。

Tag	Panel
Component Class	org.primefaces.component.panel.Panel
Component Type	org.primefaces.component.Panel
Component Family	org.primefaces.component
Renderer Type	org.primefaces.component.PanelRenderer
Renderer Class	org.primefaces.component.panel.PanelRenderer

标签	面板
组件类别	org.primefaces.component.panel.Panel
组件类型	org.primefaces.component.Panel
组件族	org.primefaces.component
渲染器类型	org.primefaces.component.PanelRenderer
渲染器类	org.primefaces.component.panel.PanelRenderer

Primefaces面板属性 (Primefaces Panel Attributes)

Name	Default	Type	Description
id	null	String	Unique identifier of the component
rendered	true	Boolean	Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding	null	Object	An el expression that maps to a server side UIComponent instance in a backing bean
header	null	String	Header text
footer	null	String	Footer text
toggleable	false	Boolean	Makes panel toggleable.
toggleSpeed	1000	Integer	Speed of toggling in milliseconds
collapsed	false	Boolean	Renders a toggleable panel as collapsed.
style	null	String	Style of the panel
styleClass	null	String	Style class of the panel
closable	false	Boolean	Make panel closable.
closeSpeed	1000	Integer	Speed of closing effect in milliseconds
visible	true	Boolean	Renders panel as visible.
closeTitle	null	String	Tooltip for the close button.
toggleTitle	null	String	Tooltip for the toggle button.
menuTitle	null	String	Tooltip for the menu button.
toggleOrientation	vertical	String	Defines the orientation of the toggling, valid values are vertical and horizontal.
widgetVar	null	String	Name of the client side widget

名称	默认	类型	描述
ID	空值	串	组件的唯一标识符
呈现	真正	布尔型	布尔值，用于指定组件的呈现，当设置为false时将不呈现组件。
捆绑	空值	目的	El表达式，它映射到支持Bean中的服务器端UIComponent实例
标头	空值	串	标题文本
页脚	空值	串	页脚文字
可切换	假	布尔型	使面板可切换。
toggleSpeed	1000	整数	切换速度（以毫秒为单位）
崩溃了	假	布尔型	呈现可折叠面板。
样式	空值	串	面板样式
styleClass	空值	串	面板样式类
可关闭	假	布尔型	使面板可关闭。
closeSpeed	1000	整数	闭合效果的速度（以毫秒为单位）
可见	真正	布尔型	渲染面板可见。
closeTitle	空值	串	关闭按钮的工具提示。
toggleTitle	空值	串	切换按钮的工具提示。
menuTitle	空值	串	菜单按钮的工具提示。
toggleOrientation	垂直	串	定义切换的方向，有效值为垂直和水平。
widgetVar	空值	串	客户端小部件的名称

Primefaces面板示例 (Primefaces Panel Example)

Typically, Panel used for encapsulating other components.

通常，面板用于封装其他组件。

panel.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>
		<title>Panel, PanelGrid, PanelMenu</title>
		<script name="jquery/jquery.js" library="primefaces"></script>
	</h:head>
	<h:form>
		<p:panel>
			<p:outputLabel value="Name of tutorial you're looking for:"></p:outputLabel>
			<p:inputText value="#{panelManagedBean.tutorial}"></p:inputText>
			<p:commandButton value="Search" action="#{panelManagedBean.search}" update="result"></p:commandButton>
			<p:dataTable value="#{panelManagedBean.tutorials}" var="tutorial" id="result">
				<p:column>
					<f:facet name="header">
						<p:outputLabel value="Tutorial Name"></p:outputLabel>
					</f:facet>
					<p:outputLabel value="#{tutorial}"></p:outputLabel>
				</p:column>
			</p:dataTable>
		</p:panel>
	</h:form>
</html>

PanelManagedBean.java

package com.journaldev.prime.faces.beans;

import java.util.ArrayList;
import java.util.List;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class PanelManagedBean {
	private String tutorial;
	private List<String> tutorials = new ArrayList<String>();

	public String getTutorial() {
		return tutorial;
	}

	public void setTutorial(String tutorial) {
		this.tutorial = tutorial;
	}
	
	public List<String> getTutorials() {
		return tutorials;
	}

	public void setTutorials(List<String> tutorials) {
		this.tutorials = tutorials;
	}

	public String search(){
		for(int i = 1 ; i < 11; i++){
			this.tutorials.add(this.tutorial+" Tutorial "+i);
		}
		return "";
	}
}

Primefaces面板–页眉和页脚 (Primefaces Panel – Header & Footer)

Primefaces provides you capability of specifying of Header and Footer by adding two facet components; one for header and the other for footer.

Primefaces通过添加两个构面组件为您提供指定页眉和页脚的功能；一个用于页眉，另一个用于页脚。

panel.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>
		<title>Panel, PanelGrid, PanelMenu</title>
		<script name="jquery/jquery.js" library="primefaces"></script>
	</h:head>
	<h:form>
		<p:panel>
			<f:facet name="header">
				<p:outputLabel value="Tutorials Provided"></p:outputLabel>
			</f:facet>
			<p:outputLabel value="Name of tutorial you're looking for:"></p:outputLabel>
			<p:inputText value="#{panelManagedBean.tutorial}"></p:inputText>
			<p:commandButton value="Search" action="#{panelManagedBean.search}" update="result"></p:commandButton>
			<p:dataTable value="#{panelManagedBean.tutorials}" var="tutorial" id="result">
				<p:column>
					<f:facet name="header">
						<p:outputLabel value="Tutorial Name"></p:outputLabel>
					</f:facet>
					<p:outputLabel value="#{tutorial}"></p:outputLabel>
				</p:column>
				<f:facet name="footer">
					<p:outputLabel value="Provided By Jouranldev.com"></p:outputLabel>
				</f:facet>
			</p:dataTable>
		</p:panel>
	</h:form>
</html>

Primefaces面板– Ajax行为事件 (Primefaces Panel – Ajax Behavior Events)

Primefaces provides you custom ajax behavior events that can be listened against Panel component. Toggling and closing are the only ajax events that might be fired and listened as well. By setting toggleable and closeable attribute to true, you are mostly ready for listening these events. One remaining step is by providing p:ajax for determining the methods that are responsible for handling these events.

Primefaces为您提供可针对Panel组件进行监听的自定义Ajax行为事件。切换和关闭是可能也会触发和监听的唯一ajax事件。通过将toggleable和closeable属性设置为true，您就可以开始侦听这些事件了。剩下的一步是通过提供p：ajax来确定负责处理这些事件的方法。

panel.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>
		<title>Panel, PanelGrid, PanelMenu</title>
		<script name="jquery/jquery.js" library="primefaces"></script>
	</h:head>
	<h:form>
		<p:panel id="Panel1" toggleable="true" closable="true">	
			<p:ajax event="toggle" listener="#{panelManagedBean.toggleHandle}"></p:ajax>
			<p:ajax event="close" listener="#{panelManagedBean.closeHandle}"></p:ajax>	
			<f:facet name="header">
				<p:outputLabel value="Tutorials Provided"></p:outputLabel>
			</f:facet>
			<p:outputLabel value="Name of tutorial you're looking for:"></p:outputLabel>
			<p:inputText value="#{panelManagedBean.tutorial}"></p:inputText>
			<p:commandButton value="Search" action="#{panelManagedBean.search}" update="result"></p:commandButton>
			<p:dataTable value="#{panelManagedBean.tutorials}" var="tutorial" id="result">
				<p:column>
					<f:facet name="header">
						<p:outputLabel value="Tutorial Name"></p:outputLabel>
					</f:facet>
					<p:outputLabel value="#{tutorial}"></p:outputLabel>
				</p:column>
				<f:facet name="footer">
					<p:outputLabel value="Provided By Jouranldev.com"></p:outputLabel>
				</f:facet>
			</p:dataTable>
		</p:panel>	
	</h:form>
</html>

PanelManagedBaen.java

package com.journaldev.prime.faces.beans;

import java.util.ArrayList;
import java.util.List;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

import org.primefaces.event.CloseEvent;
import org.primefaces.event.ToggleEvent;

@ManagedBean
@SessionScoped
public class PanelManagedBean {
	private String tutorial;
	private List<String> tutorials = new ArrayList<String>();

	public String getTutorial() {
		return tutorial;
	}

	public void setTutorial(String tutorial) {
		this.tutorial = tutorial;
	}
	
	public List<String> getTutorials() {
		return tutorials;
	}

	public void setTutorials(List<String> tutorials) {
		this.tutorials = tutorials;
	}

	public String search(){
		for(int i = 1 ; i < 11; i++){
			this.tutorials.add(this.tutorial+" Tutorial "+i);
		}
		return "";
	}
	
	public void toggleHandle(ToggleEvent event){
		System.out.println("Panel #"+event.getComponent().getId()+" Is Toggled");
	}
	
	public void closeHandle(CloseEvent event){
		System.out.println("Panel #"+event.getComponent().getId()+" Is Closed");
	}
}

Primefaces面板–弹出菜单 (Primefaces Panel – Popup Menu)

Panel has built-in support to display a fully customizable popup menu. For make use Panel component as a popup menu, you should define facet options which contained your defined menu.

Panel具有内置支持以显示完全可自定义的弹出菜单。为了使Panel组件用作弹出菜单，您应该定义包含定义菜单的构面选项 。

panel-PopupMenu.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>
		<title>Panel, PanelGrid, PanelMenu</title>
		<script name="jquery/jquery.js" library="primefaces"></script>
	</h:head>
	<h:form>
		<p:panel id="Panel1" closable="true" toggleable="true">	
			<f:facet name="options">
				<p:menu>
					<p:menuitem value="Primefaces Tutorials"></p:menuitem>
					<p:menuitem value="Hibernate Tutorials"></p:menuitem>
					<p:menuitem value="JPA Tutorials"></p:menuitem>
				</p:menu>
			</f:facet>
			<p:ajax event="toggle" listener="#{panelManagedBean.toggleHandle}"></p:ajax>
			<p:ajax event="close" listener="#{panelManagedBean.closeHandle}"></p:ajax>	
			<f:facet name="header">
				<p:outputLabel value="Tutorials Provided"></p:outputLabel>
			</f:facet>
			<p:outputLabel value="Name of tutorial you're looking for:"></p:outputLabel>
			<p:inputText value="#{panelManagedBean.tutorial}"></p:inputText>
			<p:commandButton value="Search" action="#{panelManagedBean.search}" update="result"></p:commandButton>
			<p:dataTable value="#{panelManagedBean.tutorials}" var="tutorial" id="result">
				<p:column>
					<f:facet name="header">
						<p:outputLabel value="Tutorial Name"></p:outputLabel>
					</f:facet>
					<p:outputLabel value="#{tutorial}"></p:outputLabel>
				</p:column>
				<f:facet name="footer">
					<p:outputLabel value="Provided By Jouranldev.com"></p:outputLabel>
				</f:facet>
			</p:dataTable>			
		</p:panel>	
	</h:form>
</html>

Primefaces面板–自定义操作 (Primefaces Panel – Custom Actions)

It’s also permitted to add custom actions into your panel titlebar by using facet actions.

还可以通过使用facet操作将自定义操作添加到面板标题栏中。

panel-CustomActions.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>
		<title>Panel, PanelGrid, PanelMenu</title>
		<script name="jquery/jquery.js" library="primefaces"></script>
	</h:head>
	<h:form>
		<p:panel id="Panel1" closable="true" toggleable="true">	
			<f:facet name="actions">
				<p:commandButton value="Search Using Tutorial's Author"></p:commandButton>
				<p:commandButton value="Search Using Tutorial's Name"></p:commandButton>
				<p:commandButton value="Search Using Tutorial's Category"></p:commandButton>
			</f:facet>
			<p:ajax event="toggle" listener="#{panelManagedBean.toggleHandle}"></p:ajax>
			<p:ajax event="close" listener="#{panelManagedBean.closeHandle}"></p:ajax>	
			<f:facet name="header">
				<p:outputLabel value="Tutorials Provided"></p:outputLabel>
			</f:facet>
			<p:outputLabel value="Name of tutorial you're looking for:"></p:outputLabel>
			<p:inputText value="#{panelManagedBean.tutorial}"></p:inputText>
			<p:commandButton value="Search" action="#{panelManagedBean.search}" update="result"></p:commandButton>
			<p:dataTable value="#{panelManagedBean.tutorials}" var="tutorial" id="result">
				<p:column>
					<f:facet name="header">
						<p:outputLabel value="Tutorial Name"></p:outputLabel>
					</f:facet>
					<p:outputLabel value="#{tutorial}"></p:outputLabel>
				</p:column>
				<f:facet name="footer">
					<p:outputLabel value="Provided By Jouranldev.com"></p:outputLabel>
				</f:facet>
			</p:dataTable>			
		</p:panel>	
	</h:form>
</html>

Primefaces PanelGrid (Primefaces PanelGrid)

PanelGrid is an extension to the standard panelGrid component with additional features such as theming and colspan-rowspan.

PanelGrid是对标准panelGrid组件的扩展，具有附加功能，例如主题化和colspan-rowspan。

Tag	PanelGrid
Component Class	org.primefaces.component.panelgrid.PanelGridRenderer
Component Type	org.primefaces.component.PanelGrid
Component Family	org.primefaces.component
Renderer Type	org.primefaces.component.PanelGridRenderer
Renderer Class	org.primefaces.component.panelgrid.PanelGridRenderer

标签	面板网格
组件类别	org.primefaces.component.panelgrid.PanelGridRenderer
组件类型	org.primefaces.component.PanelGrid
组件族	org.primefaces.component
渲染器类型	org.primefaces.component.PanelGridRenderer
渲染器类	org.primefaces.component.panelgrid.PanelGridRenderer

Primefaces PanelGrid属性 (Primefaces PanelGrid Attributes)

Name	Default	Type	Description
id	null	String	Unique identifier of the component
rendered	true	Boolean	Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding	null	Object	An el expression that maps to a server side UIComponent instance in a backing bean
columns	false	Integer	Number of columns in grid.
style	null	String	Inline style of the panel.
styleClass	null	String	Style class of the panel.
columnClasses	null	String	Comma separated list of column style classes.

名称	默认	类型	描述
ID	空值	串	组件的唯一标识符
呈现	真正	布尔型	布尔值，用于指定组件的呈现，当设置为false时将不呈现组件。
捆绑	空值	目的	El表达式，它映射到支持Bean中的服务器端UIComponent实例
列	假	整数	网格中的列数。
样式	空值	串	面板的内联样式。
styleClass	空值	串	面板的样式类。
columnClasses	空值	串	逗号分隔的列样式类列表。

Primefaces PanelGrid示例 (Primefaces PanelGrid Example)

PanelGrid component is used mainly for laying out form’s components into rows and columns. Typically, you specify columns attribute to determine the number of columns your panelGrid component has. However, no need to specify the number of rows, every defined component has occupied one column and once the number of columns has reached a new row will be added.

PanelGrid组件主要用于将表单的组件布置成行和列。通常，您可以指定columns属性来确定panelGrid组件具有的列数。但是，无需指定行数，每个定义的组件都占用一列，并且一旦达到列数，便会添加新行。

panelGrid.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>
		<title>Panel, PanelGrid, PanelMenu</title>
		<script name="jquery/jquery.js" library="primefaces"></script>
	</h:head>
	<h:form>
		<p:panelGrid columns="2">
			<p:outputLabel value="Component"></p:outputLabel>
			<p:outputLabel value="Component"></p:outputLabel>
			<p:outputLabel value="Component"></p:outputLabel>
		</p:panelGrid>	
	</h:form>
</html>

Just to clarify, your PanelGrid has defined three components inside, with number of columns equal for 2. The first and second components will occupy first and second columns respectively. A new row will be added into your PanelGrid for holding last defined component and for sure it will be located at the long of the first column. You can make use of different PanelGrid inside each other, every single PanelGrid will occupy one column as well.

需要澄清的是，PanelGrid在内部定义了三个组件，列数等于2。第一个和第二个组件将分别占据第一和第二列。新行将添加到PanelGrid中，以保存最后定义的组件，并确保它位于第一列的长处。您可以在彼此之间使用不同的PanelGrid，每一个PanelGrid也将占据一列。

panelGrid.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>
		<title>Panel, PanelGrid, PanelMenu</title>
		<script name="jquery/jquery.js" library="primefaces"></script>
	</h:head>
	<h:form>
		<p:panelGrid columns="2">
			<p:panelGrid columns="2">
				<p:outputLabel value="Component"></p:outputLabel>
				<p:outputLabel value="Component"></p:outputLabel>
			</p:panelGrid>
			<p:outputLabel value="Component"></p:outputLabel>
		</p:panelGrid>	
	</h:form>
</html>

All of your components are located at a single row, for sure that’s happened because of using inner PanelGrid which has located at the first column.

您的所有组件都位于单行中，确保确实发生了这种情况，这是因为使用了位于第一列的内部PanelGrid。

Primefaces PanelGrid –页眉和页脚 (Primefaces PanelGrid – Header And Footer)

PanelGrid provides facets for Header and Footer as Panel component does well.

由于Panel组件表现出色，PanelGrid为页眉和页脚提供了方面。

panelGrid.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>
		<title>Panel, PanelGrid, PanelMenu</title>
		<script name="jquery/jquery.js" library="primefaces"></script>
	</h:head>
	<h:form>
		<p:panelGrid columns="2">
			<f:facet name="header">
				<p:outputLabel value="Header"></p:outputLabel>
			</f:facet>
			<p:panelGrid columns="2">
				<p:outputLabel value="Component"></p:outputLabel>
				<p:outputLabel value="Component"></p:outputLabel>
			</p:panelGrid>
			<p:outputLabel value="Component"></p:outputLabel>
			<f:facet name="footer">
				<p:outputLabel value="Footer"></p:outputLabel>
			</f:facet>			
		</p:panelGrid>	
	</h:form>
</html>

Primefaces PanelGrid – Rowspan和Colspan (Primefaces PanelGrid – Rowspan & Colspan)

PanelGrid supports rowspan and colspan as well, in this case row and column markup should be defined manually.

PanelGrid也支持rowpan和colspan，在这种情况下，应手动定义行和列标记。

panelGrid-Rowspan-Colspan.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>
		<title>Panel, PanelGrid, PanelMenu</title>
		<script name="jquery/jquery.js" library="primefaces"></script>
	</h:head>
	<h:form>
		<p:panelGrid>
			<p:row>
				<p:column>
					<p:outputLabel value="Enter Username:"></p:outputLabel>
				</p:column>
				<p:column>
					<p:inputText></p:inputText>
				</p:column>
			</p:row>
			<p:row>
				<p:column>
					<p:outputLabel value="Enter Password:"></p:outputLabel>
				</p:column>
				<p:column>
					<p:inputText></p:inputText>
				</p:column>			
			</p:row>
			<p:row>	
				<p:column>		
					<p:commandButton value="Login"></p:commandButton>
				</p:column>
				<p:column>
				</p:column>
			</p:row>
		</p:panelGrid>	
	</h:form>
</html>

Primefaces PanelMenu (Primefaces PanelMenu)

PanelMenu is hybrid component of accordionPanel and tree component.

PanelMenu是AccordionPanel和tree组件的混合组件。

Tag	PanelMenu
Component Class	org.primefaces.component.panelmenu.PanelMenu
Component Type	org.primefaces.component.PanelMenu
Component Family	org.primefaces.component
Renderer Type	org.primefaces.component.PanelMenuRenderer
Renderer Class	org.primefaces.component.panelmenu.PanelMenuRenderer

标签	面板菜单
组件类别	org.primefaces.component.panelmenu.PanelMenu
组件类型	org.primefaces.component.PanelMenu
组件族	org.primefaces.component
渲染器类型	org.primefaces.component.PanelMenuRenderer
渲染器类	org.primefaces.component.panelmenu.PanelMenuRenderer

Primefaces PanelMenu属性 (Primefaces PanelMenu Attributes)

Name	Default	Type	Description
id	null	String	Unique identifier of the component
rendered	true	Boolean	Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding	null	Object	An el expression that maps to a server side UIComponent instance in a backing bean
model	null	MenuModel	MenuModel instance to build menu dynamically.
style	null	String	Inline style of the component.
styleClass	null	String	Style class of the component.
widgetVar	null	String	Name of the client side widget.

名称	默认	类型	描述
ID	空值	串	组件的唯一标识符
呈现	真正	布尔型	布尔值，用于指定组件的呈现，当设置为false时将不呈现组件。
捆绑	空值	目的	El表达式，它映射到支持Bean中的服务器端UIComponent实例
模型	空值	菜单型号	MenuModel实例以动态构建菜单。
样式	空值	串	组件的内联样式。
styleClass	空值	串	组件的样式类。
widgetVar	空值	串	客户端小部件的名称。

Primefaces PanelMenu示例 (Primefaces PanelMenu Example)

PanelMenu consists of submenus and menuitems. First level of submenu are rendered as AccordionPanel and descendant submenus are rendered as tree nodes. Like in any other menu components had discussed before, menuitems can be used for achieving ajax, non-ajax and simple GET requests.

PanelMenu由子菜单和菜单项组成。子菜单的第一级呈现为AccordionPanel ，子级子菜单呈现为树节点。像之前讨论的任何其他菜单组件一样，菜单项可用于实现ajax，非ajax和简单的GET请求。

panelMenu.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>
	<title>Panel, PanelGrid, PanelMenu</title>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
	<p:panelMenu style="width:200px">
		<p:submenu label="JournalDev Tutorials">
			<p:submenu label="Links" icon="ui-icon-extlink">
				<p:submenu label="Tutorials" icon="ui-icon-heart">
					<p:menuitem value="Primefaces Tutorials" url="https://www.journaldev.com/dev/primefaces" />
					<p:menuitem value="Java EE Tutorials" url="https://www.journaldev.com/dev/java/j2ee" />
				</p:submenu>
			</p:submenu>
			<p:menuitem value="Go To JournalDev" url="https://www.primefaces.org" />
		</p:submenu>
	</p:panelMenu>
	</h:form>
</html>

Primefaces Panel PanelGrip和PanelMenu摘要 (Primefaces Panel PanelGrip and PanelMenu Summary)

This tutorial provides you a detailed explanation for how can you use Panel, PanelGrid and PanelMenu for organizing and laying out your different components. Contribute us by commenting below and find given source code.

本教程为您提供了详细的说明，说明如何使用Panel，PanelGrid和PanelMenu来组织和布置不同的组件。通过在下面评论来贡献我们，找到给定的源代码。

Download Primefaces Panel Project 下载Primefaces Panel项目

翻译自: https://www.journaldev.com/3917/primefaces-panel-panelgrid-panelmenu-example-tutorial

primefaces教程

cunchi4221

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
primefaces教程_Primefaces面板，PanelGrid和PanelMenu示例教程

primefaces教程Welcome to Primefaces Panel and PanelGrid example tutorial. We will also look into PanelMenu that provides a way of organizing submenus and menuitems in a hierarchical form mixed with acco...
复制链接

扫一扫