Upload
claribel-sims
View
220
Download
1
Tags:
Embed Size (px)
Citation preview
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
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)
9
Client Centric ModelClient Centric 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 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””/>/>
<ContentTemplate><ContentTemplate>
</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”>
<ContentTemplate><ContentTemplate>
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>
</atlas:UpdatePanel></atlas:UpdatePanel>
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”>
<ContentTemplate><ContentTemplate>
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
</ContentTemplate></ContentTemplate>
<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:UpdatePanel></atlas:UpdatePanel>
<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”>
<ContentTemplate><ContentTemplate>
<asp:gridview id=“GridView1” runat=“server”> ... </asp:gridview><asp:gridview id=“GridView1” runat=“server”> ... </asp:gridview>
</ContentTemplate></ContentTemplate>
</atlas:UpdatePanel></atlas:UpdatePanel>
<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
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 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” ""