Introduction to JSF


Published on

Understand the basic concepts of Java Server Faces (JSF) Technology.

by Serhiy Veryovka

Published in: Technology
1 Comment
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Introduction to JSF

  1. 1. Introduction toJSF<br />
  2. 2. Objective<br />Understand the basic concepts of Java Server Faces (JSF) Technology.<br />
  3. 3. Agenda<br />What is JSF and why JSF?<br />Architecture Overview<br />UI Component Model<br />Summary of new features in JSF 2<br />Development Steps<br />
  4. 4. JSF (JavaServer Faces) Framework Is…<br />A server side user interface component framework for Java technology-based web applications<br />F-35 JSF <br />Joint Strike Fighter<br />
  5. 5. Ok, but what JSF really is?<br />A specification and reference implementation for a web application development framework<br />Components<br />Events<br />Validators & converters<br />Navigation<br />Back-end-data integration<br />Localization<br />Error Handling<br />
  6. 6. But why JSF?<br />Standard<br />Huge vendor and industry support<br />MVC for web applications<br />Clean separation of roles<br />Easy to use<br />Extendable Component and Rendering architecture<br />Support for client device independence<br />
  7. 7. Agenda<br />What is JSF and why JSF?<br />Architecture Overview<br />UI Component Model<br />Summary of new features in JSF 2<br />Development Steps<br />
  8. 8. JSF Architecture<br />Server<br />Desktop<br />Browser<br />HTML<br />Renderer kit<br />HTML<br />App<br />Backend<br />Front<br />Ctrl<br />JSF Page<br />JSF Page<br />Phone<br />WML<br />Renderer kit<br />WML<br />
  9. 9. Request Processing Lifecycle Phases<br />Restore component tree phase<br />Apply request values phase<br />Process validations phase<br />Update model values phase<br />Invoke application phase<br />Render response phase<br />
  10. 10. Request Processing Lifecycle Phases<br /><ul><li>Submitted form values stored in component
  11. 11. Component values are converted</li></ul>Component tree retrieved<br />Restore<br />View<br />Request<br />Component values<br />validated<br />Component values<br />bound to backing bean<br />Apply<br />Request<br />Values<br />Process<br />Validations<br /><ul><li>Events handled
  12. 12. Methods invoked
  13. 13. Navigation calculated</li></ul>Update<br />Model Values<br />Invoke<br />Application<br />Render<br />Response<br />Response<br />Component values are updated from backing bean properties<br />System-level phase<br />Application-level phase<br />
  14. 14. Agenda<br />What is JSF and why JSF?<br />Architecture Overview<br />UI Component Model<br />Summary of new features in JSF 2<br />Development Steps<br />
  15. 15. User Interface Component Model<br />UI components<br />Event handling model<br />Conversion and Validation model<br />Rendering model<br />Page navigation support<br />
  16. 16. UI Components<br />UIComponent/UIComponentBase<br />Base class for all user interface components<br />Standard UIComponent Subclasses<br />UICommand, UIForm, UIOutput<br />UIGraphic, UIInput, UIPanel, UIParameter<br />UISelectBoolean, UISelectMany, UISelectOne<br />Example<br /><ul><li><h:inputTextid="Key"value="#{message.key}" required="true"rendered="#{resBean.editModeRow}"/></li></li></ul><li>Validators<br />Validators – pluggable validation on UIInput values<br />JSF provides implementation for common classes (String reg. exp. validator, decimal range validator etc.)<br />Can apply one or more per component<br />Easy to create custom validators<br /><ul><li>Implement interface and
  17. 17. public void validate(FacesContext context, UIComponent component, Object value) throws ValidatorException;</li></ul>Example<br /><ul><li><h:inputTextvalue="#{message.key}" required="true"rendered="#{resBean.editModeRow}“> <f:validateLengthmaximum="15"minimum="6"/></h:inputText></li></li></ul><li>Converters<br />Converters – pluggable conversion mechanism<br /><ul><li>JSF provides implementation for common classes (Integer, Date etc.)
  18. 18. Easy to create custom converters</li></ul>Implement interface and <br /><ul><li>Output: Object to String
  19. 19. Input: String to Object</li></ul>Example<br /><ul><li><h:inputTextid="Key"value="#{}" converter=“CustomDateConverter"/></li></li></ul><li>Rendering Model<br />Renderers-Adapt components to a specific markup language<br /><ul><li>Decoding
  20. 20. Encoding</li></ul>RenderKits—Library of Renderers<br /><ul><li>Map component classes to component tags
  21. 21. Is a custom tag library
  22. 22. Basic HTML RenderKit</li></li></ul><li>Events and Listeners<br />Standard events and listeners<br /><ul><li>ActionEvent—UICommand component activated by the user
  23. 23. ValueChangedEvent—UIInput component whose value was just changed</li></ul>System events<br /><ul><li>Possibility to work with PhaseEvents and PhaseListeners
  24. 24. Global and component system events - UIComponent.subscribeToEvent() or <f:event> tag.</li></li></ul><li>Navigation Model<br />Application developer responsibility<br /><ul><li>Defined in Application configuration file (faces-config.xml)
  25. 25. Or implicitly (since JSF 2.0)</li></ul>Navigation rules<br /><ul><li>Determine which page to go
  26. 26. Navigation case</li></li></ul><li>Navigation Model Sample<br /><navigation-rule><br /> <from-view-id>/wizard/item.jsp</from-view-id><br /> <navigation-case><br /> <from-outcome>wizardIndex<br /></from-outcome><br /> <to-view-id>/wizerd/start.jsp</to-view-id><br /></navigation-case><br /> <navigation-case><br /> <from-outcome>goBack</from-outcome><br /> <to-view-id>/wizard/cat3.jsp</to-view-id><br /> </navigation-case> <br /></navigation-rule><br />
  27. 27. Agenda<br />What is JSF and why JSF?<br />Architecture Overview<br />UI Component Model<br />Summary of new features in JSF 2<br />Development Steps<br />
  28. 28. What’s new?<br />FaceletsView Declaration Language<br />Annotation based configuration<br />Standardized Ajax<br />Implicit Navigation<br />Scopes (conversation, view, flash, custom)<br />Composite Components<br />Bean Validation Support<br />Error Handling<br />more - resource loading, improved GET support, behaviors, tree visiting, system events and many more (out of scope)<br />
  29. 29. Facelets, Annotations, Scopes<br />Facelets are used by default instead of JSP.<br />Annotation based configuration<br /><ul><li>@ManagedBean, @...Scoped, @FacesConverter, @FacesValidator etc.</li></ul>New scopes<br /><ul><li>View – state is preserved for the view (URL).
  30. 30. Conversation and Flash.
  31. 31. Custom</li></li></ul><li>Standardized Ajax<br />Two ways to use<br /><ul><li>JavaScript API - jsf.ajax.request()
  32. 32. f:ajax tag</li></ul>Examples<br /><h:selectOneMenuvalue="#{dynamicProperties.targetClass}"><br /><f:ajaxevent="change"execute="@form"render="@form"/><br /><f:selectItemsvalue="#{dynamicProperties.targetClasses}"/><br /></h:selectOneMenu><br /><h:commandButtonvalue="Count"<br />onclick="jsf.ajax.request(, event, {execute:, render: 'out1'}); return false;"/><br />
  33. 33. Composite Components<br />Define<br /><html xmlns=""xmlns:h="" xmlns:composite=""><br /><h:head></h:head><br /><h:body> <br /> <composite:interface><br /> <composite:attributename="who"/><br /> </composite:interface><br /> <composite:implementation><br /> <h:outputTextvalue="Hello, #{cc.attrs.who}!"/><br /> </composite:implementation> <br /></h:body></html><br />Use<br /><html xmlns=""<br />xmlns:h=""xmlns:greet=""><br /><greet:hellowho="World"/><br /></html><br />
  34. 34. Navigation, Bean Validation Support, Error Handling<br />Implicit Navigation.<br />check for explicit navigation rules<br />checks to whether the action outcome corresponds to a view id. If yes navigate to view.<br />Bean Validation Support<br /><ul><li>OOTB JSR 303 support (@NotNull, @Length, etc.)</li></ul>Error Handling<br /><ul><li>ExceptionHandler API for “global” or “central” exception handling activities</li></li></ul><li>Agenda<br />What is JSF and why JSF?<br />Architecture Overview<br />UI Component Model<br />Summary of new features in JSF 2<br />Development Steps<br />
  35. 35. Steps in Development Process<br />Develop model objects which hold the data<br />Register model objects (managed bean) in faces-config.xml or use annotations<br />Create Pages using UI component and core tags<br />Define Page Navigation in faces-config.xml or use implicit navigation<br />Configure web.xml<br />
  36. 36. Step 1:Develop model Objects(Managed Bean)<br />The model (M) in MVC<br />A regular JavaBeans with read/write properties<br />May contain application methods and event handlers<br />Use to hold data from a UI (page)<br />Creation and lifetime is managed by JSF runtime<br /><ul><li>application, session, request</li></ul>JSF keeps the bean's data in sync with the UI<br /><ul><li>data binding by means of EL</li></li></ul><li>Step 2:Register model objects<br />@ManagedBean(name = "appPreferences")<br />@RequestScoped<br />publicclassAppPreferences {<br />@ManagedProperty("#{persistenceThemeManager}")<br />privateThemeManagerthemeManager;<br />private String theme;<br />// getters and setters<br />publicList<SelectItem> getThemesSelectItems() …<br />publicvoidsaveTheme() {<br />themeManager.saveTenantTheme(selectedTheme);<br /> }<br />}<br />Register this class as a request scoped managed bean<br />Model’s data<br />Action handler<br />
  37. 37. Step 3: Create JSF Page<br />
  38. 38. Binding UI to Managed Bean<br />editUser.xhtml<br /><h:inputTextvalue="#{userEditBean.firstName}" required="true"/><br /><br />@ManagedBean(name = "userEditBean")<br />@SessionScoped<br />publicclassEditUserBean {<br /> public String getFirstName() {<br />…<br />}<br /> public void setFirstName(String firstName) {<br /> …<br /> } <br />
  39. 39. Step 4: Define Page Navigation Rules<br /><h:commandButtonaction="goBack" image="../images/back-arrow-small.png"/> <br /><h:commandButtonvalue="LookupPrices"action="#{multiCategorySelectBackingBean.lookupPrices}"/><br />Web Page<br />Backing Bean<br />public String lookupPrices() {<br />...<br />return "showPriceRecs";<br />}<br /><navigation-rule><br /> <from-view-id>/wizard/item.jsp</from-view-id><br /> <navigation-case><br /> <from-outcome>showPriceRecs<br /></from-outcome><br /> <to-view-id>/wizard/pricesResult.jsp</to-view-id><br /></navigation-case><br /> <navigation-case><br /> <from-outcome>goBack</from-outcome><br /> <to-view-id>/wizard/start.jsp</to-view-id><br /> </navigation-case> <br /></navigation-rule><br />faces-config.xml<br />
  40. 40. Step 5: Configure (web.xml)<br />Add<br /><servlet><br /><servlet-name>Faces Servlet</servlet-name><br /> <servlet-class>javax.faces.webapp.FacesServlet</servlet-class><br /> <load-on-startup>1</load-on-startup><br /></servlet><br /><servlet-mapping><br /> <servlet-name>FacesServlet</servlet-name><br /> <url-pattern>*.jsf</url-pattern><br /></servlet-mapping><br />May be not necessary with Servlets 3.0 compliant container<br />
  41. 41. Questions?<br />