Developing a Better User Experience with "Atlas"

Developing A Better User Developing A Better User Experience With "Atlas"Experience With "Atlas"

Shanku NiyogiShanku NiyogiProduct Unit ManagerProduct Unit ManagerUI Framework and ServicesUI Framework and ServicesMicrosoft CorporationMicrosoft Corporation

NGW014NGW014

““Atlas” At MIXAtlas” At MIX

SessionsSessionsMonday 3:00 Monday 3:00 – NGW014 - Developing a Better – NGW014 - Developing a Better User Experience with “Atlas” User Experience with “Atlas”

Tuesday 1:30Tuesday 1:30 – NGW052 - Designing a Better – NGW052 - Designing a Better User Experience with AJAX and “Atlas”User Experience with AJAX and “Atlas”

Tuesday 3:00 Tuesday 3:00 – NGW038 - Overview of – NGW038 - Overview of Live.com GadgetsLive.com Gadgets

Wednesday 10:00 Wednesday 10:00 – NGW002 – Building – NGW002 – Building Components and Services for the Components and Services for the Programmable WebProgrammable Web

Labs @ the SandboxLabs @ the Sandbox

2

Better Web User Better Web User ExperiencesExperiences

Responsive to usersResponsive to users

Naturally interactive Naturally interactive

Personalized for usersPersonalized for users

Connected to the webConnected to the web

Immersive beyond the siteImmersive beyond the site

““Atlas”Atlas”

Easy-to-use, high-productivity framework Easy-to-use, high-productivity framework

Full integration with server programming modelFull integration with server programming model

World-class tools for AJAX-style applicationsWorld-class tools for AJAX-style applications

Cross-platform, works on all modern browsersCross-platform, works on all modern browsers

A A frameworkframework for building a new for building a new generation of generation of richerricher, more , more interactiveinteractive,,

highly highly personalizedpersonalized standards basedstandards based Web applications Web applications

Developing With “Atlas” Developing With “Atlas” Server-centric application modelServer-centric application model

ASP.NETASP.NET

Application Application ServicesServices

Application Application ServicesServices

Page Page Framework,Framework,

Server ControlsServer Controls

Page Page Framework,Framework,

Server ControlsServer Controls

“Atlas” Script Framework“Atlas” Script Framework

Client lient Application Application ServicesServices

Client lient Application Application ServicesServices

Component/UIComponent/UIFramework,Framework,

ControlsControls

Component/UIComponent/UIFramework,Framework,

ControlsControls

BrowserBrowser

PresentationPresentation(HTML/CSS)(HTML/CSS)

PresentationPresentation(HTML/CSS)(HTML/CSS)

Server ApplicationServer 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)

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 Application ServicesServices

Application Application ServicesServices

Page Page Framework,Framework,

Server ControlsServer Controls

Page Page Framework,Framework,

Server ControlsServer Controls

“Atlas” Script Framework“Atlas” Script Framework

Client Client Application Application ServicesServices

Client Client Application Application ServicesServices

Component/UIComponent/UIFramework,Framework,

ControlsControls

Component/UIComponent/UIFramework,Framework,

ControlsControls

Server ApplicationServer Application

PagesPagesPagesPages

UI BehaviorUI Behavior(Managed(Managed

Code)Code)

UI BehaviorUI Behavior(Managed(Managed

Code)Code)

Developing With “Atlas”Developing With “Atlas”Client-centric application modelClient-centric application model

Initial Rendering

(UI + Behavior)

Data

Data

Server Or Client Centric?Server Or Client Centric?

Server-centric web sites and appsServer-centric web sites and appsWork with existing server application model Work with existing server application model Keep core UI/application logic on serverKeep core UI/application logic on serverImprove latency, interactivity, personalizationImprove latency, interactivity, personalization

Client-centric browser applicationsClient-centric browser applicationsFully exploit DHTML in presentation tierFully exploit DHTML in presentation tierUse AJAX for data, services, compositionUse AJAX for data, services, compositionEnable new immersive experiencesEnable new immersive experiences

““Atlas” provides a great framework for bothAtlas” provides a great framework for both

Server-Centric Server-Centric Development With “Atlas” Development With “Atlas” And ASP.NETAnd ASP.NET

““Atlas” Server ControlsAtlas” Server Controls

Easily build rich experiences with ASP.NETEasily build rich experiences with ASP.NETApplication UI and core logic still runs on serverApplication UI and core logic still runs on serverAvoid need to master JavaScript and async Avoid need to master JavaScript and async programmingprogramming

Use AJAX techniques to reduce full roundtripsUse AJAX techniques to reduce full roundtripsEnable incremental page UI updates Enable incremental page UI updates Examples: data navigation and editing, form Examples: data navigation and editing, form validation, auto refreshvalidation, auto refreshFall back for down-level browsersFall back for down-level browsers

Richer interactivity for existing ASP.NET controlsRicher interactivity for existing ASP.NET controlsEnrich the client UI experience of web applicationsEnrich the client UI experience of web applicationsExamples: auto-completion, drag-and-drop, tooltipsExamples: auto-completion, drag-and-drop, tooltips

““Atlas” Server ControlsAtlas” Server ControlsReducing full roundtripsReducing full roundtrips

<Atlas:UpdatePanel> <Atlas:UpdatePanel> controlcontrolEasily define “updatable” regions of a pageEasily define “updatable” regions of a pageServer roundtrips become asynchronous Server roundtrips become asynchronous ““Atlas” handles all the infrastructureAtlas” handles all the infrastructure

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

<!-- This content can be dynamically updated! -><!-- This content can be dynamically updated! ->

<asp:Calendar id=“cal1” runat=“server”/><asp:Calendar id=“cal1” runat=“server”/>

<ContentTemplate><ContentTemplate></atlas:UpdatePanel></atlas:UpdatePanel>

Update PanelsUpdate Panels

““Atlas” Server ControlsAtlas” Server ControlsAdding interactivityAdding interactivity

““Atlas” client behaviorsAtlas” client behaviorsReusable piece of interactive functionalityReusable piece of interactive functionality

Attach to HTML UI declaratively or in codeAttach to HTML UI declaratively or in code

Examples: Examples: Drag-and-dropDrag-and-drop

TooltipsTooltips

PopupsPopups

Auto-completeAuto-complete

Easily extend or write your own in Easily extend or write your own in JavascriptJavascript

““Atlas” Server ControlsAtlas” Server ControlsAdding interactivityAdding interactivity

““Atlas” control extendersAtlas” control extendersExtend ASP.NET controls with “Atlas” behaviorsExtend ASP.NET controls with “Atlas” behaviors

Encapsulate both client and server behaviorEncapsulate both client and server behavior

Same familiar programming model as ASP.NET Same familiar programming model as ASP.NET server controlsserver controls

<asp:TextBox runat="server" ID="TextBox1" /><asp:TextBox runat="server" ID="TextBox1" />

<atlas:AutoCompleteExtender runat="server" ID="AC1"><atlas:AutoCompleteExtender runat="server" ID="AC1">

<atlas:AutoCompleteProperties <atlas:AutoCompleteProperties

TargetControlID="TextBox1" TargetControlID="TextBox1"

ServicePath="AutoComplete.asmx“ServicePath="AutoComplete.asmx“

ServiceMethod="GetWords" Enabled="true" />ServiceMethod="GetWords" Enabled="true" />

</atlas:AutoCompleteExtender></atlas:AutoCompleteExtender>

Control ExtendersControl Extenders

Client-Centric Client-Centric Development With “Atlas”Development With “Atlas”

““Atlas” Script FrameworkAtlas” Script Framework

ScenariosScenariosMash-up and composite applications and sitesMash-up and composite applications and sites

Components and Gadgets (Live.com, Windows SidebarComponents and Gadgets (Live.com, Windows Sidebar))

Powerful script frameworkPowerful script frameworkRich type system and class library for JavascriptRich type system and class library for Javascript

Component model and UI frameworkComponent model and UI framework

Rich client-side data access and databindingRich client-side data access and databinding

Easily integrated with server application modelEasily integrated with server application modelEasily consume web services from browserEasily consume web services from browser

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

““Atlas” Script FrameworkAtlas” Script FrameworkNetworkingNetworking

A networking stack for asynchronous services A networking stack for asynchronous services High-level classes for requests/responsesHigh-level classes for requests/responsesCustomizable behavior – batching, prioritization, queuingCustomizable behavior – batching, prioritization, queuingPluggable data format and wire protocolPluggable data format and wire protocol

Uses JSON (JavaScript Object Notation) and REST by defaultUses JSON (JavaScript Object Notation) and REST by default

Easy access to server-based servicesEasy access to server-based servicesEasily call server-hosted web services Easily call server-hosted web services ““Atlas” takes care of proxy generation, plumbing, Atlas” takes care of proxy generation, plumbing, serializationserializationAutomatic serialization of .NET types to and from JavaScriptAutomatic serialization of .NET types to and from JavaScript

Integrated with ASP.NET application servicesIntegrated with ASP.NET application servicesAutentication, authorization, session state, cachingAutentication, authorization, session state, caching

NetworkingNetworking

““Atlas” Script FrameworkAtlas” Script Framework

““Atlas” Script FrameworkAtlas” Script FrameworkComponent and control modelComponent and control model

Enables rich encapsulation and reuseEnables rich encapsulation and reuseFor UI behaviorFor UI behaviorFor non-visual components – data, servicesFor non-visual components – data, servicesRich client-side databinding and validationRich client-side databinding and validation

Clean developer/designer workflowClean developer/designer workflowUI defined using standard XHTML and CSSUI defined using standard XHTML and CSSPage behavior defined and attached Page behavior defined and attached separatelyseparately““Atlas” components and controls can be Atlas” components and controls can be declared procedurally or declarativelydeclared procedurally or declaratively

““Atlas” Script FrameworkAtlas” Script FrameworkComponent and control modelComponent and control model

Search for: <input id=“Query" type="text" /><div id="completionList"></div>

........

function doLoad() {

var auto1 = new Web.UI.AutoCompleteBehavior(); auto1.set_completionList($("completionList")); auto1.set_serviceURL("AutoCompleteService.asmx"); auto1.set_serviceMethod("GetCompletionList"); auto1.set_completionSetCount(15); auto1.set_completionInterval(500);

var txt1 = new Web.UI.TextBox(document.getElementById(‘Query'));

txt1.get_behaviors().add(auto1);

txt1.initialize(); auto1.initialize();}

““Atlas” Script FrameworkAtlas” Script FrameworkComponent and control modelComponent and control model

Search for: <input id=“Query" type="text" /><div id="completionList"></div>

........

<script type="text/xml-script"> <page xmlns:script="http://schemas.microsoft.com/xml-script/2005"> <components> <textBox id=“Query"> <behaviors> <autoComplete completionList="completionList" serviceURL="AutoCompleteService.asmx" serviceMethod="GetWordList"

completionSetCount="15" completionInterval="500" /> </behaviors> </textBox> </components> </page></script>

““Atlas” Script FrameworkAtlas” Script FrameworkClient dataClient data

Enable rich client-side data scenariosEnable rich client-side data scenariosRich data navigation and visualizationRich data navigation and visualization

Batched data editingBatched data editing

Data componentsData componentsDisconnected dataset for JavascriptDisconnected dataset for Javascript

Filtering, sorting, batched updatesFiltering, sorting, batched updates

Integrated with ASP.NET data serviceIntegrated with ASP.NET data service

ListView client controlListView client controlPresent rich data using HTML templatesPresent rich data using HTML templates

Client Components And DataClient Components And Data

““Atlas” Script FrameworkAtlas” Script FrameworkUsing “Atlas” without ASP.NETUsing “Atlas” without ASP.NET

““Atlas” Script FrameworkAtlas” Script FrameworkUsing “Atlas” without ASP.NETUsing “Atlas” without ASP.NET

Use “Atlas” client script with any serverUse “Atlas” client script with any serverGet the client script files from Program Files Get the client script files from Program Files directory after installationdirectory after installation

What ASP.NET providesWhat ASP.NET providesGreat integration with server-centric UI and Great integration with server-centric UI and programming modelprogramming model

Browser detectionBrowser detection

Access to rich set of application servicesAccess to rich set of application services

Web services, proxies, and bridgesWeb services, proxies, and bridges

Using “Atlas” With PHPUsing “Atlas” With PHP

How Do I Get Started?How Do I Get Started?

““Atlas” Community Technology PreviewAtlas” Community Technology PreviewReleases every 6-8 weeksReleases every 6-8 weeks

Installs on Visual Web Developer 2005 and Installs on Visual Web Developer 2005 and ASP.NET 2.0 (both available for free)ASP.NET 2.0 (both available for free)

Go Live CTP – build live sites with “Atlas” today!Go Live CTP – build live sites with “Atlas” today!

““Atlas” community site: Atlas” community site: http://atlas.asp.nethttp://atlas.asp.netDownload the latest bitsDownload the latest bits

Tutorials, samples, forums, resourcesTutorials, samples, forums, resources

ASP.NET “Atlas” Control Extender Kit and SamplesASP.NET “Atlas” Control Extender Kit and Samples

Source code from MIX sessionsSource code from MIX sessions

We want your feedback!We want your feedback!

Questions?Questions?

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