JavaServer Faces

Objectives To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical elements of JavaServer Faces To learn about navigation in JSF applications To build three-tier web applications

What is JSF? Bring graphical components to the Web Developers can think in terms of components, events, managed beans, and their interactions instead of request, responses, and markup language. Facelets is preferred PDL (page description language) of JSF 2.0

A Simple JSF Program JSF: Java Server Faces To develop a JSF application, you need a web server that is integrated with a JSF container A JSF page contains HTML and JSF tags The user interface of a JSF application is described by a set of JSF pages

A Simple JSF Program Page title Page contents Each JSF page has the following structure:

A Simple JSF Program Previous structure has three parts:  taglib directives required to locate two JSF libraries Tags from the core library have the prefix f: (such as f:view ) Tags from the HTML library have the prefix h: (such as h:form )  All JSF tags must be contained inside an f:view tag  The h:form tag encloses all user interface elements

File datetime/index.jsp 01: 02: 03: 04: 05: 06: 07: The datetime application 08: 09: 10: 11: Number of milliseconds since January 1, 1970: 12: 13: 14: 15: 16: 17:

Executing the datetime Web Application Figure 1: Executing the datetime Web Application

A Simple JSF Program Purpose of a JSF page is to generate an HTML page Basic process:  HTML tags in the page are retained; they are the static part of the page  JSF tags are translated into HTML; translation is dynamic, it depends on the state of Java objects The h: tags generate HTML The f: describe structural information that the h: tags use  The taglib directives are stripped out

The JSF Container Rewrites the Requested Page Figure 2: The JSF Container Rewrites the Requested Page

The HTML Code That Is Generated by a JSF Page Figure 3: The HTML Code That Is Generated by a JSF Page

A Simple JSF Program The JSF container converts a JSF page to an HTML page, replacing JSF tags with text and HTML In the example, the h:outputText tag has the value binding #{dateTime.time} Value bindings link JSF pages with Java objects Continued

A Simple JSF Program The Java objects are defined in a configuration file  Named faces-config.xml  Placed in the WEB-INF subdirectory of the web application's base directory

File datetime/WEB-INF/faces- config.xml 01: 02: 03: <!DOCTYPE faces-config PUBLIC 04: "-//Sun Microsystems, Inc. //DTD JavaServer Faces Config 1.0//EN" 05: " 06: 07: 08: 09: dateTime 10: java.util.Date 11: request 12: 13:

A Simple JSF Program This file defines an object dateTime with type java.util.Date A new object is constructed with each "request" Whenever a browser requests the page,  A new Date object is constructed, and  It is attached to the dateTime variable  The Date constructor constructs an object with the current time Continued

A Simple JSF Program #{dateTime.time} calls getTime of dateTime The h:outputText tag converts the result of that method call to text

Important Design Principle of the JSF Technology JSF enables the separation of presentation and business logic Presentation logic: the user interface of the web application Business logic: the part of the application that is independent of the visual presentation JSF pages define the presentation logic Java objects define the business logic The value bindings tie the two together

The Directory Structure of the datetime Application Figure 4: The Directory Structure of the datetime Application

File datetime/WEB-INF/web.xml 01: 02: 03: <!DOCTYPE web-app PUBLIC 04: "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" 05: " 06: 07: 08: 09: FacesServlet 10: javax.faces.webapp.FacesServlet 11: 1 12: 13: 14: 15: FacesServlet 16: *.jsf 17: 18:

Self Check 1.What steps are required to add the image of a clock to the datetime application? (The clock doesn't have to show the correct time.) 2.Does a Swing program automatically separate presentation and business logic?

Answers 1.Place an image file, say clock.gif, into the datetime directory, and add a tag to the index.jsp file. 2.No–it is possible (and sadly common) for programmers to place the business logic into the frame and component classes of the user interface.

JSF Components Each component has a value attribute to connect the component value with a bean property h:inputTextArea has attributes to specify the rows and columns Continued

JSF Components Radio button and checkbox groups allow you to specify horizontal or vertical layout:

JSF Components: Button Groups and Menus Require two properties:  the collection of possible choices  the actual choice The value attribute specifies the actual choice to be displayed The collection of possible choices is defined by a nested f:selectItems tag Continued

JSF Components: Button Groups and Menus monthChoices must have a type that can describe a list of choices  For example, Map  The keys of the map are the labels  The corresponding map values are the label values

Example: Using a Map to Describe a List of Choices To create the list of choices: Continued public class CreditCardBean {... public Map getMonthChoices() { Map choices = new LinkedHashMap (); choices.put("January", 1); choices.put("February", 2);... return choices; } }

Example: Using a Map to Describe a List of Choices The type of the value property of the component must match the type of the map value  For example, creditCard.expirationMonth must be an integer If multiple selections are allowed, the type of the value property must be a list or array of matching types

Common JSF Components

Self Check 6.Which JSF components can be used to give a user a choice between "AM/PM" and "military" time? 7.How would you supply a set of choices for a credit card expiration year to a h:selectOneMenu component?

Answers 6. h:selectOneRadio, h:selectOneMenu, or h:selectOneCheckbox

Answers 7.You would need a bean with a property such as the following: Then supply a tag public Map getYearChoices() { Map choices = new TreeMap (); choices.put("2003", 2003); choices.put("2004", 2004);... return choices; }

Navigation Between Pages Consider a timezone program We start with a page that prompts the user to enter the name of a city When the user clicks " Submit " a new page appears Continued

Navigation Between Pages Next page is either the page with the time display or an error page if no time zone is available The JSF container needs to determine which page to show next

Navigating Between Pages Figure 9: Navigating Between Pages

Navigation Between Pages Each button has an outcome, a string used to look up the next page Generally, next page may depend on the result of some computation We need different outcomes depending on the city entered Continued

Navigation Between Pages Specify a method binding as the action attribute: A method binding consists of the name of a bean and the name of a method

Navigation Between Pages When the form is submitted, the JSF engine calls zone.addCity() public class TimeZoneBean {... public String addCity() { if (zone == null) return "unavailable"; // Add the city... return "available"; } Continued

Navigation Between Pages If next page doesn't depend on a computation, you set the action attribute of the button to a fixed outcome string

Navigation Between Pages available /next.jsp unavailable /error.jsp back /index.jsp... faces-config.xml contains a navigation rule that maps outcome strings to pages: Continued

Navigation Between Pages Current page is redisplayed when  The button has no action attribute, or  The action outcome is not listed in the navigation rules

Self Check 8.What tag would you need to add to error.jsp so that the user can click on a button labeled "Help" and see help.jsp ? What other changes do you need to make to the web application? 9.Which page would be displayed if the addCity method returned null ?

Answers 8.Add the tag to error.jsp, and add a navigation rule to faces-config.xml: 9.The current page would be redisplayed. help /help.jsp