RichFaces - 基本概念

在本章中，我们将了解 RichFaces 的一些基本概念，并将了解 RichFaces 如何处理 AJAX 请求和许多其他功能。

处理 AJAX 请求

如前所述，RichFaces 提供了丰富的 UI 组件，即使不实现任何 AJAX 代码，也可以在 Web 应用程序中启用 AJAX 功能。所有这些 AJAX 功能都是通过a4:j标签库引入的。<a4j:commandLink> 、 <a4j:commandButton> 、 <a4j:support>和<a4j:poll>是帮助开发人员将 AJAX 功能包含到 Web 应用程序中的四个标签。我们将在后续章节中了解有关标签库的更多信息。

部分树处理

在传统的 AJAX 应用程序中，所有输入字段都将作为树的不同节点进行处理，但是，在 RichFaces 中，我们可以选择部分提交树节点并验证所需字段。

让我们考虑一个例子来更多地了解这一点。假设，HTML 中共有五个元素：“姓名”、“员工 ID”、“员工工资”、“员工地址”和“员工部门”。现在您只想验证或处理 Employee id，这可以使用 RichFaces 实现，但无法使用 AJAX 实现。您需要将整个表单提交到服务器。RichFaces 提供了一个执行属性，可以识别特定组件并对其进行处理。以下是可用的不同级别的执行属性。

  • @all - 该属性将处理您的所有数据。

  • @none - 当您不想处理任何数据时可以使用它。

  • @this - 这将仅处理请求组件。

  • @form - 这将处理包含请求组件的整个表单。

  • @region - 这将处理网页的特定区域。

部分视图更新

与输入字段一样，RichFaces 提供类似的选项来更新不同的视图。开发人员可以根据自己的选择自定义视图。与执行属性一样，渲染属性的工作方式与执行属性类似。所有这些属性都基于网页的 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：参数>

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:命令按钮>

我们已经在前面的示例中使用了命令按钮标签。它用于在 xhtml 页面内创建一个按钮，该按钮将生成并与 AJAX 引擎通信以处理特定请求。它接受输入并对其进行处理，然后在 Web 浏览器中呈现输出。

在前面的示例中，我们创建了两个按钮 - “TutorialsPoint”和“RichFace Tutorials”。我们的命令按钮标签在内部与托管 bean 通信并设置所需的实例变量。它还负责渲染值。

<a4j:命令链接>

命令链接的工作方式类似于 JSF 2.0 的 <h:commandlink> 组件。每当命令链接作用于 JS 单击事件时，命令按钮都会生成基于提交的 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：输出面板>

输出面板充当 HTML 页面的跨度。它用于对网页的不同组件进行分组，而不是单独指定它们。在前面的示例中，我们使用输出面板来显示输入文本框中提供的消息。以下是输出面板的语法。

<a4j:outputPanel id = "out"> 
   <h:outputText value = "Welcome to #{managedBean.message} !" /> 
</a4j:outputPanel>

<a4j:区域>

这是 RichFaces 的关键功能，它允许处理网页的某些部分。使用此标签，部分树处理发生在 RichFaces 中。主要是用来增加渲染进程。以下示例将帮助您详细了解这一点。请使用以下代码创建“a4jregionExample.xhtml”文件。

<?xml 版本 = "1.0" 编码 = "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:头>
      <title>区域示例</title>       
   </h：头>
    
   <h:正文>
      <h:表单>
         <h:inputText 值 = "#{managementBean.message}"/>
         <h:inputText 值 = "#{managementBean.job}"/>
         <a4j:commandLink id = "one" value = "one"/>
         
         <a4j:区域>
            <h:inputText 值 = "#{managementBean.message}"/>
            <a4j:commandLink id = "two" value = "two"/>
         </a4j：区域>
      </h：表单>  
   </h:正文>
   
</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”包含在另一个区域标记中，那么它将仅处理前两个输入参数。以下是每当单击命令链接“two”时服务器控制台的屏幕截图。

链接二

每当单击命令链接“one”时，都会输出以下内容。

链接二

<a4j：重复>

Repeat 标签的工作方式与 JSF 的 <ui:repeat> 标签完全相同。它有助于迭代网页中的列表。在下面的“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>

在浏览器中运行此特定文件后，您将获得以下输出。

A4重复

<a4j：状态>

顾名思义，当您想要在前端显示 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 中这些标签已被弃用，因为使用 Facelet 中使用的不同其他标签（例如 <ui:include> 和 <ui:insert>）可以轻松实现这些功能。顾名思义，引入 include 是为了将一个页面包含到另一页面中，而引入 keepAlive 是为了控制与 JSF 页面关联的托管 bean 的范围。建议使用任何软件API的更新版本并使用<UI>组件和“注释”实现来实现业务目标。

<a4j：日志>

顾名思义，这个 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 会在需要时生成所需的各个级别的日志。

A4：日志

<a4j:js函数>

这是 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()”的方法，并且所需的值将在浏览器中打印。

JS事件

<a4j:AJAX监听器>

当您想要在将结果呈现给浏览器之前执行特定侦听器时，请使用此标记。此标签在 RichFaces 4 中不可用，因为在，您可以在任何 JS 事件发生时创建 AJAX 请求。虽然建议使用更新的软件版本，但如果您仍在使用RichFaces 3，那么您可以按以下方式使用此标签。

<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 类内部实现的“areas”方法，并渲染相应的结果。