|Published (Last):||7 September 2009|
|PDF File Size:||3.97 Mb|
|ePub File Size:||6.32 Mb|
|Price:||Free* [*Free Regsitration Required]|
Comment 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. We will come back to this in just a moment. If you know what RichFaces is already, then you can probably skip this section. For those of you who don't, here is what you need to know the most important parts. RichFaces simply provides ready-to-use Ajax components to enable building Ajax-based applications.
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. For this article, I'm only mentioning CDK, so you are aware that it exists.
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. 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. While they are very useful at the beginning , they are not very practical in the real world. 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:.
Download Tomcat 5. As we are dealing with users, we are going to create a user model class. In the JavaSource directory, create an example. User Java class and notice the package name:. The class is very simple. Our application will list one or more of these users. Next, we are going to create a managed bean. The managed bean will basically be a model for the user interface we will be building shortly.
In JavaSource, create an example. UserBean Java class. Again, pay attention to the package name:. This class is also simple.
A list of five users is created and place inside an ArrayList. The PostConstruct annotation is useful for initializing properties. It guarantees that the annotated method will only be called once when the bean is created. The page is also very simple. We just display all the users we created inside the managed bean using the rich:dataTable component. At this point we are ready to test the application.
Make sure everything is saved. In Servers view, right click the server and select Start 3. Right click users. Click Finish. The next step is to add a button to each column, which when clicked will open a modal panel with user details. One thing you probably noticed is that you have a blue color schema while my screen shots have red color schema. I'm using a different skin. If you would like to change the skin, that's very easy to do. Save and restart the server. One thing that's still different is the font size.
If you also want to change that, check out this blog entry. We will first create the modal panel. The modal panel has to be placed outside the original form, because it must have its own form:.
Next, we need to open the popup. To do that, we are going to add another column to the table. The column will contain a button to open the popup. We will make this column first. The coding looks like this:.
In our case, it is show to open and hide to close the modal panel. Later, we will be calling a save method when the Save button is clicked in the modal panel. How do we know which row was selected which corresponds to the user we would like to edit.
It's basically a listener that will take the object in the current row and assign it to userBean. We don't yet have this property, so let's add it. Before we test this, there is one more thing to mention. This is needed in order to rerender the selected user information.
We first pass the selected user to the server. When the page is rendered back to the browser, we would like to rerender that property userSelected in order to display the selected user. Go ahead and run the application as we did before. Before you run, make sure everything is saved and all the changes have been deployed. Your page should look like this:. We are now able to click on a particular row and display the user information in the modal panel. What we ultimately want to do is be able to edit user information, but only update the particular row for that user, instead of updating the whole table.
Updating the whole table is rather simple. How do we update only the row that has been edited? All data components in RichFaces including a4j:repeat come with a feature that allows updating only a subset of rows.
All such components expose an ajaxKeys attribute that points to the row or rows that need to be updated. Let's first go over the changes we need to make on the page. First, we need to set the ajaxKeys attribute on rich:dataTable changes shown in bold :. Next we need to call a save method from the modal panel when we make changes to the user information.
The updated Save link will look like this:. The actionListener points to a listener inside the managed bean which we are going to create next. We also have the reRender attribute pointing to columns in the table. Basically, to achieve partial table update, we need to specify two things.
First, which columns to update. In our case we are updating the name and email columns. Second, we need to specify which rows to update. This is done via the ajaxKeys attribute which is bound to a Set object that holds row numbers to update. Finally, we need to initialize rowsToUpdate property inside the init method, right after we create the users:.
The only other change we need is to add an a4j:keepAlive tag to the page.
It allows easy integration of Ajax capabilities into enterprise application development. It reached its end-of-life in June RichFaces originated from the Ajax4jsf framework which Alexander Smirnov designed and implemented. In March Exadel released the first version of what would become Ajax4jsf. While RichFaces provided out-of-the-box components a "component-centric" Ajax approach, where components do everything you need , Ajax4jsf provided page-wide Ajax support.
An Introduction To JBoss RichFaces
Comment 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. We will come back to this in just a moment. If you know what RichFaces is already, then you can probably skip this section.
Subscribe to RSS