The Microsoft

Technical Roadshow 2006

A Web-enabled A Web-enabled Experience with Altas Experience with Altas

Mike OrmondMike OrmondDeveloper & Platform Evangelism Group, Microsoft LtdDeveloper & Platform Evangelism Group, Microsoft Ltd

mike.ormond@microsoft.commike.ormond@microsoft.com

blogs.msdn.com/mikeormondblogs.msdn.com/mikeormond

AgendaAgenda

Atlas OverviewAtlas Overview

Atlas for Server-Centric Ajax DevelopmentAtlas for Server-Centric Ajax Development

<atlas:UpdatePanel> and other <atlas:> controls<atlas:UpdatePanel> and other <atlas:> controls

Atlas for Client-Centric Ajax DevelopmentAtlas for Client-Centric Ajax Development

Javascript client script frameworkJavascript client script framework

JSON network requestsJSON network requests

Components and behavioursComponents and behaviours

Mashups, gadgets and moreMashups, gadgets and more

Some TerminologySome Terminology Courtesy wikipedia Courtesy wikipedia

AjaxAjax ‘ ‘AAsynchronous synchronous JJavaScript avaScript AAnd nd XXML, is a web development technique ML, is a web development technique for creating interactive web applications. The intent is to make web pages for creating interactive web applications. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire web page does not have to be behind the scenes, so that the entire web page does not have to be reloaded each time the user makes a change.’reloaded each time the user makes a change.’

AtlasAtlas ‘… ‘… Microsoft's codename for a set of extensions to ASP.NET for Microsoft's codename for a set of extensions to ASP.NET for implementing Ajax functionality.’implementing Ajax functionality.’

XMLHttpRequestXMLHttpRequest ‘… ‘… a set of APIs that can be used by JavaScript, JScript, a set of APIs that can be used by JavaScript, JScript, VBScript and other … scripting languages to transfer and manipulate XML VBScript and other … scripting languages to transfer and manipulate XML data to and from a web server using HTTP, establishing an independent data to and from a web server using HTTP, establishing an independent connection channel between Client-Side and Server-Side.connection channel between Client-Side and Server-Side.’’

‘‘The XMLHTTP object was originally developed by Microsoft, available The XMLHTTP object was originally developed by Microsoft, available since Internet Explorer 5.0 as an ActiveX object, via JScript, VBScript, or since Internet Explorer 5.0 as an ActiveX object, via JScript, VBScript, or other scripting languages supported by the browser. Mozilla contributors other scripting languages supported by the browser. Mozilla contributors then implemented a compatible native version called XMLHttpRequest in then implemented a compatible native version called XMLHttpRequest in Mozilla 1.0. This implementation was later followed by Apple since Safari Mozilla 1.0. This implementation was later followed by Apple since Safari 1.2, Opera Software since Opera 8.0 and iCab since 3.0b352.1.2, Opera Software since Opera 8.0 and iCab since 3.0b352.’’

Mash-upMash-up ‘… a website or web application that seamlessly combines content ‘… a website or web application that seamlessly combines content from more than one source into an integrated experience.’from more than one source into an integrated experience.’

Client Callback ManagerClient Callback Manager

DemoDemo

What Is “Atlas”?What Is “Atlas”? A Framework for Building … A Framework for Building …

… … a new generation of richer, interactive, a new generation of richer, interactive, personalised standards-based web applicationspersonalised standards-based web applications

High-productivity platform for AJAX-style browser High-productivity platform for AJAX-style browser applicationsapplications

Seamlessly integrate with Microsoft platform and Seamlessly integrate with Microsoft platform and application modelapplication model

Delivers ubiquitous reach and easy deploymentDelivers ubiquitous reach and easy deployment

Enable world-class tools for AJAX-style application Enable world-class tools for AJAX-style application developmentdevelopment

‘‘Atlas’ ScenariosAtlas’ Scenarios Where Would I Use It? Where Would I Use It?

Server-centric Ajax Web DevelopmentServer-centric Ajax Web Development

Incremental Ajax approach to add UI enrichment for key Incremental Ajax approach to add UI enrichment for key scenariosscenarios

Enrich applications without lots of Javascript code requiredEnrich applications without lots of Javascript code required

Enable you to keep core UI/Application logic on server Enable you to keep core UI/Application logic on server (VB/C#)(VB/C#)

Client-centric Ajax Web DevelopmentClient-centric Ajax Web Development

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

Provide richer and more interactive user experienceProvide richer and more interactive user experience

Build mash-ups, gadgets and other new immersive Build mash-ups, gadgets and other new immersive experiencesexperiences

Programming ModelProgramming Model Server-Centric Server-Centric

ASP.NETASP.NET

Application Services

Application Services

Page Framework,Server Controls

Page Framework,Server Controls

Atlas Script FrameworkAtlas Script Framework

Client Application Services

Client Application Services

Component/UIFramework,Controls

Component/UIFramework,Controls

BrowserBrowser

PresentationPresentation(HTML/CSS)(HTML/CSS)

PresentationPresentation(HTML/CSS)(HTML/CSS)

ASP.NET ApplicationASP.NET Application

PagesPagesPagesPages

UI BehaviourUI Behaviour(Managed(ManagedCode)Code)

UI BehaviourUI Behaviour(Managed(ManagedCode)Code)

Input Data

Updated UI + Behaviour

Initial Rendering

(UI + Behaviour)

<Atlas:> Server Controls<Atlas:> Server Controls

Goal: Easily enhance any ASP.NET web applicationGoal: Easily enhance any ASP.NET web applicationApplication UI and core logic still runs on serverApplication UI and core logic still runs on serverAvoid need to master JavaScript and asynchronous Avoid need to master JavaScript and asynchronous programmingprogramming

Use AJAX techniques to reduce roundtripsUse AJAX techniques to reduce roundtripsEnable incremental page UI updates (avoid full page refreshes)Enable incremental page UI updates (avoid full page refreshes)

Scenarios: data navigation and editing, form validation, auto refreshScenarios: data navigation and editing, form validation, auto refresh

Enable richer interactivity for existing ASP.NET controlsEnable richer interactivity for existing ASP.NET controlsUse the same controls, object model and events you already knowUse the same controls, object model and events you already know

Extenders to add Atlas behaviours to any ASP.NET controlsExtenders to add Atlas behaviours to any ASP.NET controls

Examples: auto-completion, web-parts, drag-and-drop, tooltipsExamples: auto-completion, web-parts, drag-and-drop, tooltips

New, richer ASP.NET server controlsNew, richer ASP.NET server controlsServer wrappers for Atlas client controlsServer wrappers for Atlas client controls

Examples: DateTimePicker, RichTextBox, Re-Order ListExamples: DateTimePicker, RichTextBox, Re-Order List

<atlas:updatepanel> control<atlas:updatepanel> control

Container control that enables ‘updatable’ regions in a pageContainer control that enables ‘updatable’ regions in a page

Atlas provides a XmlHttp based postback infrastructureAtlas provides a XmlHttp based postback infrastructure

Some non-updatable content and controls ...

<atlas:UpdatePanel id=“u1” runat=“server”>

<ContentTemplate>

This content can be dynamically updated!

<asp:label id="Lablel1” runat=“server”/>

<asp:button id=“button1” text=“Push Me!” runat=“server”/>

<ContentTemplate>

</atlas:UpdatePanel>

More non-updatable content and controls ...

Simple UpdatePanelSimple UpdatePanel

DemoDemo

<atlas:UpdatePanel><atlas:UpdatePanel> Under the Covers Under the Covers

Atlas intercepts post-back submit actions on Atlas intercepts post-back submit actions on clientclient

Uses XMLHttp to fire postback action to serverUses XMLHttp to fire postback action to server

Postback events fire like normal on serverPostback events fire like normal on server

Only content of updatepanel regions returnedOnly content of updatepanel regions returned

Changed updatepanel regions replaced on clientChanged updatepanel regions replaced on client

<atlas:UpdatePanel><atlas:UpdatePanel> Postbacks & Triggers Postbacks & Triggers

PostbacksPostbacks

All post-back actions for controls declared within an All post-back actions for controls declared within an updatepanel control will cause Ajax-based post-backs with updatepanel control will cause Ajax-based post-backs with incremental page refreshincremental page refresh

Post-back action for controls outside of an updatepanel control Post-back action for controls outside of an updatepanel control will by default cause normal postbackswill by default cause normal postbacks

TriggersTriggers

Can be used to associate UpdatePanels on the page with Can be used to associate UpdatePanels on the page with postback controls declared outside of the UpdatePanelpostback controls declared outside of the UpdatePanel

<asp:ControlEventTrigger><asp:ControlEventTrigger>

<asp:ControlValueTrigger><asp:ControlValueTrigger>

UpdatePanel with TriggersUpdatePanel with Triggers

DemoDemo

<atlas:UpdatePanel><atlas:UpdatePanel> Refresh Modes Refresh Modes

Multiple UpdatePanel Controls can be added to a pageMultiple UpdatePanel Controls can be added to a page

Sometimes you only want to update one panel …Sometimes you only want to update one panel …

UpdatePanel supports two update modesUpdatePanel supports two update modes

‘‘Always’Always’

‘‘Conditional’Conditional’

Conditional refreshes can be done via triggersConditional refreshes can be done via triggers

<asp:ControlEventTrigger><asp:ControlEventTrigger>

<asp:ControlValueTrigger><asp:ControlValueTrigger>

Conditional refreshes can also be triggered via codeConditional refreshes can also be triggered via code

UpdatePanel1.Update()UpdatePanel1.Update()

Conditional UpdatePanelConditional UpdatePanel

DemoDemo

<atlas:UpdateProgress> Control<atlas:UpdateProgress> Control

Delivers ability to provide ‘status’ UI while waiting on Delivers ability to provide ‘status’ UI while waiting on response from a serverresponse from a server

‘‘Ajax’ is inherently AsynchronousAjax’ is inherently Asynchronous

Need to provide way for users to understand latencyNeed to provide way for users to understand latency

Need to provide way for users to cancel requestsNeed to provide way for users to cancel requests

UpdateProgress control can be placed anywhere on UpdateProgress control can be placed anywhere on pagepage

Templated control allows any content (e.g. animated .gif)Templated control allows any content (e.g. animated .gif)

Can use CSS to position/style anywhereCan use CSS to position/style anywhere

UpdateProgress ControlUpdateProgress Control

DemoDemo

<Extender> Controls<Extender> Controls AutoCompleteExtender, DragOverlayExtender AutoCompleteExtender, DragOverlayExtender

Extend existing controls with behavioursExtend existing controls with behaviours

AutoCompleteExtenderAutoCompleteExtender

Enables textbox auto-complete supportEnables textbox auto-complete support

Callback to Web Service on server for word listCallback to Web Service on server for word list

Supports both .asmx- and WCF-based Web Services (both Supports both .asmx- and WCF-based Web Services (both using the built-in Atlas JSON bridge)using the built-in Atlas JSON bridge)

DragOverlayExtenderDragOverlayExtender

Enables dragging a control to a new locationEnables dragging a control to a new location

Other ‘extender’ controls planned Other ‘extender’ controls planned

Watermark, popup, drag/drop, masked edit, date-time picker, Watermark, popup, drag/drop, masked edit, date-time picker, tool tips, etctool tips, etc

AutoCompleteExtenderAutoCompleteExtenderDragOverlayExtenderDragOverlayExtender

DemoDemo

Web PartsWeb Parts

March refresh added WebPart FireFox SupportMarch refresh added WebPart FireFox Support

Enables drag/drop support within FireFox (very Enables drag/drop support within FireFox (very commonly requested feature with ASP.NET 2.0)commonly requested feature with ASP.NET 2.0)

Future Atlas refresh enables individual web-Future Atlas refresh enables individual web-parts to be refreshed independently as update-parts to be refreshed independently as update-panelspanels

Web PartsWeb Parts

DemoDemo

Client-Centric Programming ModelClient-Centric Programming Model

BrowserBrowser

PresentationPresentation(HTML/CSS)(HTML/CSS)

PresentationPresentation(HTML/CSS)(HTML/CSS)

‘‘Atlas’Atlas’ServiceServiceProxiesProxies

‘‘Atlas’Atlas’ServiceServiceProxiesProxies

UI BehaviourUI Behaviour(Script)(Script)

UI BehaviourUI Behaviour(Script)(Script)

ASP.NETASP.NET

Application Services

Application Services

Page Framework,Server Controls

Page Framework,Server Controls

ASP.NET ApplicationASP.NET Application

PagesPagesPagesPages

WebWebServicesServices

WebWebServicesServices

Atlas Script FrameworkAtlas Script Framework

Client Application Services

Client Application Services

Component/UIFramework,Controls

Component/UIFramework,Controls

Initial Rendering

(UI + Behaviour)

Data

Data

Atlas Client Script LibraryAtlas Client Script Library

Easily develop rich interactive web applicationsEasily develop rich interactive web applicationsApplication UI runs in browser, business logic runs Application UI runs in browser, business logic runs on serveron serverHTML/Atlas client accesses data and services from HTML/Atlas client accesses data and services from the webthe web

ScenariosScenarios

Mash-up applications Mash-up applications

Composite applications, sites and gadgets (e.g. Live.com)Composite applications, sites and gadgets (e.g. Live.com)

Powerful UI framework and component model for browsersPowerful UI framework and component model for browsers

Declarative markup and component modelDeclarative markup and component model

Rich client-side data access and data-bindingRich client-side data access and data-binding

Easily integrated with server application modelEasily integrated with server application model

Easily consume any Web Service (ASMX, Indigo) from browserEasily consume any Web Service (ASMX, Indigo) from browser

Proxy generation, serialisation to consume .NET objects in scriptProxy generation, serialisation to consume .NET objects in script

Script access to ASP.NET application services Script access to ASP.NET application services

Server-side bridge to reuse 3Server-side bridge to reuse 3rdrd party services party services

Network Callbacks from ScriptNetwork Callbacks from Script

Atlas provides easy mechanism for script callbacksAtlas provides easy mechanism for script callbacksCan call a Web Service end point on serverCan call a Web Service end point on serverCan call a page method end point on serverCan call a page method end point on server

Atlas provides JSON network serialisation supportAtlas provides JSON network serialisation supportJSON = JavaScript Object Notation JSON = JavaScript Object Notation

JSON support for auto-serialization of .NET typesJSON support for auto-serialization of .NET typese.g. return an array of ‘Customer’ objectse.g. return an array of ‘Customer’ objects

Advanced network manager features supportedAdvanced network manager features supportedPriorities and queuing on network callsPriorities and queuing on network callsBatch invocation of multiple calls in single network requestBatch invocation of multiple calls in single network request

Client Network Callbacks Client Network Callbacks with Atlas and JavaScriptwith Atlas and JavaScript

DemoDemo

Atlas Component and BehavioursAtlas Component and Behaviours

Components – eg TextBox, Label, Hyperlink …Components – eg TextBox, Label, Hyperlink …

Behaviours – PopupBehavior, HoverBehavior, ClickBehavior …Behaviours – PopupBehavior, HoverBehavior, ClickBehavior …

Atlas provides client JavaScript control + component modelAtlas provides client JavaScript control + component model

Enables control behaviour to be associated with html Enables control behaviour to be associated with html

Provides clean OO encapsulation model + control re-useProvides clean OO encapsulation model + control re-use

Avoid having to write one-off JavaScript UI repeatedlyAvoid having to write one-off JavaScript UI repeatedly

Atlas enables clean developer/designer workflowAtlas enables clean developer/designer workflow

UI defined using standard XHTML w/ CSSUI defined using standard XHTML w/ CSS

Control behaviours defined and attached separate from htmlControl behaviours defined and attached separate from html

Atlas controls can be declared procedurally + declarativelyAtlas controls can be declared procedurally + declaratively

XML declarative markup useful for tool supportXML declarative markup useful for tool support

Advanced Atlas Client Control Features:Advanced Atlas Client Control Features:

Bi-Directional Databinding, Transformers, ValidationBi-Directional Databinding, Transformers, Validation

Client-Side Atlas Component Client-Side Atlas Component ControlsControls

DemoDemo

Data Binding and TemplatesData Binding and Templates

Atlas enables declarative databinding and Atlas enables declarative databinding and template customisation on the clienttemplate customisation on the client

Designers can edit the HTML and use CSS to Designers can edit the HTML and use CSS to define a html template for an Atlas Control to define a html template for an Atlas Control to populate at runtimepopulate at runtime

Developers can use the new Atlas ListView Developers can use the new Atlas ListView client control to bind data (either one or two way) client control to bind data (either one or two way) against the html templateagainst the html template

Client-Side Atlas Client-Side Atlas ListView ControlListView Control

DemoDemo

Mashup SupportMashup Support

Atlas provides the ability to define service Atlas provides the ability to define service bridgesbridges

Allow client script to call to local serverAllow client script to call to local server

Local server then proxies request to serviceLocal server then proxies request to service

Avoids cross-domain script call-back issuesAvoids cross-domain script call-back issuesNo security prompts for the browserNo security prompts for the browser

Avoids having to publish service keysAvoids having to publish service keys

Examples:Examples:Amazon, FlickR, Virtual Earth, Google Maps, etcAmazon, FlickR, Virtual Earth, Google Maps, etc

Helps make writing mashups easyHelps make writing mashups easy

Gadget SupportGadget Support

Gadgets are a new Ajax extensibility modelGadgets are a new Ajax extensibility model

Supported by Supported by www.live.comwww.live.com

Supported by new Windows SidebarSupported by new Windows Sidebar

Gadgets enable re-usable functionality to be published and Gadgets enable re-usable functionality to be published and shared at no cost to developer/publishershared at no cost to developer/publisher

Atlas enables developers to develop gadgets hosted on their Atlas enables developers to develop gadgets hosted on their servers, and for end-users to add the gadgets into their servers, and for end-users to add the gadgets into their homepage or Windows Sidebarhomepage or Windows Sidebar

Provides more touch with customers and opens up interesting Provides more touch with customers and opens up interesting new business model opportunities for developers and websitesnew business model opportunities for developers and websites

Nugget Viewer ApplicationNugget Viewer Application

ScenarioScenario

SummarySummary

Atlas provides a rich Ajax programming Atlas provides a rich Ajax programming frameworkframework

Rich built-in integration with ASP.NETRich built-in integration with ASP.NET

Server ControlsServer Controls

Web and Application ServicesWeb and Application Services

Rich client-side JavaScript framework modelRich client-side JavaScript framework model

Build rich mashups and gadgetsBuild rich mashups and gadgets

Rich extensibility model for component Rich extensibility model for component developersdevelopers

Further InformationFurther Information

Everything you need is atEverything you need is at

http://atlas.asp.nethttp://atlas.asp.net

Scott Guthrie’s BlogScott Guthrie’s Blog

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

© 2006 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only.MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS SUMMARY.