JSF 2 and  Ajax
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

JSF 2 and Ajax

  • 9,429 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
9,429
On Slideshare
8,902
From Embeds
527
Number of Embeds
10

Actions

Shares
Downloads
448
Comments
0
Likes
2

Embeds 527

http://blog.eisele.net 452
http://www.slideshare.net 51
http://www.eisele.net 13
http://www.linkedin.com 3
http://translate.googleusercontent.com 3
http://polo.ceit.metu.edu.tr 1
http://www.google.com 1
http://redirectit.itelcel.com.zmeomzm.appspot.com 1
http://www.ctroller.com 1
https://www.google.se 1

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)
  • 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]