web applications meets life microsoft asp.net “atlas” saurabh verma chief software architect |...

Web Applications meets Web Applications meets LifeLifeMicrosoft ASP.NET “Atlas”Microsoft ASP.NET “Atlas”

Saurabh VermaSaurabh VermaChief Software Architect | The Perfect Chief Software Architect | The Perfect FutureFuture

[email protected]@theperfectfuture.comhttp://www.theperfectfuture.comhttp://www.theperfectfuture.com

2

Road MapRoad Map

What is ASP.NET ‘Atlas’What is ASP.NET ‘Atlas’

‘‘Atlas’ Development ModelsAtlas’ Development Models

Inside UpdatePanelInside UpdatePanel

SummarySummary

Content by : Scott Guthrie,MicrosoftContent by : Scott Guthrie,Microsoft

3

Saurabh VermaSaurabh VermaChief Software Architect and co-Chief Software Architect and co-

Founder ofFounder ofThe Perfect FutureThe Perfect Future

Involved in architecting and developing Involved in architecting and developing nextnext

generation communication enginegeneration communication engine

““HumTum”HumTum”

A Web 2.0 BLOGA Web 2.0 BLOG

4

What is ASP.NET ‘Atlas’What is ASP.NET ‘Atlas’A framework for building a new generation of richer, A framework for building a new generation of richer,

interactive, personalized standards-based web applicationsinteractive, personalized standards-based web applications

High-productivity platform for AJAX-style browser applicationsHigh-productivity platform for AJAX-style browser applicationsScript component model and UI framework for browser-based web applicationsScript component model and UI framework for browser-based web applications

Rich suite of components, controls, and behaviors to make Ajax easyRich suite of components, controls, and behaviors to make Ajax easy

Seamlessly integrate with Microsoft platform and application modelSeamlessly integrate with Microsoft platform and application modelEasily leverages services and components hosted in ASP.NETEasily leverages services and components hosted in ASP.NET

Delivers ubiquitous reach and easy deploymentDelivers ubiquitous reach and easy deploymentWorks with IE, FireFox, Safari web clients – no client install requiredWorks with IE, FireFox, Safari web clients – no client install required

Based on existing standards – DHTML, JScript, CSSBased on existing standards – DHTML, JScript, CSS

Enable world-class tools for AJAX-style application developmentEnable world-class tools for AJAX-style application developmentWill be integrated with web authoring tools for developers and designersWill be integrated with web authoring tools for developers and designers

Next release of VS will provide richer scripting toolset (debugging, tracing, etc)Next release of VS will provide richer scripting toolset (debugging, tracing, etc)

What is ASP.NET ‘Atlas’What is ASP.NET ‘Atlas’

6

‘‘Atlas’ DevelopmentAtlas’ Development

Server Centric ModelServer Centric ModelIncremental Ajax approach to add UI enrichment for key Incremental Ajax approach to add UI enrichment for key scenariosscenarios

Enrich applications without lots of Javascript code Enrich applications without lots of Javascript code requiredrequired

Enable you to keep core UI/Application logic on server Enable you to keep core UI/Application logic on server (VB/C#)(VB/C#)

Client Centric ModelClient Centric ModelLeverage full power of script/DHTMLLeverage full power of script/DHTML

Provide richer and more interactive user experienceProvide richer and more interactive user experience

Build mash-ups, gadgets and other new immersive Build mash-ups, gadgets and other new immersive experiencesexperiences

Atlas provides a great Ajax framework forAtlas provides a great Ajax framework forboth server and client centric developmentboth server and client centric development

‘‘Atlas’ Development ModelsAtlas’ Development Models

8

Server Centric ModelServer Centric 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)

9

Client Centric ModelClient Centric 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 DevelopmentServer Centric Developmentwith Atlaswith Atlas

<Atlas:> Server Controls<Atlas:> Server ControlsGoal: Easily enhance any ASP.NET web applicationGoal: Easily enhance any ASP.NET web application

Application UI and core logic still runs on serverApplication UI and core logic still runs on serverAvoid need to master JavaScript and asynchronous Avoid need to master JavaScript and asynchronous

programmingprogramming

Use AJAX techniques to reduce roundtripsUse AJAX techniques to reduce roundtripsEnable incremental page UI updates (avoid full page Enable incremental page UI updates (avoid full page refreshes)refreshes)Scenarios: data navigation and editing, form validation, Scenarios: data navigation and editing, form validation, auto refreshauto refresh

Enable richer interactivity for existing ASP.NET controlsEnable richer interactivity for existing ASP.NET controlsUse the same controls, object model and events you Use the same controls, object model and events you already knowalready knowExtenders to add Atlas behaviors to any ASP.NET Extenders to add Atlas behaviors to any ASP.NET controlscontrolsExamples: auto-completion, web-parts, drag-and-drop, Examples: auto-completion, web-parts, drag-and-drop, tooltipstooltips

You get 12 atlas controls on toolbar after adding to atlas You get 12 atlas controls on toolbar after adding to atlas binary to your toolbarbinary to your toolbar

<atlas:updatepanel> <atlas:updatepanel> controlcontrolContainer control that enables “updatable” regions in a pageContainer control that enables “updatable” regions in a page

Atlas provides a XmlHttp based postback infrastructureAtlas provides a XmlHttp based postback infrastructure

Some non-updatable content and controls...Some non-updatable content and controls...

<atlas:UpdatePanel id=<atlas:UpdatePanel id=““u1u1”” runat= runat=““serverserver””>>

<ContentTemplate><ContentTemplate>

This content can be dynamically updated!This content can be dynamically updated!

<asp:label id="Lablel1<asp:label id="Lablel1”” runat= runat=““serverserver””/>/>

<asp:button id=<asp:button id=““button1button1”” text= text=““Push Me!Push Me!”” runat= runat=““serverserver””/>/>


</atlas:UpdatePanel></atlas:UpdatePanel>

More non-updatable content and controls...More non-updatable content and controls...

Simple UpdatePanel DemoSimple UpdatePanel Demo

Inside Inside <atlas:UpdatePanel><atlas:UpdatePanel>Atlas intercepts post-back submit Atlas intercepts post-back submit actions on clientactions on clientUses XMLHttp to fire postback action to Uses XMLHttp to fire postback action to serverserverPostback events fire like normal on Postback events fire like normal on serverserverOnly content of updatepanel regions Only content of updatepanel regions returnedreturnedChanged updatepanel regions replaced Changed updatepanel regions replaced on clienton client

<atlas:UpdatePanel> <atlas:UpdatePanel> PostbacksPostbacks

All post-back actions for controls All post-back actions for controls declared within an updatepanel control declared within an updatepanel control will cause Ajax-based post-backs with will cause Ajax-based post-backs with incremental page refreshincremental page refresh

Post-back action for controls outside of Post-back action for controls outside of an updatepanel control will by default an updatepanel control will by default cause normal postbackscause normal postbacks

<atlas:UpdatePanel> <atlas:UpdatePanel> TriggersTriggers

Triggers can be used to associate UpdatePanels on the Triggers can be used to associate UpdatePanels on the page with postback controls declared outside of the page with postback controls declared outside of the UpdatePanelUpdatePanel

<asp:ControlEventTrigger><asp:ControlEventTrigger>• Refresh the UpdatePanel when a control event firesRefresh the UpdatePanel when a control event fires

<asp:ControlValueTrigger> <asp:ControlValueTrigger> • Update the UpdatePanel when a control value Update the UpdatePanel when a control value

changeschanges

<atlas:UpdatePanel> <atlas:UpdatePanel> TriggersTriggers

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

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


This content will be updated when a button is clicked outside ofThis content will be updated when a button is clicked outside of

the UpdatePanel contentemplate...the UpdatePanel contentemplate...

</ContentTemplate></ContentTemplate>

<Triggers><Triggers>

<asp:ControlEventTrigger controlId=“AjaxPostBack” EventName=“Click”/><asp:ControlEventTrigger controlId=“AjaxPostBack” EventName=“Click”/>

</Triggers></Triggers>


UpdatePanel with TriggersUpdatePanel with Triggers

<atlas:UpdatePanel> <atlas:UpdatePanel> Refresh ModesRefresh Modes

• Multiple UpdatePanel Controls can be added to a pageMultiple UpdatePanel Controls can be added to a page• Sometimes you only want to update one panel…Sometimes you only want to update one panel…

• UpdatePanel control supports two update mode:UpdatePanel control supports two update mode:• ““Always” = Refresh every-time an Ajax postback occursAlways” = Refresh every-time an Ajax postback occurs• ““Conditional” = Refresh when specific Ajax postback occursConditional” = Refresh when specific Ajax postback occurs

• Conditional refreshes can be done via triggers:Conditional refreshes can be done via triggers:• <asp:ControlEventTrigger> -- Update on control event fires<asp:ControlEventTrigger> -- Update on control event fires• <asp:ControlValueTrigger> -- Update when value changes<asp:ControlValueTrigger> -- Update when value changes

• Conditional refreshes can also be triggered via code:Conditional refreshes can also be triggered via code:• UpdatePanel1.Update() method causes that panel to refreshUpdatePanel1.Update() method causes that panel to refresh

<atlas:UpdatePanel> <atlas:UpdatePanel> Refresh ModesRefresh Modes

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

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

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


This content will only be updated when a button is clicked outside ofThis content will only be updated when a button is clicked outside of

the UpdatePanel contentemplate, or if the TextBox1.Text property changesthe UpdatePanel contentemplate, or if the TextBox1.Text property changes


<Triggers><Triggers>

<asp:ControlEventTrigger controlId=“AjaxPostBack” EventName=“Click” /><asp:ControlEventTrigger controlId=“AjaxPostBack” EventName=“Click” />

<asp:ControlValueTrigger controlId=“TextBox1” PropertyName=“Text”/><asp:ControlValueTrigger controlId=“TextBox1” PropertyName=“Text”/>

</Triggers></Triggers>


<atlas:UpdateProgress> <atlas:UpdateProgress> controlcontrolDelivers ability to provide “status” UI while waiting on response Delivers ability to provide “status” UI while waiting on response from a serverfrom a server

Remember that “A” in “Ajax” stands for AsynchronousRemember that “A” in “Ajax” stands for Asynchronous

Need to provide way for users to understand latencyNeed to provide way for users to understand latency

Need to provide way for users to cancel requestsNeed to provide way for users to cancel requests

UpdateProgress control can be placed anywhere on pageUpdateProgress control can be placed anywhere on page

Templated control allows any content (e.g. animated .gif)Templated control allows any content (e.g. animated .gif)

Can use CSS to position/style anywhereCan use CSS to position/style anywhere

<atlas:UpdateProgress> <atlas:UpdateProgress> controlcontrol

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


<asp:gridview id=“GridView1” runat=“server”> ... </asp:gridview><asp:gridview id=“GridView1” runat=“server”> ... </asp:gridview>



<atlas:UpdateProgress><atlas:UpdateProgress>

<ProgressTemplate><ProgressTemplate>

<div class="updateprogress"><div class="updateprogress">

<img src="images/progress_animation.gif" /> Updating...<img src="images/progress_animation.gif" /> Updating...

</div></div>

</ProgressTemplate></ProgressTemplate>

</atlas:UpdateProgress></atlas:UpdateProgress>

<atlas:UpdateProgress> <atlas:UpdateProgress> controlcontrol

<atlas:UpdateProgress><atlas:UpdateProgress>

<ProgressTemplate><ProgressTemplate> <div class="updateprogress"><div class="updateprogress">

<img src="images/progress_animation.gif" /> Updating...<img src="images/progress_animation.gif" /> Updating... <asp:linkbutton id=“abortButton” text=“Cancel” runat=“server”/> <asp:linkbutton id=“abortButton” text=“Cancel” runat=“server”/>

</div></div> </ProgressTemplate></ProgressTemplate>

</atlas:UpdateProgress></atlas:UpdateProgress>

UpdateProgress DemoUpdateProgress Demo

Client Centric Ajax DevelopmentClient Centric Ajax Developmentwith Atlaswith Atlas

Client-Centric Programming Client-Centric Programming ModelModel

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 LibraryAtlas Client Script LibraryGoal: Easily develop rich interactive web applicationsGoal: Easily develop rich interactive web applications

Application UI runs in browser, business logic runs on serverApplication UI runs in browser, business logic runs on serverHTML/Atlas client accesses data and services from the webHTML/Atlas client accesses data and services from the web

ScenariosScenariosMash-up applications Mash-up applications Composite applications, sites, and gadgets (e.g. Live.com)Composite applications, sites, and gadgets (e.g. Live.com)Disconnected browser scenarios (e.g. Windows Sidebar)Disconnected browser scenarios (e.g. Windows Sidebar)

Powerful UI framework and component model for browsersPowerful UI framework and component model for browsersDeclarative markup and component modelDeclarative markup and component modelRich client-side data access and data-bindingRich client-side data access and data-bindingZero footprint client installation on any modern browserZero footprint client installation on any modern browser

Easily integrated with server application modelEasily integrated with server application modelEasily consume any web service (ASMX, Indigo) from browserEasily consume any web service (ASMX, Indigo) from browserProxy generation, serialization to consume .NET objects in Proxy generation, serialization to consume .NET objects in scriptscriptScript access to ASP.NET application services Script access to ASP.NET application services Server-side bridge to reuse 3Server-side bridge to reuse 3rdrd party services party services

Atlas Client Script LibraryAtlas Client Script Library

Atlas Client Script Library

Atlas Client Script Library

Controls and Components

Controls 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 Script core runtime: a rich type system for JScript Classes, namespaces, inheritance, interfaces Classes, namespaces, inheritance, interfaces Event handlersEvent handlersObject serializationObject serialization

Base class library and networking servicesBase class library and networking servicesHelper classes for developers (subset of .NET BCL)Helper classes for developers (subset of .NET BCL)Management of asynchronous network operationsManagement of asynchronous network operations

Component model and UI frameworkComponent model and UI frameworkDeclarative scripting (Atlas XML script definitions)Declarative scripting (Atlas XML script definitions)Extensible component and control modelExtensible component and control modelData binding, presentation, and validationData binding, presentation, and validation

Atlas components for common scenarios – examples:Atlas components for common scenarios – examples:ListView and DataView for rendering templated ListView and DataView for rendering templated data data UI behaviors such as drag and drop, tooltips, auto-UI behaviors such as drag and drop, tooltips, auto-completioncompletion

Compatibility layer for browsers and platformsCompatibility layer for browsers and platformsSupport for IE, Firefox/Mozilla, SafariSupport for IE, Firefox/Mozilla, Safari

Network Callbacks from Network Callbacks from ScriptScript

Atlas provides easy mechanism for script callbacksAtlas provides easy mechanism for script callbacksCan call a web-service end-point on serverCan call a web-service end-point on serverCan call a page-method end-point on serverCan call a page-method end-point on server

Atlas provides JSON network serialization supportAtlas provides JSON network serialization supportJSON = JavaScript Object Notation JSON = JavaScript Object Notation

JSON support for auto-serialization of .NET typesJSON support for auto-serialization of .NET typese.g. return an array of “Customer” objectse.g. return an array of “Customer” objects

Advanced network manager features supportedAdvanced network manager features supportedPriorities and queuing on network callsPriorities and queuing on network callsBatch invocation of multiple calls in single network requestBatch invocation of multiple calls in single network request

Network WebService Calls Network WebService Calls from Scriptfrom Script

// Server Method Implemented in SimpleService.asmx // Server Method Implemented in SimpleService.asmx

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

[WebMethod][WebMethod]

public int Add(int x, int y) {public int Add(int x, int y) {

return x+y;return x+y;

}}

}}

// Add this control to a .aspx page to reference it// Add this control to a .aspx page to reference it

<atlas:ScriptManager ID="scriptManager" runat="server"><atlas:ScriptManager ID="scriptManager" runat="server">

<Services><Services>

<atlas:ServiceReference Path="SimpleService.asmx" /><atlas:ServiceReference Path="SimpleService.asmx" />

</Services></Services>

</atlas:ScriptManager></atlas:ScriptManager>

Network WebService Calls Network WebService Calls from Scriptfrom Script

<script language=“JavaScript”><script language=“JavaScript”>

function Calculate() {function Calculate() {

SimpleService.Add(123, 456, onComplete, onTimeout);SimpleService.Add(123, 456, onComplete, onTimeout);

}}

function onComplete(result) {function onComplete(result) {

someHtmlLabel.innerText = result;someHtmlLabel.innerText = result;

}}

function onTimeout(result) {function onTimeout(result) {

alert(“Timed out!”);alert(“Timed out!”);

}}

</script></script>

<input type=“button” value=“Push Me” onclick=“Calculate”/><input type=“button” value=“Push Me” onclick=“Calculate”/>

32

Web Services Call DemoWeb Services Call Demo

SummarySummary

33

Atlas provides a rich Ajax programming Atlas provides a rich Ajax programming frameworkframework

Rich built-in integration with ASP.NETRich built-in integration with ASP.NET

Server ControlsServer Controls

Web and Application ServicesWeb and Application Services

Rich client-side JavaScript framework modelRich client-side JavaScript framework model

Build rich mashups and gadgetsBuild rich mashups and gadgets

Rich extensibility model for component Rich extensibility model for component developersdevelopers

Start taking a look at it today!Start taking a look at it today!

34

START NOWSTART NOWhttp://atlas.asp.nethttp://atlas.asp.net

35

Thank YouThank You

You can mail me atYou can mail me at

[email protected]@theperfectfuture.com

Visit my blog atVisit my blog athttp://www.saurabhverma.com/http://www.saurabhverma.com/

blogblog

1. What are the key topics we covered in today's 1. What are the key topics we covered in today's presentation?presentation?

A) Atlas.netA) Atlas.net B) Atlas.net , Update B) Atlas.net , Update Panel and Control Panel and Control ToolkitToolkit

C) Update PanelC) Update Panel D) Control ToolkitD) Control Toolkit

2. Number of atlas controls on toolbar after adding 2. Number of atlas controls on toolbar after adding atlas binaryatlas binary

A) 10A) 10 B) 8B) 8

C) C) 1414 D) 12D) 12

3. Types of Development Approaches in Atlas3. Types of Development Approaches in Atlas

A) ServerA) Server B) ClientB) Client

C) Client and ServerC) Client and Server D) NoneD) None

4. Motivational Framework behind Atlas4. Motivational Framework behind Atlas

A) AJAXA) AJAX B) PHPB) PHP

C) ASPC) ASP D) LaszloD) Laszlo

How to ParticipateHow to Participate

Please send your responses to Please send your responses to [email protected]@erfolgcs.com

Subject = “Microsoft Webcast Contest – Subject = “Microsoft Webcast Contest – Web Applications meets Life Web Applications meets Life Microsoft Microsoft ASP.NET “Atlas”ASP.NET “Atlas” ""

mailto:[email protected]

web applications meets life microsoft asp.net “atlas” saurabh verma chief software architect |...

Documents

atlas controls

atlas behaviors

client centric modelleverage

ajax easyseamlessly

aspnet controlsexamples

atlas binary

aspnet atlasa framework

web authoring tools