Transcript Atlas - Microsoft

Web Applications meets Life
Microsoft ASP.NET “Atlas”
Saurabh Verma
Chief Software Architect | The Perfect Future
[email protected]
http://www.theperfectfuture.com
Road Map
What is ASP.NET ‘Atlas’
‘Atlas’ Development Models
Inside UpdatePanel
Summary
Content by : Scott Guthrie,Microsoft
2
Saurabh Verma
Chief Software Architect and co-Founder of
The Perfect Future
Involved in architecting and developing next
generation communication engine
“HumTum”
A Web 2.0 BLOG
3
What is ASP.NET ‘Atlas’
A framework for building a new generation of richer,
interactive, personalized standards-based web applications
High-productivity platform for AJAX-style browser applications
Script component model and UI framework for browser-based web applications
Rich suite of components, controls, and behaviors to make Ajax easy
Seamlessly integrate with Microsoft platform and application model
Easily leverages services and components hosted in ASP.NET
Delivers ubiquitous reach and easy deployment
Works with IE, FireFox, Safari web clients – no client install required
Based on existing standards – DHTML, JScript, CSS
Enable world-class tools for AJAX-style application development
Will be integrated with web authoring tools for developers and designers
Next release of VS will provide richer scripting toolset (debugging, tracing, etc)
4
What is ASP.NET ‘Atlas’
‘Atlas’ Development
Atlas provides a great Ajax framework for
both server and client centric development
Server Centric Model
Incremental Ajax approach to add UI enrichment for key scenarios
Enrich applications without lots of Javascript code required
Enable you to keep core UI/Application logic on server (VB/C#)
Client Centric Model
Leverage full power of script/DHTML
Provide richer and more interactive user experience
Build mash-ups, gadgets and other new immersive experiences
6
‘Atlas’ Development Models
Server Centric Model
ASP.NET Application
Browser
Initial Rendering
(UI + Behavior)
Presentation
(HTML/CSS)
Input Data
Updated UI + Behavior
Atlas Script Framework
Component/UI
Framework,
Controls
Client
Application
Services
Pages
UI Behavior
(Managed
Code)
ASP.NET
Page
Framework,
Server Controls
Application
Services
8
Client Centric Model
ASP.NET Application
Browser
Presentation
(HTML/CSS)
UI Behavior
(Script)
Initial Rendering
(UI + Behavior)
“Atlas”
Service
Proxies
Component/UI
Framework,
Controls
Data
Web
Services
Data
Atlas Script Framework
Client
Application
Services
Pages
ASP.NET
Page
Framework,
Server Controls
Application
Services
9
Server Centric Development
with Atlas
<Atlas:> Server Controls
Goal: Easily enhance any ASP.NET web application
Application UI and core logic still runs on server
Avoid need to master JavaScript and asynchronous programming
Use AJAX techniques to reduce roundtrips
Enable incremental page UI updates (avoid full page refreshes)
Scenarios: data navigation and editing, form validation, auto
refresh
Enable richer interactivity for existing ASP.NET controls
Use the same controls, object model and events you already
know
Extenders to add Atlas behaviors to any ASP.NET controls
Examples: auto-completion, web-parts, drag-and-drop, tooltips
You get 12 atlas controls on toolbar after adding to atlas binary to
your toolbar
<atlas:updatepanel> control
Container control that enables “updatable” regions in a page
Atlas 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
Inside <atlas:UpdatePanel>
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
<atlas:UpdatePanel>
Postbacks
All post-back actions for controls declared
within an updatepanel control will cause Ajaxbased post-backs with incremental page
refresh
Post-back action for controls outside of an
updatepanel control will by default cause
normal postbacks
<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 page
• Sometimes you only want to update one panel…
• UpdatePanel control supports two update mode:
• “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>
<atlas:UpdateProgress>
control
Delivers ability to provide “status” UI while waiting on response from a
server
Remember that “A” in “Ajax” stands for Asynchronous
Need to provide way for users to understand latency
Need to provide way for users to cancel requests
UpdateProgress control can be placed anywhere on page
Templated 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
Client Centric Ajax Development
with Atlas
Client-Centric Programming
Model
ASP.NET Application
Browser
Presentation
(HTML/CSS)
UI Behavior
(Script)
Initial Rendering
(UI + Behavior)
“Atlas”
Service
Proxies
Component/UI
Framework,
Controls
Data
Web
Services
Data
Atlas Script Framework
Client
Application
Services
Pages
ASP.NET
Page
Framework,
Server Controls
Application
Services
Atlas Client Script Library
Goal: Easily develop rich interactive web applications
Application UI runs in browser, business logic runs on server
HTML/Atlas client accesses data and services from the web
Scenarios
Mash-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 browsers
Declarative markup and component model
Rich client-side data access and data-binding
Zero footprint client installation on any modern browser
Easily integrated with server application model
Easily consume any web service (ASMX, Indigo) from browser
Proxy generation, serialization to consume .NET objects in script
Script access to ASP.NET application services
Server-side bridge to reuse 3rd party services
Atlas Client Script Library
Script core runtime: a rich type system for JScript
Classes, namespaces, inheritance, interfaces
Event handlers
Object serialization
Base class library and networking services
Helper classes for developers (subset of .NET BCL)
Management of asynchronous network operations
Component model and UI framework
Declarative scripting (Atlas XML script definitions)
Extensible component and control model
Data 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, autocompletion
Compatibility layer for browsers and platforms
Support for IE, Firefox/Mozilla, Safari
Atlas Client Script Library
Controls and Components
Component Model and
UI Framework
Base Class Library
Script Core
Browser Compatibility
Network Callbacks from Script
Atlas provides easy mechanism for script callbacks
Can call a web-service end-point on server
Can call a page-method end-point on server
Atlas provides JSON network serialization support
JSON = JavaScript Object Notation
JSON support for auto-serialization of .NET types
e.g. return an array of “Customer” objects
Advanced network manager features supported
Priorities and queuing on network calls
Batch 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”/>
Web Services Call Demo
32
Summary
Atlas provides a rich Ajax programming framework
Rich built-in integration with ASP.NET
Server Controls
Web and Application Services
Rich client-side JavaScript framework model
Build rich mashups and gadgets
Rich extensibility model for component developers
Start taking a look at it today!
33
START NOW
http://atlas.asp.net
34
Thank You
You can mail me at
[email protected]
Visit my blog at
http://www.saurabhverma.com/blog
35
1. What are the key topics we covered in today's
presentation?
A) Atlas.net
B) Atlas.net , Update
Panel and Control
Toolkit
C) Update Panel
D) Control Toolkit
2. Number of atlas controls on toolbar after adding
atlas binary
A) 10
B) 8
C) 14
D) 12
3. Types of Development Approaches in Atlas
A) Server
B) Client
C) Client and Server
D) None
4. Motivational Framework behind Atlas
A) AJAX
B) PHP
C) ASP
D) Laszlo
How to Participate
Please send your responses to
[email protected]
Subject = “Microsoft Webcast Contest – Web
Applications meets Life Microsoft ASP.NET
“Atlas”"