Developing Rich Internet Applications
using AJAX and Atlas
Adnan Farooq HashmiMVP –Windows SDKUser Group Leader, Core.NETSpeaker – INETA Pakistan www.pkblogs.com/coredotnet
Participation
VideoODEO Convergence
MINT
SIXDEGREES
SKYPE JABBER
ITUNES
GTALK
VIDEOCASTING
The Buzzzzzz
Web2.0Economy
Usability
Design
StandardizationRemixability
Focus on Simplicity
MicroformatsWeb Standards
CSS-Design
Joy of UseAJAX
The Long Tail
Affilication
WikisFolksonomy
RecommendationSocial Software
Blogs
Audio
MobilityRSS OpenAPIs
DataDriven
COLLABORATION WIDGETS
SHARINGPAGERBANK
USER CENTEREDPERPETUAL BETA
LIVELINESS
TRUST
FOAF
XFNVCAGGREGATION
IMPODCASTING
DATA INSIDE SEOGRANULARITY MODULARITY SIMPLICITY
SEMANTICXHTML ACCESSIBILITY
WIFIUMTSXML
SYNDICATIONSOAP REST RUBYONTAILS
COSTPERCLICK
TAGTAGGERTAGGLING CLOUDALICIOUS
TAGCLOUDFLOCK DELICIOUS
FLICKRSTUMBLEUPON
DIGG SQUIDOOEBAY
43THINGSNINGSOFLOW LINKEDIN
OPENBC ORKUTUPCOMING FRIENDSTERPLANZO BLOGGER
TYPEPADWORDPRESS TECHNORATI
MEASUREMAPREAD.IOLASTFMIPODDER
BIT TORRENT
CREATIVECOMMONS
VIMEOYOUTUBE
CASTPOST
GOOGLE MAPSA9 PLAZES
YAHOO MAPSTAGCLOUD
BLOGLINESNEWSGATORFEEDSTER
FEEDBURNERMYYAHOO
ROJO
AMAZONGOOGLE MAPS
GMAPS MASHUPS TECHNORATIGOOGLE NEWSBUZZTRACKER GOOGLE A9 ICEROCKETINORDER WINK
ROLLYOTREADMAPPER
PUBSUB
BASECAMP
CHALK.ITBACKPACK
REMEMBERTHEMILKTADALIST
GTD GMAILGOOGLE MAPS KIKOGOOGLE
RSSREADER GOOGLE IG UNWIELDYZIMBRA MEEBO
PROTOPAGEZOOZIO
NETVIBESLIVE.COM
FLICKRFOTOLIABLINKSALE ETSY
EBAYAMAZON MTURK
ITUNES
ADSENSE
SIMPLEBITS
STYLEGALA
CSSBEAUTY9RULES
ZENGARDEN
WASPALISTAPART
FIREFOX
MICROFORMATS.ORG
Web 2.0
Term coined in late 2004Rich User ExperienceProgrammability• The Web as a Platform• Offering content as services and APIs and not just web pages
User Experience (UX)
ResponsivenessInteractivityPersonalizationConnectedImmersive
AJAX
“Asynchronous JavaScript and XML”Term coined in April 2005Applied to web applicationsAn approach to communicate with back‐end web services
AJAX
Allows asynchronous communication with server without refreshing whole pageUses JSON & REST for communication
AJAX
CSS for StylesJavaScript for Behavior}DHTML
AJAX – XmlHttp
Originally developed by MicrosoftActiveX control inside IESend and receive data as XML (POX/REST), JSON, or plain textCan be used in any scripting language
open ( method, URL )send ( content )
JSON
Abbr. for JavaScript Object NotationLightweight protocol used in AJAX communicationMore lightweight then XML
JSON Example
class Conference{
string Title;string Venue;
}
<?xml version="1.0" ?><Conference>
<Title>PDC 2006</Title><Venue>Pearl Continental</Venue>
</Conference>
{ “Conference” {“Title”: “PDC 2006”,“Venue”: “Pearl Continental”}
}
Atlas
A framework for building a newgeneration of richer, more interactive
highly personalized,standards basedweb applications
Atlas
NaukriWithoutAtlas.NETNaukriAtlas.NET
Developing with Atlas
Atlas Programming Model
Server-Centric Client-Centric
Update Panel
Control Extenders
JavaScript XML Script
Atlas – Server Centric
NaukriAtlas.NET
UI + Behavior
Input Data
Pages
UI Behavior (Managed Code)
Browser
Server Application
Presentation (HTML/CSS)
Atlas – Client Centric
NaukriAtlas.NET
a) Initia
l Renderin
g
(UI + Behavior)
Pages
UI Behavior (Managed Code)
Server Application
Browser
Presentation (HTML/CSS)
b) Data
c) Data
Server v/s Client Centric
Server Centric Web Apps• Work with existing Server Application Model• Keep core UI/application logic on server• Improve latency, interactivity, personalization
Client Centric Browser Apps• Fully exploit DHTML in presentation tier• Use AJAX for data, services, composition• Enable new immersive experience
A couple of examples
Hotmail LiveLive.comPageflakes.comGoogle.com/igGoogle Spreadsheets
Getting Started with Microsoft Atlas
Select Project Template
Enter Project Name
Added by default
<atlas: ScriptManager />
Added to .aspx file(s)Atlas Script Manager• Server Control to handle all script callbacks• Allows developers to specify
• Script files to Include in the webpage• Web Services to Consume
“Atlas” Script Manager
<!–- Simple Syntax --><atlas:ScriptManager
ID=“ScriptManager1”runat=“server”EnablePartialRendering=“true” />
Allows Incremental Loading
“Atlas” Script Manager
<!–- Scripts & Services --><atlas:ScriptManager … ><Scripts>…
</Scripts><Services>
…</Services>
</atlas:ScriptManager>
JavaScript to add
Web Services to consume
“Atlas” Script Manager
<!–- Including External Scripts --><atlas:ScriptManager ID=“…” runat=“server”><Scripts>
<atlas:ScriptReference Name=“…” />
<atlas:ScriptReference Path=“xyz.js” />
</Scripts></atlas:ScriptManager>
“Atlas” Script Manager
<!–- Consuming Web Services --><atlas:ScriptManager ID=“…” runat=“server”><Services>
<atlas:ServiceReferencePath=“MyService.asmx” />
</Services></atlas:ScriptManager>
Server‐Centric Development with “Atlas” and ASP.NET
“Atlas” Server Controls
Update PanelControl Extenders• Drap‐and‐drop• Popups• Auto‐complete• Cascading dropdown lists [Country‐City]
“Atlas” Server Controls
Easy‐to‐use in ASP.NET• Application UI and core logic still runs on server• No need to master JavaScript and Asynchronous programming
AJAX‐enable existing ASP.NET sites
“Atlas” Server Controls
Uses AJAX in the background to reduce full roundtrips• Incremental UI updates• Examples: data navigation and editing, form validation, auto refresh
“Atlas” Server Controls
<atlas:Update Panel … />• Easily define updatable regions of a page• Server roundtrips become asynchronous• “Atlas” handles all infrastructure
“Atlas” Update Panel
<atlas:UpdatePanel ID=“…” runat=“server”><ContentTemplate>
<!-- This content can be dynamically updated! -><asp:Calendar ID=“cal1” runat=“server”/>
</ContentTemplate></atlas:UpdatePanel>
Update Panel
Client‐Centric Development with “Atlas”
Client‐Centric Development
Page UI loads only onceData communicated between server and browser kept to a minimumHighly responsiveUI logic created using JavaScript
Client‐Centric Development
“Atlas”Script Framework
JavaScript (Programmatically)
XML-Script (Declaratively)
Client‐Centric Development
More “Atlas” Server Controls
Atlas Client Libraries• Reusable piece of interactive functionality• Attached to HTML UI declaratively or in code• Examples
• Drag‐and‐drop• Popups• Auto‐complete
• Easily extensible
Atlas Control Extenders
Included inside Atlas Control Toolkit• AtlasControlToolkit.dll• Microsoft.AtlasControlExtender.dll
Extend existing control’s functionality using pre‐developed DHTML
More Demos…
Control ExtendersWeb PartsUI Glitz
if time permits…
Important URLs
http://www.pkblogs.com/coredotnethttp://atlas.asp.nethttp://www.programmableweb.comhttp://www.live.comhttp://www.pageflakes.comhttp://spreadsheets.google.com
Top Related