Atlas - AJAX Programming For The - Net 2.0 Framework

Atlas: AJAX Programming for
the .NET 2.0 Framework

.NET Webinar Series
May 2006
Presented by Jason Agostoni
.NET Architect
jagostoni@ceiamerica.com
Introductions
 Ryan Baker (rbaker@ceiamerica.com)

– Microsoft Alliance Manager for CEI
 Jason Agostoni (jagostoni@ceiamerica.com)

– .NET Architect for CEI
2 For Discussion Purposes Only | © 2005 Computer Enterprises, Inc.

.NET Webinar Series 2006
December 05 December 15, 2005
Visual Studio 2005 Developer Productivity Enhancements
January 06 January 19, 2006
Refactoring Code in Visual Studio 2005
February 06 February 16, 2006
Presenting BizTalk Server 2006
March 06 March 16, 2006
Unit Testing & Code Analysis in Visual Studio 2005
April 06 April 20, 2006
Windows Workflow Services
May 06 May 18, 2006
Atlas: AJAX programming for the .NET 2.0 Framework

CEI’s Microsoft Practice

 Microsoft Gold Certified Partner

– Core focus on .NET application development, EAI with BizTalk,
SharePoint Portal Server 2003 customizations, and workflow
implementations
 Delivery practice CMMI L5 (level 5) assessed

– Project and management processes
– Development and quality teams
– Working on eSCM certifications
 All project managers are PMI certified as Project

Management Professionals (PMP)
 All Microsoft architects are certified MCAD or MCSD
 Have worked with over 60% of the Fortune 50
Atlas: AJAX Programming for the
.NET 2.0 Framework
Atlas/AJAX for .NET 2.0
The Agenda
 AJAX:
– Defined, Intent, Demonstration, Issues
 Atlas:
– Defined, Business Value, Requirements
– Architecture: Client-Side, Server-Side
– Demonstrations
 Wrap-Up
 Questions & Answers

AJAX
AJAX: Defined
 Acronym: Asynchronous Javascript And XML
 Technique: Creating highly interactive web applications
– GMail, Flickr, Digg.com
 Not a technology or platform, rather:
– A collection of technologies:
• DOM/DHTML, XmlHTTPRequest, XML,JavaScript
– A methodology:
• “Asynchronously retrieving data from web services using JS”
 Independent of server technology

– No need for ASP.Net, JSP, etc.
 No specific XML Schema or Technology
– REST vs. SOAP

AJAX: Intent
 Web applications that behave more like rich-client apps
 Increase Usability:
– Easier to use – less “clicking” more “doing”
– Familiar – more like “office” applications
 Increase Speed:
– Smaller “chunks” of data
– No “round-trips”
 More Interactive:
– Advanced UIs (DHTML): drag/drop, context menus, shorcuts
– Better visual feedback

AJAX: Intent
 Replace rich-client applications
– Thin-client approach
– No dependencies (other than the browser, of course!)
– Zero install (browser)
 Replace “clunky” web applications

– Low client satisfaction
• “It’s slow!”…“The old way was better!”…”I miss Excel!”
• “What’s with all the flashing?”
– Balance between server and client resources
• Memory
• Network
• CPU

AJAX: Evolution
 Static content
– Very fast … very boring!
 Full round-trips
– Slow, flashing, maintaining state, the “back” button
 Hidden Frame
– Faster, inconsistent architecture, return of the “back” button
 Hidden IFrame
– Initial browser compatibility problems, same issues as above
 DHTML/”Heavy” JavaScript
– “Remote Scripting”, Portable data
– Richer client experience, trying to make a rich-client out of a
browser technology

AJAX: A quick look!
AJAX: Issues
 Browser compatibilities: IE (ActiveX), Others (built-in)
 JavaScript must be enabled
 “Roll your own…”
– Plumbing: e.g. web services, data
– State management
 Handle your own visual feedback

– Network latency, etc.
 DOM/DHTML not 100% cross-browser

– … it IS much better than before
– … workarounds are easy if you START that way

Enter: Atlas
Enter: Atlas
 Framework for encapsulating AJAX
– Reduces complexity by handling:
• Plumbing
• Browser compatibility
• Client framework
– Adds server controls to leverage client framework
• Reduces the need to learn the client-side APIs
– Integrated with Visual Studio 2005
• Compiled assemblies
• Project template
• Sample applications
– Not JUST for ASP.Net
• Client framework independent of server framework

Atlas: Client-Side Improvements
 Declarative programming model (XML)
 Familiar object-oriented development
– Type system, Namespaces, Events
 Cross-browser
– DOM/DHTML, XmlHTTPRequest vs. ActiveX XMLHTTP
 Components/Controls: functionality for common behaviors

– Drag/drop, auto-complete, data binding
 Remote procedure/service calls

– Encapsulates calling remote methods/services, callbacks,
XmlHttp

Atlas: Server-side Improvements
 Declarative programming model
 Server controls which “emit” client-side Atlas script
– Correspond closely to ASP.Net server controls
– Use the same IDE designer as for ASP.Net controls
– No need to learn the client-side API
 Server controls to handle client-side behaviors
– Hover, Click, Popup, AutoComplete
 UpdatePanel Server control
– Partial-page updates for a “stock” ASP.Net application
 Web-services for …
– Personalization, profiles and membership, roles,
global-/local-ization

Quick Atlas Demo
Atlas: Requirements
 Required
– Atlas Framework: http://atlas.asp.net
– Web browser
– Text editor
– Documentation: http://atlas.asp.net/docs/
 Recommended
– Visual Studio 2005/.NET Framework 2.0
– ASP.NET web server (IIS, Cassini)
– Visual Studio Content (.VSI or via the .MSI):
• JavaScript Client Library, Runtime (assembly), Project template
 Optional
– Atlas sample projects/Quick Starts

Atlas: On the client
Atlas: Client-side Declarative Programming
 Setup bindings between client-side controls and:
– Other controls, web services (WSE, ASMX), data sources
 Create your HTML form using your favorite editor/designer

 XML declarative syntax separates presentation and logic
 No JavaScript coding Form:
<input id=“MyTextBox” type=“text” />
required
<input id=“MyButton” type=“button” />
– Everything that can be done Declarative XML:

<components>
declaratively can be done <textBox id=“MyTextBox” />
<button id=“MyButton”>
via the API <click>
<setProperty target=“MyTextBox”
property=“text”
value=“clicked” />
</click>
</button>
</components>

Atlas: Client-side Scripting
 Same features as Declaratve XML
 Adds advanced features to JavaScript:
– Similar O-O model to ASP.NET Server code
– Namespaces
– Types
– Events ScriptManager:
<Services>
 Sys namespace: <atlas:ServiceReference Path=“MyService.asmx”

Type=“text/javascript” />
</Services>
– Actions, Bindings, Events
JavaScript:
 Sys.UI namespace: function callMyService() {
ServiceNS.MyService.WebMethod(params…,
– Wrapper controls }
MyCallbackFunction);
(Button, TextBox…) function MyCallBackFunction(result) {

… = result;
– Behaviors }
(Click, AutoComplete …)

Atlas: Client-side “Sugar”
 Behaviors: Popup, Hover, Drag/Drop …
 Validators: Required, Type, Range, RegEx, Custom
 Combining “behaviors” for some UI glitz
– Ex: Hover and PopUp
Declarative:
<control …><behaviors>
<popupBehavior id=“…” parentElement=“…”
positioningMode=“Absolute|Center|BottomLeft|BottomRight|TopLeft|TopRight”
x=“0” y=“0” />
<hoverBehavior hoverElement=“…”>
<bindings> … </bindings>
<hover> … action … </hover>
<unhover> … action … </unhover>
</hoverBehavior>
</behaviors></control>
JavaScript API:
pb = new Sys.UI.PopupBehavior();
pb.id = …; pb.parentElement=…;
hb = new Sys.UI.HoverBehavior();
hb.hoverElement = …;

Client-Side Atlas
Atlas: On the server
Atlas: Server-Side built-in services
 Built-in Web Services and Client-Side APIs for:
– Extend ASP.NET 2.0 Services
– Forms authentication
• Sys.Services.AuthenticationService
- validateUser, login, logout
– Profile Data
• Sys.Services.Profile, Sys.Profile class
- Sys.Profile.properties.FirstName
• Profile control
• Can bind data declaratively or via JavaScript
– Others (not fully documented):
• Personalization
• Globalization/Culture

Atlas: Server-side partial rendering
 Create a “stock” ASP.NET page
 “Wrap” certain controls in an Atlas UpdatePanel
 Full post-back but only that section is re-rendered
 Benefits: <atlas:ScriptManager ID="TheScriptManager"
EnablePartialRendering="true" runat="server"/>
– Low-friction modification! <atlas:UpdatePanel ID=“…“ runat="server"

Mode="Always|Conditional"
– Reduces “flashing” RenderMode="Block|Inline">
– Reduces amount of <Triggers>

<ControlValueTrigger ControlID="string"
rendering (data and drawing) PropertyName="string"/>

<ControlEventTrigger ControlID="string"
EventName="string"/>
– More responsive UI </Triggers>
<ContentTemplate>
… ASP.NET Server Markup …
</ContentTemplate>
</atlas:UpdatePanel>

Atlas: Server-side control extenders
 Add pre-developed client-script behaviors to server
controls
 AutoCompleteExtender
– Adds auto complete to a TextBox (Ex. Google Suggest)
– Uses a web service to retrieve
matching data <atlas:AutoCompleteExtender
ID="string"
 DragOverlayExtender MinimumPrefixLength="3"
runat="server"
ServiceMethod="string"
– Adds drag/drop to server controls >
ServicePath="string"
<atlas:AutoCompleteProperties
– Can interface with Profile service Enabled="true|false"
MinimumPrefixLength=""
ServiceMethod="string"
 TimerControl ServicePath="string"
TargetControlID="string"
/>
– PostBacks at regular intervals </atlas:AutoCompleteExtender>
– Fires server-side “Tick” event

Server-Side Atlas
Wrap-Up
Atlas: Implications
 Security: Same as JavaScript policies
– Can only access resources on originating server (http)
– Atlas provides web service “bridge” via .asbx
 Learning Curve: Depends….

– Server-side controls: There is little to learn
– Client-side APIs: Need to learn framework
– Declarative
 Release Schedule: April CTP

– Currently has a GO-LIVE license
– No firm commercial release date but Q3/Q4 seems probable
– Part of ASP.NET 3

Atlas: Business Case
 Potential cost savings
– Handles complexity of a rich web UI
– Better user experience = Less “guessing” and re-work
– Fewer server resources
– Same savings as other web applications: think thin-client
– It’s Free
 Strategic
– “Everybody’s doing it” – New trend in Web 2.0
– Will become part of ASP.NET 3
– Moves thought-process toward SOA

More Information
CEI’s Mentoring Programs
Contact rbaker@ceiamerica.com for details
Atlas Home
http://atlas.asp.net/
Thank You!
Questions and Answers
.NET Webinar Series 2006
December 05 December 15, 2005
Visual Studio 2005 Developer Productivity Enhancements
January 06 January 19, 2006
Refactoring Code in Visual Studio 2005
February 06 February 16, 2006
Presenting BizTalk Server 2006
March 06 March 16, 2006
Unit Testing & Code Analysis in Visual Studio 2005
April 06 April 20, 2006
Windows Workflow Services
May 06 May 18, 2006
Atlas: AJAX programming for the .NET 2.0 Framework

Atlas - AJAX Programming For The - Net 2.0 Framework

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Atlas - AJAX Programming For The - Net 2.0 Framework

Diunggah oleh

Hak Cipta:

Format Tersedia

Atlas: AJAX Programming for

the .NET 2.0 Framework

 Ryan Baker (rbaker@ceiamerica.com)

 Jason Agostoni (jagostoni@ceiamerica.com)

2 For Discussion Purposes Only | © 2005 Computer Enterprises, Inc.

December 05 December 15, 2005

Visual Studio 2005 Developer Productivity Enhancements

January 06 January 19, 2006

Refactoring Code in Visual Studio 2005

February 06 February 16, 2006

Presenting BizTalk Server 2006

March 06 March 16, 2006

Unit Testing & Code Analysis in Visual Studio 2005

April 06 April 20, 2006

Windows Workflow Services

May 06 May 18, 2006