Using Atlas with ASP.

NET

Mike Ormond Developer & Platform Evangelism Group, Microsoft Ltd mike.ormond@microsoft.com blogs.msdn.com/mikeormond

Agenda
What is Atlas (and why should I care)? Atlas Server Controls

Atlas helps out on the client as well

Some Terminology

XmlHttpRequest

Atlas

Mashup

Ajax

Demo
Client Callback Manager

W h a t i “A tl s”? s a
A fra m e w o rk fo r b u id i g … l n … a n e w g e n e ra ti n o f ri e r, i te ra cti , o ch n ve personalized standards-based web applications standards-

HighHigh-productivity platform Seamless integration ubiquitous reach and easy deployment WorldWorld-class tools

“A tl s” S ce n a ri s a o
ServerServer-centric Ajax Web Development
Incremental Ajax approach to add UI enrichment for key scenarios Enrich applications without lots of Javascript code required

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

ClientClient-centric Ajax Web Development
Leverage full power of script/DHTML
Provide richer and more interactive user experience Build mash-ups, gadgets and other new immersive mashexperiences

Intermission
Client bits

Server bits

Programming Model
ServerServer-Centric
Browser Initial Rendering (UI + Behavior) Input Data Updated UI + Behavior ASP.NET Application
Pages

Presentation (HTML/CSS)

UI Behavior (Managed Code)

Atlas Script Framework
Component/UI Framework, Controls Client Application Services

ASP.NET
Page Framework, Server Controls
Application Services

<Atlas:> Server Controls
Goal: Easily enhance any ASP.NET web application
Application UI and core logic still runs on server Avoid need to master JavaScript and asynchronous programming

Use AJAX techniques to reduce roundtrips
Enable incremental page UI updates (avoid full page refreshes) Scenarios: data navigation and editing, form validation, auto refresh

Enable richer interactivity for existing ASP.NET controls
Use the same controls, object model and events you already know Extenders to add Atlas behaviors to any ASP.NET controls

New, richer ASP.NET server controls
Server wrappers for Atlas client controls Examples: DateTimePicker, RichTextBox, Re-Order List DateTimePicker, RichTextBox, Re-

<atlas:updatepanel> control
C o n ta i e r co n tro l th a t e n a b l s “u p d a ta b l ” re g i n s i a p a g e n e e o n
Atlas 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...

<atlas:UpdatePanel>
Under the Covers Atlas intercepts post-back submit actions on postclient Uses XMLHttp to fire postback action to server Postback events fire like normal on server Only content of updatepanel regions returned Changed updatepanel regions replaced on client

<atlas:UpdatePanel>
Postbacks & Triggers
Postbacks
All post-back actions for controls declared within an postupdatepanel control will cause Ajax-based post-backs with Ajaxpostincremental page refresh PostPost-back action for controls outside of an updatepanel control will by default cause normal postbacks

Triggers
can be used to associate UpdatePanels on the page with postback controls declared outside of the UpdatePanel
<asp:ControlEventTrigger>

<asp:ControlValueTrigger>

<atlas:UpdatePanel>
Refresh Modes
Multiple UpdatePanel Controls can be added to a page
S o m e ti e s yo u o n l w a n t to u p d a te o n e p a n e l m y …

UpdatePanel supports two update modes
“A l a ys” w “C o n d i o n a l ti ”

Conditional refreshes can be done via triggers
<asp:ControlEventTrigger> <asp:ControlValueTrigger>

Conditional refreshes can also be triggered via code
UpdatePanel1.Update()

Demo
UpdatePanel control UpdateProgress control

<atlas:UpdateProgress> control
D e lve rs a b ii to p ro vi e “sta tu s” U I w h ie i lty d l waiting on response from a server “A j x” i i h e re n tl A syn ch ro n o u s a s n y
Need to provide way for users to understand latency Need to provide way for users to cancel requests

UpdateProgress control can be placed anywhere on page
Templated control allows any content (e.g. animated .gif) Can use CSS to position/style anywhere

<Extender> controls
Extend existing controls with behaviors AutoCompleteExtender
Enables textbox auto-complete support autoCallback to web-service on server for word list webSupports both .asmx and WCF based web-services (both using .asmx webthe built-in Atlas JSON bridge) built-

DragOverlayExtender
Enables dragging a control to a new location

O th e r “e xte n d e r” co n tro l p l n n e d s a
Watermark, popup, drag/drop, masked edit, date-time picker, datetool tips, etc.

Web Parts
March CTP
WebPart FireFox Support

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

June CTP
Enables individual web-parts to be refreshed webindependently as update-panels update-

Demo
Extender controls Web Parts

Intermission
Client bits

Server bits

ClientClient-Centric Programming Model
Browser
Presentation (HTML/CSS) “A tlas” Service Proxies

ASP.NET Application Initial Rendering (UI + Behavior) Data Data
Web Services

Pages

UI Behavior (Script)

Atlas Script Framework
Component/UI Framework, Controls Client Application Services

ASP.NET
Page Framework, Server Controls Application Services

Atlas Client Script Library
Easily develop rich interactive web applications
Application UI runs in browser, business logic runs on server HTML/Atlas client accesses data and services from the web

Scenarios
MashMash-up applications Composite applications, sites, and gadgets (e.g. Live.com)

Powerful UI framework and component model for browsers
Declarative markup and component model Rich client-side data access and data-binding clientdata-

Easily integrated with server application model
Easily consume any web service (ASMX, Indigo) from browser Proxy generation, serialization to consume .NET objects in script Script access to ASP.NET application services ServerServer-side bridge to reuse 3rd party services

Atlas Client Script Library
Script core runtime: a rich type system for JScript
Classes, namespaces, inheritance, interfaces Event handlers Object serialization

Atlas Client Script Library Script Core Base Class Library

Base class library and networking services
Helper classes for developers (subset of .NET BCL) Management of asynchronous network operations

Component model and UI framework
Declarative scripting (Atlas XML script definitions) Extensible component and control model Data binding, presentation, and validation

Controls and Components Component Model and UI Framework Browser Compatibility

Atlas components for common scenarios – examples:
ListView and DataView for rendering templated data UI behaviors such as drag and drop, tooltips, autoautocompletion

Compatibility layer for browsers and platforms
Support for IE, Firefox/Mozilla, Safari

Network Callbacks from Script
Atlas provides easy mechanism for script callbacks
Can call a web-service end-point on server webendCan call a page-method end-point on server pageend-

Atlas provides JSON network serialization support
JSON = JavaScript Object Notation

JSON support for auto-serialization of .NET types autoe .g . re tu rn a n a rra y o f “C u sto m e r” o b j cts e

Advanced network manager features supported
Priorities and queuing on network calls Batch invocation of multiple calls in single network request

Demo
Calling Services

Atlas Component and Behaviors
Components – e g T e xtB o x, L a b e l H yp e rln k… , i Behaviors – P o p u p B e h a vi r, H o ve rB e h a vi r, C lckB e h a vi r… o o i o Atlas provides client JavaScript control + component model
Enables control behavior to be associated with html Provides clean OO encapsulation model + control re-use reAvoid having to write one-off JavaScript UI repeatedly one-

Atlas enables clean developer/designer workflow
UI defined using standard XHTML w/ CSS Control behaviors defined and attached separate from html

Atlas controls can be declared procedurally + declaratively
XML declarative markup useful for tool support

Advanced Atlas Client Control Features:
BiBi-Directional Databinding, Transformers, Validation

Demo
Components and Behaviours

Data Binding and Templates
Atlas enables declarative databinding and template customization on the client

Designers can edit the HTML and use CSS to define a html template for an Atlas Control to populate at runtime Developers can use the new Atlas ListView client control to bind data (either one or two way) against the html template

Demo
Simple Databinding ListView Control

Mashup Support
Atlas provides the ability to define service bridges
Allow client script to call to local server Local server then proxies request to service

Avoids cross-domain script call-back issues crosscallNo security prompts for the browser Avoids having to publish service keys

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

Helps make writing Mashups easy

Demo
The MSN Search bridge

Gadget Support
Gadgets are a new Ajax extensibility model
Supported by www.live.com Supported by new Windows Side-Bar Side-

Gadgets enable re-usable functionality to be published and reshared at no cost to developer/publisher Atlas enables developers to develop Gadgets hosted on their servers, and for end-users to add the Gadgets into their homeendhomepage or Windows Sidebar Provides more touch with customers and opens up interesting new business model opportunities for developers and web-sites web-

Summary
Atlas provides a rich Ajax programming framework Rich built-in integration with ASP.NET builtServer Controls Web and Application Services

Rich client-side JavaScript framework model clientBuild rich mashups and gadgets

Rich extensibility model for component developers

Further Information
Everything you need is at
http://atlas.asp.net

S co tt G u th ri ’ B l g es o
http://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.