@jbarry

Transcription

1 Customizing Graphics and MapTips with the Java Web ADF #DevSummit Dan O Neill

2 Introductions 75 minute session minute min te lect lecture re minutes Q & A following the lecture Who are we? ESRI Developer Network (EDN) Technology Lead Member M b off the th ArcGIS A GIS Java J Server S Development D l t Team T Who are you? Current ArcIMS developers? p New to ArcGIS Server? Current ArcGIS Server developers? JSF Developers? AJAX Developers? Please complete the session survey!

3 Let s get connected Twitter What is it? Why use it? How can it help @agup

4 Session agenda Web Graphics p Vs Graphics p Resource Differences How to implement Implementing I l ti callouts ll t (map ( tips) ti ) Customizing callouts AJAX Custom Actions

5 Web Graphics Drawn on top p of layers y in the map p Used by other tasks Highlighting features Labeling text Displaying buffers Editing g Markup Etc. Rendering occurs independently from the map Does not require a map redraw Displays p y in Map p control only y

6 WebGraphics Attribute of WebContext Business logic behind the graphics layer Used by WebQuery and WebGeocode Container for WebGeometry WebContext WebGraphics

7 Web Graphics GraphicImage WebGeometry WebGraphics add / remove GraphicElement get / set WebSymbol GraphicRenderer

8 GraphicsResource WebContext Is a type yp of GISResource Functionality allows features to be: GISResource Added to map, TOC, and overview Queried GraphicsResource Holds a list of GraphicsLayers Graphics*Functionality GraphicsLayers originate and live solely in the ADF tier GraphicsResource add / remove add / GraphicsLayer remove GraphicFeature

9 GraphicsResource //Get the Graphics Resource GraphicsResource gresource = (GraphicsResource)context getresourcebyid("graphicsresource"); (GraphicsResource)context.getResourceById( graphicsresource ); //Add attributes/values Map<String, String> attributes = new LinkedHashMap<String, String>(); attributes.put("type", treetype); attributes.put("notes", notes); //create graphicsfeature, add to graphicslayer, set the renderer gfeature.setgeometry(point); gfeature.setattributes(attributes); glayer.addgraphicfeature(gfeature); glayer.setrenderer(renderer);

10 GraphicsResource //Add the new Graphics Layer to the Graphics Resource gresource.addgraphicslayer(glayer); //Update the table of contents context.getwebtoc().init((tocfunctionality) gresource.getfunctionality(tocfunctionality.functionality_name)); //Update the overview map with the graphics context.getweboverview().exportimage(); //Update Web Query context.getwebquery().init(context); //Refresh the Web context context.refresh();

11 Web Graphics vs. Graphics Resource Web Graphics p Good for representing temporary/changing features Rendering occurs independently from the map Does not require a map redraw Graphics Resource Visible in TOC, overview Ability to be queried Enables callout Why would we use one over another?

12 ADF Task framework 101: Add parameters to a custom task Parameters Provide inputs for the task public class BufferTask { double bufferdistance = 40; public double getbufferdistance() { return bufferdistance; } public void setbufferdistance(double bufferdistance) {...} String selectlayer; public bli St String i getselectlayer() ts l tl () { return t selectlayer; l tl } public void setselectlayer(string selectlayer) {...} public Map getselectlayers() {return selectlayers;} } A

13 ADF Task framework 101 : Add a command to a custom task Command = action Add a method with TaskEvent as argument (com.esri.adf.web.faces.event com.esri.adf.web.faces.event)) Gives access public class NavigationTask { to WebContext public void selectcountries(mapevent event) {... } public void zoom(taskevent event) {... } } A

14 Demo Load data from a text file onto the Graphics p Resource Display and interact with layer in TOC

15 Results Task operations may generate results Tools or commands Results can be arbitrary Java objects Query results Address candidates Geoprocessing results Results can be from any GISResource that has TOCFunctionality Types of information Display text Result details Actions that can be performed on results A

16 Callout windows Data represented p by y Data panel Callout window (map tips)

17 Components of the callout 1. Callout 2. Layer Definition Field alias Highlight and default renderers Symbols faces-config.xml <managed-bean-name>ags1_layer1</managed-bean-name> <managed-bean-class> <managed bean class> com.esri.adf.web.data.query.layerdefinition </managed-bean-class>...

18 Components of the callout Header 3. Callout Template p HTML/JS Specified via layer definition Header, Header body body, footer Body 4. Result Template HTML/JS Specified via layer definition F Foooter t <property-name>callouttemplate</property-name> < l > <value> <![CDATA[ <header>hello</header><body> ${NAME}<br /></body> </value> < <property-name>resulttemplate</property-name> t > ltt l t </ t >... ]]>

19 Implementing a callout on a Graphics Resource 1. Add layer y definition as managed g bean Enables callout <managed-bean-name>pointlayerdef</managed-bean-name> Design g callout and result template <property-name>callouttemplate</property-name> <value><![cdata[<header>this is {Name}</header> <body><table><tr> <td colspan='2'>the pilot of ${Name} is ${Pilot}</td></tr><tr> <td colspan='2'> Destination is (${Dx}:${Dy})</td>

20 Demo Add to Results to show Callout window

21 Customizing the callout window Customize look and feel Colors, font, size, etc *.css Customize C t i content t t Header, body and footer *.xml Example Invoke logic on app based on user interaction with callout AJAX

22 What is AJAX? Asynchronous y Javascript p + XML = AJAX Web development technique for creating interactive web applications Entire web page not reloaded each time user makes changes Partial updates based on behind the scenes communication with the server Client postback Increase web page interactivity, speed and usability

23 Synchronous response cycle RequestRequest q -response p cycle y synchronous y Page flashing All content refreshed every time Loss of state on page Client Client Request Client Client Request Response Response Server

24 asynchronous response cycle RequestRequest-response cycle asynchronous No more page flashing Only if content changed on server, is it updated on client Client state maintained Client Action Update AJAX Layer Requests Responses Server

25 AJAX Lifecycle AJAX lifecycle y is independent p from implementation p on the server Browser sends a request with certain params Expects XML response in a specific format Before phase: parse params After phase: render response Restore View Before Phase Request Apply Request Values Response Render Response After Phase

26 PhaseListener:: Client side ((Javascript PhaseListener Javascript)) Set up a listener to the map control Create request parameter string with data required for processing i on server Send request to server Set callback function to process response function init() { map.addupdatelistener(" map.addupdatelistener ("mapinformationlistener mapinformationlistener", ", updatemapinformationrequest); updatemapinformationrequest d t M I f m ti R t); t) ) } function updatemapinformationrequest updatemapinformationrequest() () { var params = "mapinformation "mapinformation= i f ti =mapinformation&formid mapinformation&formid=" i f ti &f Id=" " + map.formid var xmlhttp = EsriUtils.sendAJAXRequest EsriUtils EsriUtils.sendAJAXRequest( sendajaxrequest(url sendajaxrequest( url,, params params,, true, true function(){ updatemapinformationresponse updatemapinformationresponse( (xmlhttp xmlhttp); ); });}

27 PhaseListener : Server side (Java) Interrogate PhaseListener Get form and map Apply business logic Render and return response public class MapInformationPhaseListener implements PhaseListener { public void afterphase(phaseevent phaseevent) { if (! "mapinformation" mapinformation.equals(params.get( equals(params get("mapinformation"))) mapinformation ))) return; MapControl mapcontrol = (MapControl) form.findcomponent(mapid); WebMap map = mapcontrol.getwebmap(); WebExtent extent = map.getcurrentextent(); double scale = map.getmapscale(); AJAXUtil AJAXUtil.writeResponse(facesContext, it R (f C t t doc); d ) }}

28 PhaseListener:: Client side ((Javascript PhaseListener Javascript)) Parse XML Update appropriate HTML elements on the page function updatemapinformationresponse (document) { p p ; var xml = xmlhttp.responsexml; document.getelementbyid("minx") document.getelementbyid("miny") document.getelementbyid("maxx") document.getelementbyid("maxy") document.getelementbyid("map-scale") }

29 Demo AJAX Function in Callout window add the result to a Candidate List show the destination of the plane by drawing to the graphics layer

30 Result Actions What are actions? Functionality invoked on a selected feature Zoom Highlight Clear highlight Custom Actions?

31 Implementing a custom action Define the custom action Add to default action list Name Method to handle business logic actions = new LinkedHashMap<String, LinkedHashMap<String String>(); actions.put("zoom", "zoom"); actions.put("highlight", "highlight"); actions.put("clear Graphics", "cleargraphic"); actions.put("do My Action", "domyaction");

32 Implementing a custom action Apply actions to WebResults WebResults wresults = wcontext.getwebresults(); if (results!= null) { ResultDefinition def = new ResultDefinition();.... def.setactionmethodnames(actions);... Implement business logic public void domyaction() {... }

33 Demo Custom Action Draw a point 3 degrees to the left of the target feature

34 Summary Graphics p Resource Callouts Custom actions on map results Other sessions Building B ildi and de Extending t di Tasks T k for f ArcGIS A GIS S Server J Java W Web b Applications Tuesday, March 24, 2009, 2:45pm2:45pm-4:00pm, Smoketree A - E Extending ArcGIS Server with Java Wednesday, 2:45pm 2:45pm--4:00pm, Primrose C/D Customizing Editing Workflows with the Java Web ADF Wednesday, 10:30am 10:30am--11:45am, Mesquite C Still have questions?

35 Additional Resources Questions, answers and information Tech Talk Outside this room right now! ESRI Resource Centers PPTs, code and video resources.esri.com Social Networking Meet the Team Java Development team Wednesday 6 7pm Oasis 2 ESRIDevSummit tinyurl.com/ ESRIDevSummitFB

36 Want to Learn More? ESRI Training and Education Resources Instructor Instructor--Led Training Developing Applications with ArcGIS Server Using the Java Platform Free F Web W b Training T i i Seminar S i Building Applications with ArcGIS Server Using the Java Platform