Your SlideShare is downloading. ×
0
Developing A Better User Experience With "Atlas" Shanku Niyogi Product Unit Manager UI Framework and Services Mi...
“Atlas” At MIX <ul><li>Sessions </li></ul><ul><ul><li>Monday 3:00  – NGW014 - Developing a Better User Experience with “At...
Better Web User Experiences <ul><li>Responsive to users </li></ul><ul><li>Naturally interactive  </li></ul><ul><li>Persona...
“Atlas” <ul><li>Easy-to-use, high-productivity framework  </li></ul><ul><li>Full integration with server programming model...
Developing With “Atlas”  Server-centric application model Browser Presentation (HTML/CSS) ASP.NET Application Services Pag...
Developing With “Atlas” Client-centric application model Browser Presentation (HTML/CSS) “ Atlas” Service Proxies UI Behav...
Server Or Client Centric? <ul><li>Server-centric web sites and apps </li></ul><ul><li>Work with existing server applicatio...
Server-Centric Development With “Atlas” And ASP.NET
“Atlas” Server Controls <ul><li>Easily build rich experiences with ASP.NET </li></ul><ul><li>Application UI and core logic...
“Atlas” Server Controls Reducing full roundtrips <ul><li><Atlas:UpdatePanel>  control </li></ul><ul><ul><li>Easily define ...
Update Panels
“Atlas” Server Controls Adding interactivity <ul><li>“ Atlas” client behaviors </li></ul><ul><ul><li>Reusable piece of int...
“Atlas” Server Controls Adding interactivity <ul><li>“ Atlas” control extenders </li></ul><ul><ul><li>Extend ASP.NET contr...
Control Extenders
Client-Centric Development With “Atlas”
“Atlas” Script Framework <ul><li>Scenarios </li></ul><ul><li>Mash-up and composite applications and sites </li></ul><ul><l...
“Atlas” Script Framework Networking <ul><li>A networking stack for asynchronous services  </li></ul><ul><ul><li>High-level...
Networking
“Atlas” Script Framework
“Atlas” Script Framework Component and control model <ul><li>Enables rich encapsulation and reuse </li></ul><ul><ul><li>Fo...
“Atlas” Script Framework Component and control model <ul><li>Search for: <input id=“Query&quot; type=&quot;text&quot; /> <...
“Atlas” Script Framework Component and control model <ul><li>Search for: <input id=“Query&quot; type=&quot;text&quot; /> <...
“Atlas” Script Framework Client data <ul><li>Enable rich client-side data scenarios </li></ul><ul><ul><li>Rich data naviga...
Client Components And Data
“Atlas” Script Framework Using “Atlas” without ASP.NET
“Atlas” Script Framework Using “Atlas” without ASP.NET <ul><li>Use “Atlas” client script with any server </li></ul><ul><ul...
Using “Atlas” With PHP
How Do I Get Started? <ul><li>“ Atlas” Community Technology Preview </li></ul><ul><ul><li>Releases every 6-8 weeks </li></...
Questions?
 
© 2006 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes n...
Upcoming SlideShare
Loading in...5
×

Developing a Better User Experience with "Atlas"

540

Published on

This session is a developer overview of "Atlas", Microsoft's new cross-platform/cross-browser framework for building rich, client-centric AJAX-style Web applications. Learn about data-binding, modernized object-oriented JavaScript techniques, and designing interactive UI, as you follow along through the construction of a mash-up.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
540
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Transcript of "Developing a Better User Experience with "Atlas""

    1. 1. Developing A Better User Experience With &quot;Atlas&quot; Shanku Niyogi Product Unit Manager UI Framework and Services Microsoft Corporation NGW014
    2. 2. “Atlas” At MIX <ul><li>Sessions </li></ul><ul><ul><li>Monday 3:00 – NGW014 - Developing a Better User Experience with “Atlas” </li></ul></ul><ul><ul><li>Tuesday 1:30 – NGW052 - Designing a Better User Experience with AJAX and “Atlas” </li></ul></ul><ul><ul><li>Tuesday 3:00 – NGW038 - Overview of Live.com Gadgets </li></ul></ul><ul><ul><li>Wednesday 10:00 – NGW002 – Building Components and Services for the Programmable Web </li></ul></ul><ul><li>Labs @ the Sandbox </li></ul>
    3. 3. Better Web User Experiences <ul><li>Responsive to users </li></ul><ul><li>Naturally interactive </li></ul><ul><li>Personalized for users </li></ul><ul><li>Connected to the web </li></ul><ul><li>Immersive beyond the site </li></ul>
    4. 4. “Atlas” <ul><li>Easy-to-use, high-productivity framework </li></ul><ul><li>Full integration with server programming model </li></ul><ul><li>World-class tools for AJAX-style applications </li></ul><ul><li>Cross-platform, works on all modern browsers </li></ul>A framework for building a new generation of richer , more interactive , highly personalized standards based Web applications
    5. 5. 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)
    6. 6. 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
    7. 7. Server Or Client Centric? <ul><li>Server-centric web sites and apps </li></ul><ul><li>Work with existing server application model </li></ul><ul><li>Keep core UI/application logic on server </li></ul><ul><li>Improve latency, interactivity, personalization </li></ul><ul><li>Client-centric browser applications </li></ul><ul><li>Fully exploit DHTML in presentation tier </li></ul><ul><li>Use AJAX for data, services, composition </li></ul><ul><li>Enable new immersive experiences </li></ul><ul><li>“ Atlas” provides a great framework for both </li></ul>
    8. 8. Server-Centric Development With “Atlas” And ASP.NET
    9. 9. “Atlas” Server Controls <ul><li>Easily build rich experiences with ASP.NET </li></ul><ul><li>Application UI and core logic still runs on server </li></ul><ul><li>Avoid need to master JavaScript and async programming </li></ul><ul><li>Use AJAX techniques to reduce full roundtrips </li></ul><ul><li>Enable incremental page UI updates </li></ul><ul><li>Examples: data navigation and editing, form validation, auto refresh </li></ul><ul><li>Fall back for down-level browsers </li></ul><ul><li>Richer interactivity for existing ASP.NET controls </li></ul><ul><li>Enrich the client UI experience of web applications </li></ul><ul><li>Examples: auto-completion, drag-and-drop, tooltips </li></ul>
    10. 10. “Atlas” Server Controls Reducing full roundtrips <ul><li><Atlas:UpdatePanel> control </li></ul><ul><ul><li>Easily define “updatable” regions of a page </li></ul></ul><ul><ul><li>Server roundtrips become asynchronous </li></ul></ul><ul><ul><li>“ Atlas” handles all the infrastructure </li></ul></ul><ul><ul><ul><li><atlas:UpdatePanel id=“u1” runat=“server”> </li></ul></ul></ul><ul><ul><ul><li><ContentTemplate> </li></ul></ul></ul><ul><ul><ul><li><!-- This content can be dynamically updated! -> </li></ul></ul></ul><ul><ul><ul><li><asp:Calendar id=“cal1” runat=“server”/> </li></ul></ul></ul><ul><ul><ul><li><ContentTemplate> </li></ul></ul></ul><ul><ul><ul><li></atlas:UpdatePanel> </li></ul></ul></ul>
    11. 11. Update Panels
    12. 12. “Atlas” Server Controls Adding interactivity <ul><li>“ Atlas” client behaviors </li></ul><ul><ul><li>Reusable piece of interactive functionality </li></ul></ul><ul><ul><li>Attach to HTML UI declaratively or in code </li></ul></ul><ul><ul><li>Examples: </li></ul></ul><ul><ul><ul><li>Drag-and-drop </li></ul></ul></ul><ul><ul><ul><li>Tooltips </li></ul></ul></ul><ul><ul><ul><li>Popups </li></ul></ul></ul><ul><ul><ul><li>Auto-complete </li></ul></ul></ul><ul><ul><li>Easily extend or write your own in Javascript </li></ul></ul>
    13. 13. “Atlas” Server Controls Adding interactivity <ul><li>“ Atlas” control extenders </li></ul><ul><ul><li>Extend ASP.NET controls with “Atlas” behaviors </li></ul></ul><ul><ul><li>Encapsulate both client and server behavior </li></ul></ul><ul><ul><li>Same familiar programming model as ASP.NET server controls </li></ul></ul><ul><ul><li><asp:TextBox runat=&quot;server&quot; ID=&quot;TextBox1&quot; /> </li></ul></ul><ul><ul><li><atlas:AutoCompleteExtender runat=&quot;server&quot; ID=&quot;AC1&quot;> </li></ul></ul><ul><ul><li><atlas:AutoCompleteProperties </li></ul></ul><ul><ul><li>TargetControlID=&quot;TextBox1&quot; </li></ul></ul><ul><ul><li>ServicePath=&quot;AutoComplete.asmx“ </li></ul></ul><ul><ul><li>ServiceMethod=&quot;GetWords&quot; Enabled=&quot;true&quot; /> </li></ul></ul><ul><ul><li></atlas:AutoCompleteExtender> </li></ul></ul>
    14. 14. Control Extenders
    15. 15. Client-Centric Development With “Atlas”
    16. 16. “Atlas” Script Framework <ul><li>Scenarios </li></ul><ul><li>Mash-up and composite applications and sites </li></ul><ul><li>Components and Gadgets (Live.com, Windows Sidebar ) </li></ul><ul><li>Powerful script framework </li></ul><ul><li>Rich type system and class library for Javascript </li></ul><ul><li>Component model and UI framework </li></ul><ul><li>Rich client-side data access and databinding </li></ul><ul><li>Easily integrated with server application model </li></ul><ul><li>Easily consume web services from browser </li></ul><ul><li>Script access to ASP.NET application services </li></ul><ul><li>Server-side bridge to reuse 3 rd party services </li></ul>
    17. 17. “Atlas” Script Framework Networking <ul><li>A networking stack for asynchronous services </li></ul><ul><ul><li>High-level classes for requests/responses </li></ul></ul><ul><ul><li>Customizable behavior – batching, prioritization, queuing </li></ul></ul><ul><ul><li>Pluggable data format and wire protocol </li></ul></ul><ul><ul><ul><li>Uses JSON (JavaScript Object Notation) and REST by default </li></ul></ul></ul><ul><li>Easy access to server-based services </li></ul><ul><ul><li>Easily call server-hosted web services </li></ul></ul><ul><ul><li>“ Atlas” takes care of proxy generation, plumbing, serialization </li></ul></ul><ul><ul><li>Automatic serialization of .NET types to and from JavaScript </li></ul></ul><ul><li>Integrated with ASP.NET application services </li></ul><ul><ul><li>Autentication, authorization, session state, caching </li></ul></ul>
    18. 18. Networking
    19. 19. “Atlas” Script Framework
    20. 20. “Atlas” Script Framework Component and control model <ul><li>Enables rich encapsulation and reuse </li></ul><ul><ul><li>For UI behavior </li></ul></ul><ul><ul><li>For non-visual components – data, services </li></ul></ul><ul><ul><li>Rich client-side databinding and validation </li></ul></ul><ul><li>Clean developer/designer workflow </li></ul><ul><ul><li>UI defined using standard XHTML and CSS </li></ul></ul><ul><ul><li>Page behavior defined and attached separately </li></ul></ul><ul><ul><li>“ Atlas” components and controls can be declared procedurally or declaratively </li></ul></ul>
    21. 21. “Atlas” Script Framework Component and control model <ul><li>Search for: <input id=“Query&quot; type=&quot;text&quot; /> </li></ul><ul><li><div id=&quot;completionList&quot;></div> </li></ul><ul><li>........ </li></ul><ul><li>function doLoad() { </li></ul><ul><li>var auto1 = new Web.UI.AutoCompleteBehavior(); </li></ul><ul><li>auto1.set_completionList($(&quot;completionList&quot;)); </li></ul><ul><li>auto1.set_serviceURL(&quot;AutoCompleteService. asmx &quot;); </li></ul><ul><li>auto1.set_serviceMethod(&quot;GetCompletionList&quot;); </li></ul><ul><li>auto1.set_completionSetCount(15); </li></ul><ul><li>auto1.set_completionInterval(500); </li></ul><ul><li>var txt1 = new Web.UI.TextBox( document.getElementById (‘ Query ')); </li></ul><ul><li>txt1 .get_behaviors().add(auto1); </li></ul><ul><li>txt1 .initialize(); </li></ul><ul><li>auto1.initialize(); </li></ul><ul><li>} </li></ul>
    22. 22. “Atlas” Script Framework Component and control model <ul><li>Search for: <input id=“Query&quot; type=&quot;text&quot; /> </li></ul><ul><li><div id=&quot;completionList&quot;></div> </li></ul><ul><li>........ </li></ul><ul><li><script type=&quot;text/xml-script&quot;> </li></ul><ul><li><page xmlns:script=&quot;http://schemas.microsoft.com/xml-script/2005&quot;> </li></ul><ul><li><components> </li></ul><ul><li><textBox id=“Query&quot;> </li></ul><ul><li><behaviors> </li></ul><ul><li><autoComplete </li></ul><ul><li>completionList=&quot;completionList&quot; </li></ul><ul><li>serviceURL=&quot;AutoCompleteService.asmx&quot; </li></ul><ul><li>serviceMethod=&quot;GetWordList&quot; </li></ul><ul><li> completionSetCount=&quot;15&quot; </li></ul><ul><li>completionInterval=&quot;500&quot; /> </li></ul><ul><li></behaviors> </li></ul><ul><li></textBox> </li></ul><ul><li></components> </li></ul><ul><li></page> </li></ul><ul><li></script> </li></ul>
    23. 23. “Atlas” Script Framework Client data <ul><li>Enable rich client-side data scenarios </li></ul><ul><ul><li>Rich data navigation and visualization </li></ul></ul><ul><ul><li>Batched data editing </li></ul></ul><ul><li>Data components </li></ul><ul><ul><li>Disconnected dataset for Javascript </li></ul></ul><ul><ul><li>Filtering, sorting, batched updates </li></ul></ul><ul><ul><li>Integrated with ASP.NET data service </li></ul></ul><ul><li>ListView client control </li></ul><ul><ul><li>Present rich data using HTML templates </li></ul></ul>
    24. 24. Client Components And Data
    25. 25. “Atlas” Script Framework Using “Atlas” without ASP.NET
    26. 26. “Atlas” Script Framework Using “Atlas” without ASP.NET <ul><li>Use “Atlas” client script with any server </li></ul><ul><ul><li>Get the client script files from Program Files directory after installation </li></ul></ul><ul><li>What ASP.NET provides </li></ul><ul><ul><li>Great integration with server-centric UI and programming model </li></ul></ul><ul><ul><li>Browser detection </li></ul></ul><ul><ul><li>Access to rich set of application services </li></ul></ul><ul><ul><li>Web services, proxies, and bridges </li></ul></ul>
    27. 27. Using “Atlas” With PHP
    28. 28. How Do I Get Started? <ul><li>“ Atlas” Community Technology Preview </li></ul><ul><ul><li>Releases every 6-8 weeks </li></ul></ul><ul><ul><li>Installs on Visual Web Developer 2005 and ASP.NET 2.0 (both available for free) </li></ul></ul><ul><ul><li>Go Live CTP – build live sites with “Atlas” today! </li></ul></ul><ul><li>“ Atlas” community site: http://atlas.asp.net </li></ul><ul><ul><li>Download the latest bits </li></ul></ul><ul><ul><li>Tutorials, samples, forums, resources </li></ul></ul><ul><ul><li>ASP.NET “Atlas” Control Extender Kit and Samples </li></ul></ul><ul><ul><li>Source code from MIX sessions </li></ul></ul><ul><li>We want your feedback! </li></ul>
    29. 29. Questions?
    30. 31. © 2006 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×