Java Server Faces (JSF) is "Swing for server-side applications". It provides much of the plumbing for JavaServer Pages (JSP), which is used in conjunction with Servlets for developing web applications.

JSF has these parts:

• Data management using Java
• A set of prefabricated UI components that are translated into standard HTML tags so that they can be used with any browser
• A component model that enables third-party developers to supply additional components

JSF is well-supported by IDEs such as NetBeans and Eclipse.

There are two structures associated with a JSF application.

• The application is deployed as a WAR file. The JSF framework imposes a deployment structure on its contents.

• Application developers work in an IDE such as NetBeans or Eclipse. The IDE imposes a development structure. It uses a build script to produce the WAR file from the development structure.

Some earlier web technologies intermingle HTML and code from programming languages such as Java. JSF keeps different languages in different files.

A JSF application is deployed as a WAR file with this structure:

Note that the WAR file does not include Java source files.

This is the structure that application developers work with in NetBeans:

Unlike JSF, some earlier web technologies intermingle HTML and programming language code. Disadvantages include:

• It fails to separate models and views.

• Professional web designers prefer not to deal with embedded code.

• Professional programmers are notoriously unqualified for graphic design.

• The scope of the JSF implementation is restricted to the presentation tier, but it is designed so that programmers can "hook in" business logic for manipulating their own data model.

• Database persistence and web services are outside scope of JSF, but "hooks" are provided for dealing with them.

• Model-View-Controller Architecture

  • View components are "wired" to Model through beans.
  • JSF acts as Controller, processing action and value change events.

• Data Conversion

  • Change textual web form data into numbers, dates, and other data types.

• Validation and Error Handling

  • Detect missing or incorrect input.
  • Display appropriate error messages.

• Internationalization

  • Use resource bundles to give web pages different text depending on locale.

• Custom Components

  • Let application programmers develop their own components when JSF components are not enough.

• AJAX Support

  • Give application programmers use of tools to reduce the number of screens by moving some processing to the browser.

• Alternative Renderers

  • e.g., for WML or XUL pages.

Overview text.

• JSF pages contain hierarchies of user interface (UI) components.

• In the login example, the parent component is a form (h:form) and the children are the name field (h:inputText), password field (h:inputSecret), and button (h:commandButton).

• Each tag has a tag handler class. These collaborate to create a component tree data structure:

  

• Each component has a renderer that produces HTML output.

• All text that is not a JSF tag is simply passed through.

• The JSF tags are converted to HTML by their renderers.

• For example, the renderer for the UIInput component converts

       <h:inputText value="#{user.name}"/>

  into

       <input type="text" name="unique ID" value="current value"/>

  The JSF framework obtains the current value of user.name from the user bean.

• The JSF framework generates unique IDs for HTML elements so that they can be associated with beans. This process is called encoding.

• User fills in form fields and clicks a command button.

• Browser sends the form data to the server as a string of ID/value pairs in a POST request.

• IDs allow UI components to associate the data sent with appropriate beans and actions:

  • UIInput components update bean properties.
  • When clicked, a UICommand component fires an action event that can result in navigation to another screen.

• The big picture:

  

This is the life cycle of a JSF request initiated by the browser. Everything in the above diagram is taking place on the server.

With AJAX (Asynchronous JavaScript with XMLHttpRequest) the response need not be an HTML page. It can be information used by the browser to dynamically modify its current web page. JavaScript is the language used on the browser. XMLHttpRequest is a JavaScript function for asynchronous data transfer.

• Construct the component tree if this is the page's first request.
• Otherwise, retrieve the component tree, retaining form information between requests.

• Iterate over component tree, allowing objects to store their values.

• Convert form strings to submitted values (objects of any type).
• Perform correctness checks.

• Update beans that are wired to components.

• Execute the action method of the button or link that caused form submission.
• The string result is used by the navigation handler to look up next page.

• Encode the response and send it to the browser.

More advanced JSF applications still use Java Beans for data management, and they frequently use the mechanism illustrated in the login example for navigation between web pages. In addition, JSF supports the following:

• More complex bean management (CoreJSF Ch. 2)
• More complex navigation (CoreJSF Ch. 3)
• A variety of standard screen tags (CoreJSF Ch. 4)
• Templates that give a uniform appearance to different screens in an application (CoreJSF Ch. 5)
• Screen tags for presenting data in tabular form (CoreJSF Ch. 6)
• Data conversion and validation (CoreJSF Ch. 7)
• Event handling (CoreJSF Ch. 8)
• Custom view components (CoreJSF Ch. 9, 11)
• Using AJAX (CoreJSF Ch. 10)
• Access to external services such as databases (CoreJSF Ch. 12)