Introduction to

Java Server Faces(JSF)

Deepak Goyal
Vikas Varma
Sun Microsystems
2
Objective
Understand the basic concepts of
Java Server Faces[JSF]
Technology.

What is and why JSF?

Architecture Overview

UI Component Model

evelopment Steps
!enda
!
JavaServer Faces (JSF)
Frame"ork Is#
A server side user interface
component framework for Java
technology-based web applications
"
$%at is JSF&

A specification and reference

implementation for a web application
development framework

Components

Events

Validators & converters

Navigation

Back-end-data integration
#
$%y JSF& (pa!e ')

MVC for web applications

Clean separation of roles

Easy to use

Etendable Component and !endering

arc"itecture

#upport for client device independence

#tandard

$uge vendor and industry support

$
$%y JSF& (pa!e ()

%#& and #ervlet

No built-in '( component model

#truts )( am not saying you s"ould not use #truts*

No built-in '( component model

No built-in event model for '( components

No built-in state management for '( components

No built-in support of multiple renderers

Not a standard )despite its popularity*

#truts and %#+ can be used toget"er

%
)o" t%e JSF Speci*ication Fits In
JSF App
Servlets (2.3)
JSP (1.2) JSF API
JSF Tags
JSF pp

What is and why JSF?

Architecture Overview

UI Component Model

evelopment Steps
Agenda
&'
JSF rc%itecture +MV,-
HTML
RenderKit
App
Backend
Desktop
.ro"ser
/%one
Front
ctrl
JSF /a!e
JSF /a!e
$M0
)1M0
Server
WML
RenderKit
2e3uest processin! 0i*ecycle
FacesServlet
FacesContext
1.Creates FacesContext
Lifecycle
2.Passes controls to Lifecycle
3. Process FacesContext in various phase
&2
2e3uest /rocessin! 0i*ecycle /%ases

+aces
!e,uest !econstitute
Component
-ree
Apply
!e,uest
Values
&rocess
Validations
+aces
!esponse
!ender
!esponse
(nvoke
Application
'pdate
Model
Values
&(
2e3uest /rocessin! 0i*ecycle

+aces
!e,uest !econstitute
Component
-ree
Apply
!e,uest
Values
&rocess
Events
&rocess
Validations
&rocess
Events
!esponse
Complete
!esponse
Complete
!ender !esponse
!esponse
Complete
!esponse
Complete
+aces
!esponse
!ender
!esponder
(nvoke
Application
'pdate
Model
Values
&rocess
Events
&rocess
Events
Conversion Errors .
!ender !esponse
Validation . Conversion
Errors . !ender !esponse
&!
2e3uest /rocessin! 0i*ecycle
/%ases
/0!econstitute component tree p"ase
10Apply re,uest values p"ase
20&rocess validations p"ase
30'pdate model values p"ase
40(nvoke application p"ase
50!ender response p"ase

What is and why JSF?

Architecture Overview

UI Component Model

evelopment Steps
!enda
&#
4ser Inter*ace ,omponent Model

'( components

Event "andling model

Conversion and Validation model

!endering model

&age navigation support

4I ,omponents

UIComponent)UIComponent*ase
*ase class +or all user inter+ace components

Standard UIComponent Su,classes

UICommand- UIForm- UIOutput

UI.raphic- UIInput- UI/anel- UI/arameter

UISelect*oolean- UISelectMany- UISelectOne

01ample2
<h:inputText id="userNo"
value="#{UserNumberBean.userNumber}"/>

Validators and ,onverters

3alidators4/er+orm correctness chec5s on

UIInput values
6e7ister one or more per component
0n8ueue one or more messa7es on errors
Standard implementations +or common cases

Converters4/lu79in +or conversions2

Output2 O,:ect to Strin7
Input2 Strin7 to O,:ect
Standard implementations +or common cases
,onverters and Validators
Example:
Converters:
5%6input7te8t value2e*9:testin!.ean;today:
convertor9:Date1ime:<=
Valiators:
5%6input7te8t value2e*9:testin!.ean;today:
5*6validator7len!t% minimum9:>: ma8imum9?'@: <=
2enderin! Model

6enderers9Adapt components to a speci+ic mar5up

lan7ua7e

ecodin7

0ncodin7

6ender;its4<i,rary o+ 6enderers

Map component classes to component ta7s

Is a custom ta7 li,rary

*asic =>M< 6ender;it

Avents and 0isteners

Follows Java*eans? Speci+ication desi7n and

namin7 patterns

Standard events and listeners

Action0vent4UICommand component activated

,y the user

3alueChan7ed0vent4UIInput component whose

value was :ust chan7ed
Bavi!ation Model

Application developer responsi,ility

e+ined in Application con+i7uration +ile

@Facescon+i7A1mlB

Cavi7ation rules

etermine which pa7e to 7oA

Cavi7ation case
Bavi!ation Model
<navigation-rule>
<from-tree-id>/login.jsp</from-tree-id>

<navigation-case>
<from-outcome>success</from-outcome>
<to-tree-id>/menu.jsp</to-tree-id>
</navigation-case>
<navigation-case>
<from-outcome>failed</from-outcome>
<to-tree-id>/error.jsp</to-tree-id>
</navigation-case>
</navigation-rule>

What is and why JSF?

Architecture Overview

UI Component Model

evelopment Steps
!enda
Steps in Development /rocess
&A evelop model o,:ects which hold the data
2A Add model o,:ects @mana7ed ,eanB declarations to
Application Con+i7uration File +aces9con+i7A1ml
(A Create /a7es usin7 UI component and core ta7s
!A e+ine /a7e Cavi7ation in +aces9con+i7A1ml
"A Con+i7ure we,A1ml
Step'6 Develop model Objects
(Mana!ed .ean)

>he model @MB in M3C

A re7ular Java*eans with read)write properties

May contain application methods and event handlers

Use to hold data +rom a UI @pa7eB

Creation and li+etime is mana7ed ,y JSF runtime

application- session- re8uest

JSF 5eeps the ,eanDs data in sync with the UI

Step (; Mana!ed .ean Declaration
)+aces-config0ml*
01 <managed-bean>
02 <managed-bean-name>
03 LoginFormBean
04 </managed-bean-name>
05 <managed-bean-class>
06 myapp.LoginFormBean
07 </managed-bean-class>
08 <managed-bean-scope>
09 request
10 </managed-bean-scope>
11 </managed-bean>
Step C6 ,reate JSF /a!es

Must include JSF ta7 li,rary

=>M< and core ta7s

All JSF ta7s must enclosed ,etween a set o+ view ta7

Use JSF +orm and +orm component ta7s

Eh2inputFte1tG not Einput typeHIte1tIG

Eh2commandF,uttonG not Einput typeHIsu,mitIG

May include validators and event listeners on any +orm

components
Sample JSFD /a!e (lo!in;jsp)

01 <f:view>
02 <f:form formName=logonForm>
03 <h:panel_grid columns=2>
04 <h:output_text value=Username:/>
05 <h:input_text id=username length=16
06 valueRef=logonBean.username/>
07 <h:output_text value=Password:/>
08 <h:input_secret id=password length=16
09 valueRef=logonBean.password/>
10 <h:command_button type=submit
11 label=Log On
12 actionRef=logonBean.logon/>
13 <h:command_button type=reset
14 label=Reset/>
15 </h:panel_grid>
16 </f:form>
17 </f:view>
.indin! 4I to Mana!ed .ean
<h:input_text id=userName
valueRef=LoginFormBean.userName/>
<managed-bean>
<managed-bean-name>
LoginFormBean
</managed-bean-name>
<managed-bean-class>
myapp.LoginFormBean
</managed-bean-class>
public class LoginFormBean
...
public void
setUserName(...) {
public String
getUserName(...) {
faces-config.xml
login.jsp
LoginFormBean.java
Step E6 De*ine /a!e Bavi!ation 2ules
)+aces-config0ml*
01 <navigation-rule>
02 <from-tree-id>/login.jsp</from-tree-id>
03 <navigation-case>
04 <from-outcome>success</from-outcome>
05 <to-tree-id>/menu.jsp</to-tree-id>
06 </navigation-case>
07 </navigation-rule>
08
09 <navigation-rule>
010 <from-tree-id>/login.jsp</from-tree-id>
011 <navigation-case>
012 <from-outcome>failure</from-outcome>
013 <to-tree-id>/error.jsp</to-tree-id>
014 </navigation-case>
015 </navigation-rule>
Step F6 ,on*i!ure )web0ml*
01 <context-param>
02 <param-name>
03 javax.faces.application.CONFIG_FILES
04 </param-name>
05 <param-value>/WEB-INF/faces-config.xml
06 </param-value>
07 </context-param>
08 <servlet>
09 <servlet-name>Faces Servlet</servlet-name>
10 <servlet-class>
11 javax.faces.webapp.FacesServlet</servlet-class>
12 <load-on-startup> 1 </load-on-startup>
13 </servlet>
14 <!-- Faces Servlet Mapping -->
15 <servlet-mapping>
16 <servlet-name>Faces Servlet</servlet-name>
17 <url-pattern>/faces/*</url-pattern>
18 </servlet-mapping>
JSF pplication directory structure
6EB-(N+.web0ml
6EB-(N+.faces-config0ml
6EB-(N+.classes.LoginFormBean.class
login.jsp
2e3uired Jars6
$A.GIBF<lib<js*Gapi;jar
$A.GIBF<lib<js*Gri;jar
$A.GIBF<lib<jstl;jar
$A.GIBF<lib<js*Gel;jar
$A.GIBF<lib<standard;jar
$A.GIBF<lib<commonsGbeanutils;jar
$A.GIBF<lib<commonsGdi!ester;jar
$A.GIBF<lib<commonsGcollections;jar
$A.GIBF<lib<commonsGlo!!in!;jar

JSF2 Server side UI component +ramewor5

M3C

evelopin7 application in JSF

Summary
2e*erence

http2))wwwA:s+centralAcom)readin7)inde1Ahtml

http2)):avaAsunAcom):2ee):avaserver+aces)

http2))wwwA:cpAor7)en):sr)detail?idH&2$
HI
deepak;!oyalJsun;com
vikas;varmaJsun;com