NGW014

Developing A Better User Experience With "Atlas"
Shanku Niyogi
Product Unit Manager UI Framework and Services Microsoft Corporation

“Atlas” At MIX
Sessions
Monday 3:00 – NGW014 - Developing a Better User Experience with “Atlas” Tuesday 1:30 – NGW052 - Designing a Better User Experience with AJAX and “Atlas” Tuesday 3:00 – NGW038 - Overview of Live.com Gadgets Wednesday 10:00 – NGW002 – Building Components and Services for the Programmable Web

Labs @ the Sandbox
2

Better Web User Experiences
Responsive to users Naturally interactive Personalized for users Connected to the web Immersive beyond the site

“Atlas”
A framework for building a new generation of richer, more interactive, highly personalized standards based Web applications
Easy-to-use, high-productivity framework Full integration with server programming model World-class tools for AJAX-style applications Cross-platform, works on all modern browsers

Developing With “Atlas”
Server-centric application model
Browser Server Application

Presentation (HTML/CSS)

Initial Rendering (UI + Behavior)
Input Data Updated UI + Behavior

Pages

UI Behavior (Managed Code)

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

ASP.NET
Page Framework, Server Controls Application Services

Developing With “Atlas”
Client-centric application model
Browser
Presentation (HTML/CSS) “Atlas” Service Proxies

Server Application Initial Rendering (UI + Behavior) Data Data
Pages

UI Behavior (Script)

UI Behavior (Managed Code)

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

ASP.NET
Page Framework, Server Controls Application Services

Server Or Client Centric?
Server-centric web sites and apps Work with existing server application model Keep core UI/application logic on server Improve latency, interactivity, personalization Client-centric browser applications Fully exploit DHTML in presentation tier Use AJAX for data, services, composition Enable new immersive experiences “Atlas” provides a great framework for both

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

“Atlas” Server Controls
Easily build rich experiences with ASP.NET Application UI and core logic still runs on server Avoid need to master JavaScript and async programming Use AJAX techniques to reduce full roundtrips Enable incremental page UI updates Examples: data navigation and editing, form validation, auto refresh Fall back for down-level browsers Richer interactivity for existing ASP.NET controls Enrich the client UI experience of web applications Examples: auto-completion, drag-and-drop, tooltips

“Atlas” Server Controls
Reducing full roundtrips <Atlas:UpdatePanel> control
Easily define “updatable” regions of a page Server roundtrips become asynchronous “Atlas” handles all the infrastructure
<atlas:UpdatePanel id=“u1” runat=“server”> <ContentTemplate>
<!-- This content can be dynamically updated! ->

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

Update Panels

“Atlas” Server Controls
Adding interactivity
“Atlas” client behaviors
Reusable piece of interactive functionality Attach to HTML UI declaratively or in code Examples:
Drag-and-drop Tooltips Popups Auto-complete

Easily extend or write your own in Javascript

“Atlas” Server Controls
Adding interactivity
“Atlas” control extenders
Extend ASP.NET controls with “Atlas” behaviors Encapsulate both client and server behavior Same familiar programming model as ASP.NET server controls
<asp:TextBox runat="server" ID="TextBox1" /> <atlas:AutoCompleteExtender runat="server" ID="AC1"> <atlas:AutoCompleteProperties TargetControlID="TextBox1" ServicePath="AutoComplete.asmx“ ServiceMethod="GetWords" Enabled="true" /> </atlas:AutoCompleteExtender>

Control Extenders

Client-Centric Development With “Atlas”

“Atlas” Script Framework
Scenarios
Mash-up and composite applications and sites Components and Gadgets (Live.com, Windows Sidebar)

Powerful script framework
Rich type system and class library for Javascript Component model and UI framework Rich client-side data access and databinding

Easily integrated with server application model
Easily consume web services from browser Script access to ASP.NET application services Server-side bridge to reuse 3rd party services

“Atlas” Script Framework
Networking
A networking stack for asynchronous services
High-level classes for requests/responses Customizable behavior – batching, prioritization, queuing Pluggable data format and wire protocol
Uses JSON (JavaScript Object Notation) and REST by default

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

Integrated with ASP.NET application services
Autentication, authorization, session state, caching

Networking

“Atlas” Script Framework

“Atlas” Script Framework
Component and control model
Enables rich encapsulation and reuse
For UI behavior For non-visual components – data, services Rich client-side databinding and validation

Clean developer/designer workflow
UI defined using standard XHTML and CSS Page behavior defined and attached separately “Atlas” components and controls can be declared procedurally or declaratively

“Atlas” Script Framework
Component 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 Framework
Component 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 Framework
Client data
Enable rich client-side data scenarios
Rich data navigation and visualization Batched data editing

Data components
Disconnected dataset for Javascript Filtering, sorting, batched updates Integrated with ASP.NET data service

ListView client control
Present rich data using HTML templates

Client Components And Data

“Atlas” Script Framework
Using “Atlas” without ASP.NET

“Atlas” Script Framework
Using “Atlas” without ASP.NET
Use “Atlas” client script with any server
Get the client script files from Program Files directory after installation

What ASP.NET provides
Great integration with server-centric UI and programming model Browser detection Access to rich set of application services Web services, proxies, and bridges

Using “Atlas” With PHP

How Do I Get Started?
“Atlas” Community Technology Preview
Releases every 6-8 weeks Installs on Visual Web Developer 2005 and ASP.NET 2.0 (both available for free) Go Live CTP – build live sites with “Atlas” today!

“Atlas” community site: http://atlas.asp.net
Download the latest bits Tutorials, samples, forums, resources ASP.NET “Atlas” Control Extender Kit and Samples Source code from MIX sessions

We want your feedback!

Questions?

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