Devoxx 09 (Belgium)

1,104 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,104
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
19
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Devoxx 09 (Belgium)

  1. 1. Enhancing The JavaServer Faces 2.0 Component Model Roger Kitain Staff Engineer/Sun Microosystens
  2. 2. We will explore the JSF 2.0 Component Model and learn how we can enhance components with JSF 2.0 features.
  3. 3. Agenda <ul><li>JSF 2.0 Component Model
  4. 4. Composite Components
  5. 5. Enhancing JSF 2.0 Components
  6. 6. Demos </li></ul>
  7. 7. Component Model
  8. 8. JSF 2.0 Component Model Why Do We Need It? <ul><li>With the 1.x component model – too many artifacts, hooks: </li><ul><li>Component class
  9. 9. Renderer
  10. 10. Tag class
  11. 11. Tld
  12. 12. faces-config.xml
  13. 13. ...... </li></ul></ul>
  14. 14. JSF 2.0 Component Model <ul><li>Facelets is the foundation </li><ul><li>Optimized for JSF
  15. 15. XHTML and tags
  16. 16. Eliminates translation/compilation
  17. 17. Templating </li></ul><li>Powerful tools: </li><ul><li>Templating
  18. 18. Composite Components </li></ul></ul>
  19. 19. JSF 2.0 Component Model <ul><li>Facelets 2.0 </li><ul><li>Contains most of the standard Facelets features
  20. 20. Enhanced to work with JSF 2.0 component building </li><ul><li>Easily attach listeners, validators, converters
  21. 21. Namespaces created “automagically” – no more taglibs </li></ul><li>Supports Composite Components
  22. 22. It's in the specification ! </li></ul></ul>
  23. 23. Composite Components
  24. 24. Composite Components <ul><li>Turns page markup into a JSF UI component with attached validators, converters, listeners
  25. 25. True abstraction: </li><ul><li>Reuseable component </li></ul></ul>
  26. 26. Composite Components Using Page (XHTML) <html … xlms:my=”http....”> <my:comp value=”yes” /> </html> Component (XHTML)
  27. 27. Composite Components <ul><li>Use naming conventions </li><ul><li>Resources Dir
  28. 28. Library name is directory name
  29. 29. Tag name is file name </li></ul></ul>
  30. 30. Composite Components <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 ”> On disk: <context root>/resources/ comp / out .xhtml < my : out value=”yes”/>
  31. 31. Composite Components What's Inside The Black Box? <ul><li>Interface </li></ul><ul><ul><li>The usage contract
  32. 32. Everything page author needs to know to use component </li></ul></ul><ul><li>Implementation </li><ul><li>Markup used to create component </li></ul></ul>
  33. 33. Composite Components <html... xmlns:ui=&quot;http://java.sun.com/jsf/facelets&quot; xmlns: cc =&quot;http://java.sun.com/jsf/composite&quot;> … <h:body> <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> .... </h:body> ... <context-root>resources/ezcomp/LoginPanel.xhtml
  34. 34. Composite Components <html... xmlns:ui=&quot;http://java.sun.com/jsf/facelets&quot; xmlns: cc =&quot;http://java.sun.com/jsf/composite&quot;> … <h:body> <cc:interface> <cc:attribute name=”userVal” required=”true” ”/> <cc:attribute name=”passValue” required=”true” /> <cc:actionSource name=&quot;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> .... </h:body> ... <context-root>resources/ezcomp/LoginPanel.xhtml
  35. 35. Composite Components “Using Page” <ul><html...xmlns:ui=&quot; http://java.sun.com/jsf/facelets &quot; </ul>xmlns :ez =&quot; http://java.sun.com/jsf/composite/ezcomp &quot;> … <h:form> <div id=&quot;compositeComponent&quot; class=&quot;grayBox&quot; style=&quot;border: 1px solid #090;&quot;> <ez:loginPanel > <f:actionListener for=”loginAction” binding=”#{bean.action}” /> </ez:loginPanel> </div> <p><h:commandButton value=&quot;reload&quot; /></p> </h:form>
  36. 36. Composite Components Relocatable Resources <ul><li>Resources that can be told where to render themselves
  37. 37. Rendered location may be different than the tag placement in the view
  38. 38. <cc:interface...> … </cc:interface> </li></ul><cc:implementation> <h:outputScript name=”script.js” library=”edit/script.js” target=”head”/> <h:outputStyleSheet name=”edit/styles.css”/> … </cc:implementation>
  39. 39. Composite Components Nested Components <cc:interface...> <cc:attribute name=”location” required=”true”/> </cc:interface> <cc:implementation> <place:map title=”Map”/> </cc:implementation> <cc:interface> < cc:attribute name=”title” /> </cc:interface> <cc:implementation> <h:outputText value= ”#{cc.attrs.title}” /> <h:outputText value= ”#{cc.parent.attrs.location}” /> </cc:implementation>
  40. 40. Enhancing JSF 2.0 Components
  41. 41. Enhancing JSF 2.0 Components <ul><li>Other prominent JSF 2.0 additions: </li><ul><li>Ajax
  42. 42. Behaviors </li></ul><li>Work well with composite components </li></ul>
  43. 43. Enhancing JSF 2.0 Components Ajax <ul><li>JavaScript api in the specification </li><ul><li>jsf.ajax.request .....
  44. 44. Useful for making JSF Ajax calls from JavaScript
  45. 45. Control component processing on the server and component rendering at the client </li></ul></ul>
  46. 46. Enhancing JSF 2.0 Components Ajax : Declarative Solution : <f:ajax /> <ul><li>Serves two roles depending on placement: </li><ul><li>Nested within single component </li><ul><li>“ ajaxifies” that component </li></ul><li>Wrapping approach – tag is placed around a group of components </li><ul><li>“ ajaxifies” all components that support the “events” attribute </li></ul></ul></ul>
  47. 47. Enhancing JSF 2.0 Components Ajax : Declarative Solution : Nested <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...> <h:commandButton...> <f:ajax event=”valueChange”/> <f:ajax event=”mouseover”/> </h:commandButton> </h:commandbutton> Error: valueChange is not a supported event for commandButton components! JavaScript events supported too.
  48. 48. 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 since there is no default event associated with it.
  49. 49. Enhancing JSF 2.0 Components Ajax : Declarative Solution : <f:ajax /> Combined <f:ajax event=”click”> <h:panelGrid id=”grid1”> <h:inputText id=”text1”/> <h:commandButton id=”button1”> <f:ajax event=”mouseover”/> </h:commandButton> </h:panelGrid> </f:ajax> Ajax applied to “grid1” and “text1” for “onlick” event. Ajax applied to “button1” for “mouseover” event as well.
  50. 50. Enhancing JSF 2.0 Components Adding Ajax <ul><li>Method 1: <f:ajax/> in composite component implementation </li></ul><cc:interface...> … </cc:interface> <cc:implementation...> … <h:commandButton id=”button1” value=”login”> <f:ajax /> </h:commandButton> … </cc:implementation>
  51. 51. Enhancing JSF 2.0 Components Adding Ajax <ul><li>Method 2: JSF Ajax api call in script </li></ul><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); Enhancing JSF 2.0 Components Adding Ajax
  52. 52. Enhancing JSF 2.0 Components Behaviors <ul><li>Additional functionality applied to components
  53. 53. Ajax is a behavior (AjaxBehavior)
  54. 54. Not just about Ajax </li></ul><ul><ul><li>Tool tips, client validation, … </li></ul></ul>
  55. 55. Enhancing JSF 2.0 Components Behaviors : Client Behavior(s) <ul><li>New type of attached object
  56. 56. Attached by “event”
  57. 57. Contributes script content for rendering </li><ul><li>AjaxBehavior is a Client Behavior that formulates the jsf.ajax.request script content for rendering </li></ul><li>All Html standard components implement ClientBehaviorHolder interface </li></ul>
  58. 58. Enhancing JSF 2.0 Components Adding Behaviors <ul><li>Similar to adding Ajax... </li></ul><cc:interface..>...</cc:interface> <cc:implementation> <h:graphicImage value...> <be:tip event=”mouseover”/> <be:tip event=”mouseout/> </h:graphicImage> be:tip is custom behavior
  59. 59. Summary <ul><li>JSF 1.x component development difficult
  60. 60. Facelets is the foundation for JSF 2.0 components
  61. 61. Most everything done in XHTML (Facelets) markup
  62. 62. Enhance components using JSF 2.0 features such as Ajax and Behaviors </li></ul>
  63. 63. DEMO <ul><li>What’s this demo about </li></ul>
  64. 64. Thanks for your attention! <ul><li>https://javaserverfaces.dev.java.net/
  65. 65. http://www.jsfcentral.com/
  66. 66. https://glassfish.dev.java.net/ </li></ul>

×