2. Agenda
3. Ajax Tag 4. JavaScript API 5. Events 6. Components 7. Example 8. Future directions 9. Basics of Ajax
10. JavaScript 11. And 12. XML 13. Basics of Ajax
Parsing response 14. DOM manipulation 15. but you don't need to know that for JSF 16. JSF and Ajax
17. Response JSF Lifecycle
18. Execute Components and EL 19. About Execute and Render
20. Execute is where:
21. Validation 22. Pushing the values into the backing beans 23. Execute any listener/controller logic Render is where:
24. Targets
25. prependId=false 26. findComponent() Keywords
27. Ajax Tag
28. Wrapped and wrapper 29. Attributes
execute
event
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
35. 36. Source = id of emitting element 37. Event = dom event from element (optional) 38. Options - Object containing things like:
39. Execute 40. Simple JavaScript Example 41. Client Events
42. jsf.ajax.request option onevent 43. jsf.ajax.addOnEvent function 44. Status:
45. Complete on finish 46. Success on successful finish 47. Errors a kind of event
48. jsf.ajax.request option onerror 49. jsf.ajax.addOnError function 50. Status:
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
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)
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
Top Related