AJAX and Atlas AJAX and Atlas in ASP.NET 2.0in ASP.NET 2.0

William J. SteeleWilliam J. SteeleMSDN Developer EvangelistMSDN Developer EvangelistMicrosoft CorporationMicrosoft Corporationhttp://blogs.msdn.com/wsteelehttp://blogs.msdn.com/wsteele

What We Will CoverWhat We Will Cover

What is AJAX?What is AJAX?

What is “Atlas”?What is “Atlas”?

ScenariosScenarios

Architecture OverviewArchitecture Overview

Programming ModelsProgramming Models

Demonstration – Getting Started with Demonstration – Getting Started with “Atlas”“Atlas”

““Atlas” ExamplesAtlas” Examples

What is AJAX?What is AJAX?

AJAX buzzwordAJAX buzzwordWeb development technique for Web development technique for creating interactive web applications creating interactive web applications using a combination of DHTML, using a combination of DHTML, JavaScript and XMLHTTPJavaScript and XMLHTTP

AJAX == Asynchronous JavaScript and AJAX == Asynchronous JavaScript and XMLXML

Technology is Technology is very widely deployedvery widely deployedBeing used for a large number of web Being used for a large number of web sitessites

Map – MSN VirtualEarth, Google MapsMap – MSN VirtualEarth, Google Maps

Email – new MSN Hotmail, Google MailEmail – new MSN Hotmail, Google Mail4

AJAX TechnologyAJAX Technology

DHTML DOMDHTML DOMBrowser DOM manipulated through JavaScript Browser DOM manipulated through JavaScript to dynamically display and interact with to dynamically display and interact with informationinformationCSS stylesheets for formattingCSS stylesheets for formatting

JavaScriptJavaScriptLoosely typed scripting languageLoosely typed scripting languageMostly used as the “glue” to wire things Mostly used as the “glue” to wire things together on a pagetogether on a pageCan quickly get hard to maintainCan quickly get hard to maintain

XMLHttpRequest object XMLHttpRequest object Exchange data asynchronously with the web Exchange data asynchronously with the web serverserverAny data format will work - HTML fragments, Any data format will work - HTML fragments, text, XML, JSONtext, XML, JSONIntroduced in 1998 for IE 5.0 by the Exchange Introduced in 1998 for IE 5.0 by the Exchange Outlook Web Access teamOutlook Web Access team

5

What is “Atlas”?What is “Atlas”?

High productivity AJAX developmentHigh productivity AJAX development

Builds on top of ASP.NET 2.0Builds on top of ASP.NET 2.0

Works cross-browserWorks cross-browser

End-to-End FrameworkEnd-to-End Framework

ExtensibleExtensible

at-las - (ăt-lәS)at-las - (ăt-lәS)noun: A Framework for Building Richer, noun: A Framework for Building Richer, Interactive, Personalized Web Experiences and Interactive, Personalized Web Experiences and ApplicationsApplications

Installing “Atlas”Installing “Atlas”

““Atlas” ScenariosAtlas” Scenarios

Client-centric Web ApplicationsClient-centric Web ApplicationsInteractive and rich, intuitive UXInteractive and rich, intuitive UX

Leverage full power of script/DHTMLLeverage full power of script/DHTML

Next generation Web applicationsNext generation Web applications

““AJAX”ified ASP.NET ApplicationsAJAX”ified ASP.NET ApplicationsIncremental approach to enrichmentIncremental approach to enrichment

Enables key scenarios in easy mannerEnables key scenarios in easy manner

Example Key ScenariosExample Key Scenarios

Dynamically update controlsDynamically update controlsUser selects CountryUser selects Country

States are populated based on country selectionStates are populated based on country selectionCities are populated based on state selectionCities are populated based on state selection

User selects ProductUser selects ProductAvailable accessories are populated based on Available accessories are populated based on product selectionproduct selection

Notify users based on system eventNotify users based on system eventDisplay E-mail received toast notificationDisplay E-mail received toast notification

AutoCompleteAutoCompletePopulates optional dropdown with Server Populates optional dropdown with Server datadata

Enriching ASP.NET ApplicationsEnriching ASP.NET Applications

Atlas-Enabling PagesAtlas-Enabling PagesAdd a ScriptManager controlAdd a ScriptManager control

Enable Partial RenderingEnable Partial RenderingContinue to use the postback model, but work out-of-Continue to use the postback model, but work out-of-bandbandOnly portions of the page are rendered on the serverOnly portions of the page are rendered on the serverExisting page is updated using scriptExisting page is updated using script

Extend Existing ControlsExtend Existing ControlsAdd rich client-side behavior to enable key scenariosAdd rich client-side behavior to enable key scenariosAutoCompleteExtender, etc.AutoCompleteExtender, etc.

Atlas Script Framework is an enabling technologyAtlas Script Framework is an enabling technologyControl developers have a richer target to build forControl developers have a richer target to build forPage developers continue to use server controlsPage developers continue to use server controls

Enable key “AJAX” and user experience scenarios Enable key “AJAX” and user experience scenarios in an incremental manner while preserving the in an incremental manner while preserving the

existing server controls and server-side existing server controls and server-side development modelsdevelopment models

Client-centric Web ApplicationsClient-centric Web Applications

Disciplined and more manageable Disciplined and more manageable scriptscript

OOP in JavaScriptOOP in JavaScript.NET-like APIs on core script objects.NET-like APIs on core script objectsClasses to encapsulate data and logic, Classes to encapsulate data and logic, and attach to HTML in an unobtrusive and attach to HTML in an unobtrusive mannermannerDeclarative XML script to define Declarative XML script to define behavior of applicationbehavior of applicationCross-browser abstraction layer to Cross-browser abstraction layer to provide a uniform DOM APIprovide a uniform DOM API

Provide a script framework that makes it possible Provide a script framework that makes it possible to create next-generation interactive applications, to create next-generation interactive applications, and to interact easily with the server and services and to interact easily with the server and services

while scripting in a disciplined manner.while scripting in a disciplined manner.

Building an “Atlas” AppBuilding an “Atlas” App

Session SummarySession Summary

““Atlas” is a key part of the ASP.NET Atlas” is a key part of the ASP.NET storystory

““Atlas” GoalsAtlas” GoalsMake it super easy to incorporate AJAX Make it super easy to incorporate AJAX patterns, and create rich user patterns, and create rich user experiences, and leverage the browserexperiences, and leverage the browser

Create a natural progression from Web Create a natural progression from Web applications to Smart clients using a applications to Smart clients using a common application modelcommon application model

Still in its early stages – preview Still in its early stages – preview builds for greater transparency, more builds for greater transparency, more opportunities for feedback to have opportunities for feedback to have impactimpact

ResourcesResources

““Atlas” Web siteAtlas” Web sitehttp://atlas.asp.nethttp://atlas.asp.net

Bits, Forums, Quickstarts, Docs, UpdatesBits, Forums, Quickstarts, Docs, Updates

BlogsBlogshttp://www.nikhilk.nethttp://www.nikhilk.net

http://weblogs.asp.net/scottguhttp://weblogs.asp.net/scottgu

http://weblogs.asp.net/bleroyhttp://weblogs.asp.net/bleroy

““Atlas” Control ToolkitAtlas” Control Toolkithttp://atlas.asp.net/default.aspx?http://atlas.asp.net/default.aspx?tabid=47&subtabid=477tabid=47&subtabid=477

Thank You!Thank You!

My contact information:My contact information:

William J. SteeleWilliam J. Steele

wsteele@microsoft.comwsteele@microsoft.com

http://blogs.msdn.com/wsteele (Demo http://blogs.msdn.com/wsteele (Demo Code!)Code!)

My Manager is Melanie BrunnerMy Manager is Melanie Brunner

Send feed back to Send feed back to mbrunne@microsoft.commbrunne@microsoft.com

© 2006 Microsoft Corporation. All rights reserved.This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.