在本章中，我们将看到RichFaces的一些基本概念，我们将了解RichFaces如何处理AJAX请求和许多其他功能.
处理AJAX请求
如前所述，RichFaces提供了丰富的UI组件，即使不实现任何AJAX代码，也可以在Web应用程序中启用AJAX功能.所有这些AJAX功能都是通过 a4:j 标记库引入的. < A4J:commandLink> ，< a4j:commandButton>，< a4j:support> 和< a4j:poll> 是帮助开发人员在Web应用程序中包含AJAX功能的四个标记.我们将在后续章节中详细了解标记库.
部分树处理
在传统的AJAX应用程序中，将处理所有输入字段然而，在RichFaces中，我们可以选择部分提交树节点并验证必需的字段.
让我们考虑一个例子来了解更多相关信息.假设HTML中总共有五个元素 - "姓名"，"员工ID"，"员工薪水"，"员工地址"和"员工部门".现在，您只想验证或处理Employee id，这可以使用RichFaces，但不能使用AJAX.您需要将整个表单提交给服务器. RichFaces提供了一个execute属性，可以识别特定组件并对其进行处理.以下是可用的不同执行属性级别.
@all : 此属性将处理您的所有数据.
@none : 当您不想处理任何数据时，可以使用此功能.
@this : 这将仅处理请求组件.
@form : 这将处理包含请求组件的整个表单.
@region : 这将处理网页的特定区域.
部分视图更新
与输入字段类似，RichFaces提供类似的选项来更新不同的视图.开发人员可以根据自己的选择自定义视图.与execute属性一样，有一个与execute属性类似的render属性.所有这些属性都基于网页的ID标识符工作.
以下是可用的渲染属性的不同级别.
@all : 这将更新整个组件.
@none : 这不会更新您的任何组件.
@this : 这将仅更新请求组件.
@from : 这将更新包含请求数据的表单.
@region : 这将更新网页的特定区域.
其他a4j标签
直到现在，我们已经讨论了有关RichFaces应用程序的概念属性.在本节中，我们将通过动手实例详细了解它们.
< a4j:AJAX>
这是其中一个RichFaces提供的核心组件.这只是JSF2.0 f:AJAX标记的扩展部分.只要在网页中发生JS事件，此标记就会触发AJAX请求.以下示例详细介绍了此标记.在网页文件夹下创建一个"xhtml"页面，并将其命名为"a4jAJAXExample.xhtml".然后，粘贴以下代码.
<!DOCTYPE html> <html xmlns = "http://www.w3.org/1999/xhtml" xmlns:h = "http://xmlns.jcp.org/jsf/html" xmlns:a4j = "http://richfaces.org/a4j"> <h:head> <title>a4j:AJAX Tag Example</title> </h:head> <h:body> <h:form id = "form"> <h:inputText value = "#{managedBean.message}"> <a4j:AJAX render = "ShowMessage" /> </h:inputText> <h:outputText value = "#{managedBean.message}" id = "ShowMessage" style = "animation-duration"/> </h:form> </h:body> </html>我们还需要创建一个托管bean来保存来自网页的输入.继续在源包目录下创建一个java类.以下是 managedbean.java 类代码.
import javax.faces.bean.ManagedBean; import javax.faces.bean.RequestScoped; @ManagedBean @RequestScoped public class managedBean { String message; public String getMessage() { return message; } public void setMessage(String message) { this.message = message; } }保存文件并运行，这将在浏览器中产生以下输出.
< a4j:param>
a4j:param是f:param标签的扩展.它用于为属性或实例变量赋值.此标记能够永久地将值分配给实例变量.以下是"a4jparamExample.html"代码.
<?xml version = "1.0" encoding = "UTF-8"?> <!DOCTYPE html> <html xmlns = "http://www.w3.org/1999/xhtml" xmlns:h = "http://xmlns.jcp.org/jsf/html" xmlns:a4j = "http://richfaces.org/a4j"> <h:head> <title>Param tag example</title> <meta name = "viewport" content = "width = device-width, initial-scale = 1.0"/> </h:head> <h:body> <h:form id = "form"> <h:panelGrid columns = "2"> <a4j:commandButton value = "TutorialsPoint" render = "rep"> <a4j:param value = "Tutorials point" assignTo = "#{managedBean.message}" /> </a4j:commandButton> <a4j:commandButton value = "RichFace Tutorials" render = "rep"> <a4j:param value = "RichFace Tutorials" assignTo = "#{managedBean.message}" /> </a4j:commandButton> </h:panelGrid> <br /> <h:outputText id = "rep" value = "Selected Name:#{managedBean.message}" /> </h:form> </h:body> </html>以下是相应的托管bean类代码.
import javax.faces.bean.ManagedBean; import javax.faces.bean.RequestScoped; @ManagedBean @RequestScoped public class managedBean { String message; public String getMessage() { return message; } public void setMessage(String message) { System.out.println("This method is getting called with"+message); // we have added this line in order to check how the AJAX call // happens to the class methods without any direct communication this.message = message; } }继续运行该文件.以下是浏览器中的输出.
现在，在服务器控制台中，您将看到以下输出，它证明xhtml文件正在与托管bean通信，以便在运行时设置实例变量.
< a4j:commandButton>
我们已经使用了命令按钮标签上一个例子.它用于在xhtml页面内创建一个按钮，该按钮将生成AJAX引擎并与之通信以处理特定请求.它需要输入并处理相同的内容并在Web浏览器中呈现输出.
在前面的示例中，我们创建了两个按钮 - "TutorialsPoint"和"RichFace Tutorials".我们的命令按钮标记在内部与托管bean通信，并设置所需的实例变量.它还负责呈现值.
< a4j:commandLink>
命令链接的作用类似于< h:commandlink> JSF 2.0的组件.只要命令链接对JS click事件起作用，命令按钮就会生成基于提交的AJAX请求.这是我们在命令按钮和命令链接中唯一的区别.以下示例将帮助您更好地理解标记库.创建"a4jCommandLink.xhtml"文件并将以下代码粘贴到其中.
<?xml version = "1.0" encoding = "UTF-8"?> <!DOCTYPE html> <html xmlns = "http://www.w3.org/1999/xhtml" xmlns:h = "http://xmlns.jcp.org/jsf/html" xmlns:a4j = "http://richfaces.org/a4j"> <h:head> <title>Example of command Link</title> </h:head> <h:body> <h:form id = "form"> <h:panelGrid columns = "3"> <h:outputText value = "Name:" /> <h:inputText value = "#{managedBean.message}" /> <a4j:commandLink value = "Click Me" render = "out" execute = "@form" /> </h:panelGrid> </h:form> <br /> <a4j:outputPanel id = "out"> <h:outputText value = "Welcome to #{managedBean.message} !" /> </a4j:outputPanel> </h:body> </html>无需更改托管bean类中的任何内容.运行此文件，以下将是浏览器中的输出.
< a4j:outputPanel>
输出面板作为HTML页面的范围.它用于对网页的不同组件进行分组，而不是单独指定它们.在前面的示例中，我们使用输出面板来显示输入文本框中提供的消息.以下是输出面板的语法.
<a4j:outputPanel id = "out"> <h:outputText value = "Welcome to #{managedBean.message} !" /> </a4j:outputPanel>< a4j:region>
这是RichFaces的关键功能，它允许处理某些部分来自的网页.使用此标记，RichFaces中会发生部分树处理.它主要用于增加渲染过程.以下示例将帮助您详细了解这一点.请使用以下代码创建"a4jregionExample.xhtml"文件.
<?xml version = "1.0" encoding = "UTF-8"?> <!DOCTYPE html> <html xmlns = "http://www.w3.org/1999/xhtml" xmlns:h = "http://java.sun.com/jsf/html" xmlns:a4j = "http://richfaces.org/a4j" > <h:head> <title>Region Example</title> </h:head> <h:body> <h:form> <h:inputText value = "#{managedBean.message}"/> <h:inputText value = "#{managedBean.job}"/> <a4j:commandLink id = "one" value = "one"/> <a4j:region> <h:inputText value = "#{managedBean.message}"/> <a4j:commandLink id = "two" value = "two"/> </a4j:region> </h:form> </h:body> </html>除了这个xhtml页面，请相应地更新我们的managedBean.
import javax.faces.bean.ManagedBean; import javax.faces.bean.RequestScoped; @ManagedBean @RequestScoped public class managedBean { String message; String job; public String getMessage() { return message; } public void setMessage(String message) { System.out.println("setMessage method is getting called with--"+message); this.message = message; } public String getJob() { return job; } public void setJob(String job) { System.out.println("setJob method is getting called with--"+job); this.job = job; } }上面的代码将在浏览器中产生以下输出.
每当点击命令链接"one"时，它将处理整个表单，但是，当我们单击命令链接"two"时，只会处理消息实例，因为它包含在区域标记中.类似地，如果我们将命令链接'one'包含在另一个region标记中，那么它将只处理前两个输入参数.以下是服务器控制台的屏幕截图，只要点击命令链接"两个".
每当点击命令链接"one"时，以下将是输出.
< a4j:repeat>
重复标记与< ui:repeat>完全相似JSF的标签.它有助于迭代网页中的列表.在下面的"a4jRepeat.xhtml"文件示例中，我们将遍历托管bean类中的列表.
<?xml version = "1.0" encoding = "UTF-8"?> <!DOCTYPE html> <html xmlns = "http://www.w3.org/1999/xhtml" xmlns:h = "http://java.sun.com/jsf/html" xmlns:a4j = "http://richfaces.org/a4j"> <h:head></h:head> <h:body> <h:form id = "form"> <h:panelGrid columns = "1" style = "width: 640px"> <a4j:outputPanel id = "panel" layout = "block"> <a4j:repeat value = "#{managedBean.subjectList}" var = "sub"> <li> <h:outputText value = "#{sub}"/> </li> </a4j:repeat> </a4j:outputPanel> </h:panelGrid> </h:form> </h:body> </html>在浏览器中运行此特定文件后，您将获得以下输出.
< a4j:status>
顾名思义，这个标签是在您想要在前端显示AJAX请求的状态时非常有用.您可以根据自己的选择包含普通文本消息或gif或基于图像的状态.对于如下的小应用程序，您将看到前端的状态，但是，无论何时运行复杂的AJAX请求，此状态都非常明显.请修改"a4jregionExample.xhtml"，如下所示.
<?xml version = "1.0" encoding = "UTF-8"?> <!DOCTYPE html> <html xmlns = "http://www.w3.org/1999/xhtml" xmlns:h = "http://java.sun.com/jsf/html" xmlns:a4j = "http://richfaces.org/a4j"> <h:head> <title>Region Example</title> </h:head> <h:body> <h:form> <a4j:status startText = "Working..." /> <h:inputText value = "#{managedBean.message}"/> <h:inputText value = "#{managedBean.job}"/> <a4j:commandLink id = "one" value = "one"/> <a4j:region> <h:inputText value = "#{managedBean.message}"/> <a4j:commandLink id = "two" value = "two"/> </a4j:region> <a4j:status startText = "Done" /> </h:form> </h:body> </html>每当您运行此应用程序时，您都可以看到"工作......"和"完成"这两种状态的一瞥.只要请求完成，这些状态就会自动消失.
< a4j:include>/< a4j:keepAlive>
Include和keepAlive，这两个标签都是在RichFaces 3.0中引入的，但在RichFaces 4中，这些标签是折旧的，因为使用Facelets中使用的不同其他标签可以轻松实现这些功能，例如< ui:include>和< ui:insert>.顾名思义，引入了include以将一个页面包含到另一个页面中，并引入了keepAlive来控制与JSF页面相关的托管bean关联的范围.建议使用任何软件API的更新版本，并使用< UI>实现业务目标的组件和"注释"实现.
< a4j:log>
顾名思义，这个a4j组件有助于生成日志信息到Web浏览器.以下示例详细介绍了此标记.按以下方式编辑"a4jregionExample.xhtml"文件.
<?xml version = "1.0" encoding = "UTF-8"?> <!DOCTYPE html> <html xmlns = "http://www.w3.org/1999/xhtml" xmlns:ui = "http://java.sun.com/jsf/facelets" xmlns:h = "http://java.sun.com/jsf/html" xmlns:a4j = "http://richfaces.org/a4j"> <h:head> <title>Region Example</title> </h:head> <h:body> <h:form> <a4j:status startText = "Working..." /> <h:inputText value = "#{managedBean.message}"/> <h:inputText value = "#{managedBean.job}"/> <a4j:commandLink id = "one" value = "one"/> <a4j:region> <h:inputText value = "#{managedBean.message}"/> <a4j:commandLink id = "two" value = "two"/> </a4j:region> <a4j:log></a4j:log> <a4j:status startText = "Done" /> </h:form> </h:body> </html>现在在浏览器中运行上面的代码，以下将是输出. a4j:log会在需要时生成所有级别的所需日志.
< a4j:jsFunction>
这是RichFaces最先进的功能，可以在没有任何JavaScript代码的情况下创建自动JS功能. CDK将基于任何JS事件生成自动JavaScript代码.
在下面的示例中，我们创建了一个JavaScript函数，只要我们将鼠标悬停在指定值上，就会调用它.
<?xml version = "1.0" encoding = "UTF-8"?> <!DOCTYPE html> <html xmlns = "http://www.w3.org/1999/xhtml" xmlns:ui = "http://java.sun.com/jsf/facelets" xmlns:h = "http://java.sun.com/jsf/html" xmlns:a4j = "http://richfaces.org/a4j"> <h:head> <title>Example of JS Function</title> </h:head> <h:body> <table width = "500" border = "1"> <tbody> <tr> <td> <span onmouseover = "showMySkill('core java,J2EE')" onmouseout = "showMySkill('')">BackEnd developer</span> </td> <td> <span onmouseover = "showMySkill('DB,RDBMS,unix')" onmouseout = "showMySkill('')">Database Admin</span> </td> <td> <span onmouseover = "showMySkill( 'JS frameworks,html,java scripts')" onmouseout = "showMySkill('')">Front End Developer</span> </td> </tr> <tr> <td colspan = "3">You need to know: <b><h:outputText id = "showSkillset" value = "#{managedBean.message}"/></b> </td> </tr> </tbody> </table> <h:form id = "form"> <a4j:jsFunction name = "showMySkill" render = "showSkillset"> <a4j:param name = "name" assignTo = "#{managedBean.message}" /> </a4j:jsFunction> </h:form> </h:body> </html>上面的代码将在浏览器中生成以下输出.根据JS事件，CDK将覆盖名为"showMySkill()"的方法，并且将在浏览器中打印所需的值.
< a4j:AJAXListener>
当您想在渲染之前执行特定侦听器时使用此标记结果到浏览器.此标记在RichFaces 4中不可用，因为
<rich:panel> <f:facet name = "header">Using a4j:actionListener</f:facet> <a4j:commandButton value="Submit" reRender = "#{AJAXBean.areas}"> <a4j:AJAXListener binding = "#{AJAXBean.renderAreasListener}"/> </a4j:commandButton> </rich:panel>在上面的例子中，点击"提交"按钮，将创建一个JS事件，它将调用里面实现的"区域"方法bean类和相应的结果将作为结果呈现.
免责声明：以上内容(如有图片或视频亦包括在内)有转载其他网站资源，如有侵权请联系删除
-
设计总结｜如何更好地表达活动品牌？
-
谈谈“目标思维”的落地
编辑导读：我们在做数据分析之前，一定要搞清楚需求方的目标到底是什么，要根据目标来重新定义业务方提出的问题，这就是目标思维。目标思维有多重要呢？应该如何落地呢...
-
在线教育平台竞品分析：网易云课堂vs腾讯课堂
本文从移动端出发，对当前比较热门的两款在线教育平台软件-网易云课堂和腾讯课堂进行比较和分析，不足之处还请大家多提意见。 市场分析 随着国内互联网技术的发展和移...
-
即学即用｜父亲节活动的４种运营策略
-
B端产品经理和体验设计师的工作职责边界梳理
-
豆果美食电商分支用户体验报告及建议
-
数据分析师如何提高工作效率
在我们的日常工作中，提高工作效率是每个岗位都需要实现的，在工作中，面对比较凌乱的事情时，首先我们需要梳理清楚，按重要级进行开展；本文作者分享了关于...
-
2016中国云计算SaaS移动办公平台年度综合报告
-
网易大布局教育事业：网易公开课、网易云课堂和MOOC分析
-
一篇文章搞懂语音交互的来龙去脉
