1. JavaServer Faces 2.0 andAjax Jim Driscoll [email_address]

2. Agenda

The basics

3. Ajax Tag 4. JavaScript API 5. Events 6. Components 7. Example 8. Future directions 9. Basics of Ajax

Asynchronous

10. JavaScript 11. And 12. XML 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

Request

17. Response JSF Lifecycle

Render

18. Execute 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

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:
Input:

32. Another tag example 33. Another tag example @ManagedBean(name="ajaxrequest") @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. 36. Source = id of emitting element 37. Event = dom event from element (optional) 38. Options - Object containing things like:

Render

39. Execute 40. Simple JavaScript Example 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:

serverError

51. httpError 52. malformedXMLError 53. emptyResponse 54. Sample: Event and Errorvar statusUpdate = function statusUpdate(data) { // statusArea is a textArea in the page var statusArea = document.getElementById("statusArea"); var text = statusArea.value; text = text + "Name: "+data.source.id; if (data.type === "event") { text = text +" Event: "+data.status+" "; } else {// otherwise, it's an error text = text + " Error: "+data.status+" "; } 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="switchlist") @SessionScoped public class SwitchlistBean implements Serializable { private Map items1 = new LinkedHashMap(); private Map items2 = new LinkedHashMap(); private String[] list1 = null; private String[] list2 = null; {items1.put("one", "one"); items1.put("two", "two"); items1.put("three", "three"); items1.put("four", "four");}// 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 quot;-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Switchlist ExampleSwitchlist Example 69. Switchlist in Page