JSF 2.0 (JavaEE Webinar)

1. JavaServer Faces 2.0 Overview Roger Kitain JSF Co-Specification Lead mailto:[email protected] http://www.java.net/blogs/rogerk/ https://twitter.com/rogerk09

2. Hi Level Categories of Features Foundational New Features Large New Features

3. System Events Publish/Subscribe event model

4. JSF Lifecycle events

5. Listeners registered at 3 scopes: Component: UIComponent.subscribeToEvent()

6. View: UIViewRoot.subscribeToEvent()

7. Application: Application.subscribeToEvent() Publish using: Application.publishEvent() Declarative component event listener registration: <h:inputText> <f:event type=”preValidate” listener=”#{bean.preVal}”/> </h:inputtext>

8. Resources No need for separate Filter or Servlet

9. Loaded from Classpath or filesystem

10. Library / i18n / Versioning Support

11. Java API: @ResourceDependency ; @ResourceDependencies Attributes: library name; resource name

12. “ Target” Attribute: head, body, form Markup: <h:head> <h:body> <h:outputScript> <h:outputStylesheet>

13. Resources

14. View Traversal Multiple components in the view visited for a single traversal

15. Useful for component(s) processing

16. VisitContext Specifies components to visit

17. createVisitContext() UIComponent.visitTree() Performs component(s) visit Usages: Ajax ; State Saving

18. Partial State Saving JSF 1.x State Saving: Tedious/error prone for component developers

19. Performance issues(session bloat) JSF 2.0: Partial State Saving Only save what's changed since initial view creation

20. Per view state size up to 4 x smaller

21. Default for JSF 2.0 components (written with Facelets)

22. PartialStateHolder signals when initial state is configured : markInitialState() StateHelper Storage map for component state (attributes,listeners,...)

23. No need for saveState/restoreState

24. GET Request Support View Parameters Map incoming GET request parameter values to any EL bean/property

25. Mappings specified with <f:viewParam> component: <f:metadata> <f:viewParam name=”user” value=”#{bean.userName}” /> </f:metadata> GET Request: page1.xhtml?user=johndoe

26. <f:viewParam> is EditableValueHolder converters/validators can be used on view parameters

27. GET Request Support <h:link> <h:button> Issue GET requests without hand coding destination URL

28. Uses JSF navigation system for determining destination <h:link outcome=”success”/> Destination determined at render time Outcome mapped to target view identifier Integrate with view parameters: <h:link outcome=”success” includeViewParams=”true”/> Can use <f:param> to specify parameters too

29. JSF 2.0 Component Model Why Do We Need It? With the 1.x component model – too many artifacts, hooks: Component class

30. Renderer

31. Tag class

32. Tld

33. faces-config.xml

34. ......

35. JSF 2.0 Component Model Powerful tools: Templating Facelets is the foundation Optimized for JSF

36. XHTML and tags

37. Eliminates translation/compilation

38. Templating

39. Composite Components

40. JSF 2.0 Component Model Facelets 2.0 Contains most of the standard Facelets features

41. Enhanced to work with JSF 2.0 component building Easily attach listeners, validators, converters

42. Namespaces created “automagically” – no more taglibs Supports Composite Components

43. It's in the specification !

44. Composite Components Turns page markup into a JSF UI component with attached validators, converters, listeners

45. True abstraction: Reuseable component Using Page (XHTML) <html … xlms:my=”http....”> <my:comp value=”yes” /> </html> Component (XHTML)

46. Composite Components Convention over configuration Resources dir; Library name is directory name;

47. Tag name is file name <html xmlns=”http:///www/w3/org/1999/xhtml” xmlns:h=” http://java.sun.com/jsf/html ” xmlns:f=” http://java.sun.com/jsf/core ” xmlns: my =” http://java.sun.com/jsf/composite/comp ”> < my : out value=”yes”/> On disk: <context root>/resources/ comp / out .xhtml

48. Composite Components What's Inside The Black Box? Interface The usage contract

49. Everything page author needs to know to use component Implementation Markup used to create component

50. Composite Components <context-root>resources/ezcomp/LoginPanel.xhtml <html... xmlns:ui="http://java.sun.com/jsf/facelets" xmlns: cc ="http://java.sun.com/jsf/composite"> ... <cc:interface> <cc:attribute name=”userVal” required=”true” ”/> <cc:attribute name=”passValue” required=”true” /> </cc:interface> <cc:implementation> <div> Username: <h:inputText id=”userId”” value=” #{cc.attrs.userVal }”/> </div> <div>Password: <h:inputSecret id=”passId” value=” #{cc.attrs.passVal} ” /></div> <div> <h:commandButton value=”Login” id=”loginButton” /> </div> </cc:implementation> ....

51. Composite Components <context-root>resources/ezcomp/LoginPanel.xhtml <html... xmlns:ui="http://java.sun.com/jsf/facelets" xmlns: cc ="http://java.sun.com/jsf/composite"> ... <cc:interface> <cc:attribute name=”userVal” required=”true” ”/> <cc:attribute name=”passValue” required=”true” /> <cc:actionSource name="loginAction” targets=”loginButton” /> </cc:interface> <cc:implementation> <div> Username: <h:inputText id=”userId”” value=” #{cc.attrs.userVal }”/> </div> <div>Password: <h:inputSecret id=”passId” value=” #{cc.attrs.passVal} ” /></div> <div> <h:commandButton value=”Login” id=” loginButton ” /> </div> </cc:implementation> ....

52. Composite Components “Using Page” xmlns:ez=" http://java.sun.com/jsf/composite/ezcomp "> <html...xmlns:ui=" http://java.sun.com/jsf/facelets " … <h:form> <div id="compositeComponent" class="grayBox" style="border: 1px solid #090;"> <ez:loginPanel > <f:actionListener for=”loginAction” binding=”#{bean.action}” /> </ez:loginPanel> </div> <p><h:commandButton value="reload" /></p> </h:form>

53. Enhancing JSF 2.0 Components Other prominent JSF 2.0 additions: Ajax

54. Behaviors Work well with composite components

55. Enhancing JSF 2.0 Components Ajax JavaScript api in the specification jsf.ajax.request .....

56. Useful for making JSF Ajax calls from JavaScript

57. Control component processing on the server and component rendering at the client

58. Enhancing JSF 2.0 Components Ajax : Declarative Solution : <f:ajax /> Serves two roles depending on placement: Nested within single component “ ajaxifies” that component Wrapping approach – tag is placed around a group of components “ ajaxifies” all components that support the “events” attribute

59. Enhancing JSF 2.0 Components Ajax : Declarative Solution : <f:ajax /> <h:commandButton ...> <h:commandButton...> <f:ajax event=”action” /> <f:ajax /> </h:commandButton> </h:commandButton> Do exactly the same thing since “action” is the default event for commandButton components. <h:commandButton...> <f:ajax event=”mouseover”/> </h:commandButton> JavaScript events supported too.

60. Enhancing JSF 2.0 Components Ajax : Declarative Solution : <f:ajax /> Regions <f:ajax> <h:panelGrid> <h:inputText id=”text1”/> <h:commandButton id=”button1” /> </h:panelGrid> </f:ajax> Ajax applied to “text1” and “button1”. Ajax not applied to panelGrid : no default event associated with it.

61. Enhancing JSF 2.0 Components Adding Ajax Method 1: <f:ajax/> in composite component implementation <cc:interface...> … </cc:interface> <cc:implementation...> … <h:commandButton id=”button1” value=”login”> <f:ajax /> </h:commandButton> … </cc:implementation>

62. Enhancing JSF 2.0 Components Adding Ajax Method 2: JSF Ajax api call in script <cc:implementation...> … <h:commandButton id=”button1” value=”login” onclick=”return myscript.login(' #{cc.clientId') , event);”/> </h:commandButton> … </cc:implementation> script.js: myscript.login=function login( componentId , event) { jsf.ajax.request (document.getElementById(subButton), event);

63. Enhancing JSF 2.0 Components Behaviors Additional functionality applied to components

64. Ajax is a behavior (AjaxBehavior)

65. Not just about Ajax Tool tips, client validation, …

66. Enhancing JSF 2.0 Components Behaviors : Client Behavior(s) New type of attached object

67. Attached by “event”

68. Contributes script content for rendering AjaxBehavior is a Client Behavior that formulates the jsf.ajax.request script content for rendering All Html standard components implement ClientBehaviorHolder interface

69. Enhancing JSF 2.0 Components Adding Behaviors Similar to adding Ajax... <cc:interface..>...</cc:interface> <cc:implementation> <h:graphicImage value...> <be:tip event=”mouseover”/> <be:tip event=”mouseout/> </h:graphicImage> be:tip is custom behavior

70. Other Enhancements Navigation Implicit Navigation : navigation logic in page (instead of faces-config xml)

71. Conditional Navigation : more complex navigation rules Exceptions Central Exception Handler subscribes to exception events

72. Can be decorated EL : enhancements for component processing: #{component} #{compositeComponent}

73. #{component.clientId}

74. Other Enhancements Validation Integration with JSR 303: Bean Validation

75. <f:validateRequired> <f:validateRegexp> New Scopes “Conversation” : from Contexts and Dependency Injection (JSR 299)

76. “Flash” useful for storing data for use on the “next” request

77. Single view transition “ View” Longer than request ; shorter than session

78. State preserved until interaction with current view complete

79. Other Enhancements Annotations Managed Bean

80. Component (and associated artifacts) @FacesComponent, @FacesRenderer

81. @FacesConverter, @FacesValidator

82. @FacesBehavior

83. Summary Java EE 6 GlassFish v3 JSF 2.0 : Big improvements address community needs Easier component development

84. Ajax : Dynamic Components

85. Less configuration

86. Performance (State Saving)

87. Resources Java EE 6 and GlassFish v3 Java EE 6 Java EE 6 Home

88. java.sun.com/javaee

89. Java EE 6 Downloads java.sun.com/javaee/downloads Upcoming Training java.sun.com/javaee/support/training Sun GlassFish Enterprise Server v3 Home www.sun.com/glassfishv3 Community Page glassfish.org The Aquarium Blog blogs.sun.com/theaquarium White Papers/Webinars

90. http://www.sun.com/glassfish/resources GlassFish

91. New JSF 2.0 Training and Certification Java EE 6 GlassFish v3 Brand new training course and certification for JSF 2.0 Developing Web Applications using JSF Technologies (SL-340-EE6) – 3 Days Includes coverage of: Using JSF within a Web Container

92. Designing views using JSF, EL, and custom components using Facelets

93. Integrating external resources such as JPA within Web Applications

94. Testing, packaging and deploying applications and more Register your interest! https://dct.sun.com/dct/forms/reg_us_1611_480_0.jsp

95. Q&A

JSF 2.0 (JavaEE Webinar)

Recommended

More Related Content

What's hot (20)

Viewers also liked (7)

Similar to JSF 2.0 (JavaEE Webinar) (20)

JSF 2.0 (JavaEE Webinar)

Editor's Notes