building ajax-based web applications with arcgis server ... · terminology • phase listener – a...

Building AjaxBuilding Ajax--Based Web Applications with Based Web Applications with ArcGIS Server and Java (Deep Dive)ArcGIS Server and Java (Deep Dive)

Antony JayaprakashAntony JayaprakashAntony JayaprakashAntony JayaprakashJayant SaiJayant Sai

Developer Summit 2007Developer Summit 2007 11

Presentation outlinePresentation outline

•• Ajax integration in the Java Web ADFAjax integration in the Java Web ADF–– Web ADF controlsWeb ADF controls–– Javascript libraryJavascript library–– Serverside objectsServerside objects

•• Common use casesCommon use cases–– Listen to control updatesListen to control updates–– Update controls on clientUpdate controls on client–– Updating custom componentsUpdating custom componentsUpdating custom componentsUpdating custom components–– Timer based requestsTimer based requests

•• Customizing applicationsCustomizing applications–– Demo: Trip PlannerDemo: Trip PlannerDemo: Trip PlannerDemo: Trip Planner–– Additional customizationsAdditional customizations

•• Tips & TricksTips & TricksQ&AQ&A


•• Q&AQ&A

Our assumptionsOur assumptions

•• PrerequisitesPrerequisitesJavaJava–– JavaJava

–– Working knowledge ofWorking knowledge of•• JSFJSF•• JavascriptJavascript•• XMLXML•• AjaxAjaxjj


TerminologyTerminology

•• Phase ListenerPhase ListenerA class registered in the JSF lifecycle to be notified at theA class registered in the JSF lifecycle to be notified at the–– A class registered in the JSF lifecycle to be notified at the A class registered in the JSF lifecycle to be notified at the beginning and ending of a specific JSF phasebeginning and ending of a specific JSF phase

•• JSF Components & Web ADF ControlsJSF Components & Web ADF Controls–– They are same, controls & components used interchangeablyThey are same, controls & components used interchangeably

•• PostbackPostback–– Action by webpage, to submit page to server for processingAction by webpage, to submit page to server for processing

•• Clientside PostBackClientside PostBackMaking clientside script calls (using XMLHttpRequest) toMaking clientside script calls (using XMLHttpRequest) to–– Making clientside script calls (using XMLHttpRequest) to Making clientside script calls (using XMLHttpRequest) to serverside code without causing a postbackserverside code without causing a postback


Web ADF controlsWeb ADF controls

•• All Web ADF controls are Ajax enabledAll Web ADF controls are Ajax enabled<%@taglib uri="http://www esri com/adf/web" prefix="a"%><%@taglib uri="http://www esri com/adf/web" prefix="a"%><%@taglib uri="http://www.esri.com/adf/web" prefix="a"%><%@taglib uri="http://www.esri.com/adf/web" prefix="a"%>

<a:map … /><a:map … />

<a:toc …/><a:toc …/>

<a:overview /><a:overview /><a:overview … /><a:overview … />

<a:toolbar …><a:toolbar …>

<a:tool … /><a:tool … />

</a:toolbar></a:toolbar></a:toolbar></a:toolbar>

<a:task …/><a:task …/>


Javascript libraryJavascript library

•• Extensive clientside Javascript libraryExtensive clientside Javascript libraryHandles user interaction & communication with serverHandles user interaction & communication with server–– Handles user interaction & communication with serverHandles user interaction & communication with server

–– Framework for AjaxFramework for Ajax–– Browser independent functionsBrowser independent functions–– Object oriented and name spaced with 1 Global (EsriControls)Object oriented and name spaced with 1 Global (EsriControls)–– Does not conflict with 3Does not conflict with 3rdrd party Ajax toolkits (prototype, dojo, party Ajax toolkits (prototype, dojo,

DWR MS Ajax etc)DWR MS Ajax etc)DWR, MS Ajax, etc)DWR, MS Ajax, etc)


Serverside objectsServerside objects

•• Java object to support AjaxJava object to support AjaxJSF Phase ListenersJSF Phase Listeners–– JSF Phase ListenersJSF Phase Listeners

–– XML Ajax RenderersXML Ajax Renderers•• MapRendererMapRenderer•• TocRendererTocRenderer•• ToolbarRendererToolbarRenderer•• OverviewRendererOverviewRenderer•• TaskRendererTaskRenderer

–– AJAXResponseRenderer classAJAXResponseRenderer class

C t d h kC t d h k ii•• Custom renderer hookCustom renderer hook--insins–– AJAXRenderer interfaceAJAXRenderer interface–– WEBWEB--INF/ajaxINF/ajax--renderers.xmlrenderers.xml


WEBWEB INF/ajaxINF/ajax renderers.xmlrenderers.xml

Common use casesCommon use cases

•• #1: #1: Listen to control updatesListen to control updates to perform custom to perform custom operationsoperationsoperationsoperations

•• #2: #2: Update controls on clientUpdate controls on client based on server operationbased on server operation•• #3:#3: Update custom componentsUpdate custom components by integrating intoby integrating into#3: #3: Update custom componentsUpdate custom components by integrating into by integrating into

requestrequest-- response cycleresponse cycle•• #4: #4: Timer based requestsTimer based requests to display data on clientto display data on clientqq p yp y


#1: Listen to control updates#1: Listen to control updates

•• When to Use?When to Use?Perform asynchronous updatesPerform asynchronous updates

ClientClient ServerServerRequestRequest

ResponseResponse–– Perform asynchronous updates Perform asynchronous updates based on updates to controlsbased on updates to controls

–– RequestRequest--response should not response should not i t f ith i t tii t f ith i t ti

ClientClient ResponseResponse

RequestRequest

UpdateUpdate

interfere with user interactioninterfere with user interaction

•• Usage in Web ADF?Usage in Web ADF?–– Retrieving images for continuous panRetrieving images for continuous pan

ClientClient ServerServer

ClientClient

RequestRequest

ResponseResponse

–– Retrieving images for continuous panRetrieving images for continuous pan

•• DemoDemo–– On map updateOn map updatep pp p–– Request census dataRequest census data–– Display maleDisplay male--toto--female ratio for female ratio for

states within visible extentstates within visible extent


states within visible extentstates within visible extent

#1: Application flow#1: Application flowLegendLegend

Client operationClient operation Server operationServer operation

EsriMap.addUpdateListener()EsriMap.addUpdateListener()

map updatedmap updated

Register for updatesRegister for updates

EsriUtils.sendAjaxRequest()EsriUtils.sendAjaxRequest()

requestrequest

On update, request dataOn update, request data

PhaseListenerPhaseListener

XMLUtil newDocument()XMLUtil newDocument()Create responseCreate response

Process requestProcess request

XMLUtil.newDocument()XMLUtil.newDocument()Create responseCreate response

AJAXUtil.writeResponse()AJAXUtil.writeResponse()Render responseRender response

myElement.value = valueFromXmlmyElement.value = valueFromXml

responseresponse

Update HTML elementsUpdate HTML elements

p ()p ()pp


#1: Demo details#1: Demo details

•• Javascript Javascript (mapviewer.js)(mapviewer.js)

Register for map updatesRegister for map updates–– Register for map updatesRegister for map updates–– Send request for data Send request for data (updatePopRatioRequest())(updatePopRatioRequest())

•• Implement PhaseListener Implement PhaseListener (PopulationRatioPhaseListener)(PopulationRatioPhaseListener)pp–– Process request Process request (afterPhase())(afterPhase())

–– Get extentGet extent&&–– Render & return XML responseRender & return XML response

•• Register PhaseListener Register PhaseListener (fc(fc--ajaxdemo.xml)ajaxdemo.xml)

Add ‘<lifecycle>’ declarationAdd ‘<lifecycle>’ declaration–– Add <lifecycle> declarationAdd <lifecycle> declaration


–– Process response to update HTML Process response to update HTML (updatePopRatioResponse())(updatePopRatioResponse())


p pp p ( p p p ())( p p p ())

#2: Update controls on client#2: Update controls on client

•• When to Use?When to Use?Update controls based on changes to GIS business objectsUpdate controls based on changes to GIS business objects–– Update controls based on changes to GIS business objectsUpdate controls based on changes to GIS business objects

•• Usage in Web ADF?Usage in Web ADF?–– Update on zoom level changeUpdate on zoom level changep gp g

•• DemoDemo–– User zoom in/out of map using drop User zoom in/out of map using drop

downdown–– Update map’s extent based on zoom Update map’s extent based on zoom

factorfactor–– Use Web ADF Ajax classes to update Use Web ADF Ajax classes to update

controls on clientcontrols on client





requestrequest

Send request with Send request with update parametersupdate parameters


requestrequest


new AJAXResponseRenderer()new AJAXResponseRenderer()Create rendererCreate renderer

webContext.refresh()webContext.refresh()Update controlsUpdate controls

AJAXResponseRenderer renderResponse()AJAXResponseRenderer renderResponse()Get Ajax responseGet Ajax response

EsriControls.processPostBackEsriControls.processPostBack

responseresponse

Update controlsUpdate controls

AJAXResponseRenderer.renderResponse()AJAXResponseRenderer.renderResponse()Get Ajax responseGet Ajax response


EsriControls.processPostBackEsriControls.processPostBackUpdate controlsUpdate controls



Send ajax request with zoom factorSend ajax request with zoom factor (sendMapZoomRequest())(sendMapZoomRequest())–– Send ajax request with zoom factor Send ajax request with zoom factor (sendMapZoomRequest())(sendMapZoomRequest())

–– Set callback function Set callback function (EsriControls.processPostBack)(EsriControls.processPostBack)

•• Implement PhaseListener Implement PhaseListener (MapZoomPhaseListener)(MapZoomPhaseListener)pp–– Process request Process request (afterPhase())(afterPhase())

–– Create AJAXResponseRendererCreate AJAXResponseRenderer&&–– Update map & contextUpdate map & context

–– Render & return XML responseRender & return XML response


#3: Updating custom components#3: Updating custom components

•• When to Use?When to Use?Update custom componentsUpdate custom components

ClientClientRequestRequest

ServerServer–– Update custom componentsUpdate custom components–– Done as part of requestDone as part of request--response response

cyclecycleClientClient ResponseResponse

Custom Custom updateupdate

•• Usage in Web ADF?Usage in Web ADF?–– All web control updatesAll web control updates

Web mapping application resultWeb mapping application result–– Web mapping application result Web mapping application result detailsdetails

•• DemoDemo–– Render XML with attributes of Render XML with attributes of

features in visible extentfeatures in visible extentUpdate table to display attributes dataUpdate table to display attributes data


–– Update table to display attributes dataUpdate table to display attributes data



EsriUtils.sendAjaxRequest()EsriUtils.sendAjaxRequest()User requestUser request

AJAXRenderer createdAJAXRenderer created

AJAXR d tC t lCl ()AJAXR d tC t lCl ()C t l t d tC t l t d t

AJAXRendererAJAXRenderer

AJAXRenderer.getOriginalState()AJAXRenderer.getOriginalState()State before updateState before update

AJAXRenderer.getControlClass()AJAXRenderer.getControlClass()Control to updateControl to update

AJAXRenderer.renderAjaxResponse()AJAXRenderer.renderAjaxResponse()Render XMLRender XML

EsriControls.processPostBackEsriControls.processPostBackGet Ajax responseGet Ajax responsecallscalls


myHandler(xml)myHandler(xml)Update HTML elementUpdate HTML element


•• Implement AJAXRenderer Implement AJAXRenderer (LayerAttributesRenderer)(LayerAttributesRenderer)

Check if updates requiredCheck if updates required–– Check if updates requiredCheck if updates required–– Render XML tag with dataRender XML tag with data

•• Register AJAXRendererRegister AJAXRenderergg–– Add to list of AJAXRenderers Add to list of AJAXRenderers (WEB(WEB--INF/ajaxINF/ajax--renderers.xml)renderers.xml)

•• JavascriptJavascript–– Function to parse XML and update HTML elements Function to parse XML and update HTML elements

(layerAttributesHandler())(layerAttributesHandler())

•• Register XML tag handlerRegister XML tag handlerg gg g–– Add function to list of xml tag handlers to EsriControls Add function to list of xml tag handlers to EsriControls

Javascript global object Javascript global object (EsriControls.addPostBackTagHandler)(EsriControls.addPostBackTagHandler)


#4: Timer based updates#4: Timer based updates

•• When to Use?When to Use?Execute operation periodicallyExecute operation periodically–– Execute operation periodicallyExecute operation periodically

–– Display temporal dataDisplay temporal data

•• Usage in Web ADF?Usage in Web ADF?

•• DemoDemo

gg–– Checking GP task results statusChecking GP task results status

–– Periodic request to get and display Periodic request to get and display location of fleetlocation of fleet

–– Start/Stop timerStart/Stop timerStart/Stop timerStart/Stop timer





requestrequest

Request dataRequest data


requestrequest


XMLUtil.newDocument()XMLUtil.newDocument()Create responseCreate response

map graphics drawRectangle()map graphics drawRectangle()

responseresponse

UpdateUpdate

AJAXUtil.writeResponse()AJAXUtil.writeResponse()Render responseRender response

map.graphics.drawRectangle()map.graphics.drawRectangle()UpdateUpdate




Send request for dataSend request for data (trackingRequest())(trackingRequest())–– Send request for data Send request for data (trackingRequest())(trackingRequest())

•• Implement PhaseListener Implement PhaseListener (TrackingPhaseListener)(TrackingPhaseListener)

–– Process request Process request (afterPhase())(afterPhase())qq ( ())( ())

–– Get data to returnGet data to return–– Render & return XML responseRender & return XML response

•• Register PhaseListener Register PhaseListener (fc(fc--ajaxdemo.xml)ajaxdemo.xml)

–– Add ‘<lifecycle>’ declarationAdd ‘<lifecycle>’ declaration

•• JavascriptJavascript•• Javascript Javascript (mapviewer.js)(mapviewer.js)

–– Process response to update HTML Process response to update HTML (trackingResponse())(trackingResponse())


Customizing applicationsCustomizing applications

•• Web ADFWeb ADFBase applicationBase application–– Base applicationBase application

–– GIS functionalityGIS functionality

•• 3rd party Ajax toolkits3rd party Ajax toolkitsp y jp y j–– Clientside behavior & widgetsClientside behavior & widgets–– External data sourcesExternal data sources


Demo: Trip PlannerDemo: Trip Planner

•• Web mapping applicationWeb mapping applicationCustom left panelCustom left panel–– Custom left panelCustom left panel

–– Bottom directions panelBottom directions panel

•• Custom tool itemsCustom tool items–– Send Ajax requestSend Ajax request–– Toggle window visibilityToggle window visibility

•• Custom windowCustom window–– To geocode addressTo geocode address


Demo: Trip Planner (contd.)Demo: Trip Planner (contd.)

•• 33rdrd party toolkitsparty toolkitsPrototypePrototype–– PrototypePrototype•• DOM manipulationDOM manipulation

–– ScriptaculousScriptaculous•• Drag n’ dropDrag n’ drop•• Sorted listsSorted lists

–– OverlibOverlib•• PopPop--upsups


Tips & TricksTips & Tricks

•• Start small and then build up applicationStart small and then build up applicationajaxdemo (mapviewer html)ajaxdemo (mapviewer html)–– ajaxdemo (mapviewer.html)ajaxdemo (mapviewer.html)

–– tripPlanner (tripPlanner0.html, mapviewer_orig.jsp)tripPlanner (tripPlanner0.html, mapviewer_orig.jsp)

•• Browser toolsBrowser tools–– Firefox extensionsFirefox extensions

•• Firebug : Javascript debugging, Monitor XMLHttpFirebug : Javascript debugging, Monitor XMLHttpWeb Developer : Page info DOM infoWeb Developer : Page info DOM info•• Web Developer : Page info, DOM infoWeb Developer : Page info, DOM info

–– IE debuggingIE debugging•• Menu Menu --> Tools > Tools --> Internet Options... > Internet Options... --> Advanced : > Advanced : •• Uncheck ‘Disable Script Debugging (Internet Explorer)Uncheck ‘Disable Script Debugging (Internet Explorer)•• Uncheck ‘Disable Script Debugging (Other)’Uncheck ‘Disable Script Debugging (Other)’•• Check ‘Display a notification about every script error’Check ‘Display a notification about every script error’


p y y pp y y p

Tips & Tricks (contd.)Tips & Tricks (contd.)

•• Issues with Clientside PostBack (edit jsp file)Issues with Clientside PostBack (edit jsp file)

<script type="text/javascript" language="Javascript">EsriUtils.doPostBack = false;

</script>

•• Built in PhaseListeners and their request parametersBuilt in PhaseListeners and their request parameters–– PostBackPhaseListener (doPostBack)PostBackPhaseListener (doPostBack)PostBackPhaseListener (doPostBack)PostBackPhaseListener (doPostBack)–– WebGraphicsPhaseListener (getWebGraphics)WebGraphicsPhaseListener (getWebGraphics)–– ContinuousPanPhaseListener (doContinuousPan)ContinuousPanPhaseListener (doContinuousPan)–– AGSPhaseListener (agsAjax)AGSPhaseListener (agsAjax)–– GPAsyncTaskResultsPhaseListener (gpAsyncTaskResults)GPAsyncTaskResultsPhaseListener (gpAsyncTaskResults)



•• Render all responses within ‘<response>’ tagRender all responses within ‘<response>’ tag•• Tags rendered by builtTags rendered by built in AJAXRenderersin AJAXRenderers•• Tags rendered by builtTags rendered by built--in AJAXRenderersin AJAXRenderers

–– MapRenderer (<map>)MapRenderer (<map>)–– TocRenderer (<toc>)TocRenderer (<toc>)( )( )–– ToolbarRenderer (<toolbar>)ToolbarRenderer (<toolbar>)–– OverviewRenderer (<overview>)OverviewRenderer (<overview>)

( )( )–– TaskRenderer (<task>)TaskRenderer (<task>)–– GPAsyncTaskResultsRenderer (<gpGPAsyncTaskResultsRenderer (<gp--tasktask--resultsresults--async>)async>)

•• To see XML output (edit web xml)To see XML output (edit web xml)To see XML output (edit web.xml)To see XML output (edit web.xml)<context-param><param-name>com.esri.adf.LOG_LEVEL</param-name><param-value>CONFIG</param-value>


<param value>CONFIG</param value></context-param>


•• Map Tools Task (facesMap Tools Task (faces--config.xml)config.xml)Pan tool to continuous panPan tool to continuous pan–– Pan tool to continuous panPan tool to continuous pan

–– Identify tool to only identify states layerIdentify tool to only identify states layer

•• TOC visibility (contextTOC visibility (context--attributes.xml)attributes.xml)y (y ( ))–– TOC expanded to display all levelsTOC expanded to display all levels

•• Optimize and remove unused objectsOptimize and remove unused objects–– Managed beans & phase listeners (facesManaged beans & phase listeners (faces--config.xml)config.xml)–– ajaxGpAsyncTaskResultsRenderer (ajaxajaxGpAsyncTaskResultsRenderer (ajax--renderers.xml)renderers.xml)

EsriTask GPAsyncTaskResultsTimer javascript include & timerEsriTask GPAsyncTaskResultsTimer javascript include & timer–– EsriTask_GPAsyncTaskResultsTimer javascript include & timer EsriTask_GPAsyncTaskResultsTimer javascript include & timer initialization (toc.xsl)initialization (toc.xsl)

–– Removed functionality files (web.xml)Removed functionality files (web.xml)


Additional customizationsAdditional customizations

•• TOC renderingTOC renderingRender custom TOC using EsriToc nodesRender custom TOC using EsriToc nodes–– Render custom TOC using EsriToc.nodesRender custom TOC using EsriToc.nodes

•• Result details renderingResult details rendering–– Custom details formattingCustom details formattinggg

•• TOC context menu itemTOC context menu item–– Functionality to display layer attributesFunctionality to display layer attributes


Q&AQ&A

•• Our questionsOur questionsWhat do you want to do using Ajax?What do you want to do using Ajax?–– What do you want to do using Ajax?What do you want to do using Ajax?

–– What do you want us to give you in terms of Ajax & Web ADF?What do you want us to give you in terms of Ajax & Web ADF?

•• Your questionsYour questionsqq


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•• Java WebADF DocsJava WebADF Docs

–– http://edn.esri.com/index.cfm?fa=java.gatewayhttp://edn.esri.com/index.cfm?fa=java.gateway–– http://edndoc.esri.com/arcobjects/9.2/Java/java/server/web_adf/ahttp://edndoc.esri.com/arcobjects/9.2/Java/java/server/web_adf/a

jax/ajax_integration.htmljax/ajax_integration.html–– http://edndoc.esri.com/arcobjects/9.2/Java/java/server/web adf/jhttp://edndoc.esri.com/arcobjects/9.2/Java/java/server/web adf/jhttp://edndoc.esri.com/arcobjects/9.2/Java/java/server/web_adf/jhttp://edndoc.esri.com/arcobjects/9.2/Java/java/server/web_adf/j

avascript/clientside_js.htmlavascript/clientside_js.html–– http://edndoc.esri.com/arcobjects/9.2/Java/server_samples/maphttp://edndoc.esri.com/arcobjects/9.2/Java/server_samples/map--

information/example htmlinformation/example html


information/example.htmlinformation/example.html

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: Tech Talk Area 3Tech Talk Area 3–– When:When: during the next 30 minutesduring the next 30 minutes

•• ESRI ShowcaseESRI ShowcaseM t th t & SIGM t th t & SIG•• Meet the teams & SIGMeet the teams & SIG–– Java Special Interest Group (Primrose C/D, Wednesday 12:00pm Java Special Interest Group (Primrose C/D, Wednesday 12:00pm

–– 1:00pm)1:00pm)p )p )–– Unix (Community Center, Wednesday 2:30pm)Unix (Community Center, Wednesday 2:30pm)

•• ESRI Developers Network (EDN) websiteESRI Developers Network (EDN) website


–– http://edn.esri.comhttp://edn.esri.com

building ajax-based web applications with arcgis server ... · terminology • phase listener – a...

Documents