113
Chapter 27 JavaServer Pages and Servlets

Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

  • View
    230

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

Chapter 27

JavaServerPages and Servlets

Page 2: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

Chapter Goals

• 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

Page 3: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

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

Page 4: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

A Simple JSF Program

<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:

Page 5: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

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

Page 6: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

Executing the datetime Web Application

Figure 1:Executing the datetime Web Application

Page 7: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

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>

Page 8: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

The JSF Container Rewrites the Requested Page

Figure 2:The JSF Container Rewrites the Requested Page

Page 9: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

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

Page 10: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

The HTML Code That Is Generated by a JSF Page

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

Page 11: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

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

Page 12: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

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

Page 13: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

File datetime/WEB-INF/faces-config.xml

01: <?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>

Page 14: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

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

Page 15: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

A Simple JSF Program

• #{dateTime.time} calls getTime of dateTime

• The h:outputText tag converts the result of that method call to text

Page 16: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

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

Page 17: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

Steps for Deploying a JSF Application

1. Make a subdirectory with the name of your web application in the webapps directory of your Tomcat installation

or

2. Place the index.jsp file into that directory

/usr/local/jakarta-tomcat/webapps/datetime

Continued

c:\Tomcat\webapps\datetime

Page 18: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

Steps for Deploying a JSF Application

3. Create a subdirectory WEB-INF in your application directory

or

/usr/local/jakarta-tomcat/webapps/datetime

c:\Tomcat\webapps\datetime\WEB-INF

Page 19: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

Steps for Deploying a JSF Application

4. Place faces-config.xml into the WEB-INF subdirectory

5. Place your Java classes (if any) inside WEB-INF/classes

6. Place the file web.xml inside the WEB-INF subdirectory

7. Start the web server

8. Point your browser to http://localhost:8080/datetime/index.faces

Page 20: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

The Directory Structure of the datetime Application

Figure 4:The Directory Structure of the datetime Application

Page 21: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

The Java Studio Creator Tool

Figure 5:The Java Studio Creator Tool

Page 22: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

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>Faces Servlet</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>Faces Servlet</servlet-name>16: <url-pattern>*.faces</url-pattern>17: </servlet-mapping> 18: </web-app>

Page 23: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

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?

Page 24: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

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.

Page 25: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

JavaBeans Components

• Software component: Encapsulates functionality Can be plugged into a software system without

programming For example, the dateTime object

• Unlike some programming languages, Java does have explicit support for components

Continued

Page 26: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

JavaBeans Components

• In Java, use a programming convention to implement components A JavaBean is a Java class that follows this convention

• A JavaBean exposes properties–values of the component that can be accessed without programming

Page 27: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

JavaBeans Components

• JavaBean requirements: Must have a public constructor with no parameters Must have methods for accessing the component

properties that follow the get/set naming convention

Page 28: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

JavaBeans Components

• For example, to get or set the time of a Date object, must use getTime and setTime

• For a property with name propertyName and type Type,

• Exception: the accessor of a boolean property can use an is prefix

public Type getPropertyName() public void setPropertyName(Type newValue)

public boolean isShopping()

Page 29: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

JavaBeans Components

• The name of a property starts with a lowercase letter

• The corresponding methods have an uppercase letter (isShopping)

• Exception: property names can be all capitals (e.g. ID or URL) getID or setURL

Continued

Page 30: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

JavaBeans Components

• Read-only property: has only a get method

• Write-only property: has only a set method

• A JavaBean can have additional methods, but they are not connected with properties

Page 31: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

JavaBeans Components

• Many programmers follow the additional convention that the name of a bean class should end in Bean

Continued

Page 32: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

JavaBeans Components

public class UserBean { // Required default constructor public UserBean() { . . . }

// creditCard property public String getCreditCard() { . . . } public void setCreditCard(String newValue) { . . . }

// shopping property public boolean isShopping() { . . . } public void setShopping(boolean newValue) { . . . }

// Other methods . . . // Instance fields . . . } Continued

Page 33: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

JavaBeans Components

• This bean has two properties: creditCard and shopping

• Do not make any assumptions about the internal representation of properties May have an instance field for every property:

private String creditCard; private boolean shopping;

Continued

Page 34: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

JavaBeans Components

• Do not make any assumptions about the internal representation of properties May store the credit card state in a database

• get and set methods would contain database operations

May compute the property value:

public boolean isShopping() { return shoppingCart != null; }

Page 35: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

JavaBeans Components

• To use a bean in a JSF page, define it in faces-config.xml

• Called a managed bean because the JSF container manages its lifetime

Continued

<managed-bean> <managed-bean-name>user</managed-bean-name> <managed-bean-class>bigjava.UserBean</managed-bean-class> <managed-bean-scope>session</managed-bean-scope> </managed-bean>

Page 36: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

JavaBeans Components

• Session scope: the bean is available for multiple requests by the same browser

• Application scope: the bean stays alive for the entire web application It is shared among different users

Page 37: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

JavaBeans Components

• Access the bean properties in value bindings

• Specify the name of the property, not the name of the get or set methods <h:inputText value="#{user.creditCard}"/>

first calls getCreditCard When the user submits the form, the setCreditCard

is called to store the edited property value

<h:outputText value="#{user.creditCard}"/>

Page 38: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

JavaBeans Components: An Example

• We want to display the current time, not the number of milliseconds since January 1, 1970

• Default time computation uses the time zone at the server location → not very useful

• We will prompt for the city in which the user is located, and display the time in the user's time zone

Page 39: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

JavaBeans Components: An Example

• Java library contains a TimeZone class A time zone is identified by a string such as

"America/Los_Angeles" or "Asia/Tokyo" getAvailableIDs returns a string array containing

all IDs:

getTimeZone returns a TimeZone object for a given ID string:

String[] ids = TimeZone.getAvailableIDs();

String id = "America/Los_Angeles"; TimeZone zone = TimeZone.getTimeZone(id);

Page 40: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

JavaBeans Components: An Example

• Use a DateFormat object to get a time string:

DateFormat timeFormatter = DateFormat.getTimeInstance(); timeFormatter.setTimeZone(zone); Date now = new Date(); // Suppose the server is in New York, and it's noon there System.out.println(timeFormatter.format(now)); // Prints 9:00:00 AM

Page 41: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

JavaBeans Components: An Example

• Interaction with user: The user will simply enter the city name The time zone bean will replace the spaces in the

name with underscores Then, check if that string appears at the end of one of

the valid time zone IDs

Page 42: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

The timezone Application

Figure 6:The timezone Application

Page 43: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

File timezone/WEB-INF/classes/ bigjava/TimeZoneBean.java

01: package bigjava;02: 03: import java.text.DateFormat;04: import java.util.Date;05: import java.util.TimeZone;06: 07: /**08: This bean formats the local time of day for a given date09: and city.10: */11: public class TimeZoneBean12: {13: /**14: Initializes the formatter.15: */ Continued

Page 44: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

File timezone/WEB-INF/classes/ bigjava/TimeZoneBean.java

16: public TimeZoneBean()17: {18: timeFormatter = DateFormat.getTimeInstance();19: }20: 21: /**22: Setter for city property.23: @param aCity the city for which to report the // local time24: */25: public void setCity(String aCity)26: { 27: city = aCity;28: zone = getTimeZone(city);29: }30:

Continued

Page 45: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

File timezone/WEB-INF/classes/ bigjava/TimeZoneBean.java 31: /**32: Getter for city property.33: @return the city for which to report the local time34: */35: public String getCity()36: {37: return city;38: }39: 40: /**41: Read-only time property.42: @return the formatted time43: */44: public String getTime()45: { Continued

Page 46: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

File timezone/WEB-INF/classes/ bigjava/TimeZoneBean.java

46: if (zone == null) return "not available";47: timeFormatter.setTimeZone(zone);48: Date time = new Date();49: String timeString = timeFormatter.format(time);50: return timeString;51: }52: 53: /**54: Looks up the time zone for a city55: @param aCity the city for which to find the time zone56: @return the time zone or null if no match is found57: */58: private static TimeZone getTimeZone(String city)59: { Continued

Page 47: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

File timezone/WEB-INF/classes/ bigjava/TimeZoneBean.java

60: String[] ids = TimeZone.getAvailableIDs();61: for (int i = 0; i < ids.length; i++)62: if (timeZoneIDmatch(ids[i], city))63: return TimeZone.getTimeZone(ids[i]);64: return null;65: }66: 67: /**68: Checks whether a time zone ID matches a city69: @param id the time zone ID (e.g. "America/Los_Angeles")70: @param aCity the city to match (e.g. "Los Angeles")71: @return true if the ID and city match72: */73: private static boolean timeZoneIDmatch(String id, // String city)74: { Continued

Page 48: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

File timezone/WEB-INF/classes/ bigjava/TimeZoneBean.java

75: String idCity = id.substring(id.indexOf('/') + 1);76: return idCity.replace('_', ' ').equals(city);77: }78: 79: private DateFormat timeFormatter;80: private String city;81: private TimeZone zone;82: }

Page 49: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

File timezone/WEB-INF/faces-config.xml 01: <?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>zone</managed-bean-name>10: <managed-bean-class>bigjava.TimeZoneBean< /managed-bean-class> 11: <managed-bean-scope>session</managed-bean-scope> 12: <managed-property>13: <property-name>city</property-name>14: <value>Los Angeles</value>15: </managed-property>16: </managed-bean>17: </faces-config>

Page 50: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

File timezone/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 timezone application</title>08: </head>09: <body>10: <h:form>11: <p>12: The current date and time in 13: <h:outputText value="#{zone.city}"/>14: is: 15: <h:outputText value="#{zone.time}"/>16: </p>17: <p>

Continued

Page 51: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

File timezone/index.jsp

18: Set time zone:19: <h:inputText value="#{zone.city}"/>20: </p>21: <p>22: <h:commandButton value="Submit"/>23: </p>24: </h:form>25: </body>26: </f:view>27: </html>28:

Page 52: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

The Directory Structure of the timezone Application

Figure 7:The Directory Structure of the timezone Application

Page 53: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

Self Check

3. Is the Random class a Java bean?

4. What work does the setCity method of the TimeZoneBean do besides setting the city instance field?

5. When you start the timezone application for the first time, why does the input field contain the string "Los Angeles"?

Page 54: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

Answers

3. Technically, yes. It has a default constructor. However, it has no methods whose name start with get or set, so it exposes no properties.

4. It sets the zone instance field to match the time zone of the city.

5. When the zone bean was constructed, its city property was set to "Los Angeles". When the input field is rendered, its default value is the current value of the city property.

Page 55: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

Session State and Cookies

Figure 8:Viewing the Cookies in a Browser

Page 56: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

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

Page 57: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

JSF Components

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

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

Page 58: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

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

Page 59: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

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

Page 60: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

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; } }

Page 61: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

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

Page 62: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

Common JSF Components

Page 63: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

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?

Page 64: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

Answers

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

Page 65: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

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}"/>

Page 66: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

Navigation Between Pages

• Consider an enhancement of our 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

Page 67: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

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

Page 68: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

Navigating Between Pages

Figure 9:Navigating Between Pages

Page 69: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

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

Page 70: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

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

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

Page 71: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

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

Page 72: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

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

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

Page 73: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

Navigation Between Pages

<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

Page 74: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

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

Page 75: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

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?

Page 76: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

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>

Page 77: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

A Three-Tier Application

• A three-tier application has separate tiers for presentation, business logic, and data storage The presentation tier: the web browser The "business logic" tier: the JSF container, the JSF

pages, and the JavaBeans The storage tier: the database

Page 78: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

Three-Tier Architecture

Figure 10:Three-Tier Architecture

Page 79: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

Two-Tier Client-Server Architecture

Figure 10:Two-Tier Client-Server Architecture

Page 80: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

A Three-Tier Application

• A Three-Tier Application

• If business logic changes In a two-tier application, new client program must be

distributed over all desktops In a three-tier application, server code is updated,

while presentation tier remains unchanged • Simpler to manage

Page 81: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

A Three-Tier Application

• We will have a single database table, CityZone, with city and time zone names

• If the TimeZoneBean can't find the city among the standard time zone IDs, it makes a query:

• If there is a matching entry in the database, that time zone is returned

SELECT Zone FROM CityZone WHERE City = the requested city

Page 82: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

File multizone/misc/CityZone.sql\

1: CREATE TABLE CityZone (City TEXT, Zone TEXT) 2: INSERT INTO CityZone VALUES ('San Francisco', 'America/Los Angeles') 3: INSERT INTO CityZone VALUES ('Kaoshiung', 'Asia/Taipei') 4: SELECT * FROM CityZone

Page 83: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

The cityZone Table

Figure 12:The cityZone Table

Page 84: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

A Three-Tier Application

• To query the database, the bean needs a Connection object

• With Tomcat, specify the database configuration in conf/server.xml Locate the element

Immediately after, add the configuration information found on the next slide

You need to place the JDBC driver file into common/lib Restart server after changing the configuration file

<Host name="localhost" . . . >

Page 85: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

A Three-Tier Application

<DefaultContext> <Resource name="jdbc/mydb" auth="Container" type="javax.sql.DataSource"/> <ResourceParams name="jdbc/mydb"> <parameter> <name>factory</name> <value>org.apache.commons.dbcp. BasicDataSourceFactory</value> </parameter> <parameter> <name>driverClassName</name> <value>driver class</value> </parameter> <parameter> <name>url</name> <value>database URL</value> </parameter> Continued

Page 86: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

A Three-Tier Application

<parameter> <name>username</name> <value>database user name</value> </parameter> <parameter> <name>password</name> <value>database user password</value> </parameter> </ResourceParams></DefaultContext>

Page 87: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

A Three-Tier Application

• To obtain a database connection, first look up the data source that was configured in the JSF container:

Continued

InitialContext ctx = new InitialContext(); DataSource source = (DataSource) ctx.lookup("java:comp/env/jdbc/mydb"); Connection conn = source.getConnection(); try { Use the connection }finally { conn.close(); }

Page 88: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

A Three-Tier Application

• JSF containers such as Tomcat manage a pool of database connections Pooling avoids the overhead of creating new database

connections Pooling is completely automatic

Page 89: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

A Three-Tier Application

• Enhanced TimeZoneBean so that it manages a list of cities

• Can add cities to the list and remove a selected city

Continued

Page 90: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

A Three-Tier Application

Figure 13:The multizone Application Shows a List of Cities

Page 91: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

The Directory Structure of the multizone Application

Figure 14:The Directory Structure of the multizone Application

Page 92: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

File multizone/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 multizone application</title>08: </head>09: <body>10: <h:form>11: <p>12: Enter city:13: <h:inputText value="#{zone.city}"/>14: </p>15: <p> Continued

Page 93: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

File multizone/index.jsp

16: <h:commandButton value="Submit" action="#{zone.addCity}"/>17: </p>18: </h:form>19: </body>20: </f:view>21: </html>

Page 94: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

File multizone/next.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 multizone application</title>08: </head>09: <body>10: <h:form>11: <p>12: <h:selectOneRadio value="#{zone.cityToRemove}"13: layout="pageDirection">14: <f:selectItems value= "#{zone.citiesAndTimes}"/>15: </h:selectOneRadio>

Continued

Page 95: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

File multizone/next.jsp

16: </p>17: <p>18: <h:commandButton value= "Remove selected" action ="#{zone.removeCity}"/>19: <h:commandButton value= "Add another" action="back"/>20: </p>21: </h:form>22: </body>23: </f:view>24: </html>

Page 96: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

File multizone/error.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 multizone application</title>08: </head>09: <body>10: <h:form>11: <p>12: Sorry, no information is available for 13: <h:outputText value="#{zone.city}"/>14: </p>15: <p> Continued

Page 97: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

File multizone/error.jsp

16: <h:commandButton value="Back" action="back"/>17: </p>18: </h:form>19: </body>20: </f:view>21: </html>

Page 98: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

File multizone/WEB-INF/classes/ bigjava/TimeZoneBean.java

001: package bigjava;002: 003: import java.sql.Connection;004: import java.sql.PreparedStatement;005: import java.sql.ResultSet;006: import java.sql.SQLException;007: import java.text.DateFormat;008: import java.util.ArrayList;009: import java.util.Date;010: import java.util.Map;011: import java.util.TimeZone;012: import java.util.TreeMap;013: import java.util.logging.Logger;014: import javax.naming.InitialContext;015: import javax.naming.NamingException;016: import javax.sql.DataSource; Continued

Page 99: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

File multizone/WEB-INF/classes/ bigjava/TimeZoneBean.java

017: 018: /**019: This bean formats the local time of day for a given date020: and city.021: */022: public class TimeZoneBean023: {024: /**025: Initializes the formatter.026: */027: public TimeZoneBean()028: {029: timeFormatter = DateFormat.getTimeInstance();030: cities = new ArrayList<String>();031: }032: Continued

Page 100: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

File multizone/WEB-INF/classes/ bigjava/TimeZoneBean.java

033: /**034: Setter for city property.035: @param aCity the city to add to the list of cities036: */037: public void setCity(String aCity)038: { 039: city = aCity;040: zone = getTimeZone(city);041: }042: 043: /**044: Getter for city property.045: @return the city to add to the list of cities046: */047: public String getCity()048: { Continued

Page 101: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

File multizone/WEB-INF/classes/ bigjava/TimeZoneBean.java

049: return city;050: }051: 052: /**053: Setter for the cityToRemove property054: @param aCity the city to remove055: */056: public void setCityToRemove(String aCity) 057: { 058: cityToRemove = aCity;059: }060: 061: /**062: Getter for the cityToRemove property.063: @return the empty string064: */ Continued

Page 102: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

File multizone/WEB-INF/classes/ bigjava/TimeZoneBean.java

065: public String getCityToRemove() 066: { 067: return cityToRemove;068: }069: 070: /**071: Read-only citiesAndTimes property.072: @return a map containing the cities and // formatted times073: */074: public Map<String, String> getCitiesAndTimes()075: {076: Date time = new Date();077: Map<String, String> result = new TreeMap<String, String>();078: for (int i = 0; i < cities.size(); i++)079: { Continued

Page 103: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

File multizone/WEB-INF/classes/ bigjava/TimeZoneBean.java

080: String city = cities.get(i);081: String label = city + ": ";082: TimeZone zone = getTimeZone(city);083: if (zone != null)084: {085: timeFormatter.setTimeZone(zone);086: String timeString = timeFormatter.format(time);087: label = label + timeString; 088: }089: else 090: label = label + "unavailable"; 091: result.put(label, city);092: }093: 094: return result;095: }096: Continued

Page 104: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

File multizone/WEB-INF/classes/ bigjava/TimeZoneBean.java

097: /**098: Action for adding a city.099: @return "available" if time zone information is // available for the city,100: "unavailable" otherwise101: */102: public String addCity()103: {104: if (zone == null) return "unavailable";105: cities.add(city);106: cityToRemove = city;107: city = "";108: return "available";109: }110:

Continued

Page 105: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

File multizone/WEB-INF/classes/ bigjava/TimeZoneBean.java

111: /**112: Action for removing a city.113: @return null if there are more cities to remove, // "back" otherwise114: */115: public String removeCity()116: {117: cities.remove(cityToRemove);118: if (cities.size() > 0) return null;119: else return "back";120: }121: 122: /**123: Looks up the time zone for a city124: @param aCity the city for which to find the time zone125: @return the time zone or null if no match is found126: */ Continued

Page 106: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

File multizone/WEB-INF/classes/ bigjava/TimeZoneBean.java

127: private static TimeZone getTimeZone(String city)128: {129: String[] ids = TimeZone.getAvailableIDs();130: for (int i = 0; i < ids.length; i++)131: if (timeZoneIDmatch(ids[i], city))132: return TimeZone.getTimeZone(ids[i]);133: try134: {135: String id = getZoneNameFromDB(city);136: if (id != null)137: return TimeZone.getTimeZone(id);138: }139: catch (Exception exception)140: {141: Logger.global.info("Caught in TimeZone.getTimeZone: " + exception);142: }

Continued

Page 107: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

File multizone/WEB-INF/classes/ bigjava/TimeZoneBean.java

143: return null;144: }145: 146: private static String getZoneNameFromDB(String city) 147: throws NamingException, SQLException148: {149: InitialContext ctx = new InitialContext();150: DataSource source 151: = (DataSource) ctx.lookup("java:comp/env/jdbc/mydb");152: Connection conn = source.getConnection();153: try154: {155: PreparedStatement stat = conn.prepareStatement(156: "SELECT Zone FROM CityZone WHERE City=?");157: stat.setString(1, city);158: ResultSet result = stat.executeQuery(); Continued

Page 108: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

File multizone/WEB-INF/classes/ bigjava/TimeZoneBean.java

159: if (result.next()) 160: return result.getString(1);161: else162: return null;163: }164: finally165: {166: conn.close();167: }168: }169: 170: /**171: Checks whether a time zone ID matches a city172: @param id the time zone ID (e.g. "America/Los_Angeles")173: @param aCity the city to match (e.g. "Los Angeles")174: @return true if the ID and city match175: */ Continued

Page 109: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

File multizone/WEB-INF/classes/ bigjava/TimeZoneBean.java

176: private static boolean timeZoneIDmatch(String id, String city)177: {178: String idCity = id.substring(id.indexOf('/') + 1);179: return idCity.replace('_', ' ').equals(city);180: }181: 182: private DateFormat timeFormatter;183: private ArrayList<String> cities;184: private String city;185: private TimeZone zone;186: private String cityToRemove;187: }

Page 110: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

File multizone/WEB-INF/faces-config.xml

01: <?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: <navigation-rule>09: <navigation-case>10: <from-outcome>available</from-outcome>11: <to-view-id>/next.jsp</to-view-id>12: </navigation-case>13: <navigation-case>14: <from-outcome>unavailable</from-outcome>15: <to-view-id>/error.jsp</to-view-id>16: </navigation-case> Continued

Page 111: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

File multizone/WEB-INF/faces-config.xml

17: <navigation-case>18: <from-outcome>back</from-outcome>19: <to-view-id>/index.jsp</to-view-id>20: </navigation-case>21: </navigation-rule>22: <managed-bean> 23: <managed-bean-name>zone</managed-bean-name>24: <managed-bean-class>bigjava.TimeZoneBean </managed-bean-class> 25: <managed-bean-scope>session</managed-bean-scope> 26: </managed-bean>27: </faces-config>

Page 112: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

Self Check

10. Why don't we just keep a database connection as an instance field in the TimeZoneBean?

11. Why does the removeCity method of the TimeZoneBean return null or "back", depending on the size of the cities field?

Page 113: Chapter 27 JavaServer Pages and Servlets. Chapter Goals To implement dynamic web pages with JavaServer Faces (JSF) technology To learn the syntactical

Answers

10. Then the database connection would be kept open for the entire session.

11. As long as there are cities, the next.jsp page is redisplayed. If all cities are removed, it is pointless to display the next.jsp page, so the application navigates to the index.jsp page.