primefaces教程
Different tutorials were provided here have introduced various Primefaces components and the way in which Ajax component could be used for ajaxifying. Using of ajax component won’t be helpful if you don’t look at deeply. This tutorial aimed to help you gather the required information that makes the use of ajax component much easier.
这里提供了不同的教程,介绍了各种Primefaces组件以及Ajax组件可用于进行Ajaxification的方式。 如果您不深入研究,使用ajax组件将无济于事。 本教程旨在帮助您收集使ajax组件的使用更加容易的必需信息。
Besides all of that important information that you will get here about ajax component, following also the life-cycle of the ajax request/response phases as it’s supported by the JSF 2 framework.
除了您将在此处获得的有关ajax组件的所有重要信息之外,还遵循JSF 2框架支持的ajax请求/响应阶段的生命周期。
Ajax behavior was introduced firstly by the jsf 2 specification, and Primefaces is one of those libraries built on, so you will not find a big difference between standard jsf ajax component f:ajax and Primefaces ajax component p:ajax except the latter used with the Primefaces components.
Ajax行为最初是由jsf 2规范引入的,Primefaces是建立在这些库中的库之一,因此您不会在标准jsf ajax组件f:ajax和Primefaces ajax组件p:ajax之间发现很大的区别,除了后者与Primefaces组件。
This tutorial assumed that you’re using Eclipse IDE and Maven building tool for developing the suggested samples below. In case you’re never using it, it’s good for you looking into Primefaces beginners tutorial that help you doing that easily.
本教程假定您正在使用Eclipse IDE和Maven构建工具来开发以下建议的示例。 如果您从未使用过它,那么对研究Primefaces初学者教程很有帮助 ,它可以帮助您轻松地做到这一点。
Since JSF 2 release, ajax request/response becomes supported by the JSF lifecycle intuitively. No additional phases added for the original well-known JSF lifecycle, rather the same lifecycle has been evolved to serve the Asynchronous JavaScript And XML (Ajax) request/response mechanism. This tutorial isn’t intended for covering all details of ajax behavior that built-in originally. Keeping you aware of the original mechanism that was provided by the JSF implementation for ajaxify is the goal of this tutorial. More detailed information would be provided later in a specific JSF 2 tutorial.
从JSF 2发布以来,JSF生命周期直观地支持ajax请求/响应。 没有为原始的著名JSF生命周期添加任何其他阶段,而是已经演化出相同的生命周期来服务于异步JavaScript和XML(Ajax)请求/响应机制。 本教程并非旨在涵盖最初内置的Ajax行为的所有详细信息。 本教程旨在使您了解JSF实现为ajaxify提供的原始机制。 稍后将在特定的JSF 2教程中提供更多详细信息。
The below figures depict you which phases are executed for handling the ajax request and which ones for a response.
下图描述了执行Ajax请求的哪些阶段以及响应的阶段。
Request Phases
请求阶段
Response Phases
响应阶段
JSF 2.0, splits the jsf lifecycle into two parts: execute (where components are executed) and render. Any given ajax request you can specify your executed components as well as those rendered.
JSF 2.0将jsf生命周期分为两部分:执行(执行组件)和渲染。 任何给定的ajax请求都可以指定执行的组件以及渲染的组件。
Primefaces had compliant with these parts with minor changes here, instead of using execute and render attributes associated with f:ajax to indicate which components should be executed and rendered respectively, they become process and update attributes associated this time with p:ajax component.
Primefaces在这里做了些微改动就符合这些部分,而不是使用与f:ajax关联的execute和render属性来指示应分别执行和渲染哪些组件,这次它们成为与p:ajax组件关联的处理和更新属性。
The main goal of Ajax is to process the partial form rather than processing the whole form. Using ajax help you submitting those components mentioned in the process while the only components mentioned in the update are rendered and modified. At the other side, using a normal request/response, the whole form has been processed and updated per every request/response cycle which may cause a performance headache or end user uncomfortable issues.
Ajax的主要目标是处理部分表单而不是处理整个表单。 使用ajax可以帮助您提交流程中提到的那些组件,而呈现和修改更新中提到的唯一组件。 另一方面,使用正常的请求/响应,整个表单已在每个请求/响应周期中进行处理和更新,这可能会导致性能头痛或最终用户不舒服的问题。
Tag | ajax |
---|---|
Behavior Id | org.primfaces.component.AjaxBehavior |
Behavior Class | org.primefaces.component.behvior.ajax.AjaxBehavior |
标签 | 阿贾克斯 |
---|---|
行为编号 | org.primfaces.component.AjaxBehavior |
行为类别 | org.primefaces.component.behvior.ajax.AjaxBehavior |
Name | Default | Type | Description |
---|---|---|---|
listener | null | MethdExpr | Method to process in partial request |
immediate | false | boolean | Boolean value that determines the phaseId, when true actions are processed at apply_request_values, when false at invoke_application phase. |
async | false | boolean | When set to true, ajax requests are not queued. |
process | null | String | Component(s) to process in partial request. |
update | null | String | Component(s) to update with ajax. |
onstart | null | String | Callback to execute before ajax request is begins. |
oncomplete | null | String | Callback to execute when ajax request is completed. |
onsuccess | null | String | Callback to execute when ajax request succeeds. |
onerror | null | String | Callback to execute when ajax request fails. |
global | true | boolean | Global ajax requests are listened by ajaxStatus component, setting global to false will not trigger ajaxStatus |
delay | null | String | If less than delay milliseconds elapses between calls to request() only the most recent one is sent and all other requests are discarded. If this option is not specified, or if the value of delay is the literal string none no delay is used. |
partialSubmit | false | boolean | Enables serialization of values belonging to the partially processed components only. |
disabled | false | boolean | Disables ajax behavior. |
event | null | String | Client side event to trigger ajax request. |
resetValues | false | boolean | If true, local values of input components to be updated within the ajax request would be reset. |
ignoreAutoUpdate | false | Boolean | If true, components which autoUpdate=”true” will not be |
名称 | 默认 | 类型 | 描述 |
---|---|---|---|
听众 | 空值 | 方法 | 部分请求中的处理方法 |
即时 | 假 | 布尔值 | 当在apply_request_values处理为真时,在invoke_application阶段为false时,确定phaseId的布尔值。 |
异步的 | 假 | 布尔值 | 设置为true时,ajax请求不会排队。 |
处理 | 空值 | 串 | 在部分请求中处理的组件。 |
更新 | 空值 | 串 | 用ajax更新的组件。 |
启动时 | 空值 | 串 | 在ajax请求开始之前执行的回调。 |
未完成 | 空值 | 串 | 当ajax请求完成时执行回调。 |
成功 | 空值 | 串 | Ajax请求成功时执行的回调。 |
错误 | 空值 | 串 | 当ajax请求失败时执行回调。 |
全球 | 真正 | 布尔值 | 全局ajax请求被ajaxStatus组件监听,将global设置为false不会触发ajaxStatus |
延迟 | 空值 | 串 | 如果两次对request()的调用之间的延迟时间少于毫秒,则只会发送最近的一次,而所有其他请求都将被丢弃。 如果未指定此选项,或者delay的值是文字字符串,则不使用delay。 |
部分提交 | 假 | 布尔值 | 启用仅属于部分处理的组件的值的序列化。 |
残障人士 | 假 | 布尔值 | 禁用ajax行为。 |
事件 | 空值 | 串 | 客户端事件触发ajax请求。 |
resetValues | 假 | 布尔值 | 如果为true,则将重置ajax请求中要更新的输入组件的本地值。 |
ignoreAutoUpdate | 假 | 布尔型 | 如果为true,则autoUpdate =“ true”的组件将不会 |
Using AjaxBehavior is accomplished by attaching the p:ajax component with the component you want to ajaxify, let’s see the most simple sample that you might used ajax component with.
使用AjaxBehavior是通过将p:ajax组件与您要进行ajaxify的组件相连接来完成的,让我们看一下您可能使用过ajax组件的最简单的示例。
Following below sample of input component that associated with p:ajax for ajaxifying the input itself. Ajax request has initiated as soon as the keyup event triggered, meanwhile the output component will be updated accordingly.
下面是与p:ajax相关的输入组件样本,用于对输入本身进行Ajax。 一旦触发keyup事件,Ajax请求就会启动,同时输出组件也会相应地更新。
index.xhtml
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>
<title>AjaxBehavior</title>
</h:head>
<h:form>
<p:inputText id="input" value="#{ajaxBehaviorManagedBean.message}">
<p:ajax event="keyup" update="output1 output2"></p:ajax>
</p:inputText>
<br/>
<p:outputLabel id="output1" value="Output A :#{ajaxBehaviorManagedBean.message}"></p:outputLabel>
<br/>
<p:outputLabel id="output2" value="Output B :#{ajaxBehaviorManagedBean.message}"></p:outputLabel>
</h:form>
</html>
package com.journaldev.prime.faces.beans;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean
@SessionScoped
public class AjaxBehaviorManagedBean {
private String message = "";
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
}
As you’ve noticed above:
正如您在上面注意到的:
Look at the running demonstration below:
看下面的运行演示:
Ajax component can be associated with a listener. Listener is a method binding that executed every time in which ajax request has triggered. Below a sample for listening of keyup event.
Ajax组件可以与侦听器关联。 侦听器是一种方法绑定,它在每次触发ajax请求时执行。 下面是一个监听keyup事件的示例。
index.xhtml
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>
<title>AjaxBehavior</title>
</h:head>
<h:form>
<p:inputText id="input" value="#{ajaxBehaviorManagedBean.message}">
<p:ajax event="keyup" update="output1 output2" listener="#{ajaxBehaviorManagedBean.keyUpListener}"></p:ajax>
</p:inputText>
<br/>
<p:outputLabel id="output1" value="Output A :#{ajaxBehaviorManagedBean.message}"></p:outputLabel>
<br/>
<p:outputLabel id="output2" value="Output B :#{ajaxBehaviorManagedBean.message}"></p:outputLabel>
</h:form>
</html>
package com.journaldev.prime.faces.beans;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.event.AjaxBehaviorEvent;
@ManagedBean
@SessionScoped
public class AjaxBehaviorManagedBean {
private String message = "";
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
public void keyUpListener(AjaxBehaviorEvent e){
System.out.println("AjaxBehavior Listener :: "+e.getBehavior()+" :: "+e.getSource());
}
}
Find out below the output of printed messages into the console at every time the ajax request has initiated. These messages handled by using the listener invocation.
每次启动ajax请求时,请在控制台中查找以下已打印消息的输出。 这些消息通过使用侦听器调用进行处理。
AjaxExceptionHandler is a utility component for built-in ExceptionHandler. Let’s firstly look at its basic info and attributes.
AjaxExceptionHandler是内置ExceptionHandler的实用程序组件。 首先让我们看一下它的基本信息和属性。
Tag | ajaxExpectionHandler |
---|---|
Component Class | org.primefaces.component.ajaxexceptionhandler.AjaxExceptionHandler |
Component Type | org.primefaces.component.AjaxExceptionHandler |
Component Family | org.primefaces.component |
标签 | ajaxExpectionHandler |
---|---|
组件类别 | org.primefaces.component.ajaxexceptionhandler.AjaxExceptionHandler |
组件类型 | org.primefaces.component.AjaxExceptionHandler |
组件族 | org.primefaces.component |
Name | Default | Type | Description |
---|---|---|---|
id | null | String | Unique identifier of the component. |
rendered | true | Boolean | Boolean value to specify the rendering of the component |
binding | null | Object | An el expression that maps to a server side UIComponent instance in a backing bean |
onexception | null | String | Client side callback to execute after a exception with this type occured. |
update | null | String | Components to update after a exception with this type occured |
type | null | String | Exception type to handle. |
名称 | 默认 | 类型 | 描述 |
---|---|---|---|
ID | 空值 | 串 | 组件的唯一标识符。 |
呈现 | 真正 | 布尔型 | 布尔值,用于指定组件的呈现 |
捆绑 | 空值 | 目的 | El表达式,它映射到支持Bean中的服务器端UIComponent实例 |
焦虑 | 空值 | 串 | 发生此类异常后要执行的客户端回调。 |
更新 | 空值 | 串 | 发生此类异常后要更新的组件 |
类型 | 空值 | 串 | 要处理的异常类型。 |
Before Primfaces 5 release, catching of exceptions and errors was very hard and needs a lot of additional work like browser and jsf lifecycle phases debugging especially when it comes to deal with Ajax.
在Primfaces 5发行之前,捕获异常和错误非常困难,并且需要大量额外的工作,例如浏览器和jsf生命周期阶段调试,尤其是在处理Ajax时。
Most of the developers want to use the ajax mechanism were faced circumstances where everything seems accomplished but even though the ajax request doesn’t trigger. Primefaces 5 provides you a powerful ExceptionHandler out of the box featuring support ajax and non-ajax request. p:ajaxExceptionHandler component to handle ajax exceptions at the same page.
大多数开发人员都想使用ajax机制,尽管ajax请求没有触发,但似乎一切都已完成。 Primefaces 5提供了功能强大的ExceptionHandler ,即开即用,具有支持ajax和非ajax请求的功能。 p:ajaxExceptionHandler组件,用于处理同一页面上的ajax异常。
ExceptionHandler and an ElResolver configured is required in the faces configuration file.
Faces配置文件中需要配置ExceptionHandler和ElResolver。
faces-config.xml
faces-config.xml
<?xml version="1.0" encoding="UTF-8"?>
<faces-config
xmlns="https://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="https://xmlns.jcp.org/xml/ns/javaee https://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd"
version="2.2">
<application>
<el-resolver>
org.primefaces.application.exceptionhandler.PrimeExceptionHandlerELResolver
</el-resolver>
</application>
<factory>
<exception-handler-factory>
org.primefaces.application.exceptionhandler.PrimeExceptionHandlerFactory
</exception-handler-factory>
</factory>
</faces-config>
index.xhtml
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>
<title>AjaxBehavior</title>
</h:head>
<h:form>
<p:inputText id="input" value="#{ajaxBehaviorManagedBean.message}">
<p:ajax event="keyup" update="output1 output2" listener="#{ajaxBehaviorManagedBean.keyUpListener}"></p:ajax>
</p:inputText>
<br/>
<p:outputLabel id="output1" value="Output A :#{ajaxBehaviorManagedBean.message}"></p:outputLabel>
<br/>
<p:outputLabel id="output2" value="Output B :#{ajaxBehaviorManagedBean.message}"></p:outputLabel>
<br/>
<p:ajaxExceptionHandler id="exception" type="java.lang.NullPointerException"
update="exceptionPanel" onexception="alert('An Exception Occured ::')"/>
<p:outputPanel id="exceptionPanel" style="width:500px;height:200px;border:1px;font-size:10px;">
<p:outputLabel value="Exception Type :: #{pfExceptionHandler.type}"></p:outputLabel>
<p:outputLabel value="Exception Message :: #{pfExceptionHandler.message}"></p:outputLabel>
<p:outputLabel value="Exception StackTrace :: #{pfExceptionHandler.formattedStackTrace}"></p:outputLabel>
</p:outputPanel>
</h:form>
</html>
package com.journaldev.prime.faces.beans;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.event.AjaxBehaviorEvent;
@ManagedBean
@SessionScoped
public class AjaxBehaviorManagedBean {
private String message = "";
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
public void keyUpListener(AjaxBehaviorEvent e){
// Print out event information
System.out.println("AjaxBehavior Listener :: "+e.getBehavior()+" :: "+e.getSource());
// Throw NullPointerException
throw new NullPointerException("Anonymous Null Pointer");
}
}
As you’ve noticed above:
正如您在上面注意到的:
NullPointerException
. 侦听器将打印出事件的信息,但会抛出NullPointerException
。 ExceptionHandler is integrated with error-page mechanism of Servlet API. At the application startup Primefaces parses the error pages and uses this information to find the appropriate page to redirect to based on the exception type. Now, the same NullPointerException above should be handled through using both of error-page concept and the implicit object pfExceptionHandler.
ExceptionHandler与Servlet API的 错误页面机制集成在一起。 在应用程序启动时,Primefaces会分析错误页面,并使用此信息根据异常类型找到要重定向到的适当页面。 现在,应该使用error-page概念和隐式对象pfExceptionHandler来处理上面相同的NullPointerException。
web.xml
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"
xmlns="https://java.sun.com/xml/ns/javaee" xmlns:web="https://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="https://java.sun.com/xml/ns/javaee
https://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
id="WebApp_ID" version="2.5" metadata-complete="true">
<error-page>
<exception-type>java.lang.NullPointerException</exception-type>
<location>/exception.xhtml</location>
</error-page>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
<context-param>
<description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2</description>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>client</param-value>
</context-param>
<listener>
<listener-class>com.sun.faces.config.ConfigureListener</listener-class>
</listener>
</web-app>
faces-config.xml
faces-config.xml
<?xml version="1.0" encoding="UTF-8"?>
<faces-config
xmlns="https://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="https://xmlns.jcp.org/xml/ns/javaee https://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd"
version="2.2">
<application>
<el-resolver>
org.primefaces.application.exceptionhandler.PrimeExceptionHandlerELResolver
</el-resolver>
</application>
<factory>
<exception-handler-factory>
org.primefaces.application.exceptionhandler.PrimeExceptionHandlerFactory
</exception-handler-factory>
</factory>
</faces-config>
index.xml
index.xml
<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>AjaxBehavior</title>
</h:head>
<h:form>
<p:inputText id="input" value="#{ajaxBehaviorManagedBean.message}">
<p:ajax event="keyup" update="output1 output2" listener="#{ajaxBehaviorManagedBean.keyUpListener}"></p:ajax>
</p:inputText>
<br/>
<p:outputLabel id="output1" value="Output A :#{ajaxBehaviorManagedBean.message}"></p:outputLabel>
<br/>
<p:outputLabel id="output2" value="Output B :#{ajaxBehaviorManagedBean.message}"></p:outputLabel>
</h:form>
</html>
exception.xml
exception.xml
<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>NullPointerException Handler</title>
</h:head>
<h:form>
<h2>NullPointerExceptionHandler</h2>
<p:ajaxExceptionHandler id="exception" type="java.lang.NullPointerException"
update="exceptionPanel" onexception="alert('An Exception Occured ::')"/>
<p:outputPanel id="exceptionPanel" style="width:500px;height:200px;border:1px;font-size:10px;">
<p:outputLabel value="Exception Type :: #{pfExceptionHandler.type}"></p:outputLabel>
<p:outputLabel value="Exception Message :: #{pfExceptionHandler.message}"></p:outputLabel>
<p:outputLabel value="Exception StackTrace :: #{pfExceptionHandler.formattedStackTrace}"></p:outputLabel>
</p:outputPanel>
</h:form>
</html>
package com.journaldev.prime.faces.beans;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.event.AjaxBehaviorEvent;
@ManagedBean
@SessionScoped
public class AjaxBehaviorManagedBean {
private String message = "";
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
public void keyUpListener(AjaxBehaviorEvent e){
// Print out event information
System.out.println("AjaxBehavior Listener :: "+e.getBehavior()+" :: "+e.getSource());
// Throw NullPointerException
throw new NullPointerException("Anonymous Null Pointer");
}
}
In order to allow your exception displayed into error-page, you should define the error-page into your web.xml and configured your Ajax exception handler to be used. Following below the result of executing the above sample.
为了使您的异常显示在错误页面中,您应该在web.xml中定义错误页面,并配置要使用的Ajax异常处理程序。 以下是执行上述示例的结果。
As you’ve noticed, custom error-page is used for handling the thrown exception. Implicit pfExceptionHandler is used for providing the displayed information above.
您已经注意到,自定义错误页面用于处理引发的异常。 隐式pfExceptionHandler用于提供上面显示的信息。
Multiple components were provided here are used the ajax component to Ajaxify their behaviors. This tutorial spots light into the Ajax lifecycle, AjaxBehavior Primfaces component and the mechanism of handling Ajax exceptions either inside the same page or by using the error-page Servlet API methodology. You should download the final project from the below link and check other attributes to learn more.
这里提供了多个组件,使用了ajax组件来对它们的行为进行Ajax化。 本教程将重点介绍Ajax生命周期,AjaxBehavior Primfaces组件以及在同一页面内或使用错误页面Servlet API方法来处理Ajax异常的机制。 您应该从下面的链接下载最终项目,并检查其他属性以了解更多信息。
primefaces教程