In this chapter, we are going to learn about the RichFaces project and how it can help us develop better Ajax web applications faster.
First, we'll go through a bit of the story of its birth and growth. Thereafter, we'll learn how it works (in general), which components are inside its framework, and what we can do with them. Finally, we'll explain some advanced techniques and start looking at the CDK (Component Development Kit) with a simple example.
RichFaces is a very useful open source framework that allows you to add Ajax capability to your JSF application (using the standard JSF components) without the need to write JavaScript code and manage JavaScript compatibility between browsers. It is integrated with the JSF lifecycle and other standard JSF features such as validation, conversion, and resource management.
Moreover, RichFaces offers the very powerful skinnability. This customizes the look and feel of your JSF applications. You can define different color schemes to create your custom skins or use the predefined ones. Also, you can manage the predefined CSS styles (or add your own ones) to change the appearance of UI library components in a simple and consistent way (you can even use XCSS to dynamically customize the CSS styles). The skinnability feature of RichFaces can apply skins to standard HTML elements such as input, select, textarea, fieldset, and so on.
RichFaces provides two sets of component libraries:
Core Ajax: The Core library contains components that are useful to "ajaxize" JSF pages and standard JSF components. It is very simple to define Ajax areas and to invoke Ajax requests in order to update those areas (we'll see how this is done very soon). Also, it provides a component to generate binary resources on the fly (for example, code-generated images, pdf files, csv files, and so on).
UI: The RichFaces UI library is a set of advanced JSF Ajax components used to add rich user interface features to your applications. The components support Ajax out of the box and perfectly integrate with the Core library. Also, they fully support skins and can be completely adapted according to the users' needs.
Another feature included in the RichFaces framework is the Component Development Kit (CDK)—the set of tools used for UI library creation that can be used to make new components with built-in Ajax and skinnability support.
Other extras are the Facelets support, the possibility to create components from Java code (with documented API), the JavaScript API of components to interact with them from the client side (if you want to use JavaScript), and last but not least, the very strong community support.
As you can see, RichFaces has a lot of very powerful features that can help you with rich application development. In the following paragraphs, we'll do a short overview of the framework to start understanding all the possibilities you have.
RichFaces comes from the Ajax4Jsf framework. It was created by Alexander Smirnov who joined Exadel in 2005 in order to continue the development. The idea was to put together the "cool" Ajax techniques with the new JavaServer Faces framework.
The first commercial version was released in March 2006 with the name of Exadel VCP. In the same year, it was split into two projects—Ajax4Jsf (open source) and RichFaces (commercial).
Ajax4Jsf provided the Core Ajax framework and the Ajax components to "ajaxize" JSF components in a page (page-wide Ajax support). RichFaces was a commercial JSF Ajax components library.
In March 2007, Exadel and JBoss (a RedHat division) announced a partnership to open the source code of RichFaces, and the two projects were merged into a single open source project called just "RichFaces". It was a good move to solve the version compatibility issues that the two separate projects had.
Nowadays, the project is moving really fast with the help of the community of users involved with the RichFaces team who also decide what the future developments of the framework will be (such as which feature to develop further, which new component to make first, and so on).
For more information, visit the main web site at http://www.jboss.org/jbossrichfaces/), and the user forum at http://jboss.com/index.html?module=bb&op=viewforum&f=261.
The RichFaces Ajax framework is a JSF component library that adds page-wide Ajax support to your pages, unlike the traditional and limited component-wide Ajax support. It means that you can use Ajax components to invoke Ajax requests that are automatically synchronized with the JSF component tree, and update single areas without reloading the entire web page. The following image, taken from the JBoss documentation, shows the request processing flow:
It is not different from a standard JSF page, and you don't even need to write JavaScript code by using the RichFaces Ajax components. Inside the page you can define different areas you want to update, after the Ajax request.
The framework architecture is composed of five parts:
Ajax Filter: This is essential to add Ajax capabilities to your JSF application using RichFaces. It manages all the requests (both Ajax and standard JSF), corrects and validates the markup code sent, manages the script and style loading, the resources cache, and so on. You have to register the filter in the
web.xmlfile.Ajax Action Components: They are standard JSF components that you can use in order to send Ajax requests (we'll see them very soon).
Ajax Containers: The framework supports the
AjaxContainerinterface that describes an area ("region") of the page, which should be decoded during an Ajax request. The biggest region is the whole view of a JSF page, but you can define how many regions you want inside the page.Skinnability: This is a very useful part of the framework and adds skinning capability to your application (later, we'll see it in detail).
RichFaces JavaScript Engine: It runs on the client browser and manages Ajax requests and responses. It is automatically managed by the framework, so you don't have to use it directly.
You can decide when to use a standard JSF request (with a full reload of the web page) or when to use an Ajax request. In the latter case, only the involved Ajax region is processed, and the Delta Ajax markup is sent back to the client after the filter has parsed and verified it.
The verification is done because the XMLHTTPRequest JavaScript function sends the request in XML format; the markup inside the XML request is not validated or corrected. The XML filter can automatically remove HTML code problems, but it's a good practice to write standards-compliant XHTML and HTML code.
Components of the RichFaces framework share a lot of Ajax attributes, which are very useful to manage the Ajax options that you have.
The following component attributes are very important and you can find them in all the Ajax-enabled components of the RichFaces framework:
reRender: In order to decide which area must be updated after an Ajax request.ajaxRendered: If it is true, the area is updated after every Ajax request (even if it is not in thereRenderattribute).limitToList: In order to force the JavaScript Engine to update the areas only in thereRenderattribute.
We'll see these attributes in a lot of components of the framework. Therefore, it is useful to know how they work.
As we have said, these components are used to send Ajax requests to the server. Some examples of these components are:
a4j:commandButton: It is the Ajax version of the standard JSFh:commandButton. This produces Ajax requests instead of standard ones and has attributes to manage the Ajax options.a4j:commandLink: The Ajax version ofh:commandLink. It works likea4j:commandButton, but renders a link (HTML<a>tag) instead of theinputelement.a4j:poll: Using this component, you can periodically poll the server for data and update the page using an Ajax request.a4j:support: The most important Ajax component of the library; attaching it as a child adds Ajax capabilities to standard JSF components.
The RichFaces Ajax framework contains specific components that describe Ajax areas and implement the AjaxContainer interface. The main Ajax container is the view root by default; therefore, you don't need to define an Ajax container for the whole page. However, it's very useful to know how to use the a4j:region component to set new Ajax regions and optimize Ajax requests.
A very important concept to keep in mind while developing is that the Ajax framework can't add or delete elements, but can only replace existing elements in the page. So, if you want to append some code you need to use a placeholder.
RichFaces has a component that can be used as a placeholder: a4j:outputPanel.
Inside the a4j:outputPanel component, you can put other components that use the "rendered" attribute to decide if they are visible or not. When you want to re-render all the included components, just re-render the output panel, and all will work without a problem.
Another feature of the Ajax framework is the Ajax validators. They work with the JSF validation system. However, as it is event based you can use it to trigger the validation while you are typing, or when you move to another field, and so on. You can mix standard and custom validation and also use the Hibernate Validator framework (so you can just annotate the entire properties to add new validators).
The RichFaces framework contains many JSF components to add Ajax to our applications in a very simple way, without needing to know anything about JavaScript (but if you know it, you have more features to use the framework inside your personalized JS code).
There are a lot of components for different kinds of tasks (such as interaction, input, output, drag-and-drop, validation, and so on). We are going to explain how they work every time we use them in the forthcoming chapters.
Throughout the book, we are going to develop an application using RichFaces. While doing so, we'll see how those components work in practice using real examples that cover all of their functionalities.
In standard CSS, you can't define a particular value (for example, a color or a font size) to "reuse" it in more than one selector—you have to copy and paste it where you need it.
So, if you have to change it, you have to search for the value and manually replace it every time it occurs. As you can figure out, this is an error-prone process that can bring lot of problems and layout inconsistencies.
Moreover, if you need an interface that supports multiple sets of color and must be adjusted on the fly , you have to work with a lot of CSS files having the same declarations but different colors, and you would also have to maintain them for other updates.
The RichFaces skinnability feature is here to help us; it's not a CSS replacement, but integrates it by adding more capabilities.
In this chapter, we've learnt what the aims of the RichFaces framework are, what are its components (the Ajax framework, the RichFaces components, and skinnability), and what you can do by using it in a web application.
In the next chapter, we will learn how to use those components while developing a real Ajax application. We are also going to learn the most useful programming pattern and optimization techniques, in order to use this framework at its best for our Ajax web applications.
