Building Java Applications Using the ArcGIS Server Web ADF ... · Terminology • Phase Listener –A class registered in the JSF lifecycle to be notified at the beginning and ending

ESRI Developer Summit 2008ESRI Developer Summit 2008 11

Building Java Applications Using the Building Java Applications Using the ArcGISArcGIS Server Server Web ADF and AJAXWeb ADF and AJAX

Antony Antony JayaprakashJayaprakashJayantJayant SaiSai

Schedule

• 75 minute session– 60 – 65 minute lecture– 10 – 15 minutes Q & A following the lecture

• Cell phones and pagers

• Please complete the session survey – we take your feedback very seriously!

Introductions

• Who are we?– Members of ArcGIS Server Java Team

• Who are you?– ArcGIS Server Java Edition developers

• Prerequisites– Java– Working knowledge of

• JSF• JavaScript• XML• Ajax

Session agendaSession agenda

•• Ajax integration in the Java Web ADFAjax integration in the Java Web ADF–– Web ADF controlsWeb ADF controls–– JavaScript libraryJavaScript library–– ServersideServerside objectsobjects

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

•• Web Mapping Application (WMA) AjaxWeb Mapping Application (WMA) Ajax•• Tips & TricksTips & Tricks•• Q&AQ&A


TerminologyTerminology

•• Phase ListenerPhase Listener–– 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

•• ClientsideClientside/Partial /Partial PostBackPostBack–– Making client side script calls (using Making client side script calls (using XMLHttpRequestXMLHttpRequest) to server ) to server

side code without causing a side code without causing a postbackpostback


Web ADF controlsWeb ADF controls


•• All Web ADF controls are Ajax enabledAll Web ADF controls are Ajax enabled

JavaScript libraryJavaScript library

•• Extensive Extensive clientsideclientside JavaScript libraryJavaScript library–– Handles user interaction & communication with serverHandles user interaction & communication with server–– Framework for AjaxFramework for Ajax–– Browser independent functionsBrowser independent functions–– Object oriented libraryObject oriented library–– All object names prefixed with All object names prefixed with ‘‘EsriEsri’’–– Only 1 global, Only 1 global, EsriControlsEsriControls–– Does not conflict with 3rd party Ajax toolkits (prototype, dojo,Does not conflict with 3rd party Ajax toolkits (prototype, dojo,

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


ServersideServerside objectsobjects

•• Java object to support AjaxJava object to support Ajax–– JSF Phase ListenersJSF Phase Listeners–– XML Ajax RenderersXML Ajax Renderers

•• MapRendererMapRenderer•• TocRendererTocRenderer•• ToolbarRendererToolbarRenderer•• OverviewRendererOverviewRenderer•• TaskRendererTaskRenderer

–– AJAXResponseRendererAJAXResponseRenderer

•• Custom renderer hookCustom renderer hook--insins–– AJAXRendererAJAXRenderer interfaceinterface–– 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 operationsoperations

•• #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 into by integrating into

requestrequest-- response cycleresponse cycle•• #4: #4: Timer based requestsTimer based requests to display data on clientto display data on client


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

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

based on updates to controlsbased on updates to controls–– RequestRequest--response should not response should not

interfere with user interactioninterfere with user interaction

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

•• DemoDemo–– On map updateOn map update–– Request map extent and scaleRequest map extent and scale–– Display extent and scale for current Display extent and scale for current

extentextent


ClientClient ServerServer

ClientClient

RequestRequest

ResponseResponse

ClientClient ServerServer

ClientClient

RequestRequest

ResponseResponse

UpdateUpdate

#1: Application flow#1: Application flow


Register for updatesRegister for updates

On update, request dataOn update, request data

Create responseCreate response

Update HTML elementsUpdate HTML elements

Process requestProcess request

Render responseRender response

PhaseListenerPhaseListener

EsriMap.addUpdateListenerEsriMap.addUpdateListener()()

EsriUtils.sendAjaxRequestEsriUtils.sendAjaxRequest()()

XMLUtil.newDocumentXMLUtil.newDocument()()

myElement.valuemyElement.value = = valueFromXmlvalueFromXml

map updatedmap updated

requestrequest

responseresponse

AJAXUtil.writeResponseAJAXUtil.writeResponse()()

LegendLegend

Client operationClient operation Server operationServer operation

#1: Demo details#1: Demo details

•• JavaScript JavaScript ((mapInformation.jsmapInformation.js))

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

•• Implement Implement PhaseListenerPhaseListener ((MapInformationPhaseListener.javaMapInformationPhaseListener.java))

–– Process request Process request ((afterPhaseafterPhase())())

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

•• Register Register PhaseListenerPhaseListener ((fcfc--ajaxdemo.xmlajaxdemo.xml))

–– Add Add ‘‘<lifecycle><lifecycle>’’ declarationdeclaration

•• JavaScript JavaScript ((mapInformation.jsmapInformation.js))

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


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

•• When to Use?When to Use?–– Update controls based on changes to Update controls based on changes to

GIS business objectsGIS business objects

•• Usage in Web ADF?Usage in Web ADF?–– Update on zoom level changeUpdate on zoom level change

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

downdown–– Update mapUpdate map’’s extent based on zoom 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






new new AJAXResponseRendererAJAXResponseRenderer()()

EsriControls.processPostBackEsriControls.processPostBack

requestrequest

responseresponse

webContext.refreshwebContext.refresh()()

AJAXResponseRenderer.renderResponseAJAXResponseRenderer.renderResponse()()

Send request with Send request with update parametersupdate parameters

Create rendererCreate renderer

Update controlsUpdate controls


Update controlsUpdate controls

Get Ajax responseGet Ajax response

LegendLegend



•• JavaScript JavaScript ((mapzoom.jsmapzoom.js))

–– Send Send ajaxajax request with zoom factor request with zoom factor ((sendMapZoomRequestsendMapZoomRequest())())

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

•• Implement Implement PhaseListenerPhaseListener ((MapZoomPhaseListener.javaMapZoomPhaseListener.java))

–– Process request Process request ((afterPhaseafterPhase())())

–– Create Create AJAXResponseRendererAJAXResponseRenderer–– 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–– Done as part of requestDone as part of request--response response

cyclecycle

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

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

in visible extentin visible extent–– Update table to display attributes dataUpdate table to display attributes data


ClientClient

ClientClient

RequestRequest

ResponseResponse

ServerServerCustom Custom updateupdate



AJAXRendererAJAXRenderer createdcreated

State before updateState before update

Update HTML elementUpdate HTML element

Control to updateControl to update

Render XMLRender XML

Get Ajax responseGet Ajax response

User requestUser request

AJAXRenderer.getOriginalStateAJAXRenderer.getOriginalState()()

myHandler(xmlmyHandler(xml))

AJAXRenderer.getControlClassAJAXRenderer.getControlClass()()

AJAXRenderer.renderAjaxResponseAJAXRenderer.renderAjaxResponse()()

EsriControls.processPostBackEsriControls.processPostBackcallscalls


AJAXRendererAJAXRenderer

LegendLegend



•• Implement Implement AJAXRendererAJAXRenderer ((LayerAttributesRenderer.javaLayerAttributesRenderer.java))

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

•• Register Register AJAXRendererAJAXRenderer (WEB(WEB--INF/ajaxINF/ajax--renderers.xmlrenderers.xml))

–– Add to list of Add to list of AJAXRenderersAJAXRenderers

•• JavaScript JavaScript ((layerAttributes.jslayerAttributes.js))

–– Function to parse XML and update HTML elements Function to parse XML and update HTML elements ((layerAttributesHandlerlayerAttributesHandler())())

•• Register XML tag handlerRegister XML tag handler–– Add function to list of xml tag handlers to Add function to list of xml tag handlers to EsriControlsEsriControls

JavaScript global object JavaScript global object ((EsriControls.addPostBackTagHandlerEsriControls.addPostBackTagHandler())())


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

•• When to Use?When to Use?–– Execute operation periodicallyExecute operation periodically–– Display temporal dataDisplay temporal data

•• Usage in Web ADF?Usage in Web ADF?–– Checking GP task results statusChecking GP task results status

•• DemoDemo–– Periodic request to get and display Periodic request to get and display

location of fleetlocation of fleet–– Start/Stop timerStart/Stop timer




Request dataRequest data

Create responseCreate response

UpdateUpdate


Render responseRender response



XMLUtil.newDocumentXMLUtil.newDocument()()

map.graphics.drawImagemap.graphics.drawImage()()

requestrequest

responseresponse

AJAXUtil.writeResponseAJAXUtil.writeResponse()()

LegendLegend


Web Mapping Application (WMA) AjaxWeb Mapping Application (WMA) Ajax

•• WMA code available as part of WMA code available as part of ArcGISArcGIS Server Java Server Java installinstall–– <<ArcGISArcGIS>/java/web/>/java/web/web_map_applicationweb_map_application//

•• Easy Ajax integration for WMAEasy Ajax integration for WMA•• Targeted to developers extending WMATargeted to developers extending WMA•• Server side codeServer side code

–– Write custom class implementing Write custom class implementing AjaxCommandAjaxCommand interfaceinterface–– Register class in facesRegister class in faces--config.xmlconfig.xml

•• Client side codeClient side code–– HTML to display outputHTML to display output–– JavaScript to process server responseJavaScript to process server response


#4 Demo Details#4 Demo Details

•• Implement Implement AjaxCommandAjaxCommand Interface Interface ((TrackingCommand.javaTrackingCommand.java))

–– Get points Get points ((handleAjaxRequesthandleAjaxRequest())())

–– Return in XMLReturn in XML

•• Register Register TrackingCommandTrackingCommand (WEB(WEB--INF/fcINF/fc--ajaxdemo.xmlajaxdemo.xml))

•• JavaScript JavaScript ((tracking.jstracking.js))

–– Function to send request Function to send request ((trackingRequesttrackingRequest())())

–– Function to process and add markers to map Function to process and add markers to map ((trackingResponsetrackingResponse())())

•• Register managed bean dataRegister managed bean data–– Tracking managed bean Tracking managed bean (WEB(WEB--INF/fcINF/fc--ajaxdemo.xmlajaxdemo.xml))

–– Register managed bean in Web Context Register managed bean in Web Context (WEB(WEB--INF/facesINF/faces--config.xmlconfig.xml))


Tips & TricksTips & Tricks

•• EsriUtilsEsriUtils..–– createXmlHttpObjectcreateXmlHttpObject()()–– buildRequestParamsbuildRequestParams()()–– submitFormsubmitForm()()–– sendAjaxRequestsendAjaxRequest()()–– getXmlDocumentgetXmlDocument()()–– stringToXmlstringToXml()()–– getErrorFromDocumentgetErrorFromDocument()()

•• EsriControlsEsriControls..–– <control>Ids/<control>s Arrays<control>Ids/<control>s Arrays–– processPostBackprocessPostBack()()–– processPostBackXMLprocessPostBackXML()()


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

•• Issues with Issues with ClientsideClientside PostBackPostBack (edit (edit jspjsp file)file)

•• To see XML output (edit To see XML output (edit web.xmlweb.xml))

•• Use Use AJAXUtil.javaAJAXUtil.java to write response or generate error to write response or generate error message to be handled on clientmessage to be handled on client

•• Render all responses within Render all responses within ‘‘<response><response>’’ tagtag


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

</script>

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

</script>

<context-param><param-name>com.esri.adf.LOG_LEVEL</param-name><param-value>CONFIG</param-value>

</context-param>

<context-param><param-name>com.esri.adf.LOG_LEVEL</param-name><param-value>CONFIG</param-value>

</context-param>

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

•• Optimize and remove unused objectsOptimize and remove unused objects–– Managed beans & phase listeners (facesManaged beans & phase listeners (faces--config.xmlconfig.xml))–– ajaxGpAsyncTaskResultsRendererajaxGpAsyncTaskResultsRenderer ((ajaxajax--renderers.xmlrenderers.xml))–– EsriTask_GPAsyncTaskResultsTimerEsriTask_GPAsyncTaskResultsTimer JavaScript include & timer JavaScript include & timer

initialization (initialization (toc.xsltoc.xsl))–– Remove functionality files (Remove functionality files (web.xmlweb.xml))


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

•• FirefoxFirefox extensionsextensions–– Firebug : JavaScript debugging, Monitor Firebug : JavaScript debugging, Monitor XMLHttpXMLHttp–– Web Developer : Page info, DOM infoWeb Developer : Page info, DOM info

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

•• IE7IE7–– IE Developer ToolbarIE Developer Toolbar


Ajax Read MeAjax Read Me

•• http://edndoc.esri.com/arcobjects/9.2/Java/java/server/http://edndoc.esri.com/arcobjects/9.2/Java/java/server/web_adf/ajax/ajax_integration.htmlweb_adf/ajax/ajax_integration.html

•• http://edndoc.esri.com/arcobjects/9.2/Java/java/server/http://edndoc.esri.com/arcobjects/9.2/Java/java/server/web_adf/JavaScript/clientside_js.htmlweb_adf/JavaScript/clientside_js.html

•• http://edndoc.esri.com/arcobjects/9.2/Java/server_samphttp://edndoc.esri.com/arcobjects/9.2/Java/server_samples/maples/map--information/example.htmlinformation/example.html


In ConclusionIn Conclusion

•• All sessions are recorded and will be available on EDNAll sessions are recorded and will be available on EDN–– Slides and code will also be availableSlides and code will also be available

•• Please fill out session surveys!Please fill out session surveys!

•• Still have questions?Still have questions?1.1.Tech talk, Demo Theatres, Meet the TeamTech talk, Demo Theatres, Meet the Team2.2.““Ask a DeveloperAsk a Developer”” link on web pagelink on web page

•• www.esri.com/devsummit/techquestionswww.esri.com/devsummit/techquestions


Recommended Sessions

• ArcGIS Server for ArcIMS Developers – Tuesday 1:00 in Primrose A– Thursday 1:30 in Catalina/Madera

• Architecting ArcGIS Server for Linux/Solaris – Wednesday 4:30 in Catalina/Madera

• Advanced Java Web ADF – Wednesday 1:00 in Smoketree A-E

• Building Tasks for the Java Web ADF– Tuesday 2:45 in Primrose A– Wednesday 4:30 in Primrose C/D

• Implementing Security for Java – Thursday 10:15 in Pasadena/Sierra/Ventura


Documents

Building Java Applications Using the ArcGIS Server Web ADF ... · Terminology • Phase Listener –A class registered in the JSF lifecycle to be notified at the beginning and ending