1 / 42

JavaServer Faces

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?.

temima
Download Presentation

JavaServer Faces

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. JavaServerFaces

  2. 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

  3. 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

  4. 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

  5. A Simple JSF Program • Each JSF page has the following structure: <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>

  6. 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

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

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

  9. 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

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

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

  12. 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

  13. 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

  14. File datetime/WEB-INF/faces-config.xml 01:<?xml version="1.0"?>02: 03:<!DOCTYPE faces-config PUBLIC 04: "-//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>

  15. 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

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

  17. 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

  18. The Directory Structure of the datetimeApplication Figure 4:The Directory Structure of the datetime Application

  19. File datetime/WEB-INF/web.xml 01:<?xml version="1.0"?> 02: 03:<!DOCTYPE web-app PUBLIC 04: "-//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>

  20. Self Check • 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.) • Does a Swing program automatically separate presentation and business logic?

  21. Answers • Place an image file, say clock.gif, into the datetime directory, and add a tag <img src="clock.gif"/> to the index.jsp file. • No–it is possible (and sadly common) for programmers to place the business logic into the frame and component classes of the user interface.

  22. 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

  23. JSF Components • Radio button and checkbox groups allow you to specify horizontal or vertical layout: <h:selectOneRadio value="#{burger.topping}" layout="lineDirection">

  24. 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

  25. 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

  26. Example: Using a Map to Describe a List of Choices • To create the list of choices: 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; } } Continued

  27. 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

  28. Common JSF Components

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

  30. Answers • h:selectOneRadio, h:selectOneMenu, or h:selectOneCheckbox

  31. Answers • 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}"/>

  32. 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

  33. 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

  34. Navigating Between Pages Figure 9:Navigating Between Pages

  35. 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

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

  37. 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

  38. 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"/>

  39. Navigation Between Pages • faces-config.xml contains a navigation rule that maps outcome strings to 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> Continued

  40. 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

  41. Self Check • 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? • Which page would be displayed if the addCity method returned null?

  42. Answers • Add the tag <h:commandButton value="Help" action="help"/> to error.jsp, and add a navigation rule to faces-config.xml: • The current page would be redisplayed. <navigation-case> <from-outcome>help</from-outcome> <to-view-id>/help.jsp</to-view-id> </navigation-case>

More Related