Microsoft ASP.NET AJAXMicrosoft ASP.NET AJAXOverviewOverview

The New AJAX Application FrameworkThe New AJAX Application Framework(Formally: Atlas)(Formally: Atlas)

AgendaAgenda

Importance of UXImportance of UX

Limitations of Web Limitations of Web ApplicationsApplications

Overview of AJAXOverview of AJAX

Intro toIntro toASP.NET AJAXASP.NET AJAX

FrameworkFramework

Script LibraryScript Library

Web ServicesWeb Services

Server ControlsServer Controls

Demo: Hello WorldDemo: Hello World

ASP.NET AJAX ASP.NET AJAX Control ToolkitControl Toolkit

What influences end-user UX, and What influences end-user UX, and how?how?

Ease of UseEase of Use

Learn abilityLearn ability

App PerformanceApp Performance

More reliable & secureMore reliable & secure

Legibility / ReadabilityLegibility / Readability

Optimized for form factorOptimized for form factor

Success / ProductivityRetention & Comprehension

Satisfaction / ExcitementRepeat Use

RichnessRichness

Graphics & MediaGraphics & Media

Data VisualizationData Visualization

Higher Fidelity InformationHigher Fidelity Information

GlobalizationGlobalization

AccessibilityAccessibility

Hardware & Printing Hardware & Printing

IntegrationIntegration

Limitations of Web ApplicationsLimitations of Web Applications

Traditional Web Applications use costly Traditional Web Applications use costly Postbacks for Server operations and UI Postbacks for Server operations and UI operations.operations.

No “integrated” way to work with client No “integrated” way to work with client side scriptingside scripting

XML DATA

Introduction to AJAXIntroduction to AJAXAsynchronous JavaScript And XMLAsynchronous JavaScript And XML

Not a “new” technology – It’s a specific Not a “new” technology – It’s a specific way of using existing technologies. way of using existing technologies.

Used in Outlook Web Access (IE 5)Used in Outlook Web Access (IE 5)

Transfer just the “data” between Transfer just the “data” between browser and serverbrowser and server

Difficulties with AJAX in the pastDifficulties with AJAX in the past

Too “Close to the wire”Too “Close to the wire”

Heavy DHTML plumbing requiredHeavy DHTML plumbing required

Browser compatibilities with DHTMLBrowser compatibilities with DHTML

AJAX FrameworksAJAX FrameworksFrameworks or Toolkits attempt to overcomeFrameworks or Toolkits attempt to overcomesome of the hurdles to working with AJAX.some of the hurdles to working with AJAX.

ASP.NET AJAX – ASP.NET AJAX – http://ajax.asp.net

AJAX.net* – AJAX.net* – http://ajax.schwarz-interactive.de/csharpsample/default.aspx

Backbase* - Backbase* - http://www.backbase.com

* Community & Pro Versions Available

““Atlas extends [beyond] Ajax.NET in a Atlas extends [beyond] Ajax.NET in a number of ways.number of ways.

Browser object model to abstract away Browser object model to abstract away DOM differences between browsers DOM differences between browsers

Set of client-side enabled server controls, Set of client-side enabled server controls, including data-binding and editable including data-binding and editable controls controls Access to server-side services through Access to server-side services through Web services (authentication, profile, Web services (authentication, profile, session, cache)”session, cache)”

- Dino Esposito- Dino Espositohttp://weblogs.asp.net/despos/archive/2005/11/09/430078.aspxhttp://weblogs.asp.net/despos/archive/2005/11/09/430078.aspx

Standards Based Web:Standards Based Web:

ASP.NET AJAXASP.NET AJAX

asp.net server extensions

ajax servercontrols

app services bridge

web servicesbridge

asp.net ajax

microsoft ajax library

controls, components

script core

base class library

component model/ui framework

browser compatibility

asp.net 2.0

applicationservices

pageframework,server controls

asp.netmarkup

web services(asmx or wcf)

html, cssjavascript

serviceproxies

benefitsbenefitsenhanced: immersive, customizable & enhanced: immersive, customizable & interactive uiinteractive ui

ubiquitous: cross-platform & ubiquitous: cross-platform & standards-basedstandards-based

friction-free: zero installation & small friction-free: zero installation & small payloadpayload

productive: advanced tools & improved productive: advanced tools & improved developer-designer workflowdeveloper-designer workflow

seamless: extensible & access to seamless: extensible & access to application servicesapplication services

enterprise-ready: 24x7x365 supportenterprise-ready: 24x7x365 support

ASP.NET AJAXASP.NET AJAX

A framework for building next generation, A framework for building next generation, cross-platform, browsing experiencescross-platform, browsing experiences

Ubiquitous, cross-platform,Ubiquitous, cross-platform, browser support browser support

Most-productiveMost-productive framework for building framework for building AJAX-enabled web applicationsAJAX-enabled web applications

Rich tool support for Rich tool support for designerdesigner and and developerdeveloper workflow workflow

No costNo cost, free tool support, , free tool support, easyeasy to use to use

ASP.NET AJAX – 3 BuildsASP.NET AJAX – 3 BuildsASP.NET AJAX “Core”ASP.NET AJAX “Core”

Fully supported product on top of ASP.NET 2.0Fully supported product on top of ASP.NET 2.0

ASP.NET AJAX Control ToolkitASP.NET AJAX Control ToolkitLibrary of free ASP.NET AJAX Library of free ASP.NET AJAX controls/extenderscontrols/extenders

ASP.NET AJAX “Futures” CTPASP.NET AJAX “Futures” CTPFeatures not quite ready to bake into the coreFeatures not quite ready to bake into the core

Go-Live license for deploymentGo-Live license for deployment

ASP.NET AJAX CoreASP.NET AJAX Core

Client Side JS LibraryClient Side JS Library

ScriptManagerScriptManager

ScriptManagerProxyScriptManagerProxy

TimerTimer

UpdatePanelUpdatePanel

UpdateProgressUpdateProgress

““Futures” CTPFutures” CTP

AutoCompleteExtenderAutoCompleteExtender

DragOverlayExtenderDragOverlayExtender

ProfileServiceProfileService

ScriptScript

TimerControlTimerControl

ASP.NET AJAX Control ToolkitASP.NET AJAX Control ToolkitSeparate download from core ASP.NET AJAXSeparate download from core ASP.NET AJAX

Great library of free ASP.NET AJAX enabled controlsGreat library of free ASP.NET AJAX enabled controls

Download from http://ajax.asp.net/Download from http://ajax.asp.net/

Developed using a collaborative source modelDeveloped using a collaborative source modelAll source freely available with modification licenseAll source freely available with modification license

Both Microsoft & non-Microsoft developers can Both Microsoft & non-Microsoft developers can contributecontribute

Already contains 30+ really cool controlsAlready contains 30+ really cool controlsGoal is to get 50-100 great controls over the next Goal is to get 50-100 great controls over the next monthsmonths

ASP.NET AJAXASP.NET AJAX

Web ServerWeb Server

IE

Firefox

Safari

BrowseBrowserr

ClientsClients

Atlas Client Atlas Client JavaScript JavaScript LibrariesLibraries

AtlasUIGlitz.js

AtlasGadgets.js

AtlasFX.js

AtlasCompat.js

AtlasRuntime.js

JSON Bridge Support

Membership & Personalization

Support

ASP.NET Server Control Integration

IIS & ASP.NETIIS & ASP.NET

Apache & PHPApache & PHP

ColdFusionColdFusion

Server-Centric Programming Server-Centric Programming ModelModel

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 BehaviorUI Behavior(Managed(Managed

Code)Code)

UI BehaviorUI Behavior(Managed(Managed

Code)Code)

Input Data

Updated UI + Behavior

Initial Rendering

(UI + Behavior)

Client-Centric Programming Client-Centric Programming ModelModel

BrowserBrowser

PresentationPresentation(HTML/CSS)(HTML/CSS)

PresentationPresentation(HTML/CSS)(HTML/CSS)

““Atlas”Atlas”ServiceServiceProxiesProxies

““Atlas”Atlas”ServiceServiceProxiesProxies

UI BehaviorUI Behavior(Script)(Script)

UI BehaviorUI Behavior(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 + Behavior)

Data

Data

Using ASP.NET AJAXUsing ASP.NET AJAX

Demo: ASP.NET AJAXDemo: ASP.NET AJAX“Hello World”“Hello World”

ASP.NET AJAXASP.NET AJAXApplication No-No’sApplication No-No’s

and Gotchas!and Gotchas!Do not trust client inputDo not trust client input

Do not enforce business rules on the Do not enforce business rules on the clientclient

Do not think that this is for Do not think that this is for “Everything”“Everything”

Beware the “Beta”! Beware the “Beta”!

Why ASP.NET AJAX is ImportantWhy ASP.NET AJAX is Important

Complete “Out of the box” in VS.nextComplete “Out of the box” in VS.next(Expect complete IDE support)(Expect complete IDE support)

““Go Live” (as of March 2006!)Go Live” (as of March 2006!)

RTM *very* soon!RTM *very* soon!

Leveraged for Web GadgetsLeveraged for Web Gadgets

Directional Framework for MicrosoftDirectional Framework for Microsoft

Leverage existing server side skills to make Leverage existing server side skills to make robust client side activitiesrobust client side activities

One day, there will be documentation!One day, there will be documentation!(not bad now either)(not bad now either)

Some of the AJAX Some of the AJAX Control Toolkit ExtendersControl Toolkit Extenders

AutoCompleteTextBoxExtenderAutoCompleteTextBoxExtender

CollapsablePanelExtenderCollapsablePanelExtender

AnimationExtenderAnimationExtender

ConfirmButtonExtenderConfirmButtonExtender

DragPanelExtenderDragPanelExtender

DropShadowExtenderDropShadowExtender

AlwaysVisibleExtenderAlwaysVisibleExtender

DynamicPopulateExtenderDynamicPopulateExtender

FilteredTextBoxExtenderFilteredTextBoxExtender

HoverMenuExtenderHoverMenuExtender

MutuallyExclusiveCheckboxExtenderMutuallyExclusiveCheckboxExtender

MM odalPopupExtenderodalPopupExtender

NumericUpDownExtenderNumericUpDownExtender

PasswordStrengthExtenderPasswordStrengthExtender

PopUpControlExtenderPopUpControlExtender

ResizableControlExtenderResizableControlExtender

RoundedCornersExtenderRoundedCornersExtender

SliderExtenderSliderExtender

TextBoxWaterMarkExtenderTextBoxWaterMarkExtender

UpdatePanelAnimationExtenderUpdatePanelAnimationExtender

ValidatorCalloutExtenderValidatorCalloutExtender

Demo:Demo:ASP.NET AJAX Control ToolkitASP.NET AJAX Control ToolkitOpen Source Extenders to enableOpen Source Extenders to enable

AJAX and Compelling User ExperiencesAJAX and Compelling User Experiences

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