1

Introduction to JSF 2Java server faces 2.xYousry Ibrahim / October 26, 2015

2

Agenda• 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….)

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 119 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 …)

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

6

JSF 2 life cycle

7

JSF 2 life cycle Con

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

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

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

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

12

Managed Bean IIJSF Parts Con.

• How to Inject the Managed Bean in JSF 2 ?

@ManagedProperty

13

Managed Bean IIIJSF 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.

14

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

15

Facelets IIJSF 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

16

Facelets IIIJSF 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

17

Facelets IVJSF Parts Con.

5- If we use the layout with out overridden any tag as below : 6- the result will be like this

18

Facelets VJSF Parts Con.

7- If we use the layout as below : 4- the result will be like this

19

NavigationJSF Parts Con.

•How can we go from page to another page ?

– we can do it more than one way : 1- Configuration Navigation

20

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

21

ComponentsJSF Parts Con.

22

Components IIJSF Parts Con.

• Some Examples of UI Components:– h:outputText and h:inputText:

23

Components IIIJSF Parts Con.

• Some Examples of UI Components:– h:selectOneMenu

There are many components Over JSF (Show demo Primefaces)

24

AjaxJSF Parts Con.

• Ajax in JSF2 become built-in – Example

25

Converters & ValidationJSF Parts Con.

• 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 IIJSF Parts Con.

• 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 IIIJSF Parts Con.

• 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

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

• File Upload ComponentThis feature makes it possible to upload a file from a JSF page.

• Stateless JSFThis 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