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

1. JavaServer Faces 2.0 and Ajax Jim Driscoll [email_address]

3. Ajax Tag

4. JavaScript API

5. Events

6. Components

7. Example

8. Future directions

10. JavaScript

11. And

12. XML

14. DOM manipulation

15. … but you don't need to know that for JSF

21. Validation

22. Pushing the values into the backing beans

25. prependId=false

28. Wrapped and wrapper

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; } }

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)

39. Execute

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;/>

42. jsf.ajax.request option onevent

43. jsf.ajax.addOnEvent function

45. Complete – on finish

46. Success – on successful finish

48. jsf.ajax.request option onerror

49. jsf.ajax.addOnError function

51. httpError

52. malformedXMLError

53. emptyResponse

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);

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

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

74. Resources are placed in {context}/resources

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; }

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>

83. Use a context object

84. Namespacing

85. Careful with render=false

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; };

122. Use a context object

123. Namespacing

124. Careful with render=false

126. Autoupdate?

127. Arbitrary Actions?

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]