Primefaces向导组件示例-IGI

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

Primefaces向导组件提供了ajax增强的UI，可在单个页面中轻松实现工作流程。
向导由几个子选项卡组件组成，其中每个选项卡代表过程中的一个步骤。

Primefaces向导

Tag	Wizard
Component Class	org.primefaces.component.wizard.Wizard
Component Type	org.primefaces.component.Wizard
Component Family	org.primefaces.component
Renderer Type	org.primefaces.component.WizardRenderer
Renderer Class	org.primefaces.component.wizard.WizardRenderer

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 won't be rendered
binding	null	Object	An el expression that maps to a server side UIComponent instance in a backing bean
step	0	String	Id of the current step in flow
style	null	String	Style of the main wizard container element.
styleClass	null	String	Style class of the main wizard container element.
flowListener	null	MethodExpr	Server side listener to invoke when wizard attempts to go forward or back
showNavBar	true	Boolean	Specifies visibility of default navigator arrows.
showStepStatus	true	Boolean	Specifies visibility of default step title bar.
onback	null	String	Javascript event handler to be invoked when flow goes back
onnext	null	String	Javascript event handler to be invoked when flow goes forward
nextLabel	null	String	Label of next navigation button.
backLabel	null	String	Label of back navigation button.
widgetVar	null	String

Primefaces向导入门

下面的简单示例为您提供了使用向导组件来启动教程注册向导的方法。

tutorialRegistration.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>Wizard</title>
		<script name="jquery/jquery.js" library="primefaces"></script>
	</h:head>
	<h:form>
		<div style="width:500px">
			<p:wizard>
				<p:tab id="tutorialBasicInformation">
					<p:panelGrid columns="2">
						<p:outputLabel value="Tutorial Name:"<h:inputText value="#{tutorialRegistrationBean.tutorial.tutorialName}"></h:inputText>
						<p:outputLabel value="Tutorial Instructor:"<h:inputText value="#{tutorialRegistrationBean.tutorial.tutorialInstructor}"></h:inputText>
						<p:outputLabel value="Tutorial Period:"<h:inputText value="#{tutorialRegistrationBean.tutorial.tutorialPeriod}"></h:inputText>
					</p:panelGrid>
				</p:tab>
				<p:tab id="tutorialRegistration">
					<p:panelGrid columns="2">
						<p:outputLabel value="Tutorial Price:"<h:inputText value="#{tutorialRegistrationBean.tutorial.tutorialPrice}"></h:inputText>
						<p:outputLabel value="Tutorial Start Date:"<h:inputText value="#{tutorialRegistrationBean.tutorial.tutorialStartDate}"></h:inputText>
						<p:outputLabel value="Tutorial End Date:"<h:inputText value="#{tutorialRegistrationBean.tutorial.tutorialEndDate}"></h:inputText>
					</p:panelGrid>
					<h:commandButton value="Register" action="#{tutorialRegistrationBean.register}"></h:commandButton>
				</p:tab>
			</p:wizard>
			<p:dataTable value="#{tutorialRegistrationBean.tutorials}" var="tutorial">
				<f:facet name="header">
					<p:outputLabel value="Tutorials List"
				</f:facet>
				<p:column>
					<h:outputText value="#{tutorial.tutorialName}"
				</p:column>
				<p:column>
					<h:outputText value="#{tutorial.tutorialInstructor}"
				</p:column>
				<p:column>
					<h:outputText value="#{tutorial.tutorialStartDate}"
				</p:column>
				<p:column>
					<h:outputText value="#{tutorial.tutorialEndDate}"
				</p:column>
			</p:dataTable>
		</div>
	</h:form>
</html>

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 com.theitroad.data.Tutorial;

@ManagedBean
@SessionScoped
public class TutorialRegistrationBean {

	private List<Tutorial> tutorials = new ArrayList<Tutorial>();
	private Tutorial tutorial = new Tutorial();

	public Tutorial getTutorial() {
		return tutorial;
	}

	public void setTutorial(Tutorial tutorial) {
		this.tutorial = tutorial;
	}

	public List<Tutorial> getTutorials() {
		return tutorials;
	}

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

	public String register(){
		this.tutorials.add(tutorial);
		this.tutorial = new Tutorial();
		return "";
	}
}

package com.theitroad.data;

public class Tutorial {

	private String tutorialName;
	private String tutorialInstructor;
	private String tutorialPeriod;
	private String tutorialPrice;
	private String tutorialStartDate;
	private String tutorialEndDate;

	public String getTutorialName() {
		return tutorialName;
	}
	public void setTutorialName(String tutorialName) {
		this.tutorialName = tutorialName;
	}
	public String getTutorialInstructor() {
		return tutorialInstructor;
	}
	public void setTutorialInstructor(String tutorialInstructor) {
		this.tutorialInstructor = tutorialInstructor;
	}
	public String getTutorialPeriod() {
		return tutorialPeriod;
	}
	public void setTutorialPeriod(String tutorialPeriod) {
		this.tutorialPeriod = tutorialPeriod;
	}
	public String getTutorialPrice() {
		return tutorialPrice;
	}
	public void setTutorialPrice(String tutorialPrice) {
		this.tutorialPrice = tutorialPrice;
	}
	public String getTutorialStartDate() {
		return tutorialStartDate;
	}
	public void setTutorialStartDate(String tutorialStartDate) {
		this.tutorialStartDate = tutorialStartDate;
	}
	public String getTutorialEndDate() {
		return tutorialEndDate;
	}
	public void setTutorialEndDate(String tutorialEndDate) {
		this.tutorialEndDate = tutorialEndDate;
	}
}

以下是上述代码的详细说明：

请求一个教程普通的旧Java对象来保存用户将提供的教程信息。
开发了TutorialRegistrationBean bean来处理注册过程。
向导组件使用两个选项卡来定义所需的步骤。
第一个选项卡用于收集教程的基本信息，第二个选项卡用于保留除注册将暂时保存在教程列表中的已定义教程的操作之外的其他信息。
DataTable组件将用于显示已注册的教程。
在步骤之间切换是基于ajax的，这意味着每个步骤都将使用ajax动态加载。
部分验证也部分发生。
当前步骤唯一有效，如果当前步骤有效，则下一个选项卡的内容将加载ajax。
当流程返回时，不会执行验证。
您可以通过与下一步和后退内置操作进行交互来在向导定义的步骤之间导航。

FlowListener

向导组件提供了与定义的方法相关联的侦听器机制，用于侦听向导向后或者向前的尝试。
遵循前面讨论的相同示例，并添加了FlowListener功能。

tutorialRegistration.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>Wizard</title>
		<script name="jquery/jquery.js" library="primefaces"></script>
	</h:head>
	<h:form>
		<div style="width:500px">
			<p:wizard flowListener="#{tutorialRegistrationBean.flowListener}">
				<p:tab id="tutorialBasicInformation">
					<p:panelGrid columns="2">
						<p:outputLabel value="Tutorial Name:"<h:inputText value="#{tutorialRegistrationBean.tutorial.tutorialName}"></h:inputText>
						<p:outputLabel value="Tutorial Instructor:"<h:inputText value="#{tutorialRegistrationBean.tutorial.tutorialInstructor}"></h:inputText>
						<p:outputLabel value="Tutorial Period:"<h:inputText value="#{tutorialRegistrationBean.tutorial.tutorialPeriod}"></h:inputText>
					</p:panelGrid>
				</p:tab>
				<p:tab id="tutorialRegistration">
					<p:panelGrid columns="2">
						<p:outputLabel value="Tutorial Price:"<h:inputText value="#{tutorialRegistrationBean.tutorial.tutorialPrice}"></h:inputText>
						<p:outputLabel value="Tutorial Start Date:"<h:inputText value="#{tutorialRegistrationBean.tutorial.tutorialStartDate}"></h:inputText>
						<p:outputLabel value="Tutorial End Date:"<h:inputText value="#{tutorialRegistrationBean.tutorial.tutorialEndDate}"></h:inputText>
					</p:panelGrid>
					<h:commandButton value="Register" action="#{tutorialRegistrationBean.register}"></h:commandButton>
				</p:tab>
			</p:wizard>
			<p:dataTable value="#{tutorialRegistrationBean.tutorials}" var="tutorial">
				<f:facet name="header">
					<p:outputLabel value="Tutorials List"
				</f:facet>
				<p:column>
					<h:outputText value="#{tutorial.tutorialName}"
				</p:column>
				<p:column>
					<h:outputText value="#{tutorial.tutorialInstructor}"
				</p:column>
				<p:column>
					<h:outputText value="#{tutorial.tutorialStartDate}"
				</p:column>
				<p:column>
					<h:outputText value="#{tutorial.tutorialEndDate}"
				</p:column>
			</p:dataTable>
		</div>
	</h:form>
</html>

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.FlowEvent;

import com.theitroad.data.Tutorial;

@ManagedBean
@SessionScoped
public class TutorialRegistrationBean {

private List tutorials = new ArrayList();
private Tutorial tutorial = new Tutorial();

public Tutorial getTutorial() {
return tutorial;
}

public void setTutorial(Tutorial tutorial) {
this.tutorial = tutorial;
}

public List getTutorials() {
return tutorials;
}

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

public String register(){
this.tutorials.add(tutorial);
this.tutorial = new Tutorial();
return "";
}

public String flowListener(FlowEvent event){
System.out.println("Flow Event Happened :: New Step :: "+event.getNewStep()+" :: Old Step :: "+event.getOldStep());
return event.getNewStep();
}
}

这是上面代码的详细说明：

flowListener方法已定义用于处理后退和前进事件。
通过针对FlowEvent对象调用各自的方法来确定旧步骤和下一步的能力。
与FlowListener关联的方法应返回一个String，该String指定要继续的下一步。
非线性方式可以通过返回所引用标签的标识符来实现。
由id属性引用的标签，使用tab组件定义的标签。
转发事件已启动，因此已创建FlowEvent。
访问上一步和下一步，并显示其标识符。
如果向导流需要通知其他一些组件，则使用RequestContext.update(clientId)api。

Primefaces向导客户端API

根据所有Primefaces组件的经验，可以通过对WidgetVar属性调用JavaScript方法来控制该组件，该控件的值将是PrimeFaces.widget.Wizard的一个实例。
本节将重点介绍用于此目的的这些方法。

Method	Params	Return Type	Description
next()	–	void	Proceeds to next step
back()	–	void	Proceeds to previous step
getStepIndex()	–	Number	Returns the index of current step.
showNextNav()	–	void	Shows next button.
hideNextNav()	–	void	Hides next button.
showBackNav()	–	void	Shows back button.
hideBackNav()	–	void	Hides back button.

下面的示例示例为您提供了执行下一步操作和返回操作的基本HTML按钮。

tutorialRegistration.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>Wizard</title>
		<script name="jquery/jquery.js" library="primefaces"></script>
		<script>
			function next(){
				PF('wizard').next();
			}

			function back(){
				PF('wizard').back();
			}
		</script>
	</h:head>
	<h:form>
		<div style="width:500px">
			<input value="Next" type="button" onclick="next();"
			<input value="Prev" type="button" onclick="back();"
			<p:wizard widgetVar="wizard" flowListener="#{tutorialRegistrationBean.flowListener}" showNavBar="false">
				<p:tab id="tutorialBasicInformation">
					<p:panelGrid columns="2">
						<p:outputLabel value="Tutorial Name:"<h:inputText value="#{tutorialRegistrationBean.tutorial.tutorialName}"></h:inputText>
						<p:outputLabel value="Tutorial Instructor:"<h:inputText value="#{tutorialRegistrationBean.tutorial.tutorialInstructor}"></h:inputText>
						<p:outputLabel value="Tutorial Period:"<h:inputText value="#{tutorialRegistrationBean.tutorial.tutorialPeriod}"></h:inputText>
					</p:panelGrid>
				</p:tab>
				<p:tab id="tutorialRegistration">
					<p:panelGrid columns="2">
						<p:outputLabel value="Tutorial Price:"<h:inputText value="#{tutorialRegistrationBean.tutorial.tutorialPrice}"></h:inputText>
						<p:outputLabel value="Tutorial Start Date:"<h:inputText value="#{tutorialRegistrationBean.tutorial.tutorialStartDate}"></h:inputText>
						<p:outputLabel value="Tutorial End Date:"<h:inputText value="#{tutorialRegistrationBean.tutorial.tutorialEndDate}"></h:inputText>
					</p:panelGrid>
					<h:commandButton value="Register" action="#{tutorialRegistrationBean.register}"></h:commandButton>
				</p:tab>
			</p:wizard>
			<p:dataTable value="#{tutorialRegistrationBean.tutorials}" var="tutorial">
				<f:facet name="header">
					<p:outputLabel value="Tutorials List"
				</f:facet>
				<p:column>
					<h:outputText value="#{tutorial.tutorialName}"
				</p:column>
				<p:column>
					<h:outputText value="#{tutorial.tutorialInstructor}"
				</p:column>
				<p:column>
					<h:outputText value="#{tutorial.tutorialStartDate}"
				</p:column>
				<p:column>
					<h:outputText value="#{tutorial.tutorialEndDate}"
				</p:column>
			</p:dataTable>
		</div>
	</h:form>
</html>

以下是上述代码的详细说明：

通过将showNavBar设置为false，我们消除了内置导航。
我们提供了两个HTML按钮，一个用于下一个，第二个用于上一个。
我们通过使用向导的widgetVar JavaScript对象控制了向导。
我们已使用客户端API自定义向导组件。

Primefaces向导客户端回调

向导具有onback和onnext属性，以防在向导来回移动后需要执行自定义JavaScript。
您只需要提供JavaScript函数的名称作为这些属性的值即可。

tutorialRegistration.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>Wizard</title>
		<script name="jquery/jquery.js" library="primefaces"></script>
		<script>
			function next(){
				PF('wizard').next();
			}

			function back(){
				PF('wizard').back();
			}

			function onBack(){
				alert('Back Client Side Callback');
			}

			function onnext(){
				alert('Next Client Side Callback');
			}
		</script>
	</h:head>
	<h:form>
		<div style="width:500px">
			<input value="Next" type="button" onclick="next();"
			<input value="Prev" type="button" onclick="back();"
			<p:wizard widgetVar="wizard" flowListener="#{tutorialRegistrationBean.flowListener}" showNavBar="false" onback="onBack();" onnext="onnext();">
				<p:tab id="tutorialBasicInformation">
					<p:panelGrid columns="2">
						<p:outputLabel value="Tutorial Name:"<h:inputText value="#{tutorialRegistrationBean.tutorial.tutorialName}"></h:inputText>
						<p:outputLabel value="Tutorial Instructor:"<h:inputText value="#{tutorialRegistrationBean.tutorial.tutorialInstructor}"></h:inputText>
						<p:outputLabel value="Tutorial Period:"<h:inputText value="#{tutorialRegistrationBean.tutorial.tutorialPeriod}"></h:inputText>
					</p:panelGrid>
				</p:tab>
				<p:tab id="tutorialRegistration">
					<p:panelGrid columns="2">
						<p:outputLabel value="Tutorial Price:"<h:inputText value="#{tutorialRegistrationBean.tutorial.tutorialPrice}"></h:inputText>
						<p:outputLabel value="Tutorial Start Date:"<h:inputText value="#{tutorialRegistrationBean.tutorial.tutorialStartDate}"></h:inputText>
						<p:outputLabel value="Tutorial End Date:"<h:inputText value="#{tutorialRegistrationBean.tutorial.tutorialEndDate}"></h:inputText>
					</p:panelGrid>
					<h:commandButton value="Register" action="#{tutorialRegistrationBean.register}"></h:commandButton>
				</p:tab>
			</p:wizard>
			<p:dataTable value="#{tutorialRegistrationBean.tutorials}" var="tutorial">
				<f:facet name="header">
					<p:outputLabel value="Tutorials List"
				</f:facet>
				<p:column>
					<h:outputText value="#{tutorial.tutorialName}"
				</p:column>
				<p:column>
					<h:outputText value="#{tutorial.tutorialInstructor}"
				</p:column>
				<p:column>
					<h:outputText value="#{tutorial.tutorialStartDate}"
				</p:column>
				<p:column>
					<h:outputText value="#{tutorial.tutorialEndDate}"
				</p:column>
			</p:dataTable>
		</div>
	</h:form>
</html>

Primefaces向导组件示例