`

richfaces 精讲

    博客分类:
  • JSF
阅读更多

Ajax components attributes help RichFaces to expose its features. Most of the attributes have default values. Thus, you can start working with RichFaces without knowing the usage of these attribute. However, their usage allows to tune the required Ajax behavior very smoothly.

Re-Rendering

reRender is a key attribute. It allows to point to the area(s) on a page that should be updated as a response on Ajax interaction. The value of the reRender attribute is an id of the JSF component or an id list. This is a simple example:

  1. ...   
  2. <a4j:commandButton value="update" reRender="infoBlock"/>  
  3.     ....   
  4. <h:panelGrid id="infoBlock">  
  5.     .....   
  6. </h:panelGrid>  
  7. .....   
reRender uses UIComponent.findComponent() algorithm (with some additional exceptions) to find the component in the component tree. As you see, the algorithm presumes several steps. Each other step is used if the previous step is not successful. Therefore, you can define how fast the component is found mentioning it more precisely. The following example shows the difference in approaches (both buttons will work successfully):
  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>  

You can use JSF EL expression as a value of the reRender attribute. It might be a property of types Set, Collection, Array or simple String. The EL for reRender is resolved right before the Render Response phase. Hence, you can calculate what should be re-rendered on any previous phase during the Ajax request processing.

Most common problem with using reRender is pointing it to the component that has a 'rendered' attribute. Note, that JSF does not mark the place in the browser DOM where the outcome of the component should be placed in case the 'rendered' condition returns false. Therefore, after the component becomes rendered during the Ajax request, RichFaces delivers the rendered code to the client, but does not update a page, because the place for update is unknown. You need to point to one of the parent components that has no 'rendered' attribute. As an alternative, you can wrap the component with a4j:outputPanel layout="none".

ajaxRendered attribute of the a4j:outputPanel set to true allows to define the area of the page that will be re-rendered even if it is not pointed in the reRender attribute explicitly. It might be useful if you have an area on a page that should be updated as a response on any Ajax request. For example, the following code allows to output error messages regardless of what Ajax request causes the Validation phase failed.

  1. <a4j:outputPanel ajaxRendered="true">  
  2.     <h:messages />  
  3. </a4j:outputPanel>  

limitToList attribute allows to dismiss the behavior of the a4j:outputPanel ajaxRendered attribute. limitToList = "false" means to update only the area(s) that mentioned in the reRender attribute explicitly. All output panels with ajaxRendered="true" will be ignored.

Queue and Traffic Flood Protection

eventsQueue attribute defines the name of the queue that will be used to order upcoming Ajax requests. By default, RichFaces does not queue Ajax requests. If events are produced simultaneously, they will come to the server simultaneously. JSF implementations (especially, the very first ones) does not guaranty that the request that comes first will be served or passed into the JSF lifecycle first. The order how the server side data will be modified in case of simultaneous request might be unpredictable. Usage of eventsQueue attribute allows to avoid possible mess. Define the queue name explicitly, if you expect intensive Ajax traffic in your application.

The next request posted in the same queue will wait until the previos one is not processed and Ajax Response is returned back if the eventsQueue attribute is defined. In addition, Richfaces starts to remove from the queue 'similar' requests. 'Similar' requests are the requests produced by the same event. For example, according to the following code, only the newest request will be sent to the server if a user types very fast and has typed the several characters already before the previous Ajax Response is back. 

  1. <h:inputText value="#{userBean.name}">  
  2.     <a4j:support event="onkeyup" eventsQueue="foo" reRender="bar" />  
  3. </h:inputText>  

requestDelay attribute defines the time (in ms.) that the request will be wait in the queue before it is ready to send. When the delay time is over, the request will be sent to the server or removed if the newest 'similar' request is in a queue already .

ignoreDupResponses attribute orders to ignore the Ajax Response produced by the request if the newest 'similar' request is in a queue already. ignoreDupResponses="true" does not cancel the request while it is processed on the server, but just allows to avoid unnecessary updates on the client side if the response loses the actuality.

Defining the eventsQueue along with requestDelay allows to protect against unnecessary traffic flood and synchronizes Ajax requests order. If you have several sources of Ajax requests, you can define the same queue name there. This might be very helpful if you have Ajax components that invoke request asynchronously from the ones produced by events from users. For example a4j:poll or a4j:push. In case the requests from such components modify the same data, the synchronization might be very helpful.

Data Processing Options

RichFaces uses form based approach for Ajax request sending. This means each time, when a user click an Ajax button or a4j:poll produces an asynchronous request, the data from the closest JSF form is submitted with the XMLHTTPRequest object. The form data contains the values from the form input element and auxiliary information such as state saving data

When ajaxSingle attribute is equal true, it orders to include only a value of the current component (along with f:param or a4j:action param values if any) to the request map. In case of a4j:support, it will be a value of the parent component.

Note, that ajaxSingle="true" reduces the upcoming traffic, but does not prevent decoding other input components on the server side. Some JSF components, such as h:selectOneMenu do recognize the missing data in the request map value as a null value and try to pass the validation process with a failed result. Thus, use a4j:region to limit a part of the component tree that will be processed on the server side when it is required.

immediate attribute has the same purpose as any other non-JSF component. The default ActionListener should be executed immediately (i.e. during the Apply Request Values phase of a request processing lifecycle), rather than waiting until the Invoke Application phase. Using immediate="true" is one of the ways to have some data model values updated when other cannot be updated because of a problem with passing the Validation phase successfully. This might be important inside the h:dataTable like components where using a4j:region is impossible due to the h:dataTable component architecture.

bypassUpdates attribute allows to bypass the Update Model phase. It might be useful if you need to check user input against the available validator, but not to update the model with those data. Note, that an action will be invoked at the end of the Validation phase only if the Validation phase is passed successfully. The listeners of the Application phase will not be invoked in any case.

Action and Navigation

Ajax component is similar to any other non-Ajax JSF component like h:commandButton. It allows to submit the form. You can use action and actionListener attribute to invoke the action method and define the action event.

action method must return null if you want to have an Ajax Response with a partual page update. This is regular mode called "Ajax request generates Ajax Response". In case of action does not return null, but the action outcome that matches one of navigation rules, RichFaces starts to work in "Ajax request generates Non-Ajax Response" mode. This mode might be helpful in two major cases:

  1. RichFaces allows to organize a page flow inside the a4j:include component. This is a typical scenario for Wizard like behavior. The new content is rendered inside the a4j:include area. The content is taken from the navigation rule of the faces configuration file (usually, the faces-config.xml). Note, that the content of the "wizard" is not isolated from the rest of the page. The included page should not have own f:view (it does not matter if you use facelets). You need to have an Ajax component inside the a4j:include to navigate between the wizard pages. Otherwize, the whole page update will be performed.
  2. If you want to involve the server side validators and navigate to the next page only if the Validation phase is passed successfully, you can replace h:commandButton with a4j:commandButton and point to the action method that navigates to the next page. If Validation process fails, the partial page update will occur and a user will see an error message. Otherwize, the application proceeds to the next page. Make sure, you define <redirect /> option for the navigation rule to avoid memory leaks.

Javascript Interactions

RichFaces allows writing Ajax-enabled JSF application without writing any Javascript code. However, you can still invoke the javascript code if you need. There are several ajax attributes that helps to do it.

onsubmit attribute allows to invoke javascript code before an Ajax request is sent. If 'onsubmit' returns false, the Ajax request is canceled. The code of 'onsubmit' is inserted before the RichFaces Ajax call. Hence, the 'onsubmit' should not has a 'return' statement if you want the Ajax request to be sent. If you are going to invoke a javscript function that returns true or false, use the conditional statement to return something only when you need to cancel the request. For example, onsubmit="if (mynosendfunct()==false){return false}".

onclick attribute is similar to the 'onsubmit', but for clickable components such as a4j:commandLink and a4j:commandButton. If it returns false, the Ajax request is canceled also.

oncomplete attribute allows to invoke the javascript code right after the Ajax Response is returned back and the DOM tree of the browser is updated. Richfaces registers the code for further invocation of XMLHTTP request object before an Ajax request is sent. This means the code will not be changed during processing of the request on the server if you use JSF EL value binding. Also, you cannot use 'this' inside the code, because it will not point the component where Ajax request was initiated.

data attribute allows to get the additional data from the server during an Ajax call. You can use JSF EL to point the property of the managed bean and its value will be serialized in JSON format and be available on the client side. You can refer to it using the 'data' variable. For example:

<!----><a4j:commandButton value="Update" data="#{userBean.name}" oncomplete="showTheName(data.name)" />

Richfaces allows to serialize not only primitive types into JSON format, but also complex types including arrays and collections. The beans should be serializable to be refered with 'data'.

<!---->

分享到:
评论
4 楼 lostyue 2009-11-19  
这不就是参考手册吗....
这贴了有什么用...
3 楼 zuzuzuu 2008-07-21  
Richfaces 技术交流Q_Q群:66468614
2 楼 arwen 2008-05-11  
rrr good
1 楼 zhangguoli1997 2008-01-29  
帖主太厉害了!很多中国程序员英文都不怎么好!还是您厉害能用英文跟大家交流技术!佩服!

相关推荐

    Richfaces ShowCase离线包

    **Richfaces ShowCase离线包** 是一个专为开发者设计的资源包,它包含了Richfaces框架的演示示例,能够帮助用户在没有网络连接的情况下也能深入理解和学习Richfaces的功能和用法。这个离线包特别适合那些需要在本地...

    RichFaces4.5 JavaApi JSApi

    RichFaces 4.5 是一个强大的JavaServer Faces (JSF) 框架的扩展库,专为构建富互联网应用程序(Rich Internet Applications, RIA)而设计。这个库提供了丰富的组件集,以及对JavaScript(JS)和Java API的支持,使得...

    richfaces中文开发文档

    **RichFaces中文开发文档概述** RichFaces是一款基于JavaServer Faces(JSF)技术的开源UI组件库,由JBoss组织开发。它为JSF应用程序提供了丰富的用户体验和强大的交互功能。这款框架极大地简化了Web开发过程,尤其...

    richfaces-ui-3.2.1

    《深入理解RichFaces UI 3.2.1在JBoss中的应用》 RichFaces UI 3.2.1是JBoss框架中一个重要的组件,它为开发人员提供了一套强大的AJAX(Asynchronous JavaScript and XML)功能,极大地提升了Web应用程序的交互性和...

    RichFaces 3.3 帮助文档(英文)

    ### RichFaces 3.3 帮助文档关键知识点概览 #### 一、简介 - **RichFaces框架概述:** RichFaces是一个基于JavaServer Faces(JSF)的开源组件库,提供了大量的富客户端组件以及对皮肤的支持。该文档详细介绍了如何...

    Richfaces组件使用指南

    RichFaces是一个开源框架,专注于将Ajax功能无缝集成到JavaServer Faces(JSF)应用程序中,无需依赖JavaScript。这个框架充分利用了JSF的生命周期、验证、转换工具以及资源管理功能。它提供的Ajax支持是完全集成到...

    richfaces4.0所需jar包

    RichFaces 4.0 是一个强大的JavaServer Faces (JSF) 框架的扩展库,主要用于构建富互联网应用程序(RIA)。它提供了丰富的组件库,增强了用户体验,允许开发者创建交互性和动态性极强的Web应用。这个压缩包包含了...

    richfaces详细使用

    ### RichFaces框架详解及其在IT行业的应用 #### 引言 在现代Web开发领域,提升用户体验和优化交互性是至关重要的。RichFaces作为一款开源框架,以其强大的Ajax能力、丰富的组件库以及高度可定制的特性,在Java...

    richfaces(里面包含JAR包)

    **标题解析:** "richfaces(里面包含JAR包)" 这个标题指出我们要讨论的是RichFaces,一个基于JavaServer Faces (JSF) 的开源组件库,它提供了丰富的用户界面组件和 AJAX 功能。标题特别提到“里面包含JAR包”,...

    richfaces3.2用户手册的pdf版

    ### RichFaces 3.2 用户手册知识点概览 #### 一、引言 RichFaces 3.2 是一款强大的框架,提供了丰富的组件库以及可定制化的皮肤支持,它旨在简化Web应用程序的开发过程,尤其在JavaServer Faces (JSF) 技术的基础...

    Richfaces标签

    ### Richfaces标签详解 #### 一、概述 Richfaces是一个基于JavaServer Faces(JSF)技术的开源框架,提供了一套丰富的用户界面组件库。这些组件不仅具备强大的功能,还能很好地支持AJAX交互,极大地提高了Web应用...

    richfaces开发指南(英文版)

    **RichFaces 开发指南概述** **1. 引言** RichFaces 是一个强大的 JavaServer Faces (JSF) 扩展框架,它提供了大量的富组件和皮肤可定制性支持。这个框架旨在帮助开发者创建功能丰富的、交互性强的Web应用程序,...

    jboss-richfaces-3.0.0

    **JBoss RichFaces 3.0.0:一个强大的AJAX和JSF组件库** **一、RichFaces概述** RichFaces是JBoss公司推出的一款基于JavaServer Faces (JSF) 技术的开源UI组件库,它极大地扩展了JSF的功能,特别是提供了丰富的AJAX...

    richfaces-3.0.0

    "richfaces-3.0.0" 是一个特定版本的 RichFaces 库,它专注于为 JavaServer Faces (JSF) 框架提供丰富的用户界面组件和功能。 RichFaces 是一个开源项目,它扩展了 JSF 的功能,提供了大量的可重用 UI 组件,以及对 ...

    richfaces参考文档

    **RichFaces 参考文档详解** RichFaces 是一个强大的 JavaServer Faces (JSF) 扩展库,专为创建交互式、富客户端Web应用程序而设计。这个“richfaces参考文档”是开发人员的重要资源,尤其是对初学者而言,它提供了...

    richfaces标签学习笔记

    在本文中,我们将深入探讨 RichFaces 标签的使用,特别是 `rich:componentControl` 和 `rich:modalPanel` 标签,以及 `inputNumberSlider` 和 `PanelBar` 组件。RichFaces 是一个功能丰富的 JavaServer Faces (JSF) ...

    richfaces-ui-3.3.1.GA-bin

    《深入解析RichFaces UI 3.3.1 GA版本》 在Web开发领域,富客户端框架(Rich Client Frameworks)为构建交互性更强、用户体验更优的网页应用提供了强大支持。其中,RichFaces作为一款基于JavaServer Faces(JSF)的...

    使用richfaces需要用到的jar包

    使用richfaces需要用到的jar包! commons-beanutils-1.7.0.jar,commons-codec-1.3.jar,commons-collections-3.2.jar,commons-digester-1.8.jar,commons-discovery-0.4.jar,commons-el-1.0.jar,commons-...

Global site tag (gtag.js) - Google Analytics