Atlas DevDays.ppt

ASP.NET “Atlas”

Scott GuthrieGeneral Manager

.NET Developer PlatformMicrosoft Corporation

http://weblogs.asp.net/[email protected]

http://weblogs.asp.net/scottgu

mailto:[email protected]

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

http://atlas.asp.net/

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


Page Framework,

Server Controls

Page Framework,

Server Controls

Atlas Script FrameworkAtlas Script Framework

Client Application

Services

Client Application

Services

Component/UIFramework,

Controls


Controls

BrowserBrowser

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



““Atlas”Atlas”ServiceServiceProxiesProxies


UI BehaviorUI Behavior(Script)(Script)


ASP.NETASP.NET



Page Framework,

Server Controls

Page Framework,

Server Controls



WebWebServicesServices



Client Application

Services

Client Application

Services


Controls


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”/>


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”/>


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>


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:UpdatePanel id=“u1” mode=“Conditional” runat=“server”> <ContentTemplate> <asp:gridview id=“GridView1” runat=“server”> ... </asp:gridview> </ContentTemplate>


<atlas:UpdateProgress>

<ProgressTemplate> <div class="updateprogress"> <img src="images/progress_animation.gif" /> Updating... </div> </ProgressTemplate>

</atlas:UpdateProgress>


<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.


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


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







ASP.NETASP.NET



Page Framework,

Server Controls

Page Framework,

Server Controls






Client Application

Services

Client Application

Services


Controls


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


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();}


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

http://www.live.com/

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!

Atlas DevDays.ppt

Documents

ui behavior

network webservice

application

component

atlas component

windows sidebar

scenarios

add