JBoss RichFaces 3.3

4 (1 reviews total)
By Demetrio Filocamo
    Advance your knowledge in tech with a Packt subscription

  • Instant online access to over 7,500+ books and videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies
  1. What is RichFaces?

About this book

JBoss RichFaces is a rich component library for JavaServer Faces and an AJAX framework that allows easy integration of AJAX capabilities into complex business applications. Do you wish to eliminate the time involved in writing JavaScript code and managing JavaScript-compatibility between browsers to build an AJAX web application quickly?

This book goes beyond the documentation to teach you how to do that. It will show you how to get the most out of JBoss RichFaces by explaining the key components and how you can use them to enhance your applications. Most importantly, you will learn how to integrate AJAX into your applications without using JavaScript but only standard JSF components. You will learn how to create and customize your own components and add them to your new or existing applications.

First, the book introduces you to JBoss RichFaces and its components. It uses many examples of AJAX components which, among others, include: Calendar, Data Table, ToolTip, ToolBar, Menu, RichEditor, Drag'n'Drop. All these components will help you create the web site you always imagined. Key aspects of the RichFaces framework such as the AJAX framework, skinnability, and CDK (Component Development Kit) will help you customize the look of your web application. As you progress through the book, you will see a sample application that shows you how to build an advanced contact manager. You're also going to be amazed to know about the advanced topics you will learn like developing new components, new skins, optimizing a web application, inserting components dynamically using Java instead of XHTML, and using JavaScript to manage components. This book is more than a reference with component example code: it's a manual that will guide you, step-by-step, through the development of a real AJAX JSF web application.

Publication date:
October 2009


Chapter 1. What is RichFaces?

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.


An overview of RichFaces

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.


A bit of history

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 Ajax framework

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:

  1. 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.xml file.

  2. Ajax Action Components: They are standard JSF components that you can use in order to send Ajax requests (we'll see them very soon).

  3. Ajax Containers: The framework supports the AjaxContainer interface 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.

  4. Skinnability: This is a very useful part of the framework and adds skinning capability to your application (later, we'll see it in detail).

  5. 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 the reRender attribute).

  • limitToList: In order to force the JavaScript Engine to update the areas only in the reRender attribute.

We'll see these attributes in a lot of components of the framework. Therefore, it is useful to know how they work.

Ajax Action Components

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 JSF h:commandButton. This produces Ajax requests instead of standard ones and has attributes to manage the Ajax options.

  • a4j:commandLink: The Ajax version of h:commandLink. It works like a4j:commandButton, but renders a link (HTML <a> tag) instead of the input element.

  • a4j:poll: Using this component, you can periodically poll the server for data and update the page using an Ajax request.

  • a5j:push: It simulates push data from the server.

  • a4j:support: The most important Ajax component of the library; attaching it as a child adds Ajax capabilities to standard JSF components.

Ajax Containers

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.

Ajax placeholders

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.

Ajax validators

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


RichFaces components overview

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.


RichFaces skinnability overview

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.

About the Author

  • Demetrio Filocamo

    Demetrio Filocamo is a computer science engineer with more then 10 years of experience on both Desktop and Web applications development. He works as a freelance in London and collaborates with some companies and universities in Italy. Demetrio has been developing Enterprise Java Applications using open source solutions for the last five years.

    Browse publications by this author

Latest Reviews

(1 reviews total)
Książka była mi potrzebna do refaktoringu starej aplikacji i znalazłem w niej kilka porad, które były pożyteczne.
Book Title
Access this book and the full library for FREE
Access now