Primefaces面板，PanelGrid和PanelMenu示例教程-IGI

时间：2020-02-23 14:41:39 　来源:igfitidea点击:

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

Primefaces面板

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

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

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>
			<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.theitroad.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通过添加两个facet组件为您提供指定Header和Footer的功能;一个用于页眉，另一个用于页脚。

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行为事件。
切换和关闭是可能也会触发和监听的唯一ajax事件。
通过将可切换和可关闭属性设置为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.theitroad.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面板–弹出菜单

Panel具有内置支持以显示完全可自定义的弹出菜单。
要将Panel组件用作弹出菜单，应定义包含定义菜单的Facet选项。

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面板–自定义操作

还可以使用构面操作将自定义操作添加到面板标题列中。

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

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

Primefaces PanelGrid属性

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.

Primefaces 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:outputLabel value="Component"></p:outputLabel>
			<p:outputLabel value="Component"></p:outputLabel>
			<p:outputLabel value="Component"></p:outputLabel>
		</p:panelGrid>	
	</h:form>
</html>

需要澄清的是，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>

您的所有组件都位于同一行中，这肯定是由于使用了位于第一列的内部PanelGrid而发生的。

Primefaces PanelGrid –页眉和页脚

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

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

Primefaces PanelMenu属性

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.

Primefaces PanelMenu示例

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="theitroad 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.theitroad.local/dev/primefaces" 
					<p:menuitem value="Java EE Tutorials" url="https://www.theitroad.local/dev/java/j2ee" 
				</p:submenu>
			</p:submenu>
			<p:menuitem value="Go To theitroad" url="https://www.primefaces.org" 
		</p:submenu>
	</p:panelMenu>
	</h:form>
</html>

Primefaces面板，PanelGrid和PanelMenu示例教程