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 – 3:00 – NGW NGW014 014 - Deve Developin loping g a Bette Betterr User Experience with “Atlas” Tuesday 1:30 – 1:30 – NGW0 NGW052 52 - Desi Designing gning a Better Better User Experience with AJAX and “Atlas” Tuesday 3:00 – 3:00 – NGW NGW038 038 - Ove Overvi rview ew of of Live.com Gadgets Wednesday 10:00 – 10:00 – NGW002 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
“Atlas” A framework for building a new generation of richer , more interactive 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 Server Application
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 cont content ent can can be dynam dynamical ically ly update updated! d! ->
<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 3 rd party services
“Atlas” Script Framework Networking A networking stack for asynchronou asynchronous s services High-level classes for requests/responses Customizable behavior – behavior – batching, prioritization, queuing Pluggable data format and wire w ire 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 – 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>
“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 available for free) Go Live CTP – CTP – build live sites sites with “Atlas” “Atlas” today!
“Atlas” community site: http://atlas.asp.net Download the latest bits Tutorials, samples, forums, resources ASP.NET “Atlas” Control Extender Extender Kit and Samples Samples Source code from MIX sessions