primefaces_Primefaces向导组件示例

primefaces

Primefaces Wizard Component provides an ajax enhanced UI to implement a workflow easily in a single page. Wizard consists of several child tab components where each tab represents a step in the process.

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

Primefaces向导 (Primefaces Wizard)

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

标签	巫师
组件类别	org.primefaces.component.wizard.Wizard
组件类型	org.primefaces.component.Wizard
组件族	org.primefaces.component
渲染器类型	org.primefaces.component.WizardRenderer
渲染器类	org.primefaces.component.wizard.WizardRenderer

Primefaces向导属性 (Primefaces Wizard 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 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

名称	默认	类型	描述
ID	空值	串	组件的唯一标识符。
呈现	真正	布尔型	布尔值，用于指定组件的呈现，当设置为false时将不呈现组件
捆绑	空值	目的	El表达式，它映射到支持Bean中的服务器端UIComponent实例
步	0	串	当前流程的ID
样式	空值	串	主向导容器元素的样式。
styleClass	空值	串	主向导容器元素的样式类。
flowListener	空值	方法专家	向导尝试前进或后退时调用的服务器端侦听器
showNavBar	真正	布尔型	指定默认导航器箭头的可见性。
showStepStatus	真正	布尔型	指定默认步骤标题栏的可见性。
背部	空值	串	流返回时将调用Javascript事件处理程序
下一个	空值	串	流前进时将调用Javascript事件处理程序
nextLabel	空值	串	下一个导航按钮的标签。
后标签	空值	串	后退导航按钮的标签。
widgetVar	空值	串

Primefaces向导入门 (Getting Started With Primefaces Wizard)

Following below simple example that provides you the using of Wizard component for initiating a tutorial registration wizard.

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

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.journaldev.prime.faces.beans;import java.util.ArrayList;
import java.util.List;import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;import com.journaldev.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.journaldev.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;}
}

Here’s a detailed explanation for the code above:

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

A tutorial plain old java object is requested for holding the tutorial information that user will provide.请求一个教程普通的旧Java对象来保存用户将提供的教程信息。
A TutorialRegistrationBean bean is developed for handle the registration process.开发了TutorialRegistrationBean bean来处理注册过程。
Wizard component used two tabs for defining the required steps; first tab for gathering the basic information of tutorial while the second tab for remaining information in addition to register action that will get defined tutorial retained temporarily inside a list of tutorial.向导组件使用两个选项卡来定义所需的步骤。第一个选项卡用于收集教程的基本信息，第二个选项卡用于保留除注册将暂时保存在教程列表中的已定义教程的操作之外的其他信息。
DataTable component will be used for displaying the tutorials registered.DataTable组件将用于显示已注册的教程。
Switching between steps is based on ajax, meaning each step is loaded dynamically with ajax. Partial validation is also happened partially; the only current steps is validated, if the current step is valid, next tab’s content are loaded with ajax.在步骤之间切换是基于ajax的，这意味着每个步骤都将使用ajax动态加载。部分验证也会部分发生。唯一的当前步骤是经过验证的，如果当前步骤有效，则下一个选项卡的内容将加载ajax。
Validations aren’t executed when flow goes back.流返回时不执行验证。

You can navigate between Wizard’s defined steps by interacting with Next and Back built-in actions.您可以通过与“ 下一步”和“ 后退”内置操作进行交互来在向导的定义步骤之间导航。

FlowListener (FlowListener)

Wizard component provides a listener mechanism that associated with a defined method for listening wizard attempts to go back or forward. Following the same sample discussed previously with FlowListener added functionality.

向导组件提供了与定义的方法相关联的侦听器机制，用于侦听向导向后或向前的尝试。遵循前面讨论的相同示例，并添加了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.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.FlowEvent;import com.journaldev.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();
}
}

Here’s the detailed explanation for the code above:

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

flowListener method has defined for handling the backward and forward events.flowListener方法已定义用于处理后退和前进事件。
The ability to determine the old step and the next step by invoking their respective methods against FlowEvent object.通过对FlowEvent对象调用各自的方法来确定旧步骤和下一步的能力。
FlowListener associated method should return a String that specify the next step you would be moving on. Non linear manner can be achieved by returning the identifier for the referenced tab. Tabs referenced by id attribute, Tabs defined using tab component.与FlowListener关联的方法应返回一个String ，该String指定您将继续进行的下一步。非线性方式可以通过返回所引用标签的标识符来实现。由id属性引用的选项卡，使用选项卡组件定义的选项卡 。

Forward event has been initiated thus an FlowEvent has been created. Old step and next step are accessed and their identifiers are displayed.转发事件已启动，因此已创建FlowEvent。访问上一步和下一步，并显示其标识符。
In case you’ve required some other components to be notified as a result of Wizard flow, RequestContext.update(clientId) api is used.如果由于向导流而需要通知某些其他组件，则使用RequestContext.update（ clientId ）api 。

Primefaces向导客户端API (Primefaces Wizard Client Side API)

As experienced with all of Primefaces components, the component can be controlled by invoking JavaScript method against the WidgetVar attribute which its value would be an instance of PrimeFaces.widget.Wizard. This section will spot lights into these methods used for this purpose.

正如所有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.

方法	参数	返回类型	描述
下一个（）	–	虚空	进行下一步
背部（）	–	虚空	前进至上一步
getStepIndex（）	–	数	返回当前步骤的索引。
showNextNav（）	–	虚空	显示下一个按钮。
hideNextNav（）	–	虚空	隐藏下一个按钮。
showBackNav（）	–	虚空	显示后退按钮。
hideBackNav（）	–	虚空	隐藏后退按钮。

Following sample example that provides you a basic HTML button to achieve next and back actions.

下面的示例示例为您提供了执行下一步操作和返回操作的基本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>

Here’s detailed explanation for the code above:

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

We’ve eliminated the built-in navigation by setting showNavBar to false.通过将showNavBar设置为false，我们消除了内置导航。
We’ve provided two HTML button, one for next and second for previous.我们提供了两个HTML按钮，一个用于下一个，第二个用于上一个。
We’ve controlled the Wizard by using its widgetVar JavaScript object.我们已经使用其widgetVar JavaScript对象控制了向导。
We’ve used Client Side API to customize the Wizard component.我们已经使用客户端API自定义向导组件。

Primefaces向导客户端回调 (Primefaces Wizard Client Side Callback)

Wizard is equipped with onback and onnext attributes, in case you need to execute custom JavaScript after wizard goes back or forth. You just need to provide the names of JavaScript functions as the values of these attributes.

向导具有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向导示例摘要 (Primefaces Wizard Example Summary)

Primefaces Wizard component help the user complete certain business scenario through moving on sequenced steps. You can download the sample project from the below link.

Primefaces向导组件可帮助用户通过按顺序执行的步骤来完成某些业务场景。您可以从下面的链接下载示例项目。

Download PrimeFaces Wizard Project下载PrimeFaces向导项目

翻译自: https://www.journaldev.com/3415/primefaces-wizard-example

primefaces