RichFaces框架的基本概念架 (2)

5.5 优化Ajax请求
5.5.1 重新绘制 (Re-Rendering)
Ajax组件的共同Aja属性,如<a4j:support> , <a4j:commandButton> , <a4j:jsFunction> , <a4j:poll> , <a4j:push>等等。 并且,大多数内置Ajax的RichFaces组件支持这些相似作用的属性。Ajax组件属性帮助RichFaces显露其功能。大多数属性有默认值。 因此,您就可以开始使用RichFaces而不知道这些属性的用法。然而,它们的使用可以根据所需要的Ajax很容易地调整。
“ reRender ”是一个关键属性。 该属性可以指向页面上被AJAX交互的要更新的区域,“ reRender ”属性的值是一个JSF组件的ID或ID列表。
一个简单的例子如下: 

Java代码 复制代码
  1. ...   
  2. <a4j:commandButton value="update" reRender="infoBlock"/>   
  3. ...   
  4. <h:panelGrid id="infoBlock">   
  5. ...   
  6. </h:panelGrid>.    
  7. ...  
...
<a4j:commandButton value="update" reRender="infoBlock"/>
...
<h:panelGrid id="infoBlock">
...
</h:panelGrid>. 
...


<a4j:commandButton>标记的“ reRender ”属性的值定义了页面上哪一部分要进行更新。 这种情况,页面要更新的部分只有<h:panelGrid>标记,因为它的ID值匹配“reRender”属性的值。 正如所看到的,它并不难更新页面上的多个内容,只要“reRender” 的值列出他们的ID。
“reRender”使用UIComponent.findComponent ( )算法[http://java.sun.com/javaee/javaserverfaces/1.2_MR1/docs/api/javax/faces/component/UIComponent.html#findComponent(java.lang.String)](有一些例外)在组件树找到该组件。 你可以看到,该算法假定几个步骤。 如果使用前面的步骤没有成功,其他步骤会逐个被使用。 因此,您可以定义该组件如何多快地更准确地被找到。 下面的例子显示了不同的办法(两个按钮将成功工作) :

Java代码 复制代码
  1. ...   
  2.     <h:form id="form1">   
  3.         ...   
  4.         <a4j: commandButton value="Usual Way" reRender="infoBlock, infoBlock2" />   
  5.         <a4j:commandButton value="Shortcut" reRender=":infoBlockl,:sv:infoBlock2" />   
  6.         ...   
  7.     </h:form>   
  8.     <h:panelGrid id="infoBlock">   
  9.         ...   
  10.     </h:panelGrid>   
  11.     ...   
  12.     <f:subview id="sv">   
  13.       <h:panelGrid id="infoBlock2">   
  14.         ...   
  15.       </h:panelGrid>   
  16.       ...   
  17.     </f:subview>   
  18. ...  
...
    <h:form id="form1">
        ...
        <a4j: commandButton value="Usual Way" reRender="infoBlock, infoBlock2" />
        <a4j:commandButton value="Shortcut" reRender=":infoBlockl,:sv:infoBlock2" />
        ...
    </h:form>
    <h:panelGrid id="infoBlock">
        ...
    </h:panelGrid>
    ...
    <f:subview id="sv">
      <h:panelGrid id="infoBlock2">
        ...
      </h:panelGrid>
      ...
    </f:subview>
...


也可以使用JSF的EL表达作为reRender属性价。 这可以是一个类型集属性,Collection,数组或简单的字符串。 reRender的EL要在呈现响应阶段前正确解释。 因此,可以在Ajax的请求处理期间的任何一阶段计算应如何重新绘制。
最常见的问题是使用reRender是指向的组件有一个“rendered"”属性。 请注意,那样JSF不会在浏览器的DOM标记这个部件,除非在“rendered”的条件返回false情况下组件才会放入浏览器的DOM。 因此,在Ajax请求期间成为重绘的组件之后, RichFaces递交重绘代码给客户端,但不更新页面内容,因为更新的地方是不知道的。 您需要指向一个没有“rendered”属性的父组件的其中一个。 有一种替代办法,可以令该组件带有<a4j:outputPanel layout="none" >。 
<a4j:outputPanel> 的“ ajaxRendered ”属性设置为“true”可以即使是没有明确给出在reRender属性该页面区域的也会重绘。如果有在任何Ajax请求的响应都要更新的页面区域,它是很有用的。 例如,下面的代码可以将会输出的错误信息,不管是否因为Ajax请求在验证阶段失败。

Java代码 复制代码
  1. ...   
  2.      <a4j:outputPanel ajaxRendered="true">   
  3.         <h:messages />   
  4.     </a4j:outputPanel>   
  5. ...  
...
     <a4j:outputPanel ajaxRendered="true">
        <h:messages />
    </a4j:outputPanel>
...


“ limitToList ”属性允许解除<a4j:outputPanel> “ajaxRendered”属性的行为。 limitToList = "false"表示只更新有明确标在“ reRender ”属性的区域。所有带的 ajaxRendered="true"输出面板都被忽略。 一个例子如下:

Java代码 复制代码
  1. ...   
  2.     <h:form>   
  3.        <h:inputText value="#{person.name}">   
  4.             <a4j:support event="onkeyup" reRender="test" limitToList="true"/>   
  5.         </h:inputText>   
  6.         <h:outputText value="#{person.name}" id="test"/>   
  7.     </form>   
  8. ...  
...
    <h:form>
       <h:inputText value="#{person.name}">
            <a4j:support event="onkeyup" reRender="test" limitToList="true"/>
        </h:inputText>
        <h:outputText value="#{person.name}" id="test"/>
    </form>
...


5.5.2 队列和交通溢出保护 (Queue and Traffic Flood Protection)
“ eventsQueue ”属性定义了队列的名称,这个队列用来整理即将到来的AJAX请求。 默认情况下,RichFaces不排列AJAX请求。 如果多个事件是同时产生,他们将同时到达服务器。JSF不保证执行(特别是第一次的)最先到来的请求,最先到来的请求将送达或成为在JSF 生命周期的最前面。如果请求同时发生,在服务器端修改数据的顺序是不可预测的。用eventsQueue属性可以避免可能的混乱。如果知道在应用程序中有密集的Ajax交互就明确指定队列名称。
如果定义了“ eventsQueue ”属性,接下来的请求放入同一队列等待,直到前一个请求不处理和已返回Ajax响应。 此外, RichFaces开始从队列中删除“类似”的请求。“类似”的请求是指相同的事件所产生的请求。 例如,根据下面的代码,如果返回上一个Ajax响应前,你输入速度非常快并已输入了多个字符,只有最新的请求会被发送到服务器。

Java代码 复制代码
  1. ...   
  2.     <h:inputText value="#{userBean.name}">   
  3.         <a4j:support event="onkeyup" eventsQueue="foo" reRender="bar" />   
  4.     </h:inputText>   
  5. ...  
...
    <h:inputText value="#{userBean.name}">
        <a4j:support event="onkeyup" eventsQueue="foo" reRender="bar" />
    </h:inputText>
...



“ requestDelay ”属性定义了请求在即将发送前,在队列中将等待的时间(毫秒)。 当延迟时间结束时,如果最新的“类似”的请求是在队列里,该请求将被发送到服务器或删除。
“ ignoreDupResponses ”属性如果最新的“类似”的请求是在队列里忽视请求所产生的Ajax响应的。ignoreDupResponses"="true",不会取消在服务器上处理中的请求,但如果响应失去了事实,仅允许在客户端跳过不必要的更新。
同时设定“ eventsQueue ”与“ requestDelay ”可以避免不必要的交通溢出和AJAX请求顺序同步(Defining the "eventsQueue" along  with "requestDelay" allows to protect against unnecessary traffic flood and synchronizes Ajax requests order.)。 如果有多个AJAX请求源,可以在那定义相同的队列名称。如果有来自用户事件引起调用异步请求的Ajax组件,这是非常有益的。 例如, <a4j:poll>或<a4j:push> 。 说不定来自这些组件的请求是修改同样的数据,同步是非常有益的。
可在RichFaces用户论坛找到更多信息 。
(http://203.208.39.99/translate_c?hl=zh-CN&langpair=en%7Czh-CN&u=http://jboss.com/index.html%3Fmodule%3Dbb%26op%3Dviewtopic%26t%3D105766&usg=ALkJrhgoEg0DtTpUBa-nW4muL0KJTcnt_A)
“timeout”属性是用来设置一个特定的请求所产生响应轮候时间。 如果在这段时间内响应是没有被收到,该请求被中止。
5.5.3 队列原则(Queue Principles)
从 3.3.0版开始RichFaces就有改良了的队列。
改良队列有一些严重的原因。 改良后的队列可以:
 消除当几个JSF请求同时传到JSF生命周期(lifecycle)冲突的可能性。 队列阻止发送这些请求。只有一个请求被处理,其余的在等待。
 减小浏览器和服务器之间的通信。“类似”的请求在requestDelay范围内是被合并。其实只有最后一个请求是发送的。 减少了请求的数量降低了服务器负载。
 明显增加“无关”异步请求处理的数量。
有4种类型的队列:
 全局默认队列,默认在web.xml文件中定义的
 视图作用域默认队列
 视图作用域命名队列
 基于表单的默认队列
在本节中,我们将仔细研究在上面列出的类型的队列,更详细看看它们有何不同。 使用细节在<a4j:queue>篇章涵盖。
5.5.3.1 全局默认队列,默认在web.xml文件中定义
设计细则
 视图只有一个全局队列永远存在
如果企图设置其属性时,用这个名称定义了超过一个队列,在呈现期间服务器控制台将出现一个警告。在第一个实例之后所有的相同命的名队列都被忽略。
 队列类的名称是“ org.richfaces.queue.global ”
全局默认队列是应用级作用域和定义在web.xml中
实现如下:

Java代码 复制代码
  1.   ...   
  2. <context-param>   
  3.    <param-name>org.richfaces.queue.global.enabled</param-name>   
  4.    <param-value>true</param-value>   
  5. </context-param>   
  6. ...  
  ...
<context-param>
   <param-name>org.richfaces.queue.global.enabled</param-name>
   <param-value>true</param-value>
</context-param>
...



全局默认队列预设是禁用的,人为序列化页面上的所有Ajax请求会严重影响预期行为。
5.5.3.2 视图作用域默认队列
设计细则
 在一个特定的视图或表单的时间内只有一个默认的队列是一直活跃。
 如果发现在呈现期间有越来越多的警告出现在服务器控制台。在第一个实例后所有的相同命的名队列都被忽略。
 具有以下Ajax属性的组件,视图作用域默认队列也会被创建: (在这种情况下,队列中有一个组件的作用域)
 “ requestDelay ”
 “ ignoreDupResponce ”
如果在一个组件的“ eventsQueue ”属性的定义是一些名称,视图作用域默认队列被自动创建,但在视图中找不到。 它与定义的对应上下文参数具有相同的作用域。
视图作用域默认情况,使用<a4j:queue>标记命名的和基于表单的队列类型,覆盖了在web.xml文件中定义的全局队列的设置。
使用如下代码也可以在单个视图里以编程方式启用/禁用全局队列:

Java代码 复制代码
  1.  ... ...    
  2. <a4j:queue name="org.richfaces.global_queue" disabled="true"... />   
  3. ... ...   
 ... ... 
<a4j:queue name="org.richfaces.global_queue" disabled="true"... />
... ... 


在这里要启用一个单独的视图页面的队列,必须定义“disable”属性为“flase” 。
现在,可以使用<a4j:queue>组件的属性覆盖默认设置。 完整属性列表是在本手册“ 6.20. <a4j:queue> ” 的一章里。
例如:

Java代码 复制代码
  1. ...    
  2. <a4j:queue name="org.richfaces.global_queue" requestDelay="1000" />   
  3. ...   
  ... 
  <a4j:queue name="org.richfaces.global_queue" requestDelay="1000" />
  ... 


只有队列的定义不指定名称,可以增加视图作用域队列。 在这种情况下,应该放在表单以外的任何地方,以便不被确认为一个基于表单的队列。

Java代码 复制代码
  1. ...    
  2. lt;a4j:queue ... />   
  3. ...   
  ... 
 <a4j:queue ... />
  ... 


5.5.3.3 视图作用域命名队列
设计细则
 命名队列必须有独一无二的名称,如果第二个队列具有相同名称的定义,在第一个实例后所有的相同命的名队列都被忽略。 
 表单元素被用作队列的命名容器(Form elements are used as naming container for the queue),即在表单内定义的自定义队列不能被该表单外的组件使用。
可以从任何支持“ eventsQueue ”属性的Ajax4JSF或RichFaces组件引用命名队列。 下面有一个组件如何引用命名队列的例子。
例如:

Java代码 复制代码
  1. ...   
  2. <a4j:queue name="sampleQueue"/>                            
  3.   
  4. <h:inputText value="#{bean.inputValue}" >   
  5. <a4j:support id="inputSupport" event="onkeyup" eventsQueue="sample"/>   
  6. </h:inputText>   
  7. <rich:comboBox value="#{bean.state}" suggestionValues="#{bean.suggestions}" eventsQueue="sample" />       
  8. ...  
...
<a4j:queue name="sampleQueue"/>                         

<h:inputText value="#{bean.inputValue}" >
<a4j:support id="inputSupport" event="onkeyup" eventsQueue="sample"/>
</h:inputText>
<rich:comboBox value="#{bean.state}" suggestionValues="#{bean.suggestions}" eventsQueue="sample" />    
...


在这个例子中,两个组件(<a4j:queue>,<rich:comboBox>)通过“eventsQueue”属性引用命名队列。
5.5.3.4 基于表单的默认队列
设计细则
 每次,只有一个可用的基于表单的默认队列是起作用。
 如果超过一个可用的基于表单队列存在,在呈现期间在服务器控制台将出现一个警告。在第一个实例后所有的相同命的名队列都被忽略。
 用户可以定义超过一个表队列,但是除了一个之外的必须禁用。
队列常常与表单一起使用,但表单的每个组件去设置“ eventsQueue ”属性是乏味的工作。为了避免这种情况,您可以为表单创建一个默认的队列(覆盖全局默认队列)。
你可以使用JSF的<h:form>或Ajax4JSF <a4j:form> 。
例如:

...

Java代码 复制代码
  1. <h:form ... >   
  2. <a4j:queue ... /><!-- note no name specified -->   
  3.    ...   
  4. </h:form>  
<h:form ... >
<a4j:queue ... /><!-- note no name specified -->
   ...
</h:form>


然而,也可以使用Ajax4JSF <a4j:form>通过“ eventsQueue ”引用一个命名队列。
例如:

Java代码 复制代码
  1. ...   
  2. <a4j:queue name="sampleQueue"/>                            
  3. <h:inputText value="#{bean.inputValue}" >   
  4. <a4j:support id="inputSupport" event="onkeyup" eventsQueue="sample"/>   
  5. </h:inputText>   
  6. <rich:comboBox value="#{bean.state}" suggestionValues="#{bean.suggestions}" eventsQueue="sample" />      
...
<a4j:queue name="sampleQueue"/>                         
<h:inputText value="#{bean.inputValue}" >
<a4j:support id="inputSupport" event="onkeyup" eventsQueue="sample"/>
</h:inputText>
<rich:comboBox value="#{bean.state}" suggestionValues="#{bean.suggestions}" eventsQueue="sample" />    



不管怎样,队列的实现使你可以在带有基于表单队列的表单引用命名队列。
例如:

Java代码 复制代码
  1. ...   
  2. <a4j:queue name="sampleQueue" ... /> <!-- named queue -->   
  3. ...   
  4. <h:form ... >   
  5.  <a4j:queue ... /><!-- form-based queue-->   
  6.   <a4j:commandButton ... > <!-- uses the form-based queue -->   
  7.  <a4j:commandButton eventsQueue="sampleQueue" > <!-- uses named queue -->   
  8. </h:form>   
  9. ...  
...
<a4j:queue name="sampleQueue" ... /> <!-- named queue -->
...
<h:form ... >
 <a4j:queue ... /><!-- form-based queue-->
  <a4j:commandButton ... > <!-- uses the form-based queue -->
 <a4j:commandButton eventsQueue="sampleQueue" > <!-- uses named queue -->
</h:form>
...


5.5.3.5 队列功能
本节将覆盖到一些队列的功能方面。
5.5.3.5.1 事件相似性(Events Similarity)
默认情况下,与队列相似,所有事件触发于相同的组件(根据客户端事件源ID)。这意味着,如果新的请求来自同一个组件,他们是被与上一个请求合并一起。例如:如果我们在一个输入域上使用a4j:support和频繁地输入,在requestDelay期间所有触发于KeyUp的请求将合并成为一个请求。
您也可以手动指定多个组件将产生同样的请求。 在3.3.0版,“ similarityGroupingId ”属性添加到所有的Ajax行动组件。例如 ,您可以添加两个<a4j:support/>成分(一个用于key up和第二用于blur)用来输入和请求事件同样地指定相同的“ similarityGroupingId ”。
5.5.3.5.2 在请求延迟期间的相同请求
如上面所述请求是在requestDelay期间相同的被合并收集到队列中。但是,只有他是连续触发的相同请求才会被合并。这样做是为了不堵塞队列和不改变请求的顺序。
例如:
一个带有一些延迟的请求来到队列,让它是A1,这请求的延迟计数器启动。如果相同的请求(例如来自同一组件-A2)出现——这两个请求合并起来(A1A2到A合并)和该计数器复位。
但是,如果一些不相同的请求来来队列B1 –它是放在第一个后面(A合并,B1) 。 如果A合并请求不退出队列和另一个与A相同的请求(A3)再次出现——这些请求都不会合并到第一个。该请求放在B1后面。(A联合,B1,A3) 。
这样的做可以:
 以最多的相同请求通过
 为相同请求只发送的最新的输入域的状态(to send only the latest fields state for similar requests)
 如果不同类型的请求来到排队,不阻塞队列,将等待另一个请求
从3.3.0版本开始,<a4j:poll>组件延迟时间默认为0,以便不用队列延迟(此参数本身的值用于重新定义队列的参数) ,以避免阻碍队列定期更新。如果需要,可以在组件级别重新定义这个。
5.5.3.5.3 JavaScript API
表5.1 JavaScript API

功能
描述

getSize() 返回当前的队列大小
getMaximumSize() 返回当前的队列最大的大小,在队列的“SIZE”属性指定
5.5.4 数据处理选项
RichFaces使用基于表单的方式发送Ajax请求。 这意味着每一次,当你按一下AJAX按钮或<a4j:poll>就产生一个异步请求,数据被最接近的JSF表单用XMLHttpRequest对象提交。表单数据包含表单输入元素的值的和辅助信息,如状态保存数据。
当“ ajaxSingle ”属性值为“true” ,它要求只包含当前组件的值(除带有<f:param>或<a4j:action>参数值外)到请求映射(map)。 假如<a4j:support> ,它是一个父组件的值。 例子如下:

Java代码 复制代码
  1. ...   
  2. <h:form>   
  3. <h:inputText value="#{person.name}">   
  4. <a4j:support event="onkeyup" reRender="test" ajaxSingle="true"/>   
  5. </h:inputText>   
  6. <h:inputText value="#{person.middleName}"/>   
  7. </form>   
  8. ...  
...
<h:form>
<h:inputText value="#{person.name}">
<a4j:support event="onkeyup" reRender="test" ajaxSingle="true"/>
</h:inputText>
<h:inputText value="#{person.middleName}"/>
</form>
...


在这个例子中请求只包含的促使请求产生的输入组件,没有包含在表单上的所有的组件,因为ajaxSingle="true"的作用。
请注意,这ajaxSingle="true"降低了即将进行的流量,但并不妨碍服务器端解码其他输入组件。有些JSF的组件,如<h:selectOneMenu>在请求映射的值为一个空值不承认丢失数据,并尝试通过验证程序,尽管一个失败的结果。 因此,如有需要,使用<a4j:region>限制在服务器端处理组件树的一部分。
“immediate”属性与其他任何非JSF的组件具有相同用途。 默认“ ActionListener ”应立即执行(即在请求处理生命周期的应用请求值阶段期间),而不是等到调用应用阶段。使用immediate="true"是当其他值因有问题无法更新,能成功通过验证阶段的一些数据模型值更新方法之一。 这可能是在<h:dataTable>里重要的,正如由于<h:dataTable>组件架构,组件使用<a4j:region>是不可能。
“ bypassUpdates ”属性允许绕过更新模型阶段。 如果您需要检查您的输入为有效的验证器做准备,但不更新带这些数据的模型时是有用的。请注意,如果验证阶段是成功通过,就会在验证阶段的最后调用该动作。 应用阶段的监听器在任何情况下不会被调用。
5.5.5 动作和导航
Ajax的组件与任何其他非Ajax的JSF的组件类似,如<h:commandButton> 。 它允许提交表单。 您可以使用“动作”和“ actionListener ”属性调查动作的方法和定义动作事件。
如果您想要有一个具有局部页面更新的AJAX响应,“动作”的方法必须返回null。 这种正常模式叫做“Ajax请求产生非Ajax响应(Ajax request generates Non-Ajax Response)”。 如果动作不返回null,动作结果就要匹配其中一个导航规则。RichFaces起动就工作“Ajax请求产生非Ajax响应”模式。 这种模式可能会对两种主要情况有所帮助:
 RichFaces可以在<a4j:include>组件内组织一个页面流。这是一个典型向导行为的情景。新的内容在<a4j:include>区域内呈现。 上下文是从Faces配置文件(通常是faces-config.xml文件)的导航规则提取。 请注意,该上下文的“向导”不是孤立于其他的页面。 所包含的网页不应该有自己的<f:view> (如果使用了facelets没关系-Facelets是用来建立JSF应用程序时的一个可供选择的表现层技术 )。 你需要有一个在<a4j:include>里的AJAX组件在向导之间导航,其他情况,整个页面将进行更新。
 如果你想要调用服务器端的验证器,和当验证阶段是成功通过只导航到下一页,你可以把<a4j:commandButton>替换<h:commandButton>,并且指向导航到下一页的动作方法。如果验证过程失败,将会发生网页的局部更新和看到一条错误消息。其他情况,应用会进入下一页。请确保对导航规则设定了<redirect/>选项,以避免内存溢出。
5.5.6 。 JavaScript的相互作用
RichFaces允许编写启用AJAX 的JSF应用而无需编写任何JavaScript代码。 但是,如果您需要仍然可以调用JavaScript代码。有几个Ajax属性有助于做到这一点。
“ onsubmit ”属性让你在AJAX请求发送前调用JavaScript代码。 如果“ onsubmit ”返回“false” ,Ajax要求被取消。 “onsubmit” 的代码是插在RichFaces AJAX请求调用之前。 因此,如果想Ajax请求被发送“onsubmit”不应该有“return”的语句。 如果将要调用一个JavaScript函数,那就返回“true或“false” ,如果需要取消要求就使用条件语句返回的一些东西。 例如:

 

Java代码 复制代码
  1. ...    
  2.   onsubmit="if (mynosendfunct()==false){return false}"    
  3.   ...   
... 
  onsubmit="if (mynosendfunct()==false){return false}" 
  ... 


“onclick”属性与“onsubmit” 类似,但只是可点击的部件才有,如<a4j:commandLink>和<a4j:commandButton>。如果返回“false”,Ajax请求也被取消。
“ oncomplete ”属性用于传递在AJAX响应返回并且DOM更新后执行的JavaScript。 它在EL表达式里使用关键字this是推荐使用的,因为它不一定总是指向一个已初始化的AJAX请求。
“ onbeforedomupdate ”属性定义在Ajax响应接收之后和在客户端更新的DOM之前执行的JavaScript代码。
“data”属性,用来在一个AJAX调用期间从服务器获得到额外的数据。 您可以使用JSF EL表达式指向托管bean的属性,它的值用JSON格式序列化和在客户端可用。 您可以使用的“data”变量引用。 例如:

 

Java代码 复制代码
  1. ...    
  2.      <a4j:commandButton value="Update" data="#{userBean.name}" oncomplete="showTheName(data.name)" />   
  3.   ...   
... 
     <a4j:commandButton value="Update" data="#{userBean.name}" oncomplete="showTheName(data.name)" />
  ... 



RichFaces不仅可以序列化原始类型到JSON格式,也可以复杂类型,包括数组和集合。 Beans也可以序列化被“data”引用 。
有许多有用的函数,可以在JavaScript使用 :
 rich:clientId('id') -返回短ID形式的客户ID或如果指定的ID的组件没有找到就返回NULL
 rich:element('id') – 是document.getElementById(#{rich:clientId('id')})的引用。
 rich:component('id') –是#{rich:clientId('id')}.component的引用
 rich:findComponent('id') -返回的一个以参数为组件的短ID的UIComponent实例。

Java代码 复制代码
  1. ...    
  2. <h:inputText id="myInput">   
  3. <a4j:support event="onkeyup" reRender="outtext"/>   
  4. </h:inputText>   
  5. <h:outputText id="outtext" value="#{rich:findComponent('myInput').value}" />   
  6. ...    
... 
<h:inputText id="myInput">
<a4j:support event="onkeyup" reRender="outtext"/>
</h:inputText>
<h:outputText id="outtext" value="#{rich:findComponent('myInput').value}" />
...  


5.5.7 。迭代AJAX组件属性
“ ajaxKeys ”属性定义字符串,表示Ajax请求后被更新的内容。 它提供了分离地更新几个子组件而不更新整个网页的可能性。

Java代码 复制代码
  1.  ...   
  2. <a4j:poll intervall="1000" action="#{repeater.action}" reRender="text">   
  3. <table>   
  4. <tbody>   
  5. <a4j:repeat value="#{bean.props}" var="detail" ajaxKeys="#{repeater.ajaxedRowsSet}">   
  6. <tr>   
  7. <td>   
  8. <h:outputText value="detail.someProperty" id="text"/>   
  9. </td>   
  10. </tr>   
  11. </a4j:repeat>   
  12. </tbody>   
  13. </table>   
  14. </a4j:poll>   
  15. ...  
 ...
<a4j:poll intervall="1000" action="#{repeater.action}" reRender="text">
<table>
<tbody>
<a4j:repeat value="#{bean.props}" var="detail" ajaxKeys="#{repeater.ajaxedRowsSet}">
<tr>
<td>
<h:outputText value="detail.someProperty" id="text"/>
</td>
</tr>
</a4j:repeat>
</tbody>
</table>
</a4j:poll>
...


5.5.8其他有用的属性
"status"属性给Ajax组件(例如<a4j:commandButton>,<a4j:poll> 等等)指向一个<a4j:status>组件的ID。如想在不同区域的不同Ajax组件之间共享<a4j:status>组件就使用这属性。下面是它的例子。

Java代码 复制代码
  1. ...   
  2.     <a4j:region id="extr">   
  3.         <h:form>   
  4.             <h:outputText value="Status:" />   
  5.             <a4j:status id="commonstatus" startText="In Progress...." stopText=""/>   
  6.             <h:panelGrid columns="2">   
  7.                 <h:outputText value="Name"/>   
  8.                 <h:inputText id="name" value="#{userBean.name}">   
  9.                     <a4j:support event="onkeyup" reRender="out" />   
  10.                 </h:inputText>   
  11.                 <h:outputText value="Job"/>   
  12.                 <a4j:region  id="intr">   
  13.                     <h:inputText id="job" value="#{userBean.job}">   
  14.                         <a4j:support event="onkeyup"  reRender="out" status="commonstatus"/>   
  15.                    </h:inputText>   
  16.                 </a4j:region>   
  17.             </h:panelGrid>   
  18.   
  19.             <a4j:region>   
  20.                 <h:outputText id="out" value="Name: #{userBean.name}, Job: #{userBean.job}" />   
  21.                   
  22.   
  23.                 <a4j:commandButton ajaxSingle="true" value="Clean Up Form" reRender="name, job, out"  status="commonstatus">   
  24.                     <a4j:actionparam name="n" value=""  assignTo="#{userBean.name}" />   
  25.                     <a4j:actionparam name="j" value=""  assignTo="#{userBean.job}" />   
  26.                 </a4j:commandButton>   
  27.             </a4j:region>   
  28.         </h:form>   
  29.     </a4j:region>   
  30. ...  
...
    <a4j:region id="extr">
        <h:form>
            <h:outputText value="Status:" />
            <a4j:status id="commonstatus" startText="In Progress...." stopText=""/>
            <h:panelGrid columns="2">
                <h:outputText value="Name"/>
                <h:inputText id="name" value="#{userBean.name}">
                    <a4j:support event="onkeyup" reRender="out" />
                </h:inputText>
                <h:outputText value="Job"/>
                <a4j:region  id="intr">
                    <h:inputText id="job" value="#{userBean.job}">
                        <a4j:support event="onkeyup"  reRender="out" status="commonstatus"/>
                   </h:inputText>
                </a4j:region>
            </h:panelGrid>

            <a4j:region>
                <h:outputText id="out" value="Name: #{userBean.name}, Job: #{userBean.job}" />
                <br />
                <a4j:commandButton ajaxSingle="true" value="Clean Up Form" reRender="name, job, out"  status="commonstatus">
                    <a4j:actionparam name="n" value=""  assignTo="#{userBean.name}" />
                    <a4j:actionparam name="j" value=""  assignTo="#{userBean.job}" />
                </a4j:commandButton>
            </a4j:region>
        </h:form>
    </a4j:region>
...


在这个实例中<a4j:support>和<a4j:commandButton> 在不同的区域中定义。这些组件"status"属性的值指向<a4j:support>ID。因此,这个<a4j:support> 组件是在不同区域的两个不同组件之间共享。
在这里能找到更多信息:
http://livedemo.exadel.com/richfaces-demo/richfaces/status.jsf?c=status
另一个有用的属性是"focus" 。它是指向一个在Ajax请求后会获得焦点的组件的ID。

展开阅读全文

没有更多推荐了,返回首页