csci 6962: server-side design and programming ajax tools in jsf and asp
TRANSCRIPT
![Page 1: CSCI 6962: Server-side Design and Programming AJAX Tools in JSF and ASP](https://reader030.vdocument.in/reader030/viewer/2022033101/56649ec15503460f94bcccaa/html5/thumbnails/1.jpg)
CSCI 6962: Server-side Design and Programming
AJAX Tools in JSF and ASP
![Page 2: CSCI 6962: Server-side Design and Programming AJAX Tools in JSF and ASP](https://reader030.vdocument.in/reader030/viewer/2022033101/56649ec15503460f94bcccaa/html5/thumbnails/2.jpg)
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
![Page 3: CSCI 6962: Server-side Design and Programming AJAX Tools in JSF and ASP](https://reader030.vdocument.in/reader030/viewer/2022033101/56649ec15503460f94bcccaa/html5/thumbnails/3.jpg)
The <f:ajax Tag
• Placed inside component tag to AJAX enable:
<h:component…> <f:ajax event=“component event” execute=“scope of ajax” render=“component list”/></h:component>
![Page 4: CSCI 6962: Server-side Design and Programming AJAX Tools in JSF and ASP](https://reader030.vdocument.in/reader030/viewer/2022033101/56649ec15503460f94bcccaa/html5/thumbnails/4.jpg)
<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– …
![Page 5: CSCI 6962: Server-side Design and Programming AJAX Tools in JSF and ASP](https://reader030.vdocument.in/reader030/viewer/2022033101/56649ec15503460f94bcccaa/html5/thumbnails/5.jpg)
<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
![Page 6: CSCI 6962: Server-side Design and Programming AJAX Tools in JSF and ASP](https://reader030.vdocument.in/reader030/viewer/2022033101/56649ec15503460f94bcccaa/html5/thumbnails/6.jpg)
Simple Example• Output field echoes greeting for name in input field when
used clicks away
![Page 7: CSCI 6962: Server-side Design and Programming AJAX Tools in JSF and ASP](https://reader030.vdocument.in/reader030/viewer/2022033101/56649ec15503460f94bcccaa/html5/thumbnails/7.jpg)
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
![Page 8: CSCI 6962: Server-side Design and Programming AJAX Tools in JSF and ASP](https://reader030.vdocument.in/reader030/viewer/2022033101/56649ec15503460f94bcccaa/html5/thumbnails/8.jpg)
Button Events
• Use @form scope to include all components• Can use default click event
![Page 9: CSCI 6962: Server-side Design and Programming AJAX Tools in JSF and ASP](https://reader030.vdocument.in/reader030/viewer/2022033101/56649ec15503460f94bcccaa/html5/thumbnails/9.jpg)
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
![Page 10: CSCI 6962: Server-side Design and Programming AJAX Tools in JSF and ASP](https://reader030.vdocument.in/reader030/viewer/2022033101/56649ec15503460f94bcccaa/html5/thumbnails/10.jpg)
Timer Events
• No built-in timers in JSF (yet)• Must manually create JavaScript timer as before
– “run” function called every second
![Page 11: CSCI 6962: Server-side Design and Programming AJAX Tools in JSF and ASP](https://reader030.vdocument.in/reader030/viewer/2022033101/56649ec15503460f94bcccaa/html5/thumbnails/11.jpg)
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)
![Page 12: CSCI 6962: Server-side Design and Programming AJAX Tools in JSF and ASP](https://reader030.vdocument.in/reader030/viewer/2022033101/56649ec15503460f94bcccaa/html5/thumbnails/12.jpg)
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
![Page 13: CSCI 6962: Server-side Design and Programming AJAX Tools in JSF and ASP](https://reader030.vdocument.in/reader030/viewer/2022033101/56649ec15503460f94bcccaa/html5/thumbnails/13.jpg)
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
![Page 14: CSCI 6962: Server-side Design and Programming AJAX Tools in JSF and ASP](https://reader030.vdocument.in/reader030/viewer/2022033101/56649ec15503460f94bcccaa/html5/thumbnails/14.jpg)
AJAX in ASP
• Example: Asynchronous “greeting” label– Controls inside UpdatePanel
![Page 15: CSCI 6962: Server-side Design and Programming AJAX Tools in JSF and ASP](https://reader030.vdocument.in/reader030/viewer/2022033101/56649ec15503460f94bcccaa/html5/thumbnails/15.jpg)
AJAX in ASP• Code behind called without causing postback
• JavaScript functions automatically included
![Page 16: CSCI 6962: Server-side Design and Programming AJAX Tools in JSF and ASP](https://reader030.vdocument.in/reader030/viewer/2022033101/56649ec15503460f94bcccaa/html5/thumbnails/16.jpg)
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
![Page 17: CSCI 6962: Server-side Design and Programming AJAX Tools in JSF and ASP](https://reader030.vdocument.in/reader030/viewer/2022033101/56649ec15503460f94bcccaa/html5/thumbnails/17.jpg)
Timer Events in ASP
• Timer: causes postbacks at regular intervals– Interval property: Number of ms between postbacks– Put inside UpdatePanel for asynchronous postbacks
![Page 18: CSCI 6962: Server-side Design and Programming AJAX Tools in JSF and ASP](https://reader030.vdocument.in/reader030/viewer/2022033101/56649ec15503460f94bcccaa/html5/thumbnails/18.jpg)
Timer Events in AJAX
• _Tick event called in code behind