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.