Your SlideShare is downloading. ×
Atlas and Ajax
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Atlas and Ajax

343
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
343
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Atlas and Ajax Jim Fawcett CSE686 – Internet Programming Summer 2006
  • 2. References
    • Foundations of Atlas, Laurence Moroney, Apess, 2006
    • Atlas at Last, MSDN http://msdn.microsoft.com/msdnmag/issues/06/07/AtlasAtLast/default.aspx
    • Ajax Enhancements with Microsoft Atlas http://msdn.microsoft.com/asp.net/default.aspx?pull=/library/en-us/dnaspp/html/membershipeditoratlas.asp
    • ASP.net Atlas (includes download link) http://atlas.asp.net/Default.aspx?tabid=47
    • Atlas Docs (includes tutorials) http ://atlas.asp.net/docs/Default.aspx
  • 3. What is Ajax?
    • An acronym that stands for Asynchronous Javascript and XML
    • A technology that supports updating a page with small amounts of information without a postback
    • Makes the page appear to be responsive to user inputs.
  • 4. Ajax Mechanisms
    • Ajax like operations have been supported since IE 5.5:
      • Uses var xmlHttp = window.XMLHttpRequest(), created and invoked from Javascript on the client, usually at form load. <body onload=“createXMLHttpRequest()>..</body>
      • You define a Javascript function, Update(), that is attached to a control event that will use the xmlHttp object to send a string request to the server via xmlHttp.send(): xmlHttp.open(“GET”,url,true); onkeyup=Update(); The url defines an Aspx file that will handle the request, passing a query string: url=“myWebForm.aspx?” + stringToParse”
      • In that function you attach a callback function like this: xmlHttp.onreadystatechange=doTheUpdate; The callback has a string argument supplied by the server side resource.
  • 5. Client Callbacks
    • All of the Ajax mechanism, described in the previous slide is papered over when you use Client Callback:
      • string callbackref = Page.ClientScript.GetCallbackEventReference(
      • this, &quot;document.getElementById(&quot;CallbackResult&quot;).innerText&quot;, &quot;CallbackResultProcessor&quot;, &quot;null&quot;
      • );
      • <asp:CheckBox ID=&quot;TriggerCallback&quot; runat=&quot;server“ Text=&quot;Trigger Callback&quot; />
      • TriggerCallback.Attributes[&quot;onClick&quot;] = callbackref;
      • <script language=&quot;javascript&quot;>
      • function CallbackResultProcessor(result,context)
      • {
      • var label = document.getElementById(&quot;CallbackResult&quot;);
      • if(label.innerHTML == &quot;Waiting for Callback&quot;)
      • label.innerHTML = &quot;<h2>&quot; + result + &quot;</h2>&quot;;
      • else
      • label.innerHTML = &quot;Waiting for Callback&quot;;
      • }
      • </script>
  • 6. Result
    • However you effect Ajax, the results are:
      • Send string from client via a Javascript call
      • Process string on server in a defined aspx resource
      • Send string back to client via a Javascript callback
      • Javascript manipulates document to display the result
    • Get responsive update of rendered web page with a postback!
      • Fast, and no flashing as page is redrawn, since only the area of update is redrawn.
  • 7. What is Atlas?
    • A largely Javascript library that supports Ajax.
    • Atlas provides:
      • An XML-based declarative markup
      • Atlas Javascript library that provides client-side functionality
      • A webservice bridge that supports client use of web services, via a Javascript proxy
      • You can expose methods on the aspx page as web services that your client can then consume
        • This extends the event-based model by adding non-event invocations, e.g., no postback and more flexible invokes
      • Update panels, defined server-side that enable the Ajax asynchronous communication with the server
      • Supports a client-side databinding model, again, via Ajax
        • Data is still coming from server, but control is populated with Ajax
  • 8. Atlas Component Model
    • Atlas enhances the Javascript object model with client-side syntax:
      • Programmatic creation of objects var myTextBox = new Web.UI.TextBox(document.getElement(‘TextBox1’));
      • Declarative creation using Atlas script <script type=‘text/xml-script> <page xmlns := …> <components> <script:label targetElement=“MyLabel”/> // manipulation of label </script:label> </components> </page> </script>
  • 9. Atlas Behaviors
    • The Atlas library provides a number of predefined behaviours:
      • Click
      • Mouse hover
      • Pop up on hover
      • Drag and drop
  • 10. UI Glitz
    • The AtlasUIGlitz Library provides:
      • Opacity control
      • Layout behaviors
      • Fade animations
      • Other animations
  • 11. Other Atlas Stuff
    • Atlas library also provides:
      • Databinding
      • Text validation
      • Timer control
      • Gadget control
  • 12. End of Presentation
    • Summary
      • Looks interesting
      • Another model to absorb – sigh!
      • Supports many browser models
      • Responsive applications that begin to look more like WinForms
  • 13. Enhancing Control Updates
    • You can wrap existing server controls with UpdatePanel controls
      • These become panes on the page that update asynchronously