JSF 2 and Ajax

  • 5,783 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,783
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
448
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • Heading should be V3 Express? Change the dates and names
  • The JSF lifecycle, simplified
  • What is a switchlist? You've seen it before... (read list above) As I mentioned, we'll put it in a page without any Ajax or making it a component, just to show we're not doing anything special. This is actually something you could do in 1.2, with only a few differences. First, let'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'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'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's XHTML We declare the JSF libraries we'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'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's new in JSF2. (More on resources next page.)
  • Just so you can see what's going on here, this is the difference in appearance between the switchlist with and without the css and styling.
  • In case you're curious. Nothing special here. The only nifty bit is inline-block – it's how we get the buttons to stack vertically. So, I'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's. You'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)
  • <slide> Just to illustrate how this would work, let's go over this in a non-Ajax component
  • Heading should be V3 Express? Change the dates and names

Transcript

  • 1. JavaServer Faces 2.0 and Ajax Jim Driscoll [email_address]
  • 2. Agenda
  • 9. Basics of Ajax
  • 13. Basics of Ajax
    • XMLHttpRequest
      • Async request
    • Parsing response
    • 14. DOM manipulation
    • 15. … but you don't need to know that for JSF
  • 16. JSF and Ajax
    • Http
    • JSF Lifecycle
    • Components and EL
  • 19. About Execute and Render
    • Simplified Lifecycle view
    • 20. Execute is where:
      • Get the new values from the page
      • 21. Validation
      • 22. Pushing the values into the backing beans
      • 23. Execute any listener/controller logic
    • Render is where:
      • The results are “drawn”, or rendered, to the browser
  • 24. Targets
    • Client Ids vs Component Ids
      • Tag vs JavaScript API
      • 25. prependId=false
      • 26. findComponent()
    • Keywords
      • @this, @none, @form, @all
  • 27. Ajax Tag
    • <f:ajax>
    • 28. Wrapped and wrapper
    • 29. Attributes
      • render
        • Default: @none
      • execute
        • Default: @this
      • event
        • Implicit: valueChange, action
        • 30. Explicit: click, change, keyup, etc.
  • 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. 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. 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. JavaScript API
    • jsf.ajax.request(source, event, options)
    • 35. <h:outputScript name=&quot;jsf.js&quot; library=&quot;javax.faces&quot; target=&quot;head&quot;/>
    • 36. Source = id of emitting element
    • 37. Event = dom event from element (optional)
    • 38. Options - Object containing things like:
  • 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. Client Events
    • f:ajax onevent attribute
    • 42. jsf.ajax.request option onevent
    • 43. jsf.ajax.addOnEvent function
    • 44. Status:
      • Begin – at start
      • 45. Complete – on finish
      • 46. Success – on successful finish
  • 47. Errors – a kind of event
    • f:ajax onerror attribute
    • 48. jsf.ajax.request option onerror
    • 49. jsf.ajax.addOnError function
    • 50. Status:
  • 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. Event/Error data payload
    • Type: event || error
    • 56. status
    • 57. source: id
    • 58. description (error only, freetext)
    • 59. responseCode, responseText, responseXML
    • 60. errorName, errorMessage (for server error)
  • 61. Example: Ajax Switchlist Show running Switchlist
  • 62. Switchlist (aka “Shuttle”)
    • Two lists, with controls to move values
    • 63. Need two lists, for selected values
    • 64. Need two maps, for list contents
    • 65. Need two Action methods to move values
  • 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. 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. 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. 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. 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. 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. With and without Styling
  • 73. Resources
    • h:outputStylesheet calls a resource
    • 74. Resources are placed in {context}/resources
    • 75. You can use resources for libraries, images, css, javascript and composite components
      • Lots of options, this is a simple case
    • So when you call
      • <h:outputStylesheet name=”switchlist.css”>
      • 76. It serves the file {context}/resources/switchlist.css
  • 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. Just one problem
    • As implemented, you're getting a full page refresh every time you click a button
    • 79. Let's fix that, by adding the <f:ajax> tag
  • 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. Ajax Comp Components
    • Two new features that work great together
    • 82. A few tricks to know:
      • Wrap with a <span id=&quot;#{cc.clientId}&quot;>
      • 83. Use a context object
      • 84. Namespacing
      • 85. Careful with render=false
  • 86. Saving Context
    • Eventually, you'll use JavaScript in a component
      • The ajax tag can only take you so far
    • When using an external JavaScript file, it's only served once . That means that including it in your a component gets harder.
      • How will you keep track of the clientid?
    • There's an easy solution, fortunately – keep track of the ID of your component inside the component itself, with context or state.
  • 87. EditText Example Demo of EditText
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. EditText JS - Initialization if (!window[&quot;edittextdemo&quot;]) { var edittextdemo = {}; } edittextdemo.init = function init(componentID, initialValue) { edittextdemo[componentID] = initialValue; };
  • 109. EditText JS - Initialization if (!window[&quot;edittextdemo&quot;]) { var edittextdemo = {}; } edittextdemo.init = function init(componentID, initialValue) { edittextdemo[componentID] = initialValue; };
  • 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. 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. 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. 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. 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. 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. EditText JS – Submit 1 edittextdemo.submitButton = function submitButton(componentID, event) { var edit1 = componentID + ':edit1'; var edit2 = componentID + ':edit2'; edittextdemo.toggle(edit1, edit2);
  • 117. EditText JS – Submit 1 edittextdemo.submitButton = function submitButton(componentID, event) { var edit1 = componentID + ':edit1'; var edit2 = componentID + ':edit2'; edittextdemo.toggle(edit1, edit2);
  • 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. 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. 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. Revisit: Ajax Comp Components
    • Wrap with a <span id=&quot;#{cc.clientId}&quot;>
    • 122. Use a context object
    • 123. Namespacing
    • 124. Careful with render=false
  • 125. Future JSF Ajax Plans (2.1)
    • Ajax functionality will be expanded
    • Comet
      • Almost certain, but currently unsure of what form it will take
  • 129. For more on JSF 2 & Ajax
    • Jim Driscoll's blog: http://weblogs.java.net/blog/driscoll/
    • 130. [email_address]
    • 131. Project Mojarra - http://mojarra.dev.java.net
    • 132. Project GlassFish - http://glassfish.dev.java.net
  • 133. JavaServer Faces 2.0 and Ajax Jim Driscoll [email_address]