Devoxx 09 (Belgium)

Embed Size (px)

Citation preview

  • 1. Enhancing The JavaServer Faces 2.0 Component Model Roger Kitain Staff Engineer/Sun Microosystens

2. We will explore the JSF 2.0 ComponentModel and learn how we can enhancecomponents with JSF 2.0 features. 3. Agenda

  • JSF 2.0 Component Model 4. Composite Components 5. Enhancing JSF 2.0 Components 6. Demos

7. Component Model 8. JSF 2.0 Component Model Why Do We Need It?

  • With the 1.x component model too many artifacts, hooks:
    • Component class 9. Renderer 10. Tag class 11. Tld 12. faces-config.xml 13. ......

14. JSF 2.0 Component Model

  • Facelets is the foundation
    • Optimized for JSF 15. XHTML and tags 16. Eliminates translation/compilation 17. Templating
  • Powerful tools:
    • Templating 18. Composite Components

19. JSF 2.0 Component Model

  • Facelets 2.0
    • Contains most of the standard Facelets features 20. Enhanced to work with JSF 2.0 component building
      • Easily attach listeners, validators, converters 21. Namespaces created automagically no more taglibs
    • Supports Composite Components 22. It's in the specification !

23. Composite Components 24. Composite Components

  • Turns page markup into a JSF UI component with attached validators, converters, listeners 25. True abstraction:
    • Reuseable component

26. Composite Components Using Page (XHTML) Component (XHTML) 27. Composite Components

  • Use naming conventions
    • Resources Dir 28. Library name is directory name 29. Tag name is file name

30. Composite Components On disk: /resources/ comp / out .xhtml < my : outvalue=yes/> 31. Composite Components What's Inside The Black Box?

  • Interface
    • The usage contract 32. Everything page author needs to know to use component
  • Implementation
    • Markup used to create component

33. Composite Components

Username:
Password:

.... ... resources/ezcomp/LoginPanel.xhtml 34. Composite Components

Username:
Password:

.... ... resources/ezcomp/LoginPanel.xhtml 35. Composite Components Using Page

  • 36. Composite Components Relocatable Resources
    • Resources that can be told where to render themselves 37. Rendered location may be different than the tag placement in the view 38.

    39. Composite Components Nested Components < cc:attribute name=title /> 40. Enhancing JSF 2.0Components 41. Enhancing JSF 2.0Components

    • Other prominent JSF 2.0 additions:
      • Ajax 42. Behaviors
    • Work well with composite components

    43. Enhancing JSF 2.0Components Ajax

    • JavaScript api in the specification
      • jsf.ajax.request ..... 44. Useful for making JSF Ajax calls from JavaScript 45. Control component processing on the server and component rendering at the client

    46. Enhancing JSF 2.0Components Ajax : Declarative Solution :

    • 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

    47. Enhancing JSF 2.0Components Ajax : Declarative Solution : Nested Do exactly the same thing since action is the default event for commandButton components. Error: valueChange is not a supported event for commandButton components! JavaScript events supported too. 48. Enhancing JSF 2.0Components Ajax : Declarative Solution : Regions Ajax applied to text1 and button1. Ajax not applied to panelGrid since there is no default event associated with it. 49. Enhancing JSF 2.0Components Ajax : Declarative Solution : Combined Ajax applied to grid1 and text1 for onlick event. Ajax applied to button1 for mouseover event as well. 50. Enhancing JSF 2.0Components Adding Ajax

    • Method 1: in composite component implementation

    51. Enhancing JSF 2.0Components Adding Ajax

    • Method 2: JSF Ajax api call in script

    script.js: myscript.login=function login( componentId , event) { jsf.ajax.request (document.getElementById(subButton), event); Enhancing JSF 2.0Components Adding Ajax 52. Enhancing JSF 2.0Components Behaviors

    • Additional functionality applied to components 53. Ajax is a behavior (AjaxBehavior) 54. Not just about Ajax
      • Tool tips, client validation,

    55. Enhancing JSF 2.0Components Behaviors : Client Behavior(s)

    • New type of attached object 56. Attached by event 57. 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

    58. Enhancing JSF 2.0Components Adding Behaviors

    • Similar to adding Ajax...

    ... be:tip is custom behavior 59. Summary

    • JSF 1.x component development difficult 60. Facelets is the foundation for JSF 2.0 components 61. Most everything done in XHTML (Facelets) markup 62. Enhance components using JSF 2.0 features such as Ajax and Behaviors

    63. DEMO

    • Whats this demo about

    64. Thanks for your attention!

    • https://javaserverfaces.dev.java.net/ 65. http://www.jsfcentral.com/ 66. https://glassfish.dev.java.net/