Accenture Confidential

Java Webinar Series

Java Server Faces (JSF)

Accenture Confidential

Centra Tools

Text Chat

Yes / No

Applause

Laugh

Centra Volume Control

Raise Hand

Network Connectivity Bar

Audio/Connectivity Tips

• Run the Audio Wizard• Choose Tools/Audio Wizard from the

menu at top of screen

• Close all network based applications

• Outlook, MSN/AOL, other websites, Office Communicator, etc

• Connect via an Accenture LAN or high speed internet connection

• If using a wireless connection, ensure your signal is as strong as possible

• Monitor the Network Connectivity Bar

• Contact Learning Product Support if issues continue

Accenture Confidential

Asking Questions

1. Ask live questions during the designated Q&A sessions:

• Press Raise Hand icon to get faculty’s attention

• Once called upon, there are two options to speak:- Click the Talk button or- Press the Ctrl key

When done speaking, unselect the Talk button or release the Ctrl Key.

2. Post questions at any time in the chat room.

Two Options:

Accenture Confidential 4

• Introduction• JSF Life Cycle• JSF Components

• Form Processing

• Advantages and Benefits of using JSF

Topics

Accenture Confidential 5

Definition

• Java Servers Faces (JSF) is a framework used to build user interfaces for Java web applications

• Model View Controller (MVC) is an architectural pattern that isolates business logic from user interface, effectively enabling a developer to modify either the visual appearance of the application or the underlying business rules without affecting the other.

Accenture Confidential 6

• Introduction• JSF Life Cycle• JSF Components

• Form Processing

• Advantages and Benefits of using JSF

Topics

Accenture Confidential 7

Introduction to JSF

JSF simplifies Web development

Provides a component-based way of developing web user interfaces.

Accenture Confidential 8

Introduction to JSF

JSF simplifies Web development

Provides a component-based way of developing web user interfaces.

It can build user interfaces for Java web applications by assembling components in a page and binding it to an application data.

Accenture Confidential 9

Introduction to JSF

• JSF is event driven.

Component can be embedded in a JSP using the tags defined by JSF technology and use the framework to handle navigation from one page to another.

Accenture Confidential 10

Introduction to JSF

• JSF offers a robust, "best of breed" framework with well-established development patterns

It is built to answer several problems of many pre-existing Java web development frameworks.

Accenture Confidential 11

Introduction to JSF

• JSF was created to be more effective and efficient in building dynamic web user interfaces that are based on a well-designed and maintainable architecture.

Accenture Confidential 12

JSF Components

CGI

CGI allows a Web page to invoke a server-side process to generate an output dynamically.

Accenture Confidential 13

JSF Components

The Java Servlet API enabled developers to write server-side code for delivering dynamic web content as opposed to only using Java applets as was previously done in Java.

ServletCGI

Accenture Confidential 14

JSF Components

CGI Servlet JSP

JSP provided a simpler page-based solution to generating large amounts of dynamic HTML content for web user interfaces.

Accenture Confidential 15

JSF Components

CGI Servlet JSP Struts

One of the key reasons for Struts' popularity is that it elegantly solved the problem of separation of code between the user-interface and server-side code by embracing the Model-View-Controller (MVC) design paradigm.

Accenture Confidential 16

JSF Components

CGI Servlet JSP Struts JSF

Java Server Faces solves the problem of the View tier, without inventing new Java EE infrastructures.

At its core, JSF combines an MVC design approach with a powerful, component-based UI development framework that greatly simplifies Java EE web development while using existing JSP and servlet technologies.

Accenture Confidential 17

• Introduction• JSF Life Cycle• JSF Components

• Form Processing

• Advantages and Benefits of using JSF

Topics

Accenture Confidential 18

JSF Life Cycle

What is JSF Life Cycle?

• The life cycle of a Java Server Faces page is similar to that of a JSP page: the client makes an HTTP request for the page, and the server responds with the page translated to HTML.

Accenture Confidential 19

JSF Life Cycle

What is JSF Life Cycle?

• The life cycle of a Java Server Faces page is similar to that of a JSP page: the client makes an HTTP request for the page, and the server responds with the page translated to HTML.

• Life cycle of a JSF web application starts when user makes a request.

Accenture Confidential 20

JSF Life Cycle

What is JSF Life Cycle?

• The life cycle of a Java Server Faces page is similar to that of a JSP page: the client makes an HTTP request for the page, and the server responds with the page translated to HTML.

• Life cycle of a JSF web application starts when user makes a request.

• Once the page is submitted various further tasks are performed. Some of these are:• Validation of data provided in components in the view.• Data conversion according to types specified on server

side, etc.

Accenture Confidential 21

JSF Life Cycle

ProcessValidations

UpdateModelValues

InvokeApplication

RenderResponse

RestoreView

ApplyRequestValues

REQUEST

init()component tree retrieved

submitted form values stored in component

component values converted

preprocess()component values calculated

_validate()

_processValueChange()

Validation / Conversion ERROR Exist

component values bound to backing beans property

events handled

methods invoked

navigation calculated

prerender()

Component values were updated from beans

RESPONSE

Accenture Confidential 22

JSF Life Cycle

ProcessValidations

UpdateModelValues

InvokeApplication

RenderResponse

RestoreView

ApplyRequestValues

REQUEST

init()component tree retrieved

submitted form values stored in component

component values converted

preprocess()component values calculated

_validate()

_processValueChange()

Validation / Conversion ERROR Exist

component values bound to backing beans property

events handled

methods invoked

navigation calculated

prerender()

Component values were updated from beans

RESPONSE

Accenture Confidential 23

JSF Life Cycle

Restore View

• The first phase of the JSF lifecycle.

• Controller examines the request and the view id, which is determined by the name of the JSP page. If the view does not exist, the controller creates it.

• The view contains all the GUI components.

Accenture Confidential 24

JSF Life Cycle

Restore View

• This phase of the lifecycle presents three view instances:

new view

initial view

postback

Accenture Confidential 25

JSF Life Cycle

Restore View

New View

• JSF builds the view of the Faces page and wires the event handlers and validators to the components.

• The view is saved in the FacesContext object.

Accenture Confidential 26

JSF Life Cycle

Restore View

• Initial View

• User is requesting the page for the first time.

• Life cycle only executes the restore view and render response phases because there is no user input or no actions to process.

Accenture Confidential 27

JSF Life Cycle

Restore View

• Postback

• User submits the form contained on a page that was previously loaded into the browser as a result of executing an initial request

• Life cycle executes all of the phases.

Accenture Confidential 28

JSF Life Cycle

ProcessValidations

UpdateModelValues

InvokeApplication

RenderResponse

RestoreView

ApplyRequestValues

REQUEST

init()component tree retrieved

submitted form values stored in component

component values converted

preprocess()component values calculated

_validate()

_processValueChange()

Validation / Conversion ERROR Exist

component values bound to backing beans property

events handled

methods invoked

navigation calculated

prerender()

Component values were updated from beans

RESPONSE

Accenture Confidential 29

JSF Life Cycle

Apply Request Values

• The purpose of this phase is for each component to retrieve its current state.

• Each component in the tree extracts its new value from the request parameters by using its decode method.

• If a component has its immediate attribute set to TRUE, then the validation, conversion, and events associated with the component are processed during this phase.

Accenture Confidential 30

JSF Life Cycle

ProcessValidations

UpdateModelValues

InvokeApplication

RenderResponse

RestoreView

ApplyRequestValues

REQUEST

init()component tree retrieved

submitted form values stored in component

component values converted

preprocess()component values calculated

_validate()

_processValueChange()

Validation / Conversion ERROR Exist

component values bound to backing beans property

events handled

methods invoked

navigation calculated

prerender()

Component values were updated from beans

RESPONSE

Accenture Confidential 31

JSF Life Cycle

Process Validations

• The first event handling of the lifecycle happens in this phase.

• Each component will have its values validated against the application’s validation rules.

• If an entered value is invalid the error message is added in the FacesContext and the JSF advances to the Render Response Phase.

Accenture Confidential 32

JSF Life Cycle

ProcessValidations

UpdateModelValues

InvokeApplication

RenderResponse

RestoreView

ApplyRequestValues

REQUEST

init()component tree retrieved

submitted form values stored in component

component values converted

preprocess()component values calculated

_validate()

_processValueChange()

Validation / Conversion ERROR Exist

component values bound to backing beans property

events handled

methods invoked

navigation calculated

prerender()

Component values were updated from beans

RESPONSE

Accenture Confidential 33

JSF Life Cycle

Update Model Values

• This phase updates the actual values of the server side model by updating the properties of the backing bean.

• Only bean properties bound to a component’s value will be updated.

Accenture Confidential 34

JSF Life Cycle

ProcessValidations

UpdateModelValues

InvokeApplication

RenderResponse

RestoreView

ApplyRequestValues

REQUEST

init()component tree retrieved

submitted form values stored in component

component values converted

preprocess()component values calculated

_validate()

_processValueChange()

Validation / Conversion ERROR Exist

component values bound to backing beans property

events handled

methods invoked

navigation calculated

prerender()

Component values were updated from beans

RESPONSE

Accenture Confidential 35

JSF Life Cycle

Invoke Application

• JSF controller invokes the application to handle the Form submissions.

• The component values will be converted, validated and applied to the model objects.

• Developer can also specify the next logical view for a given sequence.

Accenture Confidential 36

JSF Life Cycle

ProcessValidations

UpdateModelValues

InvokeApplication

RenderResponse

RestoreView

ApplyRequestValues

REQUEST

init()component tree retrieved

submitted form values stored in component

component values converted

preprocess()component values calculated

_validate()

_processValueChange()

Validation / Conversion ERROR Exist

component values bound to backing beans property

events handled

methods invoked

navigation calculated

prerender()

Component values updated from beans

RESPONSE

Accenture Confidential 37

JSF Life Cycle

Render Response

• The page displays the view with all of its components in their current state.

Accenture Confidential 38

• Introduction• JSF Life Cycle• JSF Components

• Form Processing

• Advantages and Benefits of using JSF

Topics

Accenture Confidential 39

JSF Components

User Interface Components

• In JSF, the term UI component technically refers to a specific UI component class that defines the core behavior of the component regardless of how it appears to the client.

• The term is more generally used to describe the entire set of moving parts that include both the core UI component class and other related helper components.

Accenture Confidential 40

JSF Components

Accenture Confidential 41

JSF Components

JSF UI Components

Page components• Navigation components• Input components• Output components• Panel components• Data Viewing components

Accenture Confidential 42

JSF Components

Page Components

• Page Components are used to mark a JSF page with the major HTML structuring elements corresponding roughly to the HTML, BODY and FORM tags.

Accenture Confidential 43

JSF Components

Page Components

• Page Components are used to mark a JSF page with the major HTML structuring elements corresponding roughly to the HTML, BODY and FORM tags.

• Frequently used Page Components:o Formo Viewo Subview

Accenture Confidential 44

JSF Components

Page Components

• Page Components are used to mark a JSF page with the major HTML structuring elements corresponding roughly to the HTML, BODY and FORM tags.

• Frequently Used Page Components:o Formo Viewo Subview

• Other Page Components:o Script Collector o Fragment

Accenture Confidential 45

JSF Components

Page Components

Form

Creates a main container for the other components.

Accenture Confidential 46

JSF Components

Page Components

Form

Creates a main container for the other components.

View

The outermost JSF container object. It is the equivalent of a page where all other JSF tags must be inside a view.

Accenture Confidential 47

JSF Components

Page Components

Form

Creates a main container for the other components.

View

The outermost JSF container object. It is the equivalent of a page where all other JSF tags must be inside a view.

Subview

Primarily used to introduce a new naming context to ensure that component IDs have unique names

Accenture Confidential 48

JSF Components

JSF UI Components

Page components Navigation components• Input components• Output components• Panel components• Data Viewing components

Accenture Confidential 49

JSF Components

Navigation Components

• Navigation Component passes an “action” to the server where the action is “caught” by an action handler.

Accenture Confidential 50

JSF Components

Navigation Components

• Navigation Component passes an “action” to the server where the action is “caught” by an action handler.

• After manipulation by the handler, the action is then evaluated against a set of navigation rules to determine which page is displayed next in the browser.

Accenture Confidential 51

JSF Components

Navigation Components

• Frequently Used Navigation Components o Command Button o Hyperlinko ImageLink

Accenture Confidential 52

JSF Components

Navigation Components

• Frequently Used Navigation Components o Command Button o Hyperlinko ImageLink

• Other Navigation Components:o Menu Baro Link Request o Request Row Actiono Command Row Action

Accenture Confidential 53

JSF Components

Navigation Components

Command Button

This component creates a push button that has either a text label or an image. The button can be used to submit or reset a form.

It can also be programmed to perform a server-side or client-side action or to navigate to another page.

Accenture Confidential 54

JSF Components

Navigation Components

Hyperlink

Creates a hyperlink on the page. It can be used to navigate to other pages or programmed to perform a client-side or server-side action.

Accenture Confidential 55

JSF Components

Navigation Components

Command Row Action

This component enables all the rows in a data table to perform an action.

Clicking a row in a data table submits the containing form and, if successful, returns the page defined by the action associated. It can be used to navigate to other pages or programmed to perform a client-side or server-side action.

Accenture Confidential 56

JSF Components

JSF UI Components

Page components Navigation components Input components• Output components• Panel components• Data Viewing components

Accenture Confidential 57

JSF Components

Input Components

• Input Components are used to interact with a user and submit the results of the interaction back to the server for processing.

Accenture Confidential 58

JSF Components

Input Components

• Frequently Used Input Components o Input Texto Input Text Areao Input Passwordo File Uploado Select Calendar o Check Boxo Radio Button o Combo Box

Accenture Confidential 59

JSF Components

Input Components

• Other Input Components:o Input – Rich Text Areao Helper – DatePickero Helper – Slidero Helper – Spinnero Input – Hiddeno CheckBox Groupo Select Coloro List Box – Multiple Selecto List Box – Single Select

Accenture Confidential 60

JSF Components

Input Components

Text Field

Lets you create an input field for the following types of data: String, Number, Date/Time, and Mask.

Accenture Confidential 61

JSF Components

Input Components

Text Field

Lets you create an input field for the following types of data: String, Number, Date/Time, and Mask.

Text Area

This allows a user to enter multiple lines of text.

Accenture Confidential 62

JSF Components

Input Components

Text Field

Lets you create an input field for the following types of data: String, Number, Date/Time, and Mask.

Text Area

This allows a user to enter multiple lines of text.

Password Field

Creates an input field where entered text is obscured from the user.

Accenture Confidential 63

JSF Components

JSF UI Components

Page components Navigation components Input components Output components• Panel components• Data Viewing components

Accenture Confidential 64

JSF Components

Output Components

• Output Components are used to interact with a user and displays the result of the interaction.

Accenture Confidential 65

JSF Components

Output Components

• Output Components are used to interact with a user and displays the result of the interaction.

• Output Components o Imageo Messageo Labelo Progress Baro Output Texto Media Player

Accenture Confidential 66

JSF Components

Output Components

Image

Displays a graphic (usually a GIF or JPEG file). It can use a local or remote image file.

Accenture Confidential 67

JSF Components

Output Components

Image

Displays a graphic (usually a GIF or JPEG file). It can use a local or remote image file.

Message

Displays an error message that was generated by the server when the page was submitted. This component is typically bound to other input components.

Accenture Confidential 68

JSF Components

Output Components

Image

Displays a graphic (usually a GIF or JPEG file). It can use a local or remote image file.

Message

Displays an error message that was generated by the server when the page was submitted. This component is typically bound to other input components.

Label

Inserts an accessibility output label.

Accenture Confidential 69

JSF Components

JSF UI Components

Page components Navigation components Input components Output components Panel components• Data Viewing components

Accenture Confidential 70

JSF Components

Panel Components

• Container of a collection of UI components. This is much like the HTML table and div tags.

Accenture Confidential 71

JSF Components

Panel Components

• Container of a collection of UI components. This is much like the HTML table and div tags.

• Panel Components o Dialogo Layouto Grido Boxo Group

Accenture Confidential 72

JSF Components

Panel Components

Grid Panel

It aligns all components into a table with a specified number of rows and columns.

Accenture Confidential 73

JSF Components

Panel Components

Grid Panel

It aligns all components into a table with a specified number of rows and columns.

Dialog Panel

Creates a dialog box where the panel is rendered above/in front of the main panel.

Accenture Confidential 74

JSF Components

JSF UI Components

Page components Navigation components Input components Output components Panel components Data Viewing components

Accenture Confidential 75

JSF Components

Data Viewing Components

• Data Viewing Components are components used to display iterative values or values in an array, often retrieved from data storage.

• Frequently Used Data Viewing Componento Data Table

Accenture Confidential 76

JSF Components

Data Viewing Components

Data Table

Allows you to create a table of data that are represented in an array or list.

Accenture Confidential 77

• Introduction• JSF Life Cycle• JSF Components

• Form Processing

• Advantages and Benefits of using JSF

Topics

Accenture Confidential 78

Definition

• Presentation data – These are the data entered by the end user and/or the data displayed to the end user.

• Model data – These are the data manipulated in the backing bean.

Accenture Confidential 79

Form Processing

Form processing is the collection, manipulation and rendering of data from a form.

Accenture Confidential 80

Form Processing

Converters• Validators • Event Handling• Error Handling

Accenture Confidential 81

Conversion

Presentation data is always represented as String in default. A converter is an object that performs object-to-string and string-to-object conversions between presentation and model data. This is important because the backing bean can store data of different types like java.lang.Integer, java.util.Date, among others. Conversion is necessary to be able to manipulate the data as it is intended.

Accenture Confidential 82

Conversion: Standard Converters

Class Description

javax.faces.convert.DateTimeConverter Converter for java.util.Date objects.

javax.faces.convert.NumberConverter Converter for java.lang.Number objects.

javax.faces.convert.BigDecimalConverter Converter for java.math.BigDecimal objects.

javax.faces.convert.BigIntegerConverter Converter for java.math.BigInteger objects.

javax.faces.convert.BooleanConverter Converter for java.lang.Boolean objects and the primitive boolean data type.

javax.faces.convert.ByteConverter Converter for java.lang.Byte objects and the primitive byte data type.

Below are the standard built-in converters

Accenture Confidential 83

Conversion: Standard Converters

Class Description

javax.faces.convert.CharacterConverter Converter for java.lang.Character objects and the primitive char data type.

javax.faces.convert.DoubleConverter Converter for java.lang.Double objects and the primitive double data type.

javax.faces.convert.FloatConverter Converter for java.lang.Float objects and the primitive float data type.

javax.faces.convert.IntegerConverter Converter for java.lang.Integer objects and the primitive int data type.

javax.faces.convert.LongConverter Converter for java.lang.Long objects and the primitive long data type.

javax.faces.convert.ShortConverter Converter for java.lang.Short objects and the primitive short data type.

Accenture Confidential 84

Conversion: Custom Converters

Converters may be created and customized.

This is helpful when a project has a data type or value object that is application specific.

Accenture Confidential 85

Form Processing

Converters Validators • Event Handling• Error Handling

Accenture Confidential 86

Validation

Values from the end users may be validated to ensure that the data retrieved conforms to the application requirements. This way, it is guaranteed that the program will not throw exceptions due to incorrect arguments when the data is manipulated.

Accenture Confidential 87

Validation: Custom Validators

Same as converters, validators may be created and customized.

This is helpful when a project has a specific validation requirement that the standard validators cannot handle.

Accenture Confidential 88

Form Processing

Converters Validators Event Handling• Error Handling

Accenture Confidential 89

Event Handling

• Events may trigger a change in the user interface or invoke backend application code, or both.

• Below are the types of events supported by JSF. Value Change event — when the local value of an input

component has changed Action event — when a command component is activated Client-side event — implemented using browser scripting

languages

Accenture Confidential 90

Event Handling

Value Change Event

• A Value Change event is triggered by a change in the value of a component, such as text modification in a text field or a check box selection.

• It is usually processed at the completion of the Process Validations phase. When the immediate flag is true, it is processed at the end of the Apply Request Values phase.

Accenture Confidential 91

Event Handling

Action Event

• An Action event may be triggered by a click on a button or a link.

• Navigation is done in the Action event.

• The Action event is usually processed at the completion of the Invoke Application phase. When the immediate flag is true, it is processed at the end of the Apply Request Values phase.

Accenture Confidential 92

Event Handling

Client-side Event

• Client-side event handlers are where actions may be defined for specific events using JavaScript. These events are processed first before any requests are made.

Accenture Confidential 93

Event Handling

• onBlur

• onClick

• onDblClick

• onFocus

• onKeyDown

• onKeyPress

• onKeyUp

• onMouseDown

• onMouseMove

• onMouseOut

• onMouseOver

• onMouseUp

Client-side Event

• Client-side event handlers are where actions may be defined for specific events using JavaScript. These events are processed first before any requests are made.

• The following are the available events to be handled:

Accenture Confidential 94

Form Processing

Converters Validators Event Handling Error Handling

Accenture Confidential 95

Error Handling

• Developers are used to seeing Java stack traces. It is a common part of development. However, the information in a stack trace is meaningless to an end-user of an application, except to indicate that their requests did not work.

• It is important that developers respond to exceptions and errors in their Java application in a meaningful way and provide users with messages they can understand.

Accenture Confidential 96

Error Handling

Possible errors that can be handled by JSF:

• Validation Errors• An error generated based on a validation rule of an

application.

Accenture Confidential 97

Error Handling

Possible errors that can be handled by JSF:

• Validation Errors• An error generated based on a validation rule of an

application.

• Checked Exceptions• Represents invalid conditions beyond the immediate

control of the Java application, such as invalid user input, database access errors, network problems, or missing files.

Accenture Confidential 98

Error Handling

Possible errors that can be handled by JSF:

• Unchecked Exceptions• Exceptions representing errors in the program, such as

invalid arguments, division by zero, or mistakenly accessing an object bound to a variable that is null.

Accenture Confidential 99

Error Handling

Possible errors that can be handled by JSF:

• Unchecked Exceptions• Exceptions representing errors in the program, such as

invalid arguments, division by zero, or mistakenly accessing an object bound to a variable that is null.

• Exceptions resulting from HTML status code• These are used by the HTTP to indicate the status of a

web request.

Accenture Confidential 100

• Introduction• JSF Life Cycle• JSF Components

• Form Processing

• Advantages and Benefits of using JSF

Topics

Accenture Confidential 101

Advantages of JSF

JSF provides a concise and powerful language for accessing bean properties and collection elements.

Accenture Confidential 102

Advantages of JSF

JSF provides a concise and powerful language for accessing bean properties and collection elements.

JSF provides a set of associated custom tags to create forms with complex interfaces.

Accenture Confidential 103

Advantages of JSF

JSF provides a concise and powerful language for accessing bean properties and collection elements.

JSF provides a set of associated custom tags to create forms with complex interfaces.

JSF is event-driven; codes needed for these events are easy to designate.

Accenture Confidential 104

Advantages of JSF

JSF provides a concise and powerful language for accessing bean properties and collection elements.

JSF provides a set of associated custom tags to create forms with complex interfaces.

JSF is event-driven; codes needed for these events are easy to designate.

JSF has built-in validation and conversion properties.

Accenture Confidential 105

Advantages of JSF

JSF provides a concise and powerful language for accessing bean properties and collection elements.

JSF provides a set of associated custom tags to create forms with complex interfaces.

JSF is event-driven; codes needed for these events are easy to designate.

JSF has built-in validation and conversion properties. JSF makes combining complex GUIs into a single

manageable component relatively easy.

Accenture Confidential 106

Advantages of JSF

JSF provides a concise and powerful language for accessing bean properties and collection elements.

JSF provides a set of associated custom tags to create forms with complex interfaces.

JSF is event-driven; codes needed for these events are easy to designate.

JSF has built-in validation and conversion properties. JSF makes combining complex GUIs into a single

manageable component relatively easy. JSF has a simpler configuration file and over-all structure.

Accenture Confidential

Questions & Comments

Two options to ask a question or add your comments to the discussion:

Use Raise Hand and then hold down the TALK icon or press the CTRL key; release when done

Post your question in the Chat Room

Accenture Confidential

Thank you for participating!

Accenture Confidential 109

References

1. 2007, Java Server Faces: The Complete Reference by Chris Schalk, Ed Burns and James Holmes

2. 2004, Mastering Java Server Faces by Bill Dudney, Jonathan Lehr, Bill Willis and Leroy Mattingly

3. 2005, Developing Web-based User Interfaces Using Java Server Faces (Skillsoft press)