RichFaces Tutorial with features, configuration, architecture, a4j:log, a4j:ajax, learning Richfaces, you must have the basic knowledge of Basic Java and JSF. The next-generation JSF component framework by JBoss! The RichFaces project is an advanced UI component framework for easily integrating Ajax. The description relies on a simple JSF with RichFaces application creation process from “RichFaces Toolkit for developing Web application” video tutorial.

Author: Molmaran Arashibei
Country: Senegal
Language: English (Spanish)
Genre: Science
Published (Last): 6 December 2009
Pages: 177
PDF File Size: 17.14 Mb
ePub File Size: 20.47 Mb
ISBN: 548-1-62389-612-9
Downloads: 80036
Price: Free* [*Free Regsitration Required]
Uploader: Malakazahn

JavaServer Faces JSF 2, released incontains major changes and additions in many areas, including system events, resources, and standardization of both Facelets and Ajax handling see Related topics. Although this evolution was welcome in general, an unfortunate and significant side-effect is that virtually all rich component frameworks written for JSF 1.

In response, the RichFaces team embarked on an extensive rewrite for version 4. As you’ll see in this article, some component names have changed; other components have been removed and new ones added. One major disappointment in the 4. This follow-up article serves both tutoril a guide for developers new to RichFaces and as an aid for migrating from previous versions to version 4.

I have provided a WAR with demonstration code see Download. If you are new to RichFaces and want to use it with JSF 2, read just this article although you may want to review the previous article’s resources. If you’ve used RichFaces before version 4, I suggest that you view the two articles richfades by side.

To make it easier to compare version differences, I’ve used the same section headers in both. I’ve also worked to duplicate tutoril components’ appearance and functionality. From this point on, I’ll use RichFaces to refer to version tutoroal. I’ll start with a look at some necessary infrastructure elements for development with RichFaces. The browsers I used were Firefox 7. You shouldn’t experience any issues in general from my setup and the minimums noted above.

However, there are some things to keep in mind regarding the demo code:. If you need more background on these technologies, see Related topics for appropriate links. I prefer keeping things as clean and straightforward as possible.

In the example project, you’ll see that virtually all of the page code as opposed to markup is composed of EL expressions for getters, setters, and method bindings. Although more complex projects may call for more complex expressions, in general Facelets makes it easy to keep Java code separate tutorjal your web page markup.

As far richtaces formatting goes, other than jdf initial portions see Listing 1everything in the web page code should look familiar.

I view that aspect as an understated Facelets feature. For this article’s project — and many others in which the primary use of Facelets is for handling the view — that’s really all you need to know. Facelets also includes a number of other useful features, such as easy templating and elements to make life easier for web page designers. To learn more about Facelets, see Related topics.

RichFaces can seem initially overwhelming; the average component has more than 20 specific attributes, plus general attributes that can be overridden. However, in typical usage the components are not difficult to set up, with most attributes having reasonable defaults. Version 4 has introduced changed and additional defaults, and it’s worthwhile to check the documentation.


The primary components demonstrated in this article with replacements for Version 4 noted richdaces. View image at full size. RichFaces is built tuttorial Ajax4jsf see Related topics. Thanks to that foundation, any component can be Ajax enabled in several different ways. In version 4, Ajax functionality is often automatic or the default.

The example application uses Ajax capabilities for the AutoComplete and Collapsible Panel components. The dwRichFaces4Demo1 example application is minimal; its only real purpose is to demonstrate setup and usage of the selected components.

For that reason, all it does is collect and display input data. I’ll leave to your imagination how to use the data and components in a production application. On the input page, you can select a date using the Calendar component. The Pick List component lets you move and reorder the available items. The City AutoComplete component lets you key in a city name.

City is Ajax-enabled; if you press the space bar, all available cities are shown.

RichFaces Tutorial

If you key city names beginning with an A or a J, lists of the appropriate cities are shown. The available cities on the list narrow as you key more characters. You can click on the Accordion items on the left for basic component instructions. Once you’ve made your entries, click the Submit button. The application is so minimal that no editing is tutroial.

Because manual input is disabled for the Calendar component, you can’t even enter an richface date. The Submit button causes the results page to display, as shown in Figure On the results page, click on the Result tab, then click the appropriate Tutoiral Panel item to see the input value. Click the Edit button to return to the input page. Notice that the background color of the Submit button in Figure 7 and the Edit button in Figure 8 matches that of the other elements even though those buttons are standard JSF, not RichFaces, components.

I’ll cover the reason in the next section. For migration, note that the dependencies have changed completely in version 4. You should also read the Download note. In my project and included in the download WAR see Related topics for download sitesricjfaces versions used are:.

Note that when you use JSF 2 with a Servlet 3.

Using RichFaces with JSF 2

I prefer to be explicit. Prior to JSF 2, a javax. This entry is no longer required, because Facelets is now the default VDL.

RichFaces 4 no longer requires org. You can just drop in the JARs and use it. The good news about the entries in Listings 2 and 3 is that they are virtually the same in all of your applications and essentially boilerplate code. If you’re willing to accept the defaults and don’t care about being explicit, you rchfaces dispense with them altogether.

There’s one more piece that you’ll see in every application: Listing 4 tugorial a modification of Listing 1 that includes the RichFaces namespace:. Now you’re ready to see how to use RichFaces components. I’ll begin with Accordion and Accordion Items see Jef 5.

You probably won’t use them often, but they are easy to work with and provide a good first use case for RichFaces syntax. The idea here is that an Accordion is a container for Accordion Items.


An Accordion Item has a header and can contain any eichfaces component. Accordion Items stack on top of one another; the actual content is shown when the bar for the item is clicked. Only one item’s content is shown at a time.

In this case, as you can see from Listing 5, Msf just using text. Notice that all components have a rich: I use a font style element for consistent readability, and also to show that RichFaces allows CSS flexibility.

Notice that no programmer involvement with the generated JavaScript is necessary. In just a few steps, you can create a nice-looking, multipanel, clickable component.

This is one of RichFaces’ great strengths. The Calendar component see Figure 1 should be familiar; date selection was probably one of the earliest JavaScript enhancements to web pages. The RichFaces Tugorial has more than 80 available attributes but, as you can richfacfs from Listing 6, you can enable a lot of functionality in just a few lines:. The datePattern attribute wants a standard date pattern as defined by java. The example again uses the resource bundle for the value, which defines the datePattern key as yyyy-MM-dd.

The value and timeZone attributes are loaded using methods from a managed bean, which is defined in faces-config. The getSelectedDate and setSelectedDate methods expect a java. The getTimeZone method just returns java. If you also want to allow the user to key in date values, set the enableManualInput attribute to true.

If you just want to show the Calendar, set the popup attribute to false.

Obviously, many other settings are available, but that’s about all you need for basic Calendar functionality. If you are migrating from previous RichFaces versions, setting up the Calendar component for the functionality in the demo code is virtually identical in version 4.

Listing 8 demonstrates that it is also easier isf use than you might initially think:. List classes containing any type of object. As with the demo code, you’ll probably use lists containing String s richfacees of the time.

The Java code is virtually unchanged from that used in ” An introduction to RichFaces. After the user has made the desired selection son submittal your handler receives the list containing the choice s.

If you frequent forums and mailing lists, sooner or later you will see a question that asks how to handle downloading thousands or millions of entries to tutoriall drop-down list. The AutoComplete component see Figure 3which replaces Suggestion Box, offers a way to show valid input selections without attempting that unworkable extreme.

In fact, that concern was a major reason I began richraces RichFaces and similar suites: The AutoComplete functionality is similar to the familiar autocomplete components available in many desktop applications. It should be apparent that Ajax submittals would probably have to be involved for that sort of capability to have tutroial chance of working efficiently in a web application.