JavaServer Faces

JavaServerFaces

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


<html> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <f:view> <head> <title>Page title</title> </head> <body> <h:form> Page contents </h:form> </body> </f:view></html>

• Each JSF page has the following structure:


• 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: <html>02: <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>03: <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>04: 05: <f:view>06: <head> 07: <title>The datetime application</title>08: </head>09: <body>10: <h:form>11: <p>Number of milliseconds since January 1, 1970: 12: <h:outputText value="#{dateTime.time}"/>13: </p>14: </h:form>15: </body>16: </f:view>17: </html>

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.xml01: <?xml version="1.0"?>02: 03: <!DOCTYPE faces-config PUBLIC04: "-//Sun Microsystems, Inc. //DTD JavaServer Faces Config 1.0//EN"05: "http://java.sun.com/dtd/web-facesconfig_1_0.dtd">06: 07: <faces-config>08: <managed-bean> 09: <managed-bean-name>dateTime</managed-bean-name>10: <managed-bean-class>java.util.Date</managed-bean-class> 11: <managed-bean-scope>request</managed-bean-scope> 12: </managed-bean>13: </faces-config>


• 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


• #{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: <?xml version="1.0"?>02: 03: <!DOCTYPE web-app PUBLIC04: "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"05: "http://java.sun.com/dtd/web-app_2_3.dtd">06: 07: <web-app>08: <servlet>09: <servlet-name>FacesServlet</servlet-name>10: <servlet-class>javax.faces.webapp.FacesServlet </servlet-class>11: <load-on-startup>1</load-on-startup>12: </servlet> 13: 14: <servlet-mapping>15: <servlet-name>FacesServlet</servlet-name>16: <url-pattern>*.jsf</url-pattern>17: </servlet-mapping> 18: </web-app>

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 <img src="clock.gif"/> 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

<h:inputSecret value="#{user.password}"/>

<h:inputTextArea value="#{user.comment}" rows="10" cols="40"/>

Continued

JSF Components

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

<h:selectOneRadio value="#{burger.topping}" layout="lineDirection">

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

<h:selectOneRadio value="#{creditCard.expirationMonth}" layout="pageDirection"> <f:selectItems value="#{creditCard.monthChoices}"/> </h:selectOneRadio>

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<String, Integer> getMonthChoices() { Map<String, Integer> choices = new LinkedHashMap<String, Integer>(); 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

Answers7. You would need a bean with a property such

as the following:

Then supply a tag

public Map<String, Integer> getYearChoices() { Map<String, Integer> choices = new TreeMap<String, Integer>(); choices.put("2003", 2003); choices.put("2004", 2004); . . . return choices; }

<f:selectItems value="#{creditCard.yearChoices}"/>

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


• 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


• 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


• Specify a method binding as the action attribute:

• A method binding consists of the name of a bean and the name of a method

<h:commandButton value="Submit" action="#{zone.addCity}"/>


• 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


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

<h:commandButton value="Back" action="back"/>


<faces-config> <navigation-rule> <navigation-case> <from-outcome>available</from-outcome> <to-view-id>/next.jsp</to-view-id> </navigation-case> <navigation-case> <from-outcome>unavailable</from-outcome> <to-view-id>/error.jsp</to-view-id> </navigation-case> <navigation-case> <from-outcome>back</from-outcome> <to-view-id>/index.jsp</to-view-id> </navigation-case> </navigation-rule> . . . </faces-config>

• faces-config.xml contains a navigation rule

that maps outcome strings to pages:

Continued


• 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 <h:commandButton value="Help" action="help"/> to error.jsp, and add a navigation rule to faces-config.xml:

9. The current page would be redisplayed.

<navigation-case> <from-outcome>help</from-outcome> <to-view-id>/help.jsp</to-view-id> </navigation-case>

JavaServer Faces

Documents

page jsf tags

jsf applications

jsf page figure

jsf technologyjsf

set of jsf

jsf libraries tags

formall jsf tags

simple jsf programjsf