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

“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

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

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

Responsive to users

Naturally interactive

Personalized for users

Connected to the web

Immersive beyond the site

“Atlas” 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 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 Presentation (HTML/CSS) ASP.NET Application Services Page Framework, Server Controls “ Atlas” Script Framework C lient Application Services Component/UI Framework, Controls Server Application Pages UI Behavior (Managed Code) Input Data Updated UI + Behavior Initial Rendering (UI + Behavior)

Developing With “Atlas” Client-centric application model Browser Presentation (HTML/CSS) “ Atlas” Service Proxies UI Behavior (Script) ASP.NET Application Services Page Framework, Server Controls “ Atlas” Script Framework Client Application Services Component/UI Framework, Controls Server Application Pages UI Behavior (Managed Code) Initial Rendering (UI + Behavior) Data Data

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

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>

<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” 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=&quot;server&quot; ID=&quot;TextBox1&quot; /> <atlas:AutoCompleteExtender runat=&quot;server&quot; ID=&quot;AC1&quot;> <atlas:AutoCompleteProperties TargetControlID=&quot;TextBox1&quot; ServicePath=&quot;AutoComplete.asmx“ ServiceMethod=&quot;GetWords&quot; Enabled=&quot;true&quot; /> </atlas:AutoCompleteExtender>

“ 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=&quot;server&quot; ID=&quot;TextBox1&quot; />

<atlas:AutoCompleteExtender runat=&quot;server&quot; ID=&quot;AC1&quot;>

<atlas:AutoCompleteProperties

TargetControlID=&quot;TextBox1&quot;

ServicePath=&quot;AutoComplete.asmx“

ServiceMethod=&quot;GetWords&quot; Enabled=&quot;true&quot; />

</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 3 rd party services

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 3 rd 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

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

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&quot; type=&quot;text&quot; /> <div id=&quot;completionList&quot;></div> ........ function doLoad() { var auto1 = new Web.UI.AutoCompleteBehavior(); auto1.set_completionList($(&quot;completionList&quot;)); auto1.set_serviceURL(&quot;AutoCompleteService. asmx &quot;); auto1.set_serviceMethod(&quot;GetCompletionList&quot;); 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(); }

Search for: <input id=“Query&quot; type=&quot;text&quot; />

<div id=&quot;completionList&quot;></div>

........

function doLoad() {

var auto1 = new Web.UI.AutoCompleteBehavior();

auto1.set_completionList($(&quot;completionList&quot;));

auto1.set_serviceURL(&quot;AutoCompleteService. asmx &quot;);

auto1.set_serviceMethod(&quot;GetCompletionList&quot;);

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&quot; type=&quot;text&quot; /> <div id=&quot;completionList&quot;></div> ........ <script type=&quot;text/xml-script&quot;> <page xmlns:script=&quot;http://schemas.microsoft.com/xml-script/2005&quot;> <components> <textBox id=“Query&quot;> <behaviors> <autoComplete completionList=&quot;completionList&quot; serviceURL=&quot;AutoCompleteService.asmx&quot; serviceMethod=&quot;GetWordList&quot; completionSetCount=&quot;15&quot; completionInterval=&quot;500&quot; /> </behaviors> </textBox> </components> </page> </script>

Search for: <input id=“Query&quot; type=&quot;text&quot; />

<div id=&quot;completionList&quot;></div>

........

<script type=&quot;text/xml-script&quot;>

<page xmlns:script=&quot;http://schemas.microsoft.com/xml-script/2005&quot;>

<components>

<textBox id=“Query&quot;>

<behaviors>

<autoComplete

completionList=&quot;completionList&quot;

serviceURL=&quot;AutoCompleteService.asmx&quot;

serviceMethod=&quot;GetWordList&quot;

completionSetCount=&quot;15&quot;

completionInterval=&quot;500&quot; />

</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

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

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!

“ 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.