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.
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
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,
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.
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:
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
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.
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
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:
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:
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 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).
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.
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.