building ajax-based web applications with arcgis server and...• ajax (asynchronous javascript...

Building AJAXBuilding AJAX--Based Web Applications with Based Web Applications with ArcGIS Server and .NETArcGIS Server and .NET

Art Haddad and Rex HansenArt Haddad and Rex HansenArt Haddad and Rex HansenArt Haddad and Rex Hansen

Developer Summit 2007Developer Summit 2007 11

Session TopicsSession Topics

•• ASP.NET and AJAXASP.NET and AJAX•• Web ADF and AJAXWeb ADF and AJAX•• Web ADF and AJAXWeb ADF and AJAX

–– Tools and CommandsTools and Commands–– Controls and TasksControls and Tasks–– Working with Callbacks and ResultsWorking with Callbacks and Results

•• “Mash“Mash--ups” with the Web ADFups” with the Web ADF•• Best Practices Best Practices

–– Building AJAX Web ApplicationsBuilding AJAX Web ApplicationsW b A li ti D iW b A li ti D i–– Web Application DesignWeb Application Design


Our assumptionsOur assumptions

•• Proficiency in TechnologyProficiency in TechnologyASP NETASP NET–– ASP.NETASP.NET

–– Web Development techniquesWeb Development techniques–– HTML/JavaScriptHTML/JavaScript

•• Understanding of ESRI Server ProductsUnderstanding of ESRI Server Products–– ArcGIS ServerArcGIS Server–– Web ADFWeb ADF

•• Examples and discussion will use Examples and discussion will use Visual Studio NET 2005Visual Studio NET 2005 –– SP1SP1–– Visual Studio.NET 2005 Visual Studio.NET 2005 –– SP1SP1

–– ASP.NET 2.0ASP.NET 2.0–– C#C#


–– ArcGIS Server for Microsoft .NET Web ADFArcGIS Server for Microsoft .NET Web ADF

ArcGIS Server Web Application Developer ArcGIS Server Web Application Developer Framework (ADF)Framework (ADF)Framework (ADF)Framework (ADF)

AJAX enabled AJAX enabled GIS Web controlsGIS Web controls

Extend, distributecustom functionality

GIS Web controlsGIS Web controls

WebWeb--tier tier Multi-sourcesupport

graphics,graphics,geometry,geometry,renderingrendering


Postbacks and callbacksPostbacks and callbacks

Server sideServer sideClient sideClient side

Full PageFull PagePost backPost back

ASPX PageASPX PageButton_OnClickButton_OnClickSubmitSubmit

RenderRender……

9.19.1RenderRender

SubmitSubmit

AJAX /AJAX /ASPX PageASPX PageButtonClickButtonClick

ClientClientCallbackCallback

9.29.2

ButtonClickButtonClick

SubmitSubmit GetCallbackResultGetCallbackResult

……


Web ADF and AJAXWeb ADF and AJAX

•• Extends the ASP.NET 2.0Extends the ASP.NET 2.0 callback framework to callback framework to generate and process asynchronous requests within agenerate and process asynchronous requests within agenerate and process asynchronous requests within a generate and process asynchronous requests within a Web applicationWeb application

•• The framework includesThe framework includes–– a set of tool/command interfaces accessed via aa set of tool/command interfaces accessed via a Toolbar control Toolbar control

to process callbacks on the serverto process callbacks on the servert f J S i t lib i t llb k th li tt f J S i t lib i t llb k th li t–– a set of JavaScript libraries to manage callbacks on the client, a set of JavaScript libraries to manage callbacks on the client,

–– public callback properties on each Web ADF controlpublic callback properties on each Web ADF control–– a set of custom classes to manage callback messagesa set of custom classes to manage callback messagesg gg g


AJAX enables communication…AJAX enables communication…

•• AJAX (Asynchronous JavaScript & XML)AJAX (Asynchronous JavaScript & XML)Refresh elements of Web page instead of fullRefresh elements of Web page instead of full pagepage–– Refresh elements of Web page instead of full Refresh elements of Web page instead of full pagepage

–– XML rarely usedXML rarely used

•• XMLHttpRequestXMLHttpRequest object in most recent browsersobject in most recent browsersp qp q jj–– Enables sending requests without Enables sending requests without post backpost back–– Implementation details differ by browserImplementation details differ by browser–– Not integrated into serverNot integrated into server--side codeside code

•• Many Many implementations implementations availableavailablePrototypePrototype–– PrototypePrototype

–– DOJODOJO–– Microsoft’s ASP.NET Microsoft’s ASP.NET AJAX 1.0AJAX 1.0–– ASP.NET 2.0ASP.NET 2.0: : ICallBackEventHandlerICallBackEventHandler


ASP.NET 2.0 Callback FrameworkASP.NET 2.0 Callback Framework

•• ASP.NET Callback ManagerASP.NET Callback Manager–– Control handling the callback implements Control handling the callback implements

ICallbackEventHandlerICallbackEventHandler–– Client script components generate JavaScript used by the Client script components generate JavaScript used by the

browser for AJAX communication browser for AJAX communication


ASP.NET 2.0 ASP.NET 2.0 -- Working Working with callbacks: with callbacks: Step 1Step 1 -- ImplementationImplementationStep 1 Step 1 -- ImplementationImplementation

•• Implement the System.Web.UI.ICallbackEventHandlerImplement the System.Web.UI.ICallbackEventHandler–– RaiseCallbackEvent(eventArgs)RaiseCallbackEvent(eventArgs)

•• Process custom string returned from browserProcess custom string returned from browser–– GetCallbackResult()GetCallbackResult()

•• Construct custom string response sent to browser Construct custom string response sent to browser


ASP.NET 2.0 ASP.NET 2.0 -- Working Working with callbacks: with callbacks: Step 2Step 2 -- ControlControl client scriptsclient scriptsStep 2 Step 2 -- Control Control client scriptsclient scripts

•• Call Call GetCallbackEventReferenceGetCallbackEventReference–– Downloads WebForms.js to browser (embedded in System.Web.dll)Downloads WebForms.js to browser (embedded in System.Web.dll)–– Constructs call to JavaScript function WebForm_DoCallback Constructs call to JavaScript function WebForm_DoCallback

ArgumentArgument DescriptionDescription

t lt l C t l i l ti IC llb kE tH dlC t l i l ti IC llb kE tH dl

GetCallbackEventReference argumentsGetCallbackEventReference arguments

controlcontrol Control implementing ICallbackEventHandlerControl implementing ICallbackEventHandler

argumentargument JS variable with string to send to serverJS variable with string to send to server

clientCallbackclientCallback JS function to receive responseJS function to receive response

contextcontext JS variable with context of the callbackJS variable with context of the callbackcontextcontext JS variable with context of the callbackJS variable with context of the callback

clientErrorCallbackclientErrorCallback JS function for error responseJS function for error response

useAsyncuseAsync Synchronous or asynchronous callSynchronous or asynchronous callDeveloper Summit 2007Developer Summit 2007 1010

ASP.NET 2.0 ASP.NET 2.0 -- Working Working with callbacks: with callbacks: Step 3Step 3 -- HTML/JavaScriptHTML/JavaScriptStep 3 Step 3 -- HTML/JavaScriptHTML/JavaScript

•• Add clientAdd client--side components and JavaScript side components and JavaScript

Callback RequestCallback RequestWebForm_DoCallback('__Page', message, processMyResult, context, postMyError, true)

Callback RequestCallback Request

Callback ResponseCallback Responsepp


Map Actions and the Toolbar control Map Actions and the Toolbar control

•• Web ADF Toolbar provides a framework to work with Map Web ADF Toolbar provides a framework to work with Map control using callbacks and Web ADF JavaScriptcontrol using callbacks and Web ADF JavaScript

•• OutOut--ofof--thethe--box map actions include:box map actions include:–– Zoom InZoom In–– Zoom OutZoom Out–– PanPan–– Full Extent Full Extent

•• Tool properties available inTool properties available in•• Tool properties available inTool properties available inVisual Studio designVisual Studio design--timetimedialog dialog


Custom tools: handle callbacks easilyCustom tools: handle callbacks easily

•• Using Web ADF Toolbar controlUsing Web ADF Toolbar control•• Callback mechanism handled behind the scenesCallback mechanism handled behind the scenes•• Callback mechanism handled behind the scenesCallback mechanism handled behind the scenes•• Only works for actions on MapOnly works for actions on Map•• Can be tool command or dropCan be tool command or drop downdown•• Can be tool, command or dropCan be tool, command or drop--downdown

Toolbar with custom toolsToolbar with custom toolsToolbar Designer inToolbar Designer ingg

Visual StudioVisual Studio


Creating a custom toolCreating a custom tool

•• To create a tool/command:To create a tool/command:11 Write serverWrite server--side code to handle map actionside code to handle map action1.1. Write serverWrite server--side code to handle map actionside code to handle map action2.2. Add a new tool to toolbarAdd a new tool to toolbar3.3. Set tool’s server action to the serverSet tool’s server action to the server--side codeside code4.4. For tool, choose client action (point, rectangle, etc.)For tool, choose client action (point, rectangle, etc.)5.5. Set tool imagesSet tool images


Custom tool:Custom tool:11 Server code for map actionServer code for map action1.1. Server code for map actionServer code for map action

•• Create public class that implements action interfaceCreate public class that implements action interface–– IMapServerToolAction for toolIMapServerToolAction for toolpp–– Implement required ServerAction methodImplement required ServerAction method

•• ToolEventArgs has user geometry (point, circle, etc.)ToolEventArgs has user geometry (point, circle, etc.)P f ti thP f ti th•• Perform action on the mapPerform action on the map

•• Web ADF handles callbacks to apply map changesWeb ADF handles callbacks to apply map changes

No callbackNo callbackhandling handling

code!code!


Custom tool:Custom tool:1.1. Server code for map action (continued)Server code for map action (continued)1.1. Server code for map action (continued)Server code for map action (continued)

•• Implement appropriate interface for toolbar itemImplement appropriate interface for toolbar item

Toolbar itemToolbar item Implement interfaceImplement interface Event argumentEvent argument

ToolEventArgs ToolEventArgs cast for client action:cast for client action:

ToolTool IMapServerToolActionIMapServerToolAction

–– cast for client action:cast for client action:•• PointEventArgsPointEventArgs•• RectangleEventArgs RectangleEventArgs •• VectorEventArgsVectorEventArgs•• VectorEventArgsVectorEventArgs•• CircleEventArgsCircleEventArgs•• ……

CommandCommand IMapServerCommandActionIMapServerCommandAction ToolbarItemInfoToolbarItemInfo

DropDownBoxDropDownBox IMapServerDropDownBoxActionIMapServerDropDownBoxAction ToolbarItemInfoToolbarItemInfo


Custom tool:Custom tool:Add tool to Toolbar and set propertiesAdd tool to Toolbar and set propertiesAdd tool to Toolbar and set propertiesAdd tool to Toolbar and set properties

2.2. Add new tool to toolbarAdd new tool to toolbar3.3. Set tool’s server action to theSet tool’s server action to the 223.3. Set tool s server action to the Set tool s server action to the

serverserver--side codeside code4.4. For tool, choose client action For tool, choose client action

(point rectangle etc )(point rectangle etc )

22

(point, rectangle, etc.)(point, rectangle, etc.)5.5. Set tool imagesSet tool images

55

44

33


Custom tool callback Custom tool callback workflowworkflow

•• Initial user action and callbackInitial user action and callback

Default.aspx Web ADFJ S i t

Callback ManagerW b R

Client-side

JavaScript Web ResourceJavaScript

display_dotnetadf.js

<script>postBack

<script>WebForm_DoCallback

Map controlR i C llb kE t

Server-side2

processCallbackResult

display map js

RaiseCallbackEvent

GetCallbackResult

handlePostBack1

2

35

display_map.js<script>

MapMouseDown

shiftGrid Custom toolServerAction

6

44

XMLHttpRequestXMLHttpRequestServerAction


Custom tool callback Custom tool callback workflowworkflow

•• Subsequent callbacks to process actionSubsequent callbacks to process actionClient-side

Default.aspx Web ADFJavaScript

Callback ManagerWeb Resource

JavaScriptdisplay dotnetadf.js Server-sidep y_ j

<script>postBack

processCallbackResult

<script>WebForm_DoCallback

Map controlRaiseCallbackEvent

GetCallbackResult

display_map.js<script>

MapMouseDown

handlePostBack

12

XMLHttpRequestXMLHttpRequest

shiftGrid Custom toolServerAction

13


Toolbar considerationsToolbar considerations

•• Page can have multiple toolbarsPage can have multiple toolbarsBuddy each toolbar to a MapBuddy each toolbar to a Map–– Buddy each toolbar to a MapBuddy each toolbar to a Map

–– If buddy to same Map, set ToolbarGroup property to same valueIf buddy to same Map, set ToolbarGroup property to same value•• Tools will then activate/deactivate across toolbarsTools will then activate/deactivate across toolbars

•• Custom tasks may have toolbarsCustom tasks may have toolbars–– Add in code to create task (CreateChildControls)Add in code to create task (CreateChildControls)

Add l t h dl t lb tiAdd l t h dl t lb ti–– Add class to handle toolbar actionAdd class to handle toolbar action

•• Tools can be directly managed from MapTools can be directly managed from Map–– Map has CurrentToolItem propertyMap has CurrentToolItem propertyMap has CurrentToolItem propertyMap has CurrentToolItem property–– Would need to manage tool properties with custom codeWould need to manage tool properties with custom code


Callbacks and the Web ADF ControlsCallbacks and the Web ADF Controls

•• What about callbacks if outside the toolbar?What about callbacks if outside the toolbar?Examples:Examples:–– Examples:Examples:•• Label that displays map scale as user zooms mapLabel that displays map scale as user zooms map•• Text boxes to enter coordinates to zoom map toText boxes to enter coordinates to zoom map to

•• One model is…One model is…S fS f–– Utilize the ASP.NET 2.0 callback framework in a page, custom Utilize the ASP.NET 2.0 callback framework in a page, custom

control or custom task and role your owncontrol or custom task and role your own


Web Controls and Tasks Web Controls and Tasks –– AJAX EnabledAJAX Enabled

•• Use callback handling built into Web ADF controlsUse callback handling built into Web ADF controlsMakes dealing with callbacks simplerMakes dealing with callbacks simpler–– Makes dealing with callbacks simplerMakes dealing with callbacks simpler

–– Web ADF controls implement Web ADF controls implement ICallbackEventHandlerICallbackEventHandler•• Inherited from base classesInherited from base classes

–– ESRI.ArcGIS.ADF.Web.UI.WebControlESRI.ArcGIS.ADF.Web.UI.WebControl–– ESRI.ArcGIS.ADF.Web.UI.CompositeControlESRI.ArcGIS.ADF.Web.UI.CompositeControl

•• CallbackResults property that stores callback resultsCallbackResults property that stores callback results•• Utilize Web ADF JavaScript to process callback responseUtilize Web ADF JavaScript to process callback response


Web ADF JavaScript LibrariesWeb ADF JavaScript Libraries

•• Provide a rich clientProvide a rich client--side environment for interacting with side environment for interacting with Web ADF controls.Web ADF controls.–– Prepackaged asPrepackaged as WebResourcesWebResources for Web ADF controls.for Web ADF controls.–– Source files installed on diskSource files installed on disk

•• processCallbackResultprocessCallbackResult functionfunction•• processCallbackResultprocessCallbackResult functionfunction–– From a callback perspective, is most important.From a callback perspective, is most important.–– in display_dotnetadf.jsin display_dotnetadf.js

F ti i d i d t d llb k fF ti i d i d t d llb k f–– Function is designed to parse and process callback messages from Function is designed to parse and process callback messages from Web ADF controls and update their content, at runtime, on the Web ADF controls and update their content, at runtime, on the client.client.

C t h llb k l ti b d l dC t h llb k l ti b d l d•• Custom asynchronous callback solutions can be developed Custom asynchronous callback solutions can be developed –– For Example: initiate changes in map display and update other nonFor Example: initiate changes in map display and update other non--

Web ADF components on a pageWeb ADF components on a page


Web ADF Control CallbacksWeb ADF Control Callbacks

•• Web ADF controls are designed to handle callback Web ADF controls are designed to handle callback requests and generate callback responsesrequests and generate callback responsesrequests and generate callback responses.requests and generate callback responses.

•• EachEach Web ADF control has aWeb ADF control has a CallbackResults propertyCallbackResults propertyEachEach Web ADF control has aWeb ADF control has a CallbackResults property.CallbackResults property.–– Stores the callback messages the control will send to the client Stores the callback messages the control will send to the client

((processCallbackResultprocessCallbackResult function).function).–– Custom solutions can use the Custom solutions can use the GetCallbackresultGetCallbackresult methodmethod

•• For ExampleFor Example: Updating a Web ADF control on the client, you will : Updating a Web ADF control on the client, you will need to retrieve theneed to retrieve the callback response message from the callback response message from the CallbackResults property and return it to the client (e.g. using the CallbackResults property and return it to the client (e.g. using the GetCallbackResultGetCallbackResult method).method).


Callback ClassesCallback Classes

•• CallbackResultCollectionCallbackResultCollectionThis collection can be modified to include customThis collection can be modified to include custom–– This collection can be modified to include custom This collection can be modified to include custom CallbackResultCallbackResult objectsobjects

•• CallbackResultCallbackResult–– Custom Custom CallbackResultCallbackResult objects can be used to interact withobjects can be used to interact with nonnon--

Web ADFWeb ADF content in the Web page (e.g. HTML table, content in the Web page (e.g. HTML table, GridViewGridView, , images, text).images, text).images, text).images, text).

–– Value Add: you can use the existing Web ADF JavaScript Value Add: you can use the existing Web ADF JavaScript lib i t th llb k th li t i t dlib i t th llb k th li t i t dlibraries to process the callback response on the client instead libraries to process the callback response on the client instead of writing your ownof writing your own JavaScriptJavaScript


Working with Custom Callback EventsWorking with Custom Callback Events

•• To work with To work with custom elements custom elements in the browser, in the browser, create a custom create a custom CallbackResultCallbackResult objectobject

•• Example: display simple alert upon map callbackExample: display simple alert upon map callback

eventArgeventArg DescriptionDescriptionOptions for Options for eventArgeventArg

e e t ge e t g esc pt oesc pt o

“content”“content” Sets outerHTML of elementSets outerHTML of element

“innercontent”“innercontent” Sets innerHTML of elementSets innerHTML of element

“image”“image” Sets src of imageSets src of image

“javascript”“javascript” Executes JavaScript (function)Executes JavaScript (function)Developer Summit 2007Developer Summit 2007 2626

Putting it all togetherPutting it all together

•• MashMash--ups and the Web ADFups and the Web ADF

2727

Best Practices in building Web ApplicationsBest Practices in building Web Applications

•• Keep it simpleKeep it simpleThe best web application is the one that people useThe best web application is the one that people use–– The best web application is the one that people useThe best web application is the one that people use

•• AJAX AJAX –– Myth or Mystery or ???Myth or Mystery or ???–– by itself, will not solve all problemsby itself, will not solve all problemsy , py , p–– Apply OO development principals to web developmentApply OO development principals to web development–– Using XML is nice, but is slowUsing XML is nice, but is slow

U t i JSONU t i JSON•• Use strings or JSONUse strings or JSON–– AJAX is chattyAJAX is chatty

•• Look for caching opportunitiesLook for caching opportunities•• Batch requestsBatch requests


Best Practices in building Web ApplicationsBest Practices in building Web Applications

•• Understand the NetworkUnderstand the NetworkBe aware that the network is unreliable at bestBe aware that the network is unreliable at best–– Be aware that the network is unreliable at bestBe aware that the network is unreliable at best•• Failures and users leaving the page before operation completesFailures and users leaving the page before operation completes

–– At most, browser uses 2 simultaneous connections per domainAt most, browser uses 2 simultaneous connections per domain•• Leverage services with subLeverage services with sub--domainsdomains

•• Must design for proper feedbackMust design for proper feedbackPrioritize and control orderPrioritize and control order–– Prioritize and control orderPrioritize and control order

–– More interactivity == more code == slower siteMore interactivity == more code == slower site

•• Scripts tag stops the worldScripts tag stops the worldp g pp g p–– Send scripts dynamicallySend scripts dynamically


Best Practices in Web Application DesignBest Practices in Web Application Design

•• Always provide immediate feedback that shows Always provide immediate feedback that shows something is workingsomething is workingsomething is workingsomething is working

•• Preserve user statePreserve user state–– Try to come back to where the user left offTry to come back to where the user left offyy

•• ControlsControls–– Build UI components for reBuild UI components for re--use by othersuse by others

•• Divide & ConquerDivide & Conquer–– Separate presentation and implementationSeparate presentation and implementation

•• Use ServicesUse Services–– Web Services allow the sharing of business logic in a generic Web Services allow the sharing of business logic in a generic

waywayyy


Presentation materialsPresentation materials

•• PowerPoint presentation and code are posted on the PowerPoint presentation and code are posted on the conference web siteconference web siteconference web siteconference web site–– http://www.esri.com/events/devsummit/index.htmlhttp://www.esri.com/events/devsummit/index.html

•• EDN EDN –– downloads and videosdownloads and videos


Microsoft KeynoteMicrosoft KeynoteWednesday 6:00pmWednesday 6:00pm

Eddie AmosEddie Amos

Oasis 2Oasis 2

Eddie AmosEddie AmosSenior Director, Developer & Platform EvangelismSenior Director, Developer & Platform Evangelism


Further questions?Further questions?

•• TECHTECH--TALK AREASTALK AREASWhat:What: Further opportunity to discuss questions and concernsFurther opportunity to discuss questions and concerns–– What:What: Further opportunity to discuss questions and concerns Further opportunity to discuss questions and concerns with presenters and subject matter expertswith presenters and subject matter experts

–– Where:Where:–– When:When: during the next 30 minutesduring the next 30 minutes

•• ESRI ShowcaseESRI ShowcaseM t th tM t th t•• Meet the teamsMeet the teams

ESRI Developers Network (EDN) websiteESRI Developers Network (EDN) website•• ESRI Developers Network (EDN) websiteESRI Developers Network (EDN) website–– http://edn.esri.comhttp://edn.esri.com


Thank youThank you


building ajax-based web applications with arcgis server and...• ajax (asynchronous javascript...

Documents