building java applications using the arcgis server web adf ... · terminology • phase listener...
TRANSCRIPT
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
ESRI Developer Summit 2008ESRI Developer Summit 2008 44
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
ESRI Developer Summit 2008ESRI Developer Summit 2008 55
Web ADF controlsWeb ADF controls
ESRI Developer Summit 2008ESRI Developer Summit 2008 66
•• 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)
ESRI Developer Summit 2008ESRI Developer Summit 2008 77
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
ESRI Developer Summit 2008ESRI Developer Summit 2008 88
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
ESRI Developer Summit 2008ESRI Developer Summit 2008 99
#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
ESRI Developer Summit 2008ESRI Developer Summit 2008 1010
ClientClient ServerServer
ClientClient
RequestRequest
ResponseResponse
ClientClient ServerServer
ClientClient
RequestRequest
ResponseResponse
UpdateUpdate
#1: Application flow#1: Application flow
ESRI Developer Summit 2008ESRI Developer Summit 2008 1111
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())())
ESRI Developer Summit 2008ESRI Developer Summit 2008 1212
#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
ESRI Developer Summit 2008ESRI Developer Summit 2008 1313
#2: Application flow#2: Application flow
ESRI Developer Summit 2008ESRI Developer Summit 2008 1414
PhaseListenerPhaseListener
EsriUtils.sendAjaxRequestEsriUtils.sendAjaxRequest()()
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
Process requestProcess request
Update controlsUpdate controls
Get Ajax responseGet Ajax response
LegendLegend
Client operationClient operation Server operationServer operation
#2: Demo details#2: Demo details
•• 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
ESRI Developer Summit 2008ESRI Developer Summit 2008 1515
#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
ESRI Developer Summit 2008ESRI Developer Summit 2008 1616
ClientClient
ClientClient
RequestRequest
ResponseResponse
ServerServerCustom Custom updateupdate
#3: Application flow#3: Application flow
ESRI Developer Summit 2008ESRI Developer Summit 2008 1717
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
EsriUtils.sendAjaxRequestEsriUtils.sendAjaxRequest()()
AJAXRendererAJAXRenderer
LegendLegend
Client operationClient operation Server operationServer operation
#3: Demo details#3: Demo details
•• 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())())
ESRI Developer Summit 2008ESRI Developer Summit 2008 1818
#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
ESRI Developer Summit 2008ESRI Developer Summit 2008 1919
#4: Application flow#4: Application flow
ESRI Developer Summit 2008ESRI Developer Summit 2008 2020
Request dataRequest data
Create responseCreate response
UpdateUpdate
Process requestProcess request
Render responseRender response
PhaseListenerPhaseListener
EsriUtils.sendAjaxRequestEsriUtils.sendAjaxRequest()()
XMLUtil.newDocumentXMLUtil.newDocument()()
map.graphics.drawImagemap.graphics.drawImage()()
requestrequest
responseresponse
AJAXUtil.writeResponseAJAXUtil.writeResponse()()
LegendLegend
Client operationClient operation Server operationServer operation
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
ESRI Developer Summit 2008ESRI Developer Summit 2008 2121
#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))
ESRI Developer Summit 2008ESRI Developer Summit 2008 2222
Tips & TricksTips & Tricks
•• EsriUtilsEsriUtils..–– createXmlHttpObjectcreateXmlHttpObject()()–– buildRequestParamsbuildRequestParams()()–– submitFormsubmitForm()()–– sendAjaxRequestsendAjaxRequest()()–– getXmlDocumentgetXmlDocument()()–– stringToXmlstringToXml()()–– getErrorFromDocumentgetErrorFromDocument()()
•• EsriControlsEsriControls..–– <control>Ids/<control>s Arrays<control>Ids/<control>s Arrays–– processPostBackprocessPostBack()()–– processPostBackXMLprocessPostBackXML()()
ESRI Developer Summit 2008ESRI Developer Summit 2008 2323
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
ESRI Developer Summit 2008ESRI Developer Summit 2008 2424
<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))
ESRI Developer Summit 2008ESRI Developer Summit 2008 2525
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
ESRI Developer Summit 2008ESRI Developer Summit 2008 2626
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
ESRI Developer Summit 2008ESRI Developer Summit 2008 2727
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
ESRI Developer Summit 2008ESRI Developer Summit 2008 2828
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
ESRI Developer Summit 2008ESRI Developer Summit 2008 2929