java server face

7/29/2019 java server face

1/128

1

JavaServer Faces(JSF) Basics

04/29/2004


2/128

5

Topics

? What is and why JSF?

? Quick overview on JSF architecture, concepts,and features

? Developer roles (in Web app development)? Request processing life cycle

? UI Component model?

Using JSF tag libraries Core tags, HTML tags

? Backing beans (model beans)

? Page navigation

04/29/2004


3/128

6

Advanced Topics (We will talk about

these in Advanced JSF Session)

? Backing bean (model objects) management

? Navigations

? Event and listeners

? Validation

? Rendering

? Conversion

? Internationalization and Localization

? Custom UI component

04/29/2004


4/128

10

What is & Why JSF?

04/29/2004


5/128

11

JavaServer

Faces (JSF)Framework Is

A server sideuser interfacecomponent framework for Javatechnology-based web applications

04/29/2004


6/128

12

What is JSF?? A specification and reference

implementation for a web application

development framework Components

Events

Validators

Back-end-data integration? Designed to be leveraged by tools

Sun Java Studio Creator

04/29/2004


7/128

13

Why JSF? (page 1)? MVC for web applications

? Clean separation of roles

? Easy to use

? Extensible Component and Renderingarchitecture

? Support for client device independence? Standard

? Huge vendor and industry support

04/29/2004


8/128

14

Why JSF? (page 2)? Offers finer-grained separation of behavior

and presentation than JSP

Component-specific event handling UI elements as stateful objects on the server

? UI-component and Web-tier conceptswithout limiting you to a particular scriptingtechnology or markup language

Can work with any presentation technologyincluding JSP

04/29/2004


9/128

15

Why JSF? (page 3)? JSP and Servlet

No built-in UI component model

? Struts (I am not saying you should not use Struts) No built-in UI component model

No built-in event model for UI components

No built-in state management for UI components

No built-in support of multiple renderers (Struts ismore or less tied up with HTML)

Not a standard (despite its popularity)

? Struts and JSF can be used together

04/29/2004


10/128

16

JSF is a UI Framework for Java Web

Applications

Client

Server

UIrequest

Response

(events)

(markup)

04/29/2004


11/128

17

JSF Design Goals

04/29/2004


12/128

18

JavaServer Faces Must Be ...? Tool friendly

? Client device / protocol neutral

? Usable with JavaServer Pages (JSP)? Usable without JSP

? Useful in the context of HTML and today's

browsers? Scalable

04/29/2004


13/128

19

Our Requirements? MVC

? UI components

? State management? Events

? Validation and error handling

? Lightning fast performance

04/29/2004


14/128

20

How the JSF Specification Fits In

JSF App

Servlets (2.3)

JSP (1.2) JSF API

JSF Tags

JSF App

04/29/2004


15/128

21

Quick Overview onJSF Architecture,

Concept, & Features

04/29/2004


16/128

22

JSF Architecture

HTMLRenderKit

AppBackend

DesktopBrowser

Phone

Frontctrl

JSF Page

JSF Page

WML

HTML

Server

WMLRenderKit

04/29/2004


17/128


18/128


19/128

25

Key JSF Concepts? Converter Plug-in for String-Object

conversion

?

FacesContext Per-Request State: Servlet request, response, session

JSF request, response trees

Model reference expression evaluators? Syntax similar to the expression language of the JSP

Standard Tag Library (JSTL) 1.0

? Primary interface between components and the dataprovided by (or to) the application

04/29/2004


20/128

26

Key JSF Concepts? Renderer Converts components to and

from a specific markup language

Supports render-dependent attributes oncomponents

May support more than one component type

? RenderKit Library of Renderers

Extensible at runtime Basic HTML RenderKit is part of the specification

04/29/2004


21/128

27

Relationship to Other JSRs? JSF is based on:

Servlet 2.3 (JSR-53)

JSP 1.2 (JSR-53)? JSF must be synergistic with:

JSTL 1.0 (JSR-52)

Portals (JSR-168)

? JSF is not part of J2EE 1.4 standard yet Will be considered for J2EE 1.5

It is included in J2EE 1.4 SDK, however

04/29/2004


22/128

28

Developer Roles

04/29/2004


23/128

29

JSF Developer Roles

PageAuthor

ApplicationDeveloper

ComponentDeveloper

ToolsDeveloper

JSF

Implementor/Extender

Application Extensions

04/29/2004


24/128

30

Roles Definition? Page Author Creates the user interface

of a web application

Familiar with markup language(s) to be used Assembler of prebuilt components

Uses Drag and drop IDE like Sun Java StudioCreator

?

Component Writer Creates reusablecomponents, renderers, and libraries

Components Render-independent properties

Renderers Render-dependent properties

04/29/2004


25/128

31

Roles Definition

? Application Developer Creates theserver-side functionality of a webapplication not directly related to the user

interface Business logic components implemented in

standard J2EE ways (EJBs, JavaBeans,Connectors)

Persistence tier components implemented instandard J2EE ways (EJBs, JDBC, Connectors)

Model data exposed to user interface via JavaBeanprogramming model

Validator, Convertor, Event handler

04/29/2004


26/128

32

Roles Definition

? Tool Provider Creates tools to assist pageauthors, component writers, and applicationdevelopers

GUI-oriented page development tools IDEs to facilitate creation of components

Application generators (from high level description)

Web application frameworks that utilize JSF

components for their user interface Example: Sun Java Studio Creator

? JSF Implementor Provides runtimeenvironment to execute JSF webapps

J2EE SDK 1.4

04/29/2004


27/128

33

Request ProcessingLife Cycle

04/29/2004


28/128

34

Lifecycle of JSF Page? A JSF page is represented by a tree of UI

components, called a view

? When a client makes a request for the page, the

lifecycle starts? During the lifecycle, JSF implementation must

build the view while considering state saved fromthe previous postback

? When the client performs a postback of thepage, JSF implementation must perform lifecyclesteps

validation

conversion

04/29/2004


29/128


30/128

04/29/2004


31/128

37

Request Processing Lifecycle

Phases1.Reconstitute component tree phase

2.Apply request values phase

3.Process validations phase

4.Update model values phase

5.Invoke application phase

6.Render response phase

04/29/2004

04/29/2004


32/128

38

greeting.jsp (from guessNumer)

Hello

Hi. My name is Duke. I'm thinking of a number from

to. Can you guessit?

04/29/2004

04/29/2004


33/128

39

Phase 1: Reconstitute Component

Tree (View) Phase? When a request for a JavaServer Faces page

is made, such as when clicking on a link or a

button, the JSF implementation begins theRestore view phase

if it is the first time, an empty view is created

? JSF implementation performs

builds the view of the JavaServer Faces page wires up event handlers and validators

saves the view in the FacesContext

04/29/2004

04/29/2004


34/128

40

Example: Component Tree (View) of

greeting.jsp page of GuessNumber

helloForm

userNo submit errors1

UIView

04/29/2004

04/29/2004


35/128

41

Phase 2: Apply Request Values

Phase? Each component in the tree extracts its

new value from the request parameters

with its built-in decode method? Within the decode method, the value is

then converted to right type then storedlocally on the component

ForuserNo component in greeting.jsp page, typegets converted from String to Integer

Conversion errors are queued on the FaceContext

04/29/2004

04/29/2004


36/128

42

Phase 3: Process Validation Phase

? JSF implementation processes all inputvalidations registered on the components in

the tree This is input validation (not business logic validation)

? In case of validation errors

Error messages are queued in FacesContext

Lifecycle advances directly to the Render Responsephase

? Example

userNo has be be between 1 and 10

04/29/2004

04/29/2004


37/128

43

Phase 4: Update Model Values Phase

? JSF implementation walks the componenttree and set the corresponding server sideobject properties to the components' local

values Update the bean properties pointed at by an input

component's value attribute

Type conversion from local value to model property

type

? Example in greeting.jsp

userNumberproperty of the UserNumberBean isset to the local value of the userNo component

04/29/2004

04/29/2004


38/128

44

Phase 5: Invoke Application Phase

? JSF implementation handles anyapplication-level events, such as

submitting a form or linking to anotherpage

04/29/2004


39/128


40/128

04/29/2004


41/128

47

UI ComponentModel

04/29/2004

04/29/2004


42/128

48

Sub Topics

? What is a UI component?

? UI component classes

?

UI component rendering model? Conversion model

? Event and listener model

?

Validation model

0 / 9/ 00

04/29/2004


43/128

49

UI Component Model:

What is a UIComponent?

/ /

04/29/2004


44/128

50

What is a UI Component?

? A well defined, familiar idiom for UI design

? Are configurable, reusable elements thatcompose the user interfaces of JSF

applications? Can be simple, like a button, or compound,

like a table, which can be composed ofmultiple components

? Extensible through composition, adding newcomponents

? Accessible via JSF custom tags in JSP

page, for example

04/29/2004


45/128

51

JSF UI Component Model

? A set ofUIComponent classes for specifyingthe state and behavior of UI components

? A rendering model that defines how to render

the components in different ways.? An event and listener model that defines how

to handle component events

?

A conversion model that defines how to plug indata converters onto a component

? A validation model that defines how to registervalidators onto a component

04/29/2004


46/128

52

UI Component Model:UI Component Classes


47/128


48/128

04/29/2004


49/128

55

How UI Component classes are

used by Page authors?

? Most page authors and applicationdevelopers will not have to use theseclasses directly They will instead include the components on a page

by using the component's corresponding tags

?

Most of these component tags can berendered in different ways

For example, a UICommand component can berendered as a button or a hyperlink using differenttags

04/29/2004


50/128

56

Built-in UI Component Classes

? UICommand:

Represents a control that fires actions whenactivated.

? UIForm: Encapsulates a group of controls that submit data

to the application. This component is analogous tothe form tag in HTML.

? UIGraphic: Displays an image.

04/29/2004


51/128

57


? UIInput:

Takes data input from a user

is a subclass of UIOutput

? UIOutput: Displays data output on a page

? UIPanel

Displays a table? UIParameter:

Represents substitution parameters

04/29/2004


52/128

58


? UISelectItem:

Represents a single item in a set of items.

? UISelectItems: Represents an entire set of items.

? UISelectBoolean:

Allows a user to set a boolean value on a control byselecting or de-selecting it. This class is a subclassof UIInput.

? UISelectMany:

Allows a user to select multiple items from a groupof items. This class is a subclass of UIInput.


53/128

04/29/2004


54/128

60

UI Component Model:

Component RenderingModel


55/128

04/29/2004


56/128

62

RenderKit

? Defines how component classes map tocomponent tags appropriate for a particularclient

? JSF implementation includes a built-inRenderKit for rendering to an HTML client

? For every UI component that a RenderKitsupports, the RenderKit defines a set ofRendererobjects

04/29/2004


57/128

63

Renderer Object

? Defines a different way to render theparticular component to the output definedby the RenderKit

? Example UISelectOne component has three different

renderers? One of them renders the component as a set of radio

buttons? Another renders the component as a combo box.

? The third one renders the component as a list box.

04/29/2004


58/128

64

UI Component Model:

JSP Custom Tags inHTML Renderer Kit

04/29/2004


59/128

65

Tags in HTML Renderer Kit

? Each JSP custom tag defined in the standardHTML RenderKit class is composed of

component functionality, defined in theUIComponent class

rendering attributes, defined by the Renderer

04/29/2004


60/128

66

Example Tags

? & tags

command defines UI component

Button and Link defines rendering attribute

04/29/2004


61/128

67

greeting.jsp

Hi. My name is Duke. I'm thinking of a number from

to. Can you guess it?


62/128


63/128


64/128


65/128

04/29/2004


66/128

72

UI Component Model:Validation Model


67/128


68/128


69/128


70/128


71/128


72/128

04/29/2004


73/128

79

Application Configuration File

? You can have more than one applicationconfiguration file

? There are three ways that you can makethese files available to the application]

A resource named /META-INF/faces-config.xmlin any of the JAR files in the Web application's

/WEB-INF/lib directory A context init parameter,javax.faces.application

A resource named faces-config.xml in the/WEB-INF/ directory of your application (most

common)

04/29/2004


74/128

80

Application Class

? When an application starts up, the JSFimplementation creates a single instance

of theApplication class? Is automatically created for each

application

? FacesContext.getApplication()


75/128

04/29/2004


76/128

82

Two Tag Libraries

? html_basic

Defines tags for representing common HTML user

interface components? jsf_core

Defines other JSF related tags

Independent of any rendering technology

? JSP page need to declare them

04/29/2004


77/128

83

element

? Represents UIViewRoot component

? All component tags on the page must be

enclosed in the view tag... other faces tags, possibly mixed with othercontent ...

? Optional locale attribute

Overrides the Locale stored in the UIViewRoot

04/29/2004


78/128

84

Nested View's

? Use element in order toinclude a JSF page inside another JSP

page

jsp:include page="theNestedPage.jsp"

04/29/2004


79/128

85

Using Core Tags

04/29/2004


80/128

86

Event Handling Tags and Attributes

? or actionListenerattribute

Registers an action listener on a component? or

valueChangeListener attribute

Registers a value-change listener on a parent

component

04/29/2004


81/128

87

Example:

in customerInfo.jsp (carstore)

04/29/2004


82/128

88

Example: actionListener attribute

in chooseLocale.jsp (carstore)


83/128

04/29/2004


84/128

90

Data Conversion Tags

?

Registers an arbitrary converter on the parentcomponent

?

Registers a DateTime converter instance on theparent component

? Registers a Number converter instance on the

parent component


85/128

04/29/2004


86/128

92

Parameter Substitution Tag

?

Substitutes parameters into a MessageFormatinstance and to add query string name/value pairsto a URL


87/128


88/128

04/29/2004


89/128

95

Validator Tags

?

Registers a DoubleRangeValidator on a component

?

Registers a LengthValidator on a component

?

Registers a LongRangeValidator on a component

? Registers a custom Validator on a component


90/128


91/128


92/128

04/29/2004


93/128

99

Using HTML Tags

UIForm &


94/128

04/29/2004


95/128

101

Using HTML Tags

UICommand &


96/128

04/29/2004


97/128

103

UICommand &

? Additional attributes

action:? is either a logical outcome String or a JSF EL expression

that points to a bean method that returns a logicaloutcome String

? In either case, the logical outcome String is used by thenavigation system to determine what page to accesswhen the UICommand component is activated

actionListener:? is a JSF EL expression that points to a bean method that

processes an ActionEvent fired by the UICommandcomponent

04/29/2004


98/128

104

Example1:

from carDetail.jsp

? action attribute

references a method on the CarStore backing bean thatperforms some processing and returns an outcome

outcome is passed to the default NavigationHandler,which matches the outcome against a set of navigationrules defined in the application configuration file.

? value attribute references the localized message for the button's label

bundle part of the expression refers to theResourceBundle that contains a set of localizedmessages


99/128


100/128

04/29/2004


101/128

107

Example1: Resources.properties

file of carstoresunroofLabel=SunroofcruiseLabel=Cruise ControlkeylessLabel=Keyless Entry

securityLabel=Security SystemskiRackLabel=Ski RacktowPkgLabel=Tow PackagegpsLabel=GPSbuy=Buy

back=BackbuyLabel=Thanks for stopping by!


102/128

confirmChoices.jsp04/29/2004


103/128

109

04/29/2004


104/128

110

Example2:

from optionsPanel.jsp

? optionsPanel.jsp is include'd insidecarDetails.jsp


105/128

04/29/2004


106/128

112

Example2: choosePackage()

method of CarStore.javapublic class CarStore extends Object {

...public void choosePackage(ActionEvent event) {

String packageName = event.getComponent().getId();choosePackage(packageName);

}public void choosePackage(String packageName) {

// Business logic processing}

...}

04/29/2004


107/128

113

Using HTML Tags

UIInput & UIOutput

04/29/2004


108/128

114

UIInput & UIOutput Components

? UIInput component displays a value to auser and allows the user to modify this data

The most common example is a text field? UIOutput component displays data that

cannot be modified

The most common example is a label

? Conversions can occur? Both UIInput and UIOutput components can

be rendered in several different ways


109/128

04/29/2004


110/128

116

UIOutput Component and

Renderer Combinations? outputLabel

Displays a nested component as a label for aspecified input field

? outputLink

Display an tag that links to another pagewithout generating an ActionEvent

?

outputMessage Displays a localized message

? outputText

Displays a text string of one line


111/128


112/128

customerInfo.jsp04/29/2004


113/128

119

E l h t tT t i

04/29/2004


114/128

120

Example: in

finish.jsp (old: need to be updated)

? value attribute specifies the MessageFormat

pattern

? parameter tag specifies the substitution

parameters for the messageThanks, {0}, for using carstore. Your car will ship soon.


115/128

04/29/2004


116/128

127

Backing Bean(Model Object)

Management


117/128

04/29/2004


118/128

129

Why Backing Beans?

? Separation of Model from View (MVC)

Model handles application logic and data: BackingBeans are Model objects

View handles presentation: UI components

04/29/2004


119/128

130

How to Specify Backing

Beans in JSP page?? A page author uses the JavaServer

Faces expression language (JSF EL) to

bind a component's value or its instanceto a backing bean property

JSF EL is in the form of "#{...}"

?

A page author also uses the JSF EL torefer to the backing-bean methods thatperform processing for the component

E l Bi di C V l

04/29/2004


120/128

131

Example: Binding Component Value

to Backing Bean in greeting.jsp

?

userNo component's value is bound to theUserNumberBean.userNumberbacking-bean property

04/29/2004


121/128

132

UserNumberBean in faces-config.xml

The "backing file" bean that backs up the guessNumber webapp

UserNumberBeanguessNumber.UserNumberBeansession

minimumint0

maximumint10

04/29/2004


122/128

133

PageNavigation

04/29/2004


123/128

134

Define Page Navigation

? Application developer responsibility

Navigation rules are defined in the applicationconfiguration file

? Navigation rules Determine which page to go to after the user clicks

a button or a hyperlink


124/128

Navigation Rule 2 for

04/29/2004


125/128

136

Navigation Rule 2 for

guessNumber Example (V1)

The decision rules used by the NavigationHandler todetermine which view must be displayed after thecurrent view, response.jsp is processed.

/response.jsp

Indicates to the NavigationHandler that the greeting.jspview must be displayed if the Action referenced by aUICommand component on the response.jsp view returns

the outcome "success". success

/greeting.jsp

04/29/2004


126/128

137

Navigation Rule

?

defines how to get from one page (specified in thefrom-tree-id element) to the other pages of the

application can contain any number of

elements

?

defines the page to open next (defined by to-tree-id)based on a logical outcome (defined by from-outcome)

04/29/2004


127/128

138

Where can Outcome come from?

? Outcome can be defined by the action attributeof the UICommand component that submits theform

? action attribute can be a string or actionmethod (#{.})


128/128

java server face

Documents

Transcript of java server face