an introduction for JSF 2

1. Introduction to JSF 2
Java server faces 2.x
Yousry Ibrahim / October 26, 2015
1

2. Agenda
2
• JSF History and different implementations.
• JSF 2 life cycle
• JSF Parts
• Managed bean
• Facelets
• Navigation
• UI Components
• AJAX
• Converters & Validation
• What is JSF and why?
• New Features in JSF
2.2

3. What is JSF and why?
• A standard Java framework for building Web applications.
• It provides a component-oriented client-independent development approach to building Web user
interfaces, thus improving developer productivity and ease of use.
• It describes a standard set of architectural patterns for a web application (MVC , front controller …)
• Has many releases and now has a lot of features (Built-in Facelets, Built-in Ajax, composite
components….)
3

4. JSF History and different implementations
• JSR 127
 JSF 1.0 11 March 2004 ( Initial specification released )
 JSF 1.1 27 May 2004 (Bug-fix release. No specification
changes. )
• JSR 252
 JSF 1.2 11 May 2006 (Many improvements to core
systems and APIs. Coincides with Java EE 5)
 JSF 1.2 Maintenance Release 1
19 December 2006
 JSF 1.2 Maintenance Release 2
13 June 2008
 JSF 1.2 Maintenance Release 3
25 August 2008
• JSR 314
 JSF 2.0 1 July 2009 (Major release for ease
of use, enhanced functionality, and
performance. Coincides with Java EE 6 )
 JSF 2.1 16 July 2010
 JSF 2.1 Maintenance Release 2
22 November 2010
• JSR 344 (JSF 2.2)
 Started 14 April 2011
 Early Draft Review released
8 December 2011
 Proposed Final Draft 14 Mar 2013
 Final June 2013 (Introduced new concepts
like stateless views, page flow and the ability
…)
4

5. JSF History and different implementations Con
• There are many implementations for example (ADF by oracle, My faces by apache, IBM and RI).
• The RI (reference implementation called Mojarra project )
• Each implementation can use the default Components or can Create other UI components for example:
– ADF uses rich client faces.
– My Faces can uses (Trinidad, Tobago, Tomahawk)
– Primefaces ( widely used nowadays which is not an implementations BUT set of UI components that use the RI
implementation) as well as ice faces
5

6. JSF 2 life cycle
6

7. JSF 2 life cycle Con
7
1. Restore view :
– This phase is used for constructing view to display in the front end.
– Every view has it's own view id and it is stored in the Faces Context's session object.
– JSF View is collection of components associated with its current state.
– There is two types of state saving mechanism
– Server (default)
– Client

8. JSF 2 life cycle Con
8
2. Apply Request Values:
– After the component tree is restored, each component in the tree extracts its new value from
the request parameters by using its decode method.
– The value is then stored locally on the component.
– If the conversion of the value fails, an error message associated with the component is
generated and queued on FacesContext.
This message will be displayed during the Render phase, along with any validation errors
resulting from the process validations phase.

9. JSF 2 life cycle Con
9
3. Process Validations:
– processes all validators registered on the components in the tree.
– examines the component attributes that specify the rules for the validation and compares these rules to the local value stored for the
component.
4. Update Model Values:
- After the JavaServer Faces implementation determines that the data is valid, it can walk the component tree
and set the corresponding server-side object properties to the components' local values.
- The JavaServer Faces implementation will update only the bean properties pointed at by an input component's value attribute.
- If the local data cannot be converted to the types specified by the bean properties, the life cycle advances directly to the Render phase
so that the page is re-rendered with errors displayed. (This is similar to what happens with validation errors)

10. JSF 2 life cycle Con
10
5. Invoke Application:
– Invokes any application logic needed to fulfill the request and navigate to a new page if needed.
– For example : after performing our business we can see the action property of the button, the action value will
redirect to another JSF view, So at this phase fetch the view and go to render phase
– If the target is not JSF view for example any URL, this phase call FacesContext.responseComplete.
6. Render Response :
– JSF have Render Kit to render the view to generate appropriate format. for example HTML render kit generate html
code from view. Render kit knows how to render the UI components.

11. Managed Bean
JSF Parts
• Is a Java bean that can be accessed from JSF page.
• The managed bean can be a normal Java bean, which contains the getter and setter methods, business logic
or even a backing bean (a bean contains all the HTML form value).
• How to Configure the Managed Bean in JSF 2 ?
Two Ways
– Configure Managed Bean with Annotation - Configure Managed Bean with
XML
11

12. Managed Bean II
JSF Parts Con.
• How to Inject the Managed Bean in JSF 2 ?
@ManagedProperty
12

13. Managed Bean III
JSF Parts Con.
• JSF 2 Managed Bean Scopes:
– Application, Session and Request.
– View Scope (request –  -session):
• a bean in this scope lives as long as you're interacting with the same JSF view in the browser window/tab.
• It get created upon a HTTP request and get destroyed once you postback to a different view.
• JSF stores the bean in the UIViewRoot#getViewMap() with the managed bean name as key, which is in turn stored in the session.
• Use this scope for more complex forms which use ajax, data tables and/or several rendered/disabled attributes whose state needs to be retained in the
subsequent requests within the same browser window/tab (view).
– None Scope (created once request):
• A bean in this scope lives as long as a single EL evaluation.
• It get created upon an EL evaluation and get destroyed immediately after the EL evaluation.
• JSF does not store the bean anywhere.
• So if you have for example three #{bean.someProperty} expressions in your view, then the bean get effectively created three times.
– Custom scope:
• In this scope you have to create your own map in a broader scope and you are the responsible for destroying the beans in that map.
13

14. Facelets
JSF Parts Con.
• invented as a JSF extension by Expert Group member Jacob Hookom, and now incorporated into the core
JSF specification in JSF 2.0.
• Facelets was created to replace the use of JSP as a View Declaration Language (Templating) for JSF.
• Its looks like Apache Tiles framework for who knows it. 
• Most used facelets tags:
– ui:insert – Used in template file, it defines content that is going to replace by the file that load the template. The content can
be replace with “ui:define” tag.
– ui:define – Defines content that is inserted into template with a matching “ui:insert” tag.
– ui:include – Similar to JSP’s “jsp:include”, includes content from another XHTML page.
– ui:composition – If used with “template” attribute, the specified template is loaded, and the children of this tag defines the
template layout; Otherwise, it’s a group of elements, that can be inserted somewhere.
14

15. Facelets II
JSF Parts Con.
• Example :
1- Create common header for our JSF pages as below : 2- create common footer for our JSF pages as below :
Note: all tags out of Composition will be ignored by JSF
15

16. Facelets III
JSF Parts Con.
3- Create default content which used in case the content tag not overridden as below : 4- then we have to create the Layout page witch
combine all
16

17. Facelets IV
JSF Parts Con.
5- If we use the layout with out overridden any tag as below : 6- the result will be like this
17

18. Facelets V
JSF Parts Con.
7- If we use the layout as below : 4- the result will be like this
18

19. Navigation
JSF Parts Con.
• How can we go from page to another page ?
– we can do it more than one way :
1- Configuration Navigation
19

20. Navigation II
JSF Parts Con.
• How can we go from page to another page ?
2- Implicit Navigation
Once the button is clicked, JSF will merge the action value or outcome, “page2” with “xhtml” extension, and find the view name “page2.xhtml” in
the current “page1.xhtml” directory.
– Redirection (show correct name in the URL)
• By default, JSF 2 is perform a forward while navigating to another page, it caused the page URL is always one behind :). For example, when you
move from “page1.xhtml” to “page2.xhtml”, the browser URL address bar will still showing the same “page1.xhtml” URL.
• To avoid this, you can tell JSF to use the redirection by append the “faces-redirect=true” to the end of the “outcome” string.
20

21. Components
JSF Parts Con.
21

22. Components II
JSF Parts Con.
22
• Some Examples of UI Components:
– h:outputText and h:inputText:

23. Components III
JSF Parts Con.
23
• Some Examples of UI Components:
– h:selectOneMenu
There are many components Over JSF
(Show demo Primefaces)

24. Ajax
JSF Parts Con.
24
• Ajax in JSF2 become built-in
– Example

25. Converters & Validation
JSF Parts Con.
25
• Standard Convertors and validator tags in JSF 2.0
– f:convertNumber
– f:convertDateTime
– f:validateLength
– f:validateLongRange
– f:validateRequired
– f:validateRegex
– custom validator
– custom converter
• Lets Take Some examples

26. Converters & Validation II
JSF Parts Con.
26
• Lets Take Some examples
• How to customize the Messages ?
– Create a properties file named “MyMessage.properties for example” (can be any name you like) as below.

27. Converters & Validation III
JSF Parts Con.
27
• How to customize the Messages ?
– Create a properties file named “MyMessage.properties for example” (can be any name you like) as below.
– Register Message Bundle in faces-config.xml file

28. New Features in JSF 2.2
28
• Faces Flows (something like ADF task flow)
This feature gives the developer the ability to develop flows that can be packaged in a JAR file and then be
distributed in any application that wishes to use it.
• HTML5 support (write HTML not JSF component)

29. New Features in JSF 2.2 Con.
29
• File Upload Component
This feature makes it possible to upload a file from a JSF page.
• Stateless JSF
This feature allows you to mark a Facelets page as being stateless, which means no view state is saved for the
page.
Increasing the performance just if you don’t want the state

30. Thank you
Yousry.Ibrahim@hpe.com
30