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...
Upcoming SlideShare
Loading in...5
×

JSF 2 and Ajax

6,021

Published on

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

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,021
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
449
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • Heading should be V3 Express? Change the dates and names
  • The JSF lifecycle, simplified
  • What is a switchlist? You&apos;ve seen it before... (read list above) As I mentioned, we&apos;ll put it in a page without any Ajax or making it a component, just to show we&apos;re not doing anything special. This is actually something you could do in 1.2, with only a few differences. First, let&apos;s describe the backing bean.
  • @ManagedBean annotation declares the bean. Name optional, will default to classname, with first letter in lower case. @SessionScoped declares the scope Can also use RequestScoped, ViewScoped, etc All overridable by faces-config.xml, but now that&apos;s mostly unnecessary. Defining data model here... getters and setters for two string arrays and two maps, with initialization.
  • Not much to see here, we&apos;re defining two action methods. Iterate through the selected items, move each selected item from one Map to the other.
  • How many folks here already know facelets? This is a Facelets page. It&apos;s XHTML We declare the JSF libraries we&apos;ll be using as namespaces, h and f respectively. We use h:head, h:body Output stylesheet puts the css file reference into the page – we&apos;ll come back to that.
  • SelectManyListBox – nothing special Uses list, which is String[] and items which is Map.
  • Two buttons in a panelGroup. Each button has an actionListener which calls the move method
  • Output stylesheet puts the css file reference into the page. It uses the resource facility, that&apos;s new in JSF2. (More on resources next page.)
  • Just so you can see what&apos;s going on here, this is the difference in appearance between the switchlist with and without the css and styling.
  • In case you&apos;re curious. Nothing special here. The only nifty bit is inline-block – it&apos;s how we get the buttons to stack vertically. So, I&apos;ve now described switchlist as fully functional in the page.
  • Because a full page refresh is certainly overkill for such a small change.
  • Embedded inside each command button tag, we place an f:ajax tag. Each tag has two attributes, execute and render. The value of each attribute is a space delimited list of ID&apos;s. You&apos;re also allowed a few special values, such as @this, which refers to the component that embeds the tag. If you leave off execute, it defaults to @this, and the default for render is @none The values are looked up relative to the holding container, just like UIComponent.findComponent(id)
  • &lt;slide&gt; Just to illustrate how this would work, let&apos;s go over this in a non-Ajax component
  • Heading should be V3 Express? Change the dates and names
  • 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]
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×