CSCI 6962: Server-side Design and Programming Java Server Faces Components and Tags.
CSCI 6962: Server-side Design and Programming AJAX Tools in JSF and ASP.
-
Upload
paul-mccarthy -
Category
Documents
-
view
234 -
download
0
Transcript of CSCI 6962: Server-side Design and Programming AJAX Tools in JSF and ASP.
CSCI 6962: Server-side Design and Programming
AJAX Tools in JSF and ASP
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
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>
<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– …
<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
Simple Example• Output field echoes greeting for name in input field when
used clicks away
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
Button Events
• Use @form scope to include all components• Can use default click event
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
Timer Events
• No built-in timers in JSF (yet)• Must manually create JavaScript timer as before
– “run” function called every second
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)
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
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
AJAX in ASP
• Example: Asynchronous “greeting” label– Controls inside UpdatePanel
AJAX in ASP• Code behind called without causing postback
• JavaScript functions automatically included
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
Timer Events in ASP
• Timer: causes postbacks at regular intervals– Interval property: Number of ms between postbacks– Put inside UpdatePanel for asynchronous postbacks
Timer Events in AJAX
• _Tick event called in code behind