Your SlideShare is downloading. ×
0
ASP.NET “Atlas”

        Scott Guthrie
      General Manager
  .NET Developer Platform
    Microsoft Corporation

http://w...
Agenda


Atlas Overview
  Goals, Timeline, Scenarios

Using Atlas for Server-Centric Ajax Development
 <atlas:UpdatePanel>...
What is “Atlas”?


     A framework for building a new generation of richer,
 interactive, personalized standards-based we...
“Atlas” Timeframe



First public preview released September 2005
  Early release to solicit feedback and comments

We hav...
Atlas Information




Official Atlas Site:
 http://atlas.asp.net

Samples + Slides for this Talk:
 http://weblogs.asp.net/...
“Atlas” Scenarios



Server-centric Ajax Web Development
  Incremental Ajax approach to add UI enrichment for key scenario...
Server-Centric Programming Model


        Browser                                        ASP.NET Application

           ...
Client-Centric Programming Model


        Browser                                         ASP.NET Application

 Presentat...
Server Centric Ajax Development
           with Atlas
<Atlas:> Server Controls


Goal: Easily enhance any ASP.NET web application
  Application UI and core logic still runs on ...
<atlas:updatepanel> control


Container control that enables “updatable” regions in a page
  Atlas provides a XmlHttp base...
Simple UpdatePanel Demo
<atlas:UpdatePanel> Under the Covers



Atlas intercepts post-back submit actions on client

Uses XMLHttp to fire postback...
Web Dev Helper Demo
<atlas:UpdatePanel> Postbacks



All post-back actions for controls declared within
  an updatepanel control will cause Aj...
<atlas:UpdatePanel> Postbacks



„ the below button will cause a normal full-page postback and update
<asp:button id=“Norm...
<atlas:UpdatePanel> Triggers



Triggers can be used to associate UpdatePanels on the page
with postback controls declared...
<atlas:UpdatePanel> Triggers



<asp:button id=“AjaxPostback” onclick=“btn1_click” runat=“server”/>

<atlas:UpdatePanel id...
UpdatePanel with Triggers
<atlas:UpdatePanel> Refresh Modes



Multiple UpdatePanel Controls can be added to a page
 Sometimes you only want to upda...
<atlas:UpdatePanel> Refresh Modes


<asp:button id=“AjaxPostback” onclick=“btn1_click” runat=“server”/>
<asp:textbox id=“T...
Conditional UpdatePanel Demo
<atlas:UpdateProgress> control


Delivers ability to provide “status” UI while waiting on
  response from a server

Rememb...
<atlas:UpdateProgress> control


<atlas:UpdatePanel id=“u1” mode=“Conditional” runat=“server”>

 <ContentTemplate>
   <asp...
<atlas:UpdateProgress> control



<atlas:UpdateProgress>

  <ProgressTemplate>
     <div class="updateprogress">

       <...
UpdateProgress Demo
<atlas:TimerControl>




<atlas:TimerControl> is a simple control that
  can be used to refresh updatepanel controls
  bas...
<atlas:TimerControl>



<atlas:TimerControl ID="Timer1" runat="server" Enabled="true"
   Interval="5000" OnTick="UpdateTim...
TimerControl Demo
<atlas:AutoCompleteExtender>



Enables textbox auto-complete support
  Callback to web-service on server for word list
  ...
<atlas:AutoCompleteExtender>




<asp:textbox id=“CustomerSearch” runat=“server”/>

<atlas:AutoCompleteExtender ID="AutoCo...
<atlas:AutoCompleteExtender>



public class CustomerSearch : System.Web.Services.WebService {

    [WebMethod]
    public...
AutoCompleteExtender Demo
Web Parts




March Atlas Refresh adds WebPart FireFox Support
 Enables drag/drop support within FireFox (very
 commonly r...
Client Centric Ajax Development
           with Atlas
Client-Centric Programming Model


        Browser                                         ASP.NET Application

 Presentat...
Atlas Client Script Library


Goal: Easily develop rich interactive web applications
  Application UI runs in browser, bus...
Atlas Client Script Library


Script core runtime: a rich type system for JScript
  Classes, namespaces, inheritance, inte...
Network Callbacks from Script



Atlas provides easy mechanism for script callbacks
  Can call a web-service end-point on ...
Network WebService Calls from Script



// Server Method Implemented in SimpleService.asmx
public class SimpleService : Sy...
Network WebService Calls from Script


<script language=“JavaScript”>

  function Calculate() {
     SimpleService.Add(123...
Complex Object Support


public class Customer {

    public string FirstName {
        get {} set {}
    }

    public st...
Complex Object Support

<script language=“JavaScript”>

  function getCustomerInfo() {
     CustomerService.GetCustomer(12...
Demo of Client Network Callbacks
   with Atlas and JavaScript
Atlas Component and Behaviors


Atlas provides client JavaScript control + component model
  Enables control behavior to b...
Atlas Component and Behaviors


Search for: <input id="SearchKey" type="text" />
<div id="completionList"></div>
........
...
Atlas Component and Behaviors

Search for: <input id="SearchKey" type="text" />
<div id="completionList"></div>

........
...
Demo of Client-Side Atlas
  Component Controls
Data Binding and Templates



Atlas enables declarative databinding and
  template customization on the client

Designers ...
Demo of Client-Side Atlas
   ListView Control
Mashup Support


Atlas provides the ability to define service bridges
  Allow client script to call to local server
  Loca...
Gadget Support


Gadgets are a new Ajax extensibility model
 Supported by www.live.com
 Supported by new Windows Side-Bar
...
Summary


Atlas provides a rich Ajax programming framework
Rich built-in integration with ASP.NET
  Server Controls
  Web ...
Atlas DevDays.ppt
Atlas DevDays.ppt
Atlas DevDays.ppt
Upcoming SlideShare
Loading in...5
×

Atlas DevDays.ppt

1,232

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,232
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Atlas DevDays.ppt"

  1. 1. ASP.NET “Atlas” Scott Guthrie General Manager .NET Developer Platform Microsoft Corporation http://weblogs.asp.net/scottgu scottgu@microsoft.com
  2. 2. Agenda Atlas Overview Goals, Timeline, Scenarios Using Atlas for Server-Centric Ajax Development <atlas:UpdatePanel> and other <atlas:> controls Using Atlas for Client-Centric Ajax Development Javascript client script framework JSON network requests Components and behaviors Mashups, Gadgets and more
  3. 3. What is “Atlas”? A framework for building a new generation of richer, interactive, personalized standards-based web applications High-productivity platform for AJAX-style browser applications Script component model and UI framework for browser-based web applications Rich suite of components, controls, and behaviors to make Ajax easy Seamlessly integrate with Microsoft platform and application model Easily leverages services and components hosted in ASP.NET Delivers ubiquitous reach and easy deployment Works with IE, FireFox, Safari web clients – no client install required Based on existing standards – DHTML, JScript, CSS Enable world-class tools for AJAX-style application development Will be integrated with web authoring tools for developers and designers Next release of VS will provide richer scripting toolset (debugging, tracing, etc)
  4. 4. “Atlas” Timeframe First public preview released September 2005 Early release to solicit feedback and comments We have been releasing regular drops since then Latest CTP drop from early February March CTP will be released in two weeks MIX Conference in Las Vegas Atlas CTP Go-Live License Coming Soon Will allow production applications to be deployed
  5. 5. Atlas Information Official Atlas Site: http://atlas.asp.net Samples + Slides for this Talk: http://weblogs.asp.net/scottgu
  6. 6. “Atlas” Scenarios Server-centric Ajax Web Development Incremental Ajax approach to add UI enrichment for key scenarios Enrich applications without lots of Javascript code required Enable you to keep core UI/Application logic on server (VB/C#) Client-centric Ajax Web Development Leverage full power of script/DHTML Provide richer and more interactive user experience Build mash-ups, gadgets and other new immersive experiences Atlas provides a great Ajax framework for both server and client centric Ajax development scenarios
  7. 7. Server-Centric Programming Model Browser ASP.NET Application Initial Rendering Pages Presentation (UI + Behavior) (HTML/CSS) Input Data UI Behavior Updated UI + Behavior (Managed Code) Atlas Script Framework ASP.NET Component/UI Client Page Application Framework, Application Framework, Services Controls Services Server Controls
  8. 8. Client-Centric Programming Model Browser ASP.NET Application Presentation Initial Rendering (HTML/CSS) Pages (UI + Behavior) “Atlas” Service Data UI Behavior Proxies Web (Script) Data Services Atlas Script Framework ASP.NET Component/UI Client Page Application Framework, Application Framework, Services Controls Services Server Controls
  9. 9. Server Centric Ajax Development with Atlas
  10. 10. <Atlas:> Server Controls Goal: Easily enhance any ASP.NET web application Application UI and core logic still runs on server Avoid need to master JavaScript and asynchronous programming Use AJAX techniques to reduce roundtrips Enable incremental page UI updates (avoid full page refreshes) Scenarios: data navigation and editing, form validation, auto refresh Enable richer interactivity for existing ASP.NET controls Use the same controls, object model and events you already know Extenders to add Atlas behaviors to any ASP.NET controls Examples: auto-completion, web-parts, drag-and-drop, tooltips New, richer ASP.NET server controls Server wrappers for Atlas client controls Examples: DateTimePicker, RichTextBox, Re-Order List
  11. 11. <atlas:updatepanel> control Container control that enables “updatable” regions in a page Atlas provides a XmlHttp based postback infrastructure Some non-updatable content and controls... <atlas:UpdatePanel id=“u1” runat=“server”> <ContentTemplate> This content can be dynamically updated! <asp:label id="Lablel1” runat=“server”/> <asp:button id=“button1” text=“Push Me!” runat=“server”/> <ContentTemplate> </atlas:UpdatePanel> More non-updatable content and controls...
  12. 12. Simple UpdatePanel Demo
  13. 13. <atlas:UpdatePanel> Under the Covers Atlas intercepts post-back submit actions on client Uses XMLHttp to fire postback action to server Postback events fire like normal on server Only content of updatepanel regions returned Changed updatepanel regions replaced on client
  14. 14. Web Dev Helper Demo
  15. 15. <atlas:UpdatePanel> Postbacks All post-back actions for controls declared within an updatepanel control will cause Ajax-based post-backs with incremental page refresh Post-back action for controls outside of an updatepanel control will by default cause normal postbacks
  16. 16. <atlas:UpdatePanel> Postbacks „ the below button will cause a normal full-page postback and update <asp:button id=“NormalPostBack” onclick=“btn1_click” runat=“server”/> <atlas:UpdatePanel id=“u1” runat=“server”> <ContentTemplate> Updatable content... „ the below button will cause an Ajax postback and refresh <asp:button id=“AjaxPostback” onclick=“btn2_click” runat=“server”/> </ContentTemplate> </atlas:UpdatePanel>
  17. 17. <atlas:UpdatePanel> Triggers Triggers can be used to associate UpdatePanels on the page with postback controls declared outside of the UpdatePanel <asp:ControlEventTrigger> Refresh the UpdatePanel when a control event fires <asp:ControlValueTrigger> Update the UpdatePanel when a control value changes
  18. 18. <atlas:UpdatePanel> Triggers <asp:button id=“AjaxPostback” onclick=“btn1_click” runat=“server”/> <atlas:UpdatePanel id=“u1” runat=“server”> <ContentTemplate> This content will be updated when a button is clicked outside of the UpdatePanel contentemplate... </ContentTemplate> <Triggers> <asp:ControlEventTrigger controlId=“AjaxPostBack” EventName=“Click”/> </Triggers> </atlas:UpdatePanel>
  19. 19. UpdatePanel with Triggers
  20. 20. <atlas:UpdatePanel> Refresh Modes Multiple UpdatePanel Controls can be added to a page Sometimes you only want to update one panel… UpdatePanel control supports two update modes: “Always” = Refresh every-time an Ajax postback occurs “Conditional” = Refresh when specific Ajax postback occurs Conditional refreshes can be done via triggers: <asp:ControlEventTrigger> -- Update on control event fires <asp:ControlValueTrigger> -- Update when value changes Conditional refreshes can also be triggered via code: UpdatePanel1.Update() method causes that panel to refresh
  21. 21. <atlas:UpdatePanel> Refresh Modes <asp:button id=“AjaxPostback” onclick=“btn1_click” runat=“server”/> <asp:textbox id=“TextBox1” runat=“server”/> <atlas:UpdatePanel id=“u1” mode=“Conditional” runat=“server”> <ContentTemplate> This content will only be updated when a button is clicked outside of the UpdatePanel contentemplate, or if the TextBox1.Text property changes </ContentTemplate> <Triggers> <asp:ControlEventTrigger controlId=“AjaxPostBack” EventName=“Click” /> <asp:ControlValueTrigger controlId=“TextBox1” PropertyName=“Text”/> </Triggers> </atlas:UpdatePanel>
  22. 22. Conditional UpdatePanel Demo
  23. 23. <atlas:UpdateProgress> control Delivers ability to provide “status” UI while waiting on response from a server Remember that “A” in “Ajax” stands for Asynchronous Need to provide way for users to understand latency Need to provide way for users to cancel requests UpdateProgress control can be placed anywhere on page Templated control allows any content (e.g. animated .gif) Can use CSS to position/style anywhere
  24. 24. <atlas:UpdateProgress> control <atlas:UpdatePanel id=“u1” mode=“Conditional” runat=“server”> <ContentTemplate> <asp:gridview id=“GridView1” runat=“server”> ... </asp:gridview> </ContentTemplate> </atlas:UpdatePanel> <atlas:UpdateProgress> <ProgressTemplate> <div class="updateprogress"> <img src="images/progress_animation.gif" /> Updating... </div> </ProgressTemplate> </atlas:UpdateProgress>
  25. 25. <atlas:UpdateProgress> control <atlas:UpdateProgress> <ProgressTemplate> <div class="updateprogress"> <img src="images/progress_animation.gif" /> Updating... <asp:linkbutton id=“abortButton” text=“Cancel” runat=“server”/> </div> </ProgressTemplate> </atlas:UpdateProgress>
  26. 26. UpdateProgress Demo
  27. 27. <atlas:TimerControl> <atlas:TimerControl> is a simple control that can be used to refresh updatepanel controls based on time duration
  28. 28. <atlas:TimerControl> <atlas:TimerControl ID="Timer1" runat="server" Enabled="true" Interval="5000" OnTick="UpdateTimestamp“/> This page will update with the server timestamp every 5 seconds. <atlas:UpdatePanel ID="upanel" runat="server"> <ContentTemplate> <asp:Label ID="Timestamp" runat="server"></asp:Label> </ContentTemplate> <Triggers> <atlas:ControlEventTrigger ControlID="Timer1" EventName="Tick"/> </Triggers> </atlas:UpdatePanel>
  29. 29. TimerControl Demo
  30. 30. <atlas:AutoCompleteExtender> Enables textbox auto-complete support Callback to web-service on server for word list Supports both .asmx and WCF based web-services (both using the built-in Atlas JSON bridge) Useful example of “extender” controls Extenders allow pointing to existing server controls Other “extender” controls that are being planned: Watermark, popup, drag/drop, masked edit, date-time picker, tool tips, etc.
  31. 31. <atlas:AutoCompleteExtender> <asp:textbox id=“CustomerSearch” runat=“server”/> <atlas:AutoCompleteExtender ID="AutoComplete" runat="server"> <atlas:AutoCompleteProperties Enabled="true" ServiceMethod="GetCustomerName" ServicePath="~/CustomerService.asmx" TargetControlID="CustomerSearch" /> </atlas:AutoCompleteExtender>
  32. 32. <atlas:AutoCompleteExtender> public class CustomerSearch : System.Web.Services.WebService { [WebMethod] public string[] GetCustomerName(string prefixText, int count) { // todo: take prefixText and generate suggestion list } }
  33. 33. AutoCompleteExtender Demo
  34. 34. Web Parts March Atlas Refresh adds WebPart FireFox Support Enables drag/drop support within FireFox (very commonly requested feature with ASP.NET 2.0) Future Atlas Refresh enables individual web-parts to be refreshed independently as update-panels
  35. 35. Client Centric Ajax Development with Atlas
  36. 36. Client-Centric Programming Model Browser ASP.NET Application Presentation Initial Rendering (HTML/CSS) Pages (UI + Behavior) “Atlas” Service Data UI Behavior Proxies Web (Script) Data Services Atlas Script Framework ASP.NET Component/UI Client Page Application Framework, Application Framework, Services Controls Services Server Controls
  37. 37. Atlas Client Script Library Goal: Easily develop rich interactive web applications Application UI runs in browser, business logic runs on server HTML/Atlas client accesses data and services from the web Scenarios Mash-up applications Composite applications, sites, and gadgets (e.g. Live.com) Disconnected browser scenarios (e.g. Windows Sidebar) Powerful UI framework and component model for browsers Declarative markup and component model Rich client-side data access and data-binding Zero footprint client installation on any modern browser Easily integrated with server application model Easily consume any web service (ASMX, Indigo) from browser Proxy generation, serialization to consume .NET objects in script Script access to ASP.NET application services Server-side bridge to reuse 3rd party services
  38. 38. Atlas Client Script Library Script core runtime: a rich type system for JScript Classes, namespaces, inheritance, interfaces Atlas Client Script Library Event handlers Object serialization Controls and Components Base class library and networking services Helper classes for developers (subset of .NET BCL) Component Model and Management of asynchronous network operations UI Framework Component model and UI framework Base Class Library Declarative scripting (Atlas XML script definitions) Extensible component and control model Script Core Data binding, presentation, and validation Atlas components for common scenarios – examples: Browser Compatibility ListView and DataView for rendering templated data UI behaviors such as drag and drop, tooltips, auto-completion Compatibility layer for browsers and platforms Support for IE, Firefox/Mozilla, Safari
  39. 39. Network Callbacks from Script Atlas provides easy mechanism for script callbacks Can call a web-service end-point on server Can call a page-method end-point on server Atlas provides JSON network serialization support JSON = JavaScript Object Notation JSON support for auto-serialization of .NET types e.g. return an array of “Customer” objects Advanced network manager features supported Priorities and queuing on network calls Batch invocation of multiple calls in single network request
  40. 40. Network WebService Calls from Script // Server Method Implemented in SimpleService.asmx public class SimpleService : System.Web.Services.WebService { [WebMethod] public int Add(int x, int y) { return x+y; } } // Add this control to a .aspx page to reference it <atlas:ScriptManager ID="scriptManager" runat="server"> <Services> <atlas:ServiceReference Path="SimpleService.asmx" /> </Services> </atlas:ScriptManager>
  41. 41. Network WebService Calls from Script <script language=“JavaScript”> function Calculate() { SimpleService.Add(123, 456, onComplete, onTimeout); } function onComplete(result) { someHtmlLabel.innerText = result; } function onTimeout(result) { alert(“Timed out!”); } </script> <input type=“button” value=“Push Me” onclick=“Calculate”/>
  42. 42. Complex Object Support public class Customer { public string FirstName { get {} set {} } public string LastName { get {} set {} } } public class CustomerService : System.Web.Services.WebService { [WebMethod] public Customer GetCustomer(int id) { return new Customer(“scott, “guthrie”); } [WebMethod] public void UpdateCustomer(Customer customer) { // todo: update database } }
  43. 43. Complex Object Support <script language=“JavaScript”> function getCustomerInfo() { CustomerService.GetCustomer(123, onCustomerComplete, onTimeout); } function onCustomerComplete(results) { firstNameTxt.value = results.FirstName; lastNameTxt.value = results.LastName } function updateCustomerInfo() { var customer = new Customer(); customer.FirstName = “Bob”; customer.LastName = “Jones”; CustomerService.UpdateCustomer(customer, onUpdate, onTimeout); } </script>
  44. 44. Demo of Client Network Callbacks with Atlas and JavaScript
  45. 45. Atlas Component and Behaviors Atlas provides client JavaScript control + component model Enables control behavior to be associated with html Provides clean OO encapsulation model + control re-use Avoid having to write one-off JavaScript UI repeatedly Atlas enables clean developer/designer workflow UI defined using standard XHTML w/ CSS Control behaviors defined and attached separate from html Atlas controls can be declared procedurally + declaratively XML declarative markup useful for tool support Advanced Atlas Client Control Features: Bi-Directional Databinding, Transformers, Validation
  46. 46. Atlas Component and Behaviors Search for: <input id="SearchKey" 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_minimumPrefixLength(2); auto1.set_completionSetCount(15); auto1.set_completionInterval(500); var txt1 = new Web.UI.TextBox($('SearchKey')); txt1.get_behaviors().add(auto1); txt1.initialize(); auto1.initialize(); }
  47. 47. Atlas Component and Behaviors Search for: <input id="SearchKey" type="text" /> <div id="completionList"></div> ........ <script type="text/xml-script"> <page xmlns:script="http://schemas.microsoft.com/xml-script/2005"> <components> <textBox id="SearchKey"> <behaviors> <autoComplete completionList="completionList" serviceURL="AutoCompleteService.asmx" serviceMethod="GetWordList" minimumPrefixLength="2" completionSetCount="15" completionInterval="500" /> </behaviors> </textBox> </components> </page> </script>
  48. 48. Demo of Client-Side Atlas Component Controls
  49. 49. Data Binding and Templates Atlas enables declarative databinding and template customization on the client Designers can edit the HTML and use CSS to define a html template for an Atlas Control to populate at runtime Developers can use the new Atlas ListView client control to bind data (either one or two way) against the html template
  50. 50. Demo of Client-Side Atlas ListView Control
  51. 51. Mashup Support Atlas provides the ability to define service bridges Allow client script to call to local server Local server then proxies request to service Avoids cross-domain script call-back issues No security prompts for the browser Avoids having to publish service keys Examples: Amazon, FlickR, Virtual Earth, Google Maps, etc Helps make writing cool Mashups easy
  52. 52. Gadget Support Gadgets are a new Ajax extensibility model Supported by www.live.com Supported by new Windows Side-Bar Gadgets enable re-usable functionality to be published and shared at no cost to developer/publisher Atlas enables developers to develop Gadgets hosted on their servers, and for end-users to add the Gadgets into their home-page or Windows Sidebar Provides more touch with customers and opens up interesting new business model opportunities for developers and web-sites
  53. 53. Summary Atlas provides a rich Ajax programming framework Rich built-in integration with ASP.NET Server Controls Web and Application Services Rich client-side JavaScript framework model Build rich mashups and gadgets Rich extensibility model for component developers Atlas CTP Go-Live Available Soon Start taking a look at it today!
  1. A particular slide catching your eye?

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

×