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


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Atlas and Ajax Jim Fawcett CSE686 – Internet Programming Summer 2006
  • 2. References
    • Foundations of Atlas, Laurence Moroney, Apess, 2006
    • Atlas at Last, MSDN
    • Ajax Enhancements with Microsoft Atlas
    • Atlas (includes download link)
    • Atlas Docs (includes tutorials) http ://
  • 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():“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