Building a JSF application requires the following three steps:

• Author JSP pages, using custom tags representing JSF components that will be rendered as HTML elements.
  
• Write JavaBeans as the state holder of the user input and components’ data. A component can be bound with a JavaBean. In this case, the component’s local value will be copied to the JavaBean’s property if the local value is valid.
  
• Write an event listener that determines what should happen when an event occurs, such as when the user clicks a button or submits a form. JSF supports two events: ActionEvent and ValueChangedEvent. ActionEvent is fired when the user submits a form or clicks a button, and ValueChangedEvent is triggered when a value in a JSF component changes.

NOTE The JSF implementation also provides a default event listener for page navigation that can be configured easily. You should not write an event listener that tampers with page navigation.

These steps do not need to happen in a particular order. In fact, they can occur simultaneously in a project with a clear separation of labor. Now, let’s take a closer look at each of these three steps. 

Authoring JSP Pages

Authoring a JSP page requires you to be familiar with the standard JSF components. JSF components are discussed in detail in Chapters 4 and 5. The following components are used in the examples in this chapter: 

• The UIForm component is rendered as an HTML form.
  
• The UIInput component is rendered as an input field to accept user input.
  
• The UIOutput component is rendered as normal HTML text and is used for displaying output.
  
• The UICommand component is rendered as a button.

In a JSP page, you use custom tags that represent JSF components. These custom tags are part of two custom tag libraries, HTML and Core, and are included in the WEB-INF/lib directory of the application directory (as discussed in the “Introduction” to this book). The tag library descriptors (TLD files) for these libraries have also been included in the .jar files, so you do not need to worry about them.

To use the custom tags that represent JSF components, you need the following two taglib directives on top of every JSP page in the JSF application:


<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>



All custom tags representing the component must be enclosed in the use_faces tags of the Core custom tag library:


<f:use_faces>
<%-- custom tags representing JSF components here --%>
</f:use_faces>
<?xml:namespace prefix = f /><f:use_faces><%-- custom tags representing JSF components here --%></f:use_faces>


The custom tags representing JSF components are discussed in Chapters 4 and 5. The following are some of the custom tags used in the examples in this chapter:

• <h:form> represents a UIForm component.
  
• <h:input_text> represents a UIInput component that accepts any text.
  
• <h:input_number> represents a UIInput component that accepts a number.
  
• <h:output_text> represents a UIOutput component that displays any text.
  
• <h:output_number> represents a UIOutput component that displays a number.
  
• <h:output_errors> represents a UIOutput component that displays error messages that occurred during the request processing.
  
• <h:command_button> represents a UICommand component.
  
• <f:action_listener> represents an ActionListener.
  
• <f:valuechanged_listener> represents a ValueChangedListener.
  
• <f:validator> represents a validator.

Remember: This is part one of the second chapter of JavaServer Faces Programming, by Budi Kurniawan (McGraw-Hill/Osborne, ISBN 0-07-222983). Stay tuned for part 2 of "Introduction to JavaServer Faces," where we learn about JSP, JavaBeans, and Model 2. Buy this book!