The Microsoft Technical Roadshow 2006 A Web-enabled A Web-enabled Experience with Experience with Altas Altas Mike Ormond Mike Ormond Developer & Platform Evangelism Group, Microsoft Developer & Platform Evangelism Group, Microsoft Ltd Ltd [email protected][email protected]blogs.msdn.com/mikeormond blogs.msdn.com/mikeormond
37
Embed
The Microsoft Technical Roadshow 2006 A Web-enabled Experience with Altas Mike Ormond Developer & Platform Evangelism Group, Microsoft Ltd [email protected].
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
The Microsoft
Technical Roadshow 2006
A Web-enabled A Web-enabled Experience with Altas Experience with Altas
Mike OrmondMike OrmondDeveloper & Platform Evangelism Group, Microsoft LtdDeveloper & Platform Evangelism Group, Microsoft Ltd
Components and behavioursComponents and behaviours
Mashups, gadgets and moreMashups, gadgets and more
Some TerminologySome Terminology Courtesy wikipedia Courtesy wikipedia
AjaxAjax ‘ ‘AAsynchronous synchronous JJavaScript avaScript AAnd nd XXML, is a web development technique ML, is a web development technique for creating interactive web applications. The intent is to make web pages for creating interactive web applications. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire web page does not have to be behind the scenes, so that the entire web page does not have to be reloaded each time the user makes a change.’reloaded each time the user makes a change.’
AtlasAtlas ‘… ‘… Microsoft's codename for a set of extensions to ASP.NET for Microsoft's codename for a set of extensions to ASP.NET for implementing Ajax functionality.’implementing Ajax functionality.’
XMLHttpRequestXMLHttpRequest ‘… ‘… a set of APIs that can be used by JavaScript, JScript, a set of APIs that can be used by JavaScript, JScript, VBScript and other … scripting languages to transfer and manipulate XML VBScript and other … scripting languages to transfer and manipulate XML data to and from a web server using HTTP, establishing an independent data to and from a web server using HTTP, establishing an independent connection channel between Client-Side and Server-Side.connection channel between Client-Side and Server-Side.’’
‘‘The XMLHTTP object was originally developed by Microsoft, available The XMLHTTP object was originally developed by Microsoft, available since Internet Explorer 5.0 as an ActiveX object, via JScript, VBScript, or since Internet Explorer 5.0 as an ActiveX object, via JScript, VBScript, or other scripting languages supported by the browser. Mozilla contributors other scripting languages supported by the browser. Mozilla contributors then implemented a compatible native version called XMLHttpRequest in then implemented a compatible native version called XMLHttpRequest in Mozilla 1.0. This implementation was later followed by Apple since Safari Mozilla 1.0. This implementation was later followed by Apple since Safari 1.2, Opera Software since Opera 8.0 and iCab since 3.0b352.1.2, Opera Software since Opera 8.0 and iCab since 3.0b352.’’
Mash-upMash-up ‘… a website or web application that seamlessly combines content ‘… a website or web application that seamlessly combines content from more than one source into an integrated experience.’from more than one source into an integrated experience.’
Client Callback ManagerClient Callback Manager
DemoDemo
What Is “Atlas”?What Is “Atlas”? A Framework for Building … A Framework for Building …
… … a new generation of richer, interactive, a new generation of richer, interactive, personalised standards-based web applicationspersonalised standards-based web applications
High-productivity platform for AJAX-style browser High-productivity platform for AJAX-style browser applicationsapplications
Seamlessly integrate with Microsoft platform and Seamlessly integrate with Microsoft platform and application modelapplication model
Delivers ubiquitous reach and easy deploymentDelivers ubiquitous reach and easy deployment
Enable world-class tools for AJAX-style application Enable world-class tools for AJAX-style application developmentdevelopment
‘‘Atlas’ ScenariosAtlas’ Scenarios Where Would I Use It? Where Would I Use It?
Server-centric Ajax Web DevelopmentServer-centric Ajax Web Development
Incremental 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 requiredEnrich applications without lots of Javascript code required
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 Ajax Web DevelopmentClient-centric Ajax Web Development
Leverage 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
Programming ModelProgramming Model Server-Centric Server-Centric
Goal: Easily enhance any ASP.NET web applicationGoal: Easily enhance any ASP.NET web applicationApplication 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 refreshes)Enable incremental page UI updates (avoid full page refreshes)
Scenarios: data navigation and editing, form validation, auto refreshScenarios: data navigation and editing, form validation, auto refresh
Enable richer interactivity for existing ASP.NET controlsEnable richer interactivity for existing ASP.NET controlsUse the same controls, object model and events you already knowUse the same controls, object model and events you already know
Extenders to add Atlas behaviours to any ASP.NET controlsExtenders to add Atlas behaviours to any ASP.NET controls
New, richer ASP.NET server controlsNew, richer ASP.NET server controlsServer wrappers for Atlas client controlsServer wrappers for Atlas client controls
Examples: DateTimePicker, RichTextBox, Re-Order ListExamples: DateTimePicker, RichTextBox, Re-Order List
<atlas:updatepanel> control<atlas:updatepanel> control
Container 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
All post-back actions for controls declared within an All post-back actions for controls declared within an updatepanel control will cause Ajax-based post-backs with updatepanel control will cause Ajax-based post-backs with incremental page refreshincremental page refresh
Post-back action for controls outside of an updatepanel control Post-back action for controls outside of an updatepanel control will by default cause normal postbackswill by default cause normal postbacks
TriggersTriggers
Can be used to associate UpdatePanels on the page with Can be used to associate UpdatePanels on the page with postback controls declared outside of the UpdatePanelpostback controls declared outside of the UpdatePanel
Conditional refreshes can also be triggered via codeConditional refreshes can also be triggered via code
UpdatePanel1.Update()UpdatePanel1.Update()
Conditional UpdatePanelConditional UpdatePanel
DemoDemo
<atlas:UpdateProgress> Control<atlas:UpdateProgress> Control
Delivers ability to provide ‘status’ UI while waiting on Delivers ability to provide ‘status’ UI while waiting on response from a serverresponse from a server
‘‘Ajax’ is inherently AsynchronousAjax’ is inherently 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 UpdateProgress control can be placed anywhere on pagepage
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
Extend existing controls with behavioursExtend existing controls with behaviours
AutoCompleteExtenderAutoCompleteExtender
Enables textbox auto-complete supportEnables textbox auto-complete support
Callback to Web Service on server for word listCallback to Web Service on server for word list
Supports both .asmx- and WCF-based Web Services (both Supports both .asmx- and WCF-based Web Services (both using the built-in Atlas JSON bridge)using the built-in Atlas JSON bridge)
DragOverlayExtenderDragOverlayExtender
Enables dragging a control to a new locationEnables dragging a control to a new location
Other ‘extender’ controls planned Other ‘extender’ controls planned
March refresh added WebPart FireFox SupportMarch refresh added WebPart FireFox Support
Enables drag/drop support within FireFox (very Enables drag/drop support within FireFox (very commonly requested feature with ASP.NET 2.0)commonly requested feature with ASP.NET 2.0)
Future Atlas refresh enables individual web-Future Atlas refresh enables individual web-parts to be refreshed independently as update-parts to be refreshed independently as update-panelspanels
Web PartsWeb Parts
DemoDemo
Client-Centric Programming ModelClient-Centric Programming Model
Easily develop rich interactive web applicationsEasily develop rich interactive web applicationsApplication UI runs in browser, business logic runs Application UI runs in browser, business logic runs on serveron serverHTML/Atlas client accesses data and services from HTML/Atlas client accesses data and services from the webthe web
ScenariosScenarios
Mash-up applications Mash-up applications
Composite applications, sites and gadgets (e.g. Live.com)Composite applications, sites and gadgets (e.g. Live.com)
Powerful UI framework and component model for browsersPowerful UI framework and component model for browsers
Declarative markup and component modelDeclarative markup and component model
Rich client-side data access and data-bindingRich client-side data access and data-binding
Easily integrated with server application modelEasily integrated with server application model
Easily consume any Web Service (ASMX, Indigo) from browserEasily consume any Web Service (ASMX, Indigo) from browser
Proxy generation, serialisation to consume .NET objects in scriptProxy generation, serialisation to consume .NET objects in script
Script 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
Network Callbacks from ScriptNetwork Callbacks from Script
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
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
Client Network Callbacks Client Network Callbacks with Atlas and JavaScriptwith Atlas and JavaScript
DemoDemo
Atlas Component and BehavioursAtlas Component and Behaviours
Data Binding and TemplatesData Binding and Templates
Atlas enables declarative databinding and Atlas enables declarative databinding and template customisation on the clienttemplate customisation on the client
Designers can edit the HTML and use CSS to Designers can edit the HTML and use CSS to define a html template for an Atlas Control to define a html template for an Atlas Control to populate at runtimepopulate at runtime
Developers can use the new Atlas ListView Developers can use the new Atlas ListView client control to bind data (either one or two way) client control to bind data (either one or two way) against the html templateagainst the html template
Client-Side Atlas Client-Side Atlas ListView ControlListView Control
DemoDemo
Mashup SupportMashup Support
Atlas provides the ability to define service Atlas provides the ability to define service bridgesbridges
Allow client script to call to local serverAllow client script to call to local server
Local server then proxies request to serviceLocal server then proxies request to service
Avoids cross-domain script call-back issuesAvoids cross-domain script call-back issuesNo security prompts for the browserNo security prompts for the browser
Avoids having to publish service keysAvoids having to publish service keys
Examples:Examples:Amazon, FlickR, Virtual Earth, Google Maps, etcAmazon, FlickR, Virtual Earth, Google Maps, etc
Helps make writing mashups easyHelps make writing mashups easy
Gadget SupportGadget Support
Gadgets are a new Ajax extensibility modelGadgets are a new Ajax extensibility model
Supported by Supported by www.live.comwww.live.com
Supported by new Windows SidebarSupported by new Windows Sidebar
Gadgets enable re-usable functionality to be published and Gadgets enable re-usable functionality to be published and shared at no cost to developer/publishershared at no cost to developer/publisher
Atlas enables developers to develop gadgets hosted on their Atlas enables developers to develop gadgets hosted on their servers, and for end-users to add the gadgets into their servers, and for end-users to add the gadgets into their homepage or Windows Sidebarhomepage or Windows Sidebar
Provides more touch with customers and opens up interesting Provides more touch with customers and opens up interesting new business model opportunities for developers and websitesnew business model opportunities for developers and websites