1. CSCI 6962: Server-side Design and Programming AJAX Tools in JSF and ASP

2. AJAX in JSF JavaScript automatically generated for AJAX calls Editable components can be “AJAX enabled” –Changes to component value directly change liked bean member variables without page submit –Equivalent to using request.send to send parameters Other components can be “re-rendered” with current bean values without page refresh –Equivalent to using request.responseText and JavaScript to change value

3. The <f:ajax Tag Placed inside component tag to AJAX enable:

4. <f:ajax Synatax Causes server-side AJAX call when occurs in browser Anything that has an onEvent in JavaScript –click : mouse clicked on component –focus : mouse enters component –blur : mouse clicked outside component –keydown : key pressed in text component –keyup : key released in text component –…–…

5. <f:ajax Render Defines which components update their corresponding member variables via AJAX –@this : Just this component (default) –@form : All components on same form (good for buttons) –@all : All components on page –@none Defines which components have their client-side value updated from bean –AJAX-enabled get called for linked member variable –Can be space-separated list of component ids

6. Simple Example Output field echoes greeting for name in input field when used clicks away

7. Simple Example Output field echoes greeting for name in input field when used clicks away Input field AJAX enabled Fires on blur event (when focus outside textfield) –Changes name property of bean Output field linked as render property –Gets greeting property of bean

8. Button Events Use @form scope to include all components Can use default click event

9. Validation AJAX renders <h:message tag for error message –Can be list of tags to validate multiple fields Can still define action for button –Redirected to that page if no errors –No redirection if any field invalid

10. Timer Events No built-in timers in JSF (yet) Must manually create JavaScript timer as before –“run” function called every second

11. Timer Events Hack: JavaScript function causes event on some JSF AJAX-enabled object –Refer to it using the id of the component and the form it is on –Call its default event (click for buttons)

12. Timer Events –Can make “invisible” by setting display style to “none –Give component and form id so JavaScript can access –Hidden component can render non-hidden fields

13. AJAX in ASP Done with controls in ASP –AJAX Extensions toolbox ScriptManager: Generates client-side scripts –Before other AJAX controls, one per page –Asynchronous server access UpdatePanel: Area on screen for AJAX controls –Events inside panel use AJAX instead of postback

14. AJAX in ASP Example: Asynchronous “greeting” label –Controls inside UpdatePanel

15. AJAX in ASP Code behind called without causing postback JavaScript functions automatically included

16. Validation and AJAX Put control and its validator inside UpdatePanel –Validation done client-side Must use Response.Redirect to transfer to next page –Since code being run on client, Server.Transfer will not work

17. Timer Events in ASP Timer: causes postbacks at regular intervals –Interval property: Number of ms between postbacks –Put inside UpdatePanel for asynchronous postbacks

18. Timer Events in AJAX _Tick event called in code behind