View
1.508
Download
2
Category
Preview:
DESCRIPTION
Citation preview
ASP.NET “Atlas”
Scott GuthrieGeneral Manager
.NET Developer PlatformMicrosoft Corporation
http://weblogs.asp.net/scottguscottgu@microsoft.com
Agenda
Atlas OverviewGoals, Timeline, Scenarios
Using Atlas for Server-Centric Ajax Development<atlas:UpdatePanel> and other <atlas:> controls
Using Atlas for Client-Centric Ajax DevelopmentJavascript client script frameworkJSON network requestsComponents and behaviorsMashups, Gadgets and more
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 applicationsScript component model and UI framework for browser-based web applicationsRich suite of components, controls, and behaviors to make Ajax easy
Seamlessly integrate with Microsoft platform and application modelEasily leverages services and components hosted in ASP.NET
Delivers ubiquitous reach and easy deploymentWorks with IE, FireFox, Safari web clients – no client install requiredBased on existing standards – DHTML, JScript, CSS
Enable world-class tools for AJAX-style application developmentWill be integrated with web authoring tools for developers and designersNext release of VS will provide richer scripting toolset (debugging, tracing, etc)
“Atlas” Timeframe
First public preview released September 2005 Early release to solicit feedback and comments
We have been releasing regular drops since thenLatest CTP drop from early February
March CTP will be released in two weeks MIX Conference in Las Vegas
Atlas CTP Go-Live License Coming SoonWill allow production applications to be deployed
Atlas Information
Official Atlas Site:http://atlas.asp.net
Samples + Slides for this Talk:http://weblogs.asp.net/scottgu
“Atlas” Scenarios
Server-centric Ajax Web DevelopmentIncremental Ajax approach to add UI enrichment for key scenariosEnrich applications without lots of Javascript code requiredEnable you to keep core UI/Application logic on server (VB/C#)
Client-centric Ajax Web DevelopmentLeverage full power of script/DHTMLProvide richer and more interactive user experienceBuild mash-ups, gadgets and other new immersive experiences
Atlas provides a great Ajax framework for both serverand client centric Ajax development scenarios
Server-Centric Programming Model
ASP.NETASP.NET
Application Services
Application Services
Page Framework,
Server Controls
Page Framework,
Server Controls
Atlas Script FrameworkAtlas Script Framework
Client Application
Services
Client Application
Services
Component/UIFramework,
Controls
Component/UIFramework,
Controls
BrowserBrowser
PresentationPresentation(HTML/CSS)(HTML/CSS)
PresentationPresentation(HTML/CSS)(HTML/CSS)
ASP.NET ApplicationASP.NET Application
PagesPagesPagesPages
UI BehaviorUI Behavior(Managed(Managed
Code)Code)
UI BehaviorUI Behavior(Managed(Managed
Code)Code)
Input Data
Updated UI + Behavior
Initial Rendering
(UI + Behavior)
Client-Centric Programming Model
BrowserBrowser
PresentationPresentation(HTML/CSS)(HTML/CSS)
PresentationPresentation(HTML/CSS)(HTML/CSS)
““Atlas”Atlas”ServiceServiceProxiesProxies
““Atlas”Atlas”ServiceServiceProxiesProxies
UI BehaviorUI Behavior(Script)(Script)
UI BehaviorUI Behavior(Script)(Script)
ASP.NETASP.NET
Application Services
Application Services
Page Framework,
Server Controls
Page Framework,
Server Controls
ASP.NET ApplicationASP.NET Application
PagesPagesPagesPages
WebWebServicesServices
WebWebServicesServices
Atlas Script FrameworkAtlas Script Framework
Client Application
Services
Client Application
Services
Component/UIFramework,
Controls
Component/UIFramework,
Controls
Initial Rendering
(UI + Behavior)
Data
Data
Server Centric Ajax Developmentwith Atlas
<Atlas:> Server Controls
Goal: Easily enhance any ASP.NET web applicationApplication UI and core logic still runs on serverAvoid need to master JavaScript and asynchronous programming
Use AJAX techniques to reduce roundtripsEnable incremental page UI updates (avoid full page refreshes)Scenarios: data navigation and editing, form validation, auto refresh
Enable richer interactivity for existing ASP.NET controlsUse the same controls, object model and events you already knowExtenders to add Atlas behaviors to any ASP.NET controlsExamples: auto-completion, web-parts, drag-and-drop, tooltips
New, richer ASP.NET server controlsServer wrappers for Atlas client controlsExamples: DateTimePicker, RichTextBox, Re-Order List
<atlas:updatepanel> control
Container control that enables “updatable” regions in a pageAtlas 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...
Simple UpdatePanel Demo
<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
Web Dev Helper Demo
<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
<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>
<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
<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>
UpdatePanel with Triggers
<atlas:UpdatePanel> Refresh Modes
Multiple UpdatePanel Controls can be added to a pageSometimes 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
<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>
Conditional UpdatePanel Demo
<atlas:UpdateProgress> control
Delivers ability to provide “status” UI while waiting on response from a server
Remember that “A” in “Ajax” stands for AsynchronousNeed to provide way for users to understand latencyNeed to provide way for users to cancel requests
UpdateProgress control can be placed anywhere on pageTemplated control allows any content (e.g. animated .gif)Can use CSS to position/style anywhere
<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>
<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>
UpdateProgress Demo
<atlas:TimerControl>
<atlas:TimerControl> is a simple control that can be used to refresh updatepanel controls based on time duration
<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>
TimerControl Demo
<atlas:AutoCompleteExtender>
Enables textbox auto-complete supportCallback to web-service on server for word listSupports both .asmx and WCF based web-services (both using the built-in Atlas JSON bridge)
Useful example of “extender” controlsExtenders 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.
<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>
<atlas:AutoCompleteExtender>
public class CustomerSearch : System.Web.Services.WebService {
[WebMethod] public string[] GetCustomerName(string prefixText, int count) { // todo: take prefixText and generate suggestion list }}
AutoCompleteExtender Demo
Web Parts
March Atlas Refresh adds WebPart FireFox SupportEnables 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
Client Centric Ajax Developmentwith Atlas
Client-Centric Programming Model
BrowserBrowser
PresentationPresentation(HTML/CSS)(HTML/CSS)
PresentationPresentation(HTML/CSS)(HTML/CSS)
““Atlas”Atlas”ServiceServiceProxiesProxies
““Atlas”Atlas”ServiceServiceProxiesProxies
UI BehaviorUI Behavior(Script)(Script)
UI BehaviorUI Behavior(Script)(Script)
ASP.NETASP.NET
Application Services
Application Services
Page Framework,
Server Controls
Page Framework,
Server Controls
ASP.NET ApplicationASP.NET Application
PagesPagesPagesPages
WebWebServicesServices
WebWebServicesServices
Atlas Script FrameworkAtlas Script Framework
Client Application
Services
Client Application
Services
Component/UIFramework,
Controls
Component/UIFramework,
Controls
Initial Rendering
(UI + Behavior)
Data
Data
Atlas Client Script Library
Goal: Easily develop rich interactive web applicationsApplication UI runs in browser, business logic runs on serverHTML/Atlas client accesses data and services from the web
ScenariosMash-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 browsersDeclarative markup and component modelRich client-side data access and data-bindingZero footprint client installation on any modern browser
Easily integrated with server application modelEasily consume any web service (ASMX, Indigo) from browserProxy generation, serialization to consume .NET objects in scriptScript access to ASP.NET application services Server-side bridge to reuse 3rd party services
Atlas Client Script Library
Atlas Client Script LibraryAtlas Client Script Library
Controls and ComponentsControls and Components
Script CoreScript Core
Base Class LibraryBase Class Library
Component Model and UI Framework
Component Model and UI Framework
Browser CompatibilityBrowser Compatibility
Script core runtime: a rich type system for JScript Classes, namespaces, inheritance, interfaces Event handlersObject serialization
Base class library and networking servicesHelper classes for developers (subset of .NET BCL)Management of asynchronous network operations
Component model and UI frameworkDeclarative scripting (Atlas XML script definitions)Extensible component and control modelData binding, presentation, and validation
Atlas components for common scenarios – examples:ListView and DataView for rendering templated data UI behaviors such as drag and drop, tooltips, auto-completion
Compatibility layer for browsers and platformsSupport for IE, Firefox/Mozilla, Safari
Network Callbacks from Script
Atlas provides easy mechanism for script callbacksCan call a web-service end-point on serverCan call a page-method end-point on server
Atlas provides JSON network serialization supportJSON = JavaScript Object Notation
JSON support for auto-serialization of .NET typese.g. return an array of “Customer” objects
Advanced network manager features supportedPriorities and queuing on network callsBatch invocation of multiple calls in single network request
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>
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”/>
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 }}
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>
Demo of Client Network Callbacks with Atlas and JavaScript
Atlas Component and Behaviors
Atlas provides client JavaScript control + component modelEnables control behavior to be associated with html Provides clean OO encapsulation model + control re-useAvoid having to write one-off JavaScript UI repeatedly
Atlas enables clean developer/designer workflowUI defined using standard XHTML w/ CSSControl behaviors defined and attached separate from html
Atlas controls can be declared procedurally + declarativelyXML declarative markup useful for tool support
Advanced Atlas Client Control Features:Bi-Directional Databinding, Transformers, Validation
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();}
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>
Demo of Client-Side Atlas Component Controls
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
Demo of Client-Side Atlas ListView Control
Mashup Support
Atlas provides the ability to define service bridgesAllow client script to call to local serverLocal server then proxies request to service
Avoids cross-domain script call-back issuesNo security prompts for the browserAvoids having to publish service keys
Examples:Amazon, FlickR, Virtual Earth, Google Maps, etc
Helps make writing cool Mashups easy
Gadget Support
Gadgets are a new Ajax extensibility modelSupported by www.live.comSupported 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
Summary
Atlas provides a rich Ajax programming framework
Rich built-in integration with ASP.NETServer ControlsWeb and Application Services
Rich client-side JavaScript framework modelBuild rich mashups and gadgets
Rich extensibility model for component developers
Atlas CTP Go-Live Available SoonStart taking a look at it today!
Recommended