Introduction toJSF

1. Introduction toJSF

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

3. AgendaWhat is JSF and why JSF?Architecture OverviewUI Component ModelSummary of new features in JSF 2Development Steps

4. JSF (JavaServer Faces) Framework Is…A server side user interface component framework for Java technology-based web applicationsF-35 JSF Joint Strike Fighter

5. Ok, but what JSF really is?A specification and reference implementation for a web application development frameworkComponentsEventsValidators & convertersNavigationBack-end-data integrationLocalizationError Handling

6. But why JSF?StandardHuge vendor and industry supportMVC for web applicationsClean separation of rolesEasy to useExtendable Component and Rendering architectureSupport for client device independence

8. JSF ArchitectureServerDesktopBrowserHTMLRenderer kitHTMLAppBackendFrontCtrlJSF PageJSF PagePhoneWMLRenderer kitWML

9. Request Processing Lifecycle PhasesRestore component tree phaseApply request values phaseProcess validations phaseUpdate model values phaseInvoke application phaseRender response phase

10. Request Processing Lifecycle PhasesSubmitted form values stored in component

11. Component values are convertedComponent tree retrievedRestoreViewRequestComponent valuesvalidatedComponent valuesbound to backing beanApplyRequestValuesProcessValidationsEvents handled

12. Methods invoked

13. Navigation calculatedUpdateModel ValuesInvokeApplicationRenderResponseResponseComponent values are updated from backing bean propertiesSystem-level phaseApplication-level phase

15. User Interface Component ModelUI componentsEvent handling modelConversion and Validation modelRendering modelPage navigation support

16. UI ComponentsUIComponent/UIComponentBaseBase class for all user interface componentsStandard UIComponent SubclassesUICommand, UIForm, UIOutputUIGraphic, UIInput, UIPanel, UIParameterUISelectBoolean, UISelectMany, UISelectOneExample<h:inputTextid="Key"value="#{message.key}" required="true"rendered="#{resBean.editModeRow}"/>ValidatorsValidators – pluggable validation on UIInput valuesJSF provides implementation for common classes (String reg. exp. validator, decimal range validator etc.)Can apply one or more per componentEasy to create custom validatorsImplement interface and

17. public void validate(FacesContext context, UIComponent component, Object value) throws ValidatorException;Example<h:inputTextvalue="#{message.key}" required="true"rendered="#{resBean.editModeRow}“> <f:validateLengthmaximum="15"minimum="6"/></h:inputText>ConvertersConverters – pluggable conversion mechanismJSF provides implementation for common classes (Integer, Date etc.)

18. Easy to create custom convertersImplement interface and Output: Object to String

19. Input: String to ObjectExample<h:inputTextid="Key"value="#{testBean.today}" converter=“CustomDateConverter"/>Rendering ModelRenderers-Adapt components to a specific markup languageDecoding

20. EncodingRenderKits—Library of RenderersMap component classes to component tags

21. Is a custom tag library

22. Basic HTML RenderKitEvents and ListenersStandard events and listenersActionEvent—UICommand component activated by the user

23. ValueChangedEvent—UIInput component whose value was just changedSystem eventsPossibility to work with PhaseEvents and PhaseListeners

24. Global and component system events - UIComponent.subscribeToEvent() or <f:event> tag.Navigation ModelApplication developer responsibilityDefined in Application configuration file (faces-config.xml)

25. Or implicitly (since JSF 2.0)Navigation rulesDetermine which page to go

26. Navigation caseNavigation Model Sample<navigation-rule> <from-view-id>/wizard/item.jsp</from-view-id> <navigation-case> <from-outcome>wizardIndex</from-outcome> <to-view-id>/wizerd/start.jsp</to-view-id></navigation-case> <navigation-case> <from-outcome>goBack</from-outcome> <to-view-id>/wizard/cat3.jsp</to-view-id> </navigation-case> </navigation-rule>

28. What’s new?FaceletsView Declaration LanguageAnnotation based configurationStandardized AjaxImplicit NavigationScopes (conversation, view, flash, custom)Composite ComponentsBean Validation SupportError Handlingmore - resource loading, improved GET support, behaviors, tree visiting, system events and many more (out of scope)

29. Facelets, Annotations, ScopesFacelets are used by default instead of JSP.Annotation based configuration@ManagedBean, @...Scoped, @FacesConverter, @FacesValidator etc.New scopesView – state is preserved for the view (URL).

30. Conversation and Flash.

31. CustomStandardized AjaxTwo ways to useJavaScript API - jsf.ajax.request()

32. f:ajax tagExamples<h:selectOneMenuvalue="#{dynamicProperties.targetClass}"><f:ajaxevent="change"execute="@form"render="@form"/><f:selectItemsvalue="#{dynamicProperties.targetClasses}"/></h:selectOneMenu><h:commandButtonvalue="Count"onclick="jsf.ajax.request(this.id, event, {execute: this.id, render: 'out1'}); return false;"/>

33. Composite ComponentsDefine<html xmlns="http://www.w3.org/1999/xhtml"xmlns:h="http://java.sun.com/jsf/html" xmlns:composite="http://java.sun.com/jsf/composite"><h:head></h:head><h:body> <composite:interface> <composite:attributename="who"/> </composite:interface> <composite:implementation> <h:outputTextvalue="Hello, #{cc.attrs.who}!"/> </composite:implementation> </h:body></html>Use<html xmlns="http://www.w3.org/1999/xhtml"xmlns:h="http://java.sun.com/jsf/html"xmlns:greet="http://java.sun.com/jsf/composite/greet"><greet:hellowho="World"/></html>

34. Navigation, Bean Validation Support, Error HandlingImplicit Navigation.check for explicit navigation ruleschecks to whether the action outcome corresponds to a view id. If yes navigate to view.Bean Validation SupportOOTB JSR 303 support (@NotNull, @Length, etc.)Error HandlingExceptionHandler API for “global” or “central” exception handling activitiesAgendaWhat is JSF and why JSF?Architecture OverviewUI Component ModelSummary of new features in JSF 2Development Steps

35. Steps in Development ProcessDevelop model objects which hold the dataRegister model objects (managed bean) in faces-config.xml or use annotationsCreate Pages using UI component and core tagsDefine Page Navigation in faces-config.xml or use implicit navigationConfigure web.xml

36. Step 1:Develop model Objects(Managed Bean)The model (M) in MVCA regular JavaBeans with read/write propertiesMay contain application methods and event handlersUse to hold data from a UI (page)Creation and lifetime is managed by JSF runtimeapplication, session, requestJSF keeps the bean's data in sync with the UIdata binding by means of ELStep 2:Register model objects@ManagedBean(name = "appPreferences")@RequestScopedpublicclassAppPreferences {@ManagedProperty("#{persistenceThemeManager}")privateThemeManagerthemeManager;private String theme;// getters and setterspublicList<SelectItem> getThemesSelectItems() …publicvoidsaveTheme() {themeManager.saveTenantTheme(selectedTheme); }}Register this class as a request scoped managed beanModel’s dataAction handler

37. Step 3: Create JSF Page

38. Binding UI to Managed BeaneditUser.xhtml<h:inputTextvalue="#{userEditBean.firstName}" required="true"/>EditUserBean.java@ManagedBean(name = "userEditBean")@SessionScopedpublicclassEditUserBean { public String getFirstName() {…} public void setFirstName(String firstName) { … }

39. Step 4: Define Page Navigation Rules<h:commandButtonaction="goBack" image="../images/back-arrow-small.png"/> <h:commandButtonvalue="LookupPrices"action="#{multiCategorySelectBackingBean.lookupPrices}"/>Web PageBacking Beanpublic String lookupPrices() {...return "showPriceRecs";}<navigation-rule> <from-view-id>/wizard/item.jsp</from-view-id> <navigation-case> <from-outcome>showPriceRecs</from-outcome> <to-view-id>/wizard/pricesResult.jsp</to-view-id></navigation-case> <navigation-case> <from-outcome>goBack</from-outcome> <to-view-id>/wizard/start.jsp</to-view-id> </navigation-case> </navigation-rule>faces-config.xml

40. Step 5: Configure (web.xml)Add<servlet><servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet</servlet-class> <load-on-startup>1</load-on-startup></servlet><servlet-mapping> <servlet-name>FacesServlet</servlet-name> <url-pattern>*.jsf</url-pattern></servlet-mapping>May be not necessary with Servlets 3.0 compliant container

41. Questions?

Introduction toJSF

Recommended

More Related Content

What's hot (20)

Viewers also liked (13)

Similar to Introduction toJSF (20)

More from SoftServe (18)

Recently uploaded (20)