Your SlideShare is downloading. ×
Developing a Better User Experience with "Atlas"
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Developing a Better User Experience with "Atlas"

525
views

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

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
525
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Transcript

    • 1. Developing A Better User Experience With "Atlas" Shanku Niyogi Product Unit Manager UI Framework and Services Microsoft Corporation NGW014
    • 2. “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
    • 3. Better Web User Experiences
      • Responsive to users
      • Naturally interactive
      • Personalized for users
      • Connected to the web
      • Immersive beyond the site
    • 4. “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
    • 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. 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. 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
    • 8. Server-Centric Development With “Atlas” And ASP.NET
    • 9. “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
    • 10. “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>
    • 11. Update Panels
    • 12. “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
    • 13. “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>
    • 14. Control Extenders
    • 15. Client-Centric Development With “Atlas”
    • 16. “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
    • 17. “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
    • 18. Networking
    • 19. “Atlas” Script Framework
    • 20. “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
    • 21. “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();
      • }
    • 22. “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>
    • 23. “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
    • 24. Client Components And Data
    • 25. “Atlas” Script Framework Using “Atlas” without ASP.NET
    • 26. “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
    • 27. Using “Atlas” With PHP
    • 28. 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!
    • 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.

    ×