Your SlideShare is downloading. ×
0
Introduction toJSF
Introduction toJSF
Introduction toJSF
Introduction toJSF
Introduction toJSF
Introduction toJSF
Introduction toJSF
Introduction toJSF
Introduction toJSF
Introduction toJSF
Introduction toJSF
Introduction toJSF
Introduction toJSF
Introduction toJSF
Introduction toJSF
Introduction toJSF
Introduction toJSF
Introduction toJSF
Introduction toJSF
Introduction toJSF
Introduction toJSF
Introduction toJSF
Introduction toJSF
Introduction toJSF
Introduction toJSF
Introduction toJSF
Introduction toJSF
Introduction toJSF
Introduction toJSF
Introduction toJSF
Introduction toJSF
Introduction toJSF
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introduction to JSF

1,809

Published on

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

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

by Serhiy Veryovka

Published in: Technology
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,809
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
107
Comments
1
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Introduction toJSF<br />
  • 2. Objective<br />Understand the basic concepts of Java Server Faces (JSF) Technology.<br />
  • 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. 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. 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. 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. 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. 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. 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. Request Processing Lifecycle Phases<br /><ul><li>Submitted form values stored in component
  • 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. Methods invoked
  • 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. 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. 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. 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. 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. Easy to create custom converters</li></ul>Implement interface and <br /><ul><li>Output: Object to String
  • 19. Input: String to Object</li></ul>Example<br /><ul><li><h:inputTextid="Key"value="#{testBean.today}" converter=“CustomDateConverter"/></li></li></ul><li>Rendering Model<br />Renderers-Adapt components to a specific markup language<br /><ul><li>Decoding
  • 20. Encoding</li></ul>RenderKits—Library of Renderers<br /><ul><li>Map component classes to component tags
  • 21. Is a custom tag library
  • 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. ValueChangedEvent—UIInput component whose value was just changed</li></ul>System events<br /><ul><li>Possibility to work with PhaseEvents and PhaseListeners
  • 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. Or implicitly (since JSF 2.0)</li></ul>Navigation rules<br /><ul><li>Determine which page to go
  • 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. 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. 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. 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. Conversation and Flash.
  • 31. Custom</li></li></ul><li>Standardized Ajax<br />Two ways to use<br /><ul><li>JavaScript API - jsf.ajax.request()
  • 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(this.id, event, {execute: this.id, render: 'out1'}); return false;"/><br />
  • 33. Composite Components<br />Define<br /><html xmlns="http://www.w3.org/1999/xhtml"xmlns:h="http://java.sun.com/jsf/html" xmlns:composite="http://java.sun.com/jsf/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="http://www.w3.org/1999/xhtml"<br />xmlns:h="http://java.sun.com/jsf/html"xmlns:greet="http://java.sun.com/jsf/composite/greet"><br /><greet:hellowho="World"/><br /></html><br />
  • 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. 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. 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. Step 3: Create JSF Page<br />
  • 38. Binding UI to Managed Bean<br />editUser.xhtml<br /><h:inputTextvalue="#{userEditBean.firstName}" required="true"/><br />EditUserBean.java<br />@ManagedBean(name = "userEditBean")<br />@SessionScoped<br />publicclassEditUserBean {<br /> public String getFirstName() {<br />…<br />}<br /> public void setFirstName(String firstName) {<br /> …<br /> } <br />
  • 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. 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. Questions?<br />

×