Chapter 6. Developing Applications with RichFaces

RichFaces has a range of components for developing web application interfaces. This chapter contains information on a number of key components that are widely used, as well as those that are new, categorized based on functionality. The code snippets and images presented in the chapter examples are taken from the RichFaces Showcase example, available to download from the Red Hat Customer Portal as part of the JBoss Web Framework Kit distribution.

6.1. Components for Web Application Layout

RichFaces has many different components for building the basic layout of web applications. Depending on their purpose, they can be used individually or as part of a greater body of HTML code.

6.1.1. a4j:commandButton

The a4j:commandButton component creates a button that can be clicked to produce output. Users can type text into an appropriate field and click the button to receive a response.
Text can be added to the button:
  • The value parameter is where the text that appears on the button is defined.

Example 6.1. a4j:commandButton

In this example, a button with the text "Say Hello" is created that renders a greeting when clicked.
<a4j:commandButton value="Say Hello" render="out" execute="@form" />
Using the a4j:commandButton component as shown in the above code creates this result:

6.1.2. rich:accordion

The rich:accordion component provides a compact layout for panels. A panel displays as a heading that expands when a user clicks it, while the other panels remain collapsed. This is a minimalist way to display menu items.
You can customize how the menu displays:
  • The rich:accordionItem component is where each menu item is defined.

Example 6.2. rich:accordion

This example creates an expandable menu with two options.
<rich:accordion switchType="client">
	<rich:accordionItem header="Overview:">
		<h:graphicImage value="/images/icons/common/rf.png" style="float:right" alt="rf" />
			RichFaces is a component library for JSF and an advanced framework for
			easily integrating AJAX capabilities into business applications.
				<ul>
					<li>100+ AJAX enabled components in two libraries</li>
					<li>a4j: page centric AJAX controls</li>
					<li>rich: self contained, ready to use components</li>
					<li>Whole set of JSF benefits while working with AJAX</li>
					<li>Skinnability mechanism</li>
					<li>Component Development Kit (CDK)</li>
					<li>Dynamic resources handling</li>
					<li>Testing facilities for components, actions, listeners, and pages</li>
					<li>Broad cross-browser support</li>
					<li>Large and active community</li>
				</ul>
	</rich:accordionItem>
	<rich:accordionItem header="JSF 2 and RichFaces 4:">
  	<p>We are working hard on RichFaces 4.0 which will have full JSF 2 integration. That is not all though, here is a summary of updates and features:</p>
			<ul>
				<li>Redesigned modular repository and build system.</li>
				<li>Simplified Component Development Kit with annotations, faces-config extensions, advanced templates support and more.</li>
				<li>Ajax framework improvements extending the JSF 2 specification.</li>
				<li>Component review for consistency, usability, and redesign following semantic HTML principles where possible.</li>
				<li>Both server-side and client-side performance optimization.</li>
				<li>Strict code clean-up and review.</li>
			</ul>
	</rich:accordionItem>
</rich:accordion>
Using the rich:accordion component as shown in the above code creates this result:

6.1.3. rich:toolbar

The rich:toolbar component creates a horizontal panel with clickable items. It can be used to add a toolbar to a layout with menu options that allow users to create, edit, and save input.
You can choose to customize your tools:
  • The rich:toolbarGroup component is where each menu tool is defined.

Example 6.3. rich:toolbar

This example creates a basic toolbar for word processing.
<rich:toolbar height="26" itemSeparator="grid">
	<rich:toolbarGroup>
		<h:graphicImage value="/images/icons/create_doc.gif" styleClass="pic" alt="create_doc" />
		<h:graphicImage value="/images/icons/create_folder.gif" styleClass="pic" alt="create_folder" />
    <h:graphicImage value="/images/icons/copy.gif" styleClass="pic" alt="copy" />
  </rich:toolbarGroup>
  <rich:toolbarGroup>
  	<h:graphicImage value="/images/icons/save.gif" styleClass="pic" alt="save" />
    <h:graphicImage value="/images/icons/save_as.gif" styleClass="pic" alt="save_all" />
    <h:graphicImage value="/images/icons/save_all.gif" styleClass="pic" alt="save_all" />
  </rich:toolbarGroup>
  <rich:toolbarGroup location="right">
    <h:inputText styleClass="barsearch" />
    <h:commandButton styleClass="barsearchbutton" onclick="return false;" value="Search" />
  </rich:toolbarGroup>
</rich:toolbar>
  • Using the rich:toolbar component as shown in the above code creates this result:

6.1.4. a4j:ajax

The a4j:ajax component triggers an Ajax request when an event is triggered. For example, when a user inputs a term into a text box, it can be replicated elsewhere on the page to display a rendered version of the text on the webpage.
The component can be configured to respond to user actions:
  • The event field indicates the action that is performed to trigger the output.

Example 6.4. a4j:ajax

This example takes the information a user types in the text field and renders it on the webpage.
 <a4j:ajax event="keyup" render="out" />
Using the a4j:ajax component as shown in the above code creates this result: