SlideShare a Scribd company logo

Introduction to jsf 2

•Download as PPTX, PDF•
•
yousry ibrahim
yousry ibrahim

JSF 2 life cycle consists of 6 phases: restore view, apply request values, process validations, update model values, invoke application, and render response. Managed beans are JavaBeans that can be accessed from JSF pages and are used to store data. Facelets is the templating language used by JSF 2 that replaced JSP. Navigation between pages can be done through configuration, implicit navigation based on action outcomes, or redirection. New features in JSF 2.2 include faces flows for page flows, HTML5 support, and a file upload component.

Related slideshows

Sun JSF Presentation
Sun JSF PresentationSun JSF Presentation
Sun JSF Presentation
 
Jsf2.0 -4
Jsf2.0 -4Jsf2.0 -4
Jsf2.0 -4
 
9. java server faces
9. java server faces9. java server faces
9. java server faces
 
1 of 30
Introduction to JSF 2 Java server faces 2.x Yousry Ibrahim / October 26, 2015 1
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
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
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
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
JSF 2 life cycle 6
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
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.
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)
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.
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
Managed Bean II JSF Parts Con. • How to Inject the Managed Bean in JSF 2 ? @ManagedProperty 12
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
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
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
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
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
Facelets V JSF Parts Con. 7- If we use the layout as below : 4- the result will be like this 18
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
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
Components JSF Parts Con. 21
Components II JSF Parts Con. 22 • Some Examples of UI Components: – h:outputText and h:inputText:
Components III JSF Parts Con. 23 • Some Examples of UI Components: – h:selectOneMenu There are many components Over JSF (Show demo Primefaces)
Ajax JSF Parts Con. 24 • Ajax in JSF2 become built-in – Example
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
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.
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
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)
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
Thank you Yousry.Ibrahim@hpe.com 30

More Related Content

Introduction to 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
  • 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