This tutorial article will give a very quick introduction to JBoss RichFaces. Instead of just listing features, we are going to briefly define RichFaces and then dive right into an actual step-by-step example. In this example, we are going to go beyond the standard “Hello World” type of example. We will come back to this in just a moment.
OK, this is the only place where I'm probably going to create some confusion, but I'm allowed to do it just once. RichFaces is not just a set of plug-ins, but actually a framework. One of its major features is its rich components. The components are divided into tag libraries. In addition, RichFaces provides a skinability (themes) features along with the Ajax4jsf CDK (Component Development Kit). For this article, I'm only mentioning CDK, so you are aware that it exists.
Two Tag Libraries
While the product is called RichFaces, it still has two different tag libraries. One tag library is called a4j: and the other is called rich:. The a4j: tag library provides page-level AJAX support. It basically provides foundation-like controls where you decide how to send a request, what to send to the server, and what to update. This approach gives you a lot of power and flexibility. The rich: tag library provides component-level AJAX support. Components from this library provide all their functionality out-of-the-box. In other words, you don’t need to decide how to send a request and what to update.
Another major feature is skinability (or themes). Any number of skins (defined via a property file) can be created with different color schemes. When a particular skin is set, component renderers will refer to that skin and generate colors, images, styles, and stylesheets based on that skin. What this means is that you can easily change the look and feel of the whole application by simply switching to a different skin. I have dedicated a complete section to this topic.
We're done. That's all you need to know for now.
Beyond “Hello World”
I'm pretty sure you are somewhat tired of “Hello World” examples. While they are very useful (at the beginning), they are not very practical in the real world. So, this time, let's go beyond “Hello World.” In this example, we will display a list of users in a table. Each row will have an “Edit” button. When this button is clicked, the application will open up a modal panel where that selected user can be edited. When changes are saved, only that particular row in the table will be updated, not the entire table.
Let's get started. We will start with the required software. You might already have the required software, so it's really your choice if you want to use your existing setup or continue with my setup. Our final application will look like this: