Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
JavaServer Faces 2.0 and  Ajax Jim Driscoll [email_address]
Agenda <ul><li>The basics
Ajax Tag
JavaScript API
Events
Components
Example
Future directions </li></ul>
Basics of Ajax <ul><li>Asynchronous
JavaScript
And
XML </li></ul>
Basics of Ajax <ul><li>XMLHttpRequest </li><ul><li>Async request </li></ul><li>Parsing response
DOM manipulation
… but you don't need to know that for JSF </li></ul>
JSF and Ajax <ul><li>Http  </li><ul><li>Request
Response </li></ul><li>JSF Lifecycle </li><ul><li>Render
Execute </li></ul><li>Components and EL </li></ul>
About Execute and Render <ul><li>Simplified Lifecycle view
Execute is where: </li><ul><li>Get the new values from the page
Validation
Pushing the values into the backing beans
Execute any listener/controller logic </li></ul><li>Render is where: </li><ul><li>The results are “drawn”, or rendered, to...
Targets <ul><li>Client Ids vs Component Ids </li><ul><li>Tag vs JavaScript API
prependId=false
findComponent() </li></ul><li>Keywords </li><ul><li>@this, @none, @form, @all </li></ul></ul>
Ajax Tag <ul><li><f:ajax>
Wrapped and wrapper
Attributes </li><ul><li>render </li><ul><li>Default: @none </li></ul><li>execute </li><ul><li>Default: @this </li></ul><li...
Explicit: click, change, keyup, etc. </li></ul></ul></ul>
Simple Ajax Tag Example Output: <h:outputText id=&quot;out1&quot; value=&quot;#{echo.str}&quot;/> <br/> Input: <h:inputTex...
Another tag example <h:form id=&quot;countForm&quot;> <h:outputText id=&quot;out1&quot; value=&quot;#{ajaxrequest.count}&q...
Another tag example @ManagedBean(name=&quot;ajaxrequest&quot;) @ViewScoped public class AjaxRequestBean { private Integer ...
JavaScript API <ul><li>jsf.ajax.request(source, event, options)
<h:outputScript name=&quot;jsf.js&quot; library=&quot;javax.faces&quot; target=&quot;head&quot;/>
Source = id of emitting element
Event = dom event from element (optional)
Options - Object containing things like: </li><ul><li>Render
Execute </li></ul></ul>
Simple JavaScript Example <h:form id=&quot;form1&quot; prependId=&quot;false&quot;> <h:outputScript name=&quot;jsf.js&quot...
Client Events <ul><li>f:ajax onevent attribute
jsf.ajax.request option onevent
jsf.ajax.addOnEvent function
Status: </li><ul><li>Begin – at start
Complete – on finish
Success – on successful finish </li></ul></ul>
Errors – a kind of event <ul><li>f:ajax onerror attribute
jsf.ajax.request option onerror
jsf.ajax.addOnError function
Status: </li><ul><li>serverError
httpError
malformedXMLError
emptyResponse </li></ul></ul>
Sample: Event and Error  var statusUpdate = function statusUpdate(data) { // “statusArea” is a textArea in the page var st...
Event/Error data payload <ul><li>Type: event || error
status
source: id
description (error only, freetext)
responseCode, responseText, responseXML
errorName, errorMessage (for server error) </li></ul>
Example: Ajax Switchlist Show running Switchlist
Switchlist (aka “Shuttle”) <ul><li>Two lists, with controls to move values
Need two lists, for selected values
Need two maps, for list contents
Need two Action methods to move values </li></ul>
Switchlist Backing Bean @ManagedBean(name=&quot;switchlist&quot;) @SessionScoped public class SwitchlistBean implements Se...
Switchlist Backing Bean public void move1to2(ActionEvent ae) { if (list1 != null && list1.length > 0) { for (String item :...
Switchlist in Page <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xht...
Switchlist in Page <h:selectManyListbox value=&quot;#{switchlist.list1}&quot; styleClass=&quot;switchlist&quot;> <f:select...
Switchlist in Page <h:selectManyListbox value=&quot;#{switchlist.list1}&quot; styleClass=&quot;switchlist&quot;> <f:select...
Prochain SlideShare
Chargement dans…5
×

JSF 2 and Ajax

7 811 vues

Publié le

Presentation discussing the inclusion of Ajax in the new JSF 2 specification

Publié dans : Technologie
  • Soyez le premier à commenter

JSF 2 and Ajax

  1. 1. JavaServer Faces 2.0 and Ajax Jim Driscoll [email_address]
  2. 2. Agenda <ul><li>The basics
  3. 3. Ajax Tag
  4. 4. JavaScript API
  5. 5. Events
  6. 6. Components
  7. 7. Example
  8. 8. Future directions </li></ul>
  9. 9. Basics of Ajax <ul><li>Asynchronous
  10. 10. JavaScript
  11. 11. And
  12. 12. XML </li></ul>
  13. 13. Basics of Ajax <ul><li>XMLHttpRequest </li><ul><li>Async request </li></ul><li>Parsing response
  14. 14. DOM manipulation
  15. 15. … but you don't need to know that for JSF </li></ul>
  16. 16. JSF and Ajax <ul><li>Http </li><ul><li>Request
  17. 17. Response </li></ul><li>JSF Lifecycle </li><ul><li>Render
  18. 18. Execute </li></ul><li>Components and EL </li></ul>
  19. 19. About Execute and Render <ul><li>Simplified Lifecycle view
  20. 20. Execute is where: </li><ul><li>Get the new values from the page
  21. 21. Validation
  22. 22. Pushing the values into the backing beans
  23. 23. Execute any listener/controller logic </li></ul><li>Render is where: </li><ul><li>The results are “drawn”, or rendered, to the browser </li></ul></ul>
  24. 24. Targets <ul><li>Client Ids vs Component Ids </li><ul><li>Tag vs JavaScript API
  25. 25. prependId=false
  26. 26. findComponent() </li></ul><li>Keywords </li><ul><li>@this, @none, @form, @all </li></ul></ul>
  27. 27. Ajax Tag <ul><li><f:ajax>
  28. 28. Wrapped and wrapper
  29. 29. Attributes </li><ul><li>render </li><ul><li>Default: @none </li></ul><li>execute </li><ul><li>Default: @this </li></ul><li>event </li><ul><li>Implicit: valueChange, action
  30. 30. Explicit: click, change, keyup, etc. </li></ul></ul></ul>
  31. 31. Simple Ajax Tag Example Output: <h:outputText id=&quot;out1&quot; value=&quot;#{echo.str}&quot;/> <br/> Input: <h:inputText id=&quot;in1&quot; value=&quot;#{echo.str}&quot;> <f:ajax render=&quot;out1&quot;/> </h:inputText> <br/> <!-- A no-op button, just to lose the focus --> <h:commandButton id=&quot;button1&quot; value=&quot;Echo&quot; type=&quot;button&quot;/> <br/>
  32. 32. Another tag example <h:form id=&quot;countForm&quot;> <h:outputText id=&quot;out1&quot; value=&quot;#{ajaxrequest.count}&quot;/> <h:commandButton id=&quot;button1&quot; value=&quot;Count&quot;> <f:ajax render=&quot;countForm:out1&quot;/> </h:commandButton> <h:commandButton id=&quot;reset&quot; value=&quot;reset&quot; actionListener=&quot;#{ajaxrequest.resetCount}&quot; > <f:ajax render=&quot;countForm:out1&quot;/> </h:commandButton> </h:form> <h:outputText id=&quot;out2&quot; value=&quot;#{ajaxrequest.count}&quot;/>
  33. 33. Another tag example @ManagedBean(name=&quot;ajaxrequest&quot;) @ViewScoped public class AjaxRequestBean { private Integer count = 0; public Integer getCount() { return count++; } public void resetCount(ActionEvent ae) { count = 0; } }
  34. 34. JavaScript API <ul><li>jsf.ajax.request(source, event, options)
  35. 35. <h:outputScript name=&quot;jsf.js&quot; library=&quot;javax.faces&quot; target=&quot;head&quot;/>
  36. 36. Source = id of emitting element
  37. 37. Event = dom event from element (optional)
  38. 38. Options - Object containing things like: </li><ul><li>Render
  39. 39. Execute </li></ul></ul>
  40. 40. Simple JavaScript Example <h:form id=&quot;form1&quot; prependId=&quot;false&quot;> <h:outputScript name=&quot;jsf.js&quot; library=&quot;javax.faces&quot; target=&quot;head&quot;/> <h:outputText id=&quot;out1&quot; value=&quot;#{count.count}&quot;/> <h:commandButton id=&quot;button1&quot; value=&quot;Count&quot; onclick=&quot; jsf.ajax.request(this, event, {execute: this.id, render: 'out1'}); return false; &quot;/>
  41. 41. Client Events <ul><li>f:ajax onevent attribute
  42. 42. jsf.ajax.request option onevent
  43. 43. jsf.ajax.addOnEvent function
  44. 44. Status: </li><ul><li>Begin – at start
  45. 45. Complete – on finish
  46. 46. Success – on successful finish </li></ul></ul>
  47. 47. Errors – a kind of event <ul><li>f:ajax onerror attribute
  48. 48. jsf.ajax.request option onerror
  49. 49. jsf.ajax.addOnError function
  50. 50. Status: </li><ul><li>serverError
  51. 51. httpError
  52. 52. malformedXMLError
  53. 53. emptyResponse </li></ul></ul>
  54. 54. Sample: Event and Error var statusUpdate = function statusUpdate(data) { // “statusArea” is a textArea in the page var statusArea = document.getElementById(&quot;statusArea&quot;); var text = statusArea.value; text = text + &quot;Name: &quot;+data.source.id; if (data.type === &quot;event&quot;) { text = text +&quot; Event: &quot;+data.status+&quot; &quot;; } else { // otherwise, it's an error text = text + &quot; Error: &quot;+data.status+&quot; &quot;; } statusArea.value = text; }; // Setup the statusUpdate function to // hear all events on the page jsf.ajax.addOnEvent(statusUpdate); jsf.ajax.addOnError(statusUpdate);
  55. 55. Event/Error data payload <ul><li>Type: event || error
  56. 56. status
  57. 57. source: id
  58. 58. description (error only, freetext)
  59. 59. responseCode, responseText, responseXML
  60. 60. errorName, errorMessage (for server error) </li></ul>
  61. 61. Example: Ajax Switchlist Show running Switchlist
  62. 62. Switchlist (aka “Shuttle”) <ul><li>Two lists, with controls to move values
  63. 63. Need two lists, for selected values
  64. 64. Need two maps, for list contents
  65. 65. Need two Action methods to move values </li></ul>
  66. 66. Switchlist Backing Bean @ManagedBean(name=&quot;switchlist&quot;) @SessionScoped public class SwitchlistBean implements Serializable { private Map<String, String> items1 = new LinkedHashMap<String, String>(); private Map<String, String> items2 = new LinkedHashMap<String, String>(); private String[] list1 = null; private String[] list2 = null; { items1.put(&quot;one&quot;, &quot;one&quot;); items1.put(&quot;two&quot;, &quot;two&quot;); items1.put(&quot;three&quot;, &quot;three&quot;); items1.put(&quot;four&quot;, &quot;four&quot;); } // and the same for items2 Plus associated Getters and Setters...
  67. 67. Switchlist Backing Bean public void move1to2(ActionEvent ae) { if (list1 != null && list1.length > 0) { for (String item : list1 ) { items2.put(item, items1.remove(item)); } } } public void move2to1(ActionEvent ae) { if (list2 != null && list2.length > 0) { for (String item : list2 ) { items1.put(item, items2.remove(item)); } } }
  68. 68. Switchlist in Page <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xmlns:h=&quot;http://java.sun.com/jsf/html&quot; xmlns:f=&quot;http://java.sun.com/jsf/core&quot;> <h:head> <title>Switchlist Example</title> </h:head> <h:body> <h1>Switchlist Example</h1> <h:form id=&quot;form1&quot;> <h:outputStylesheet name=&quot;switchlist.css&quot;/>
  69. 69. Switchlist in Page <h:selectManyListbox value=&quot;#{switchlist.list1}&quot; styleClass=&quot;switchlist&quot;> <f:selectItems value=&quot;#{switchlist.items1}&quot;/> </h:selectManyListbox> <h:panelGroup id=&quot;buttonGroup&quot; styleClass=&quot;switchlistButtons&quot;> <h:commandButton value=&quot;&gt;&gt;&quot; actionListener=&quot;#{switchlist.move1to2}&quot; styleClass=&quot;switchlistButton&quot; /> <h:commandButton value=&quot;&lt;&lt;&quot; actionListener=&quot;#{switchlist.move2to1}&quot; styleClass=&quot;switchlistButton&quot; /> </h:panelGroup> <h:selectManyListbox value=&quot;#{switchlist.list2}&quot; styleClass=&quot;switchlist&quot;> <f:selectItems value=&quot;#{switchlist.items2}&quot;/> </h:selectManyListbox> </h:form> </h:body> </html>
  70. 70. Switchlist in Page <h:selectManyListbox value=&quot;#{switchlist.list1}&quot; styleClass=&quot;switchlist&quot;> <f:selectItems value=&quot;#{switchlist.items1}&quot;/> </h:selectManyListbox> <h:panelGroup id=&quot;buttonGroup&quot; styleClass=&quot;switchlistButtons&quot;> <h:commandButton value=&quot;&gt;&gt;&quot; actionListener=&quot;#{switchlist.move1to2}&quot; styleClass=&quot;switchlistButton&quot; /> <h:commandButton value=&quot;&lt;&lt;&quot; actionListener=&quot;#{switchlist.move2to1}&quot; styleClass=&quot;switchlistButton&quot; /> </h:panelGroup> <h:selectManyListbox value=&quot;#{switchlist.list2}&quot; styleClass=&quot;switchlist&quot;> <f:selectItems value=&quot;#{switchlist.items2}&quot;/> </h:selectManyListbox> </h:form> </h:body> </html>
  71. 71. Backtracking a bit - Switchlist in Page <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xmlns:h=&quot;http://java.sun.com/jsf/html&quot; xmlns:f=&quot;http://java.sun.com/jsf/core&quot;> <h:head> <title>Switchlist Example</title> </h:head> <h:body> <h1>Switchlist Example</h1> <h:form id=&quot;form1&quot;> <h:outputStylesheet name=&quot;switchlist.css&quot;/>
  72. 72. With and without Styling
  73. 73. Resources <ul><li>h:outputStylesheet calls a resource
  74. 74. Resources are placed in {context}/resources
  75. 75. You can use resources for libraries, images, css, javascript and composite components </li><ul><li>Lots of options, this is a simple case </li></ul><li>So when you call </li><ul><li><h:outputStylesheet name=”switchlist.css”>
  76. 76. It serves the file {context}/resources/switchlist.css </li></ul></ul>
  77. 77. resources/switchlist.css .switchlist { font-size: medium; font-family: Arial, sans-serif; height: 150px; width: 100px; } .switchlistButtons { width: 55px; display: inline-block; margin-top: 50px; vertical-align: top; } .switchlistButton { width: 50px; height: 25px; }
  78. 78. Just one problem <ul><li>As implemented, you're getting a full page refresh every time you click a button
  79. 79. Let's fix that, by adding the <f:ajax> tag </li></ul>
  80. 80. Adding the Ajax tag <h:panelGroup id=&quot;buttonGroup&quot;> <h:commandButton id=&quot;button1&quot; value=&quot;&gt;&gt;&quot; actionListener=&quot;#{listholder.move1to2}&quot;> <f:ajax execute=&quot;@this list1&quot; render=&quot;list1 list2&quot;/> </h:commandButton> <h:commandButton id=&quot;button2&quot; value=&quot;&lt;&lt;&quot; actionListener=&quot;#{listholder.move2to1}&quot; > <f:ajax execute=&quot;@this list2&quot; render=&quot;list1 list2&quot;/> </h:commandButton> </h:panelGroup>
  81. 81. Ajax Comp Components <ul><li>Two new features that work great together
  82. 82. A few tricks to know: </li><ul><li>Wrap with a <span id=&quot;#{cc.clientId}&quot;>
  83. 83. Use a context object
  84. 84. Namespacing
  85. 85. Careful with render=false </li></ul></ul>
  86. 86. Saving Context <ul><li>Eventually, you'll use JavaScript in a component </li><ul><li>The ajax tag can only take you so far </li></ul><li>When using an external JavaScript file, it's only served once . That means that including it in your a component gets harder. </li><ul><li>How will you keep track of the clientid? </li></ul><li>There's an easy solution, fortunately – keep track of the ID of your component inside the component itself, with context or state. </li></ul>
  87. 87. EditText Example Demo of EditText
  88. 88. EditText using page <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xmlns:h=&quot;http://java.sun.com/jsf/html&quot; xmlns:ez=&quot;http://java.sun.com/jsf/composite/editText&quot; > <h:head> <title>Editable Text Example</title> </h:head> <h:body> <h1>Editable Text Example</h1> <h:form id=&quot;form1&quot;> <ez:editText id=&quot;editText1&quot; value=&quot;#{stringholder.str}&quot;/>
  89. 89. EditText using page <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xmlns:h=&quot;http://java.sun.com/jsf/html&quot; xmlns:ez=&quot;http://java.sun.com/jsf/composite/editText&quot; > <h:head> <title>Editable Text Example</title> </h:head> <h:body> <h1>Editable Text Example</h1> <h:form id=&quot;form1&quot;> <ez:editText id=&quot;editText1&quot; value=&quot;#{stringholder.str}&quot;/>
  90. 90. EditText using page <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xmlns:h=&quot;http://java.sun.com/jsf/html&quot; xmlns:ez=&quot;http://java.sun.com/jsf/composite/editText&quot; > <h:head> <title>Editable Text Example</title> </h:head> <h:body> <h1>Editable Text Example</h1> <h:form id=&quot;form1&quot;> <ez:editText id=&quot;editText1&quot; value=&quot;#{stringholder.str}&quot;/>
  91. 91. EditText Interface <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xmlns:h=&quot;http://java.sun.com/jsf/html&quot; xmlns:f=&quot;http://java.sun.com/jsf/core&quot; xmlns:composite=&quot;http://java.sun.com/jsf/composite&quot;> <composite:interface> <composite:attribute name=&quot;value&quot; required=&quot;true&quot;/> </composite:interface>
  92. 92. EditText Interface <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xmlns:h=&quot;http://java.sun.com/jsf/html&quot; xmlns:f=&quot;http://java.sun.com/jsf/core&quot; xmlns:composite=&quot;http://java.sun.com/jsf/composite&quot;> <composite:interface> <composite:attribute name=&quot;value&quot; required=&quot;true&quot;/> </composite:interface>
  93. 93. EditText Implementation <composite:implementation> <h:outputScript name=&quot;jsf.js&quot; library=&quot;javax.faces&quot; target=&quot;head&quot;/> <h:outputScript name=&quot;editText/editText.js&quot; target=&quot;head&quot; /> <script type=&quot;text/javascript&quot;> edittextdemo.init(&quot;#{cc.clientId}&quot;, &quot;#{cc.attrs.value}&quot;); </script> <h:outputStylesheet name=&quot;editText/styles.css&quot;/> <span id=&quot;#{cc.clientId}&quot;>
  94. 94. EditText Implementation <composite:implementation> <h:outputScript name=&quot;jsf.js&quot; library=&quot;javax.faces&quot; target=&quot;head&quot;/> <h:outputScript name=&quot;editText/editText.js&quot; target=&quot;head&quot; /> <script type=&quot;text/javascript&quot;> edittextdemo.init(&quot;#{cc.clientId}&quot;, &quot;#{cc.attrs.value}&quot;); </script> <h:outputStylesheet name=&quot;editText/styles.css&quot;/> <span id=&quot;#{cc.clientId}&quot;>
  95. 95. EditText Implementation <composite:implementation> <h:outputScript name=&quot;jsf.js&quot; library=&quot;javax.faces&quot; target=&quot;head&quot;/> <h:outputScript name=&quot;editText/editText.js&quot; target=&quot;head&quot; /> <script type=&quot;text/javascript&quot;> edittextdemo.init(&quot;#{cc.clientId}&quot;, &quot;#{cc.attrs.value}&quot;); </script> <h:outputStylesheet name=&quot;editText/styles.css&quot;/> <span id=&quot;#{cc.clientId}&quot;>
  96. 96. EditText Implementation <composite:implementation> <h:outputScript name=&quot;jsf.js&quot; library=&quot;javax.faces&quot; target=&quot;head&quot;/> <h:outputScript name=&quot;editText/editText.js&quot; target=&quot;head&quot; /> <script type=&quot;text/javascript&quot;> edittextdemo.init(&quot;#{cc.clientId}&quot;, &quot;#{cc.attrs.value}&quot;); </script> <h:outputStylesheet name=&quot;editText/styles.css&quot;/> <span id=&quot;#{cc.clientId}&quot;>
  97. 97. EditText Implementation <composite:implementation> <h:outputScript name=&quot;jsf.js&quot; library=&quot;javax.faces&quot; target=&quot;head&quot;/> <h:outputScript name=&quot;editText/editText.js&quot; target=&quot;head&quot; /> <script type=&quot;text/javascript&quot;> edittextdemo.init(&quot;#{cc.clientId}&quot;, &quot;#{cc.attrs.value}&quot;); </script> <h:outputStylesheet name=&quot;editText/styles.css&quot;/> <span id=&quot;#{cc.clientId}&quot;>
  98. 98. EditText Implementation <composite:implementation> <h:outputScript name=&quot;jsf.js&quot; library=&quot;javax.faces&quot; target=&quot;head&quot;/> <h:outputScript name=&quot;editText/editText.js&quot; target=&quot;head&quot; /> <script type=&quot;text/javascript&quot;> edittextdemo.init(&quot;#{cc.clientId}&quot;, &quot;#{cc.attrs.value}&quot;); </script> <h:outputStylesheet name=&quot;editText/styles.css&quot;/> <span id=&quot;#{cc.clientId}&quot;>
  99. 99. EditText Impl – Panel 1 <h:panelGroup id=&quot;edit1&quot;> <h:outputLink id=&quot;editLink&quot; title=&quot;Click to edit&quot; styleClass=&quot;editLink&quot; onclick=&quot;return edittextdemo.linkClick('#{cc.clientId}');&quot;> #{cc.attrs.value}</h:outputLink> </h:panelGroup>
  100. 100. EditText Impl – Panel 1 <h:panelGroup id=&quot;edit1&quot;> <h:outputLink id=&quot;editLink&quot; title=&quot;Click to edit&quot; styleClass=&quot;editLink&quot; onclick=&quot;return edittextdemo.linkClick('#{cc.clientId}');&quot;> #{cc.attrs.value}</h:outputLink> </h:panelGroup>
  101. 101. EditText Impl – Panel 1 <h:panelGroup id=&quot;edit1&quot;> <h:outputLink id=&quot;editLink&quot; title=&quot;Click to edit&quot; styleClass=&quot;editLink&quot; onclick=&quot;return edittextdemo.linkClick('#{cc.clientId}');&quot; > #{cc.attrs.value}</h:outputLink> </h:panelGroup>
  102. 102. EditText Impl – Panel 1 <h:panelGroup id=&quot;edit1&quot;> <h:outputLink id=&quot;editLink&quot; title=&quot;Click to edit&quot; styleClass=&quot;editLink&quot; onclick=&quot;return edittextdemo.linkClick('#{cc.clientId}');&quot;> #{cc.attrs.value} </h:outputLink> </h:panelGroup>
  103. 103. EditLink css .editLink { font-size: medium; font-style: normal; font-family: Arial, sans-serif; } a.editLink:link {text-decoration: none} a.editLink:visited {text-decoration: none} a.editLink:active {text-decoration: none} a.editLink:hover {text-decoration: none; background-color: #eeee11;}
  104. 104. EditLink css .editLink { font-size: medium; font-style: normal; font-family: Arial, sans-serif; } a.editLink:link {text-decoration: none} a.editLink:visited {text-decoration: none} a.editLink:active {text-decoration: none} a.editLink:hover {text-decoration: none; background-color: #eeee11;}
  105. 105. EditText Impl – Panel 2 <h:panelGroup id=&quot;edit2&quot; style=&quot;display:none;&quot; > <h:inputText id=&quot;editInput&quot; value=&quot;#{cc.attrs.value}&quot; styleClass=&quot;editInput&quot;/> <h:commandButton value=&quot;Submit&quot; id=&quot;submit&quot; onclick=&quot;return edittextdemo.submitButton('#{cc.clientId}', event);&quot;/> <h:commandButton value=&quot;Cancel&quot; id=&quot;cancel&quot; onclick=&quot;return edittextdemo.cancelButton('#{cc.clientId}');&quot;/> </h:panelGroup>
  106. 106. EditText Impl – Panel 2 <h:panelGroup id=&quot;edit2&quot; style=&quot;display:none;&quot;> <h:inputText id=&quot;editInput&quot; value=&quot;#{cc.attrs.value}&quot; styleClass=&quot;editInput&quot;/> <h:commandButton value=&quot;Submit&quot; id=&quot;submit&quot; onclick=&quot;return edittextdemo.submitButton('#{cc.clientId}', event);&quot;/> <h:commandButton value=&quot;Cancel&quot; id=&quot;cancel&quot; onclick=&quot;return edittextdemo.cancelButton('#{cc.clientId}');&quot;/> </h:panelGroup>
  107. 107. EditText Impl – Panel 2 <h:panelGroup id=&quot;edit2&quot; style=&quot;display:none;&quot;> <h:inputText id=&quot;editInput&quot; value=&quot;#{cc.attrs.value}&quot; styleClass=&quot;editInput&quot;/> <h:commandButton value=&quot;Submit&quot; id=&quot;submit&quot; onclick=&quot; return edittextdemo.submitButton('#{cc.clientId}', event); &quot;/> <h:commandButton value=&quot;Cancel&quot; id=&quot;cancel&quot; onclick=&quot;return edittextdemo.cancelButton('#{cc.clientId}');&quot;/> </h:panelGroup>
  108. 108. EditText JS - Initialization if (!window[&quot;edittextdemo&quot;]) { var edittextdemo = {}; } edittextdemo.init = function init(componentID, initialValue) { edittextdemo[componentID] = initialValue; };
  109. 109. EditText JS - Initialization if (!window[&quot;edittextdemo&quot;]) { var edittextdemo = {}; } edittextdemo.init = function init(componentID, initialValue) { edittextdemo[componentID] = initialValue; };
  110. 110. EditText JS – Toggle edittextdemo.toggle = function toggle(idOn, idOff) { var elementon = document.getElementById(idOn); var elementoff = document.getElementById(idOff); elementon.style.display = &quot;inline&quot;; elementoff.style.display = &quot;none&quot;; };
  111. 111. EditText JS – Toggle edittextdemo.toggle = function toggle(idOn, idOff) { var elementon = document.getElementById(idOn); var elementoff = document.getElementById(idOff); elementon.style.display = &quot;inline&quot;; elementoff.style.display = &quot;none&quot;; };
  112. 112. EditText JS – Link Click edittextdemo.linkClick = function linkClick(componentID) { var edit1 = componentID + ':edit1'; var edit2 = componentID + ':edit2'; var editInput = componentID + ':editInput'; edittextdemo.toggle(edit2, edit1); document.getElementById(editInput).focus(); return false; };
  113. 113. EditText JS – Link Click edittextdemo.linkClick = function linkClick(componentID) { var edit1 = componentID + ':edit1'; var edit2 = componentID + ':edit2'; var editInput = componentID + ':editInput'; edittextdemo.toggle(edit2, edit1); document.getElementById(editInput).focus(); return false; };
  114. 114. EditText JS – Link Click edittextdemo.linkClick = function linkClick(componentID) { var edit1 = componentID + ':edit1'; var edit2 = componentID + ':edit2'; var editInput = componentID + ':editInput'; edittextdemo.toggle(edit2, edit1); document.getElementById(editInput).focus(); return false; };
  115. 115. EditText JS – Link Click edittextdemo.linkClick = function linkClick(componentID) { var edit1 = componentID + ':edit1'; var edit2 = componentID + ':edit2'; var editInput = componentID + ':editInput'; edittextdemo.toggle(edit2, edit1); document.getElementById(editInput).focus(); return false; };
  116. 116. EditText JS – Submit 1 edittextdemo.submitButton = function submitButton(componentID, event) { var edit1 = componentID + ':edit1'; var edit2 = componentID + ':edit2'; edittextdemo.toggle(edit1, edit2);
  117. 117. EditText JS – Submit 1 edittextdemo.submitButton = function submitButton(componentID, event) { var edit1 = componentID + ':edit1'; var edit2 = componentID + ':edit2'; edittextdemo.toggle(edit1, edit2);
  118. 118. EditText JS – Submit 2 var link = componentID + ':editLink'; var input = componentID + ':editInput'; var subButton = componentID + ':submit'; var exec = subButton + ' ' + input; var rend = input + ' ' + link; jsf.ajax.request( document.getElementById(subButton), event, {execute: exec, render: rend}); edittextdemo[componentID] = document.getElementById(input).value; return false; };
  119. 119. EditText JS – Submit 2 var link = componentID + ':editLink'; var input = componentID + ':editInput'; var subButton = componentID + ':submit'; var exec = subButton + ' ' + input; var rend = input + ' ' + link; jsf.ajax.request( document.getElementById(subButton), event, {execute: exec, render: rend}); edittextdemo[componentID] = document.getElementById(input).value; return false; };
  120. 120. EditText JS – Submit 2 var link = componentID + ':editLink'; var input = componentID + ':editInput'; var subButton = componentID + ':submit'; var exec = subButton + ' ' + input; var rend = input + ' ' + link; jsf.ajax.request( document.getElementById(subButton), event, {execute: exec, render: rend}); edittextdemo[componentID] = document.getElementById(input).value; return false; };
  121. 121. Revisit: Ajax Comp Components <ul><li>Wrap with a <span id=&quot;#{cc.clientId}&quot;>
  122. 122. Use a context object
  123. 123. Namespacing
  124. 124. Careful with render=false </li></ul>
  125. 125. Future JSF Ajax Plans (2.1) <ul><li>Ajax functionality will be expanded </li><ul><li>Queues?
  126. 126. Autoupdate?
  127. 127. Arbitrary Actions?
  128. 128. Driven by user requests </li></ul><li>Comet </li><ul><li>Almost certain, but currently unsure of what form it will take </li></ul></ul>
  129. 129. For more on JSF 2 & Ajax <ul><li>Jim Driscoll's blog: http://weblogs.java.net/blog/driscoll/
  130. 130. [email_address]
  131. 131. Project Mojarra - http://mojarra.dev.java.net
  132. 132. Project GlassFish - http://glassfish.dev.java.net </li></ul>
  133. 133. JavaServer Faces 2.0 and Ajax Jim Driscoll [email_address]

×