Customizing Graphics and Customizing Graphics and MapTipsMapTips with the Java with the Java Web ADFWeb ADFWeb ADFWeb ADF

David Cardella @David Cardella @dcardelladcardella ##DevSummitDevSummitDan O’NeillDan O’Neill

IntroductionsIntroductions

•• 75 minute session75 minute session6060 65 min te lect re65 min te lect re––60 60 –– 65 minute lecture65 minute lecture

––10 10 –– 15 minutes Q & A following the lecture15 minutes Q & A following the lecture

•• Who are we?Who are we?––ESRI Developer Network (EDN) Technology LeadESRI Developer Network (EDN) Technology Lead

M b f th A GIS J S D l t TM b f th A GIS J S D l t T––Member of the ArcGIS Java Server Development TeamMember of the ArcGIS Java Server Development Team•• Who are you?Who are you?

––Current ArcIMS developers?Current ArcIMS developers?pp––New to ArcGIS Server?New to ArcGIS Server?––Current ArcGIS Server developers?Current ArcGIS Server developers?

JSF Developers?JSF Developers?––JSF Developers?JSF Developers?––AJAX Developers?AJAX Developers? Please complete the session survey!Please complete the session survey!

Let’s get connectedLet’s get connected

•• TwitterTwitter––What is it?What is it?––Why use it?Why use it?

How can it help us?How can it help us?––How can it help us?How can it help us?––http://twitter.com/dcardellahttp://twitter.com/dcardella

@dcardella @jbarry@jdoneill

@agup@AL_Laframboise

Session agendaSession agenda

•• Web Graphics Vs Graphics ResourceWeb Graphics Vs Graphics Resourcep pp p––DifferencesDifferences––How to implementHow to implement

I l ti ll t ( ti )I l ti ll t ( ti )•• Implementing callouts (map tips)Implementing callouts (map tips)•• Customizing calloutsCustomizing callouts

––AJAXAJAXAJAXAJAX•• Custom ActionsCustom Actions

Web GraphicsWeb Graphics

•• Drawn on top of layers in the mapDrawn on top of layers in the mapp y pp y p•• Used by other tasksUsed by other tasks

––Highlighting featuresHighlighting features––Labeling textLabeling text––Displaying buffersDisplaying buffers––EditingEditinggg––MarkupMarkup––Etc.Etc.

•• Rendering occurs independently from the mapRendering occurs independently from the map•• Rendering occurs independently from the mapRendering occurs independently from the map––Does not require a map redrawDoes not require a map redraw

•• Displays in Map control onlyDisplays in Map control onlyp y p yp y p y

WebGraphicsWebGraphics

•• Attribute of Attribute of WebContextWebContext•• Business logic behind the graphics layerBusiness logic behind the graphics layer•• Used by WebQuery and Used by WebQuery and WebGeocodeWebGeocode•• Container for Container for WebGeometryWebGeometry

WebContext

WebGraphics

Web GraphicsWeb Graphics

WebGeometry

GraphicImage

WebSymbol

WebGeometryget / setGraphicElementadd /

removeWebGraphics

GraphicRenderer

GraphicsResourceGraphicsResource

•• Is a type of Is a type of GISResourceGISResourceWebContext

ypyp•• Functionality allows features to be:Functionality allows features to be:

––Added to map, TOC, and overview Added to map, TOC, and overview GISResource

––QueriedQueriedGraphicsResource

•• Holds a list of Holds a list of GraphicsLayersGraphicsLayers––GraphicsLayersGraphicsLayers originate andoriginate and

live solely in the ADF tierlive solely in the ADF tier

Graphics*Functionality

live solely in the ADF tierlive solely in the ADF tier

GraphicsResource GraphicsLayeradd / remove GraphicFeatureadd /

remove

GraphicsResourceGraphicsResource

//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.addGraphicFeature(gFeature);

gLayer.setRenderer(renderer);

GraphicsResourceGraphicsResource

//Add the new Graphics Layer to the Graphics Resource

gResource.addGraphicsLayer(gLayer);gResource.addGraphicsLayer(gLayer);

//Update the table of contents

context.getWebToc().init((TocFunctionality)

gResource.getFunctionality(TocFunctionality.FUNCTIONALITY_NAME));

//Update the overview map with the graphics//Update the overview map with the graphics

context.getWebOverview().exportImage();

//Update Web Query//Update Web Query

context.getWebQuery().init(context);

//Refresh the Web context//Refresh the Web context

context.refresh();

Web Graphics vs. Graphics ResourceWeb Graphics vs. Graphics Resource

•• Web GraphicsWeb Graphicspp––Good for representing temporary/changing featuresGood for representing temporary/changing features––Rendering occurs independently from the mapRendering occurs independently from the map

•• Does not require a map redrawDoes not require a map redraw•• Does not require a map redrawDoes not require a map redraw

•• Graphics ResourceGraphics Resource––Visible in TOC, overviewVisible in TOC, overview––Ability to be queriedAbility to be queried––Enables calloutEnables calloutEnables calloutEnables callout

•• Why would we use one over another?Why would we use one over another?

ADF Task framework 101: Add parameters to a custom taskADF Task framework 101: Add parameters to a custom task

•• Parameters Parameters ––Provide inputs for the taskProvide inputs for the task

public class BufferTask {

double bufferDistance = 40;

public double getBufferDistance() { return bufferDistance; }public double getBufferDistance() { return bufferDistance; }

public void setBufferDistance(double bufferDistance) {. . .}

String selectLayer;

bli St i tS l tL () { t l tL }public String getSelectLayer() { return selectLayer; }

public void setSelectLayer(String selectLayer) {. . .}

public Map getSelectLayers() {return selectLayers;}public Map getSelectLayers() {return selectLayers;}

}

A

ADF Task framework 101 : Add a command to a custom ADF Task framework 101 : Add a command to a custom tasktask

•• Command = actionCommand = action•• Add a method with Add a method with TaskEventTaskEvent

as argument as argument (( ))–– ((com.esri.adf.web.faces.eventcom.esri.adf.web.faces.event))

––Gives accessGives accessto to WebContextWebContext

public class NavigationTask {

public void selectCountries(MapEvent event) {public void selectCountries(MapEvent event) {

. . .

}

public void zoom(TaskEvent event) { . . .

}

}

A

DemoDemo

•• Load data from a text file onto the Graphics Resource Load data from a text file onto the Graphics Resource pp•• Display and interact with layer in TOC Display and interact with layer in TOC

ResultsResults

•• Task operations mayTask operations maygenerate resultsgenerate results

––Tools or commandsTools or commands•• Results can be arbitraryResults can be arbitrary

Java objectsJava objectsJava objectsJava objects––Query resultsQuery results––Address candidatesAddress candidates

GeoprocessingGeoprocessing resultsresults––GeoprocessingGeoprocessing resultsresults•• Results can be from any Results can be from any

GISResourceGISResource that has that has TOCFunctionalityTOCFunctionality•• Types of informationTypes of information

––Display textDisplay text––Result detailsResult detailsResult detailsResult details––Actions that can be performed on resultsActions that can be performed on results

A

Callout windowsCallout windows

•• Data represented byData represented byp yp y––Data panelData panel––Callout window (map tips)Callout window (map tips)

Components of the calloutComponents of the callout

1.1. CalloutCallout2.2. Layer DefinitionLayer Definition

–– Field aliasField alias–– Highlight and default renderersHighlight and default renderers–– SymbolsSymbols

<managed-bean-name>ags1_layer1</managed-bean-name> <managed-bean-class>

faces-config.xml

<managed bean class> com.esri.adf.web.data.query.LayerDefinition</managed-bean-class>. . .

Components of the calloutComponents of the callout

3.3. Callout TemplateCallout Template

Header

pp–– HTML/JSHTML/JS–– Specified via layer definitionSpecified via layer definition

Header body footerHeader body footer

Body

–– Header, body, footerHeader, body, footer4.4. Result TemplateResult Template

–– HTML/JSHTML/JSF t

–– Specified via layer definitionSpecified via layer definitionFoooter

<property-name>calloutTemplate</property-name> < l ><value><![CDATA[ <header>Hello</header><body> ${NAME}<br /></body> ]]>

</value>

< t > ltT l t </ t ><property-name>resultTemplate</property-name>. . .

Implementing a callout on a Graphics ResourceImplementing a callout on a Graphics Resource

1.1. Add layer definition as managed beanAdd layer definition as managed beany gy g–– Enables calloutEnables callout

<managed-bean-name>pointlayerDef</managed-bean-name>

2.2. Design callout and result templateDesign callout and result template

. . . .

gg

<property-name>calloutTemplate</property-name><value><![CDATA[<header>This is {Name}</header><body><table><tr><body><table><tr><td colspan='2'>The pilot of ${Name} is ${Pilot}</td></tr><tr><td colspan='2'> Destination is (${Dx}:${Dy})</td>

DemoDemo

•• Add to Results to show Callout windowAdd to Results to show Callout window

Customizing the callout windowCustomizing the callout window

•• Customize look and feelCustomize look and feel––Colors, font, size, etc …Colors, font, size, etc …–– *.css*.cssC t i t tC t i t t•• Customize content Customize content ––Header, body and footerHeader, body and footer–– *.xml*.xml––ExampleExample

•• Invoke logic on app based on user interaction with callout AJAXInvoke logic on app based on user interaction with callout AJAX

What is AJAX?What is AJAX?

•• Asynchronous Asynchronous JavascriptJavascript + XML = AJAX+ XML = AJAXyy pp–– Web development technique for creating interactive web Web development technique for creating interactive web

applicationsapplications–– Entire web page not reloaded each time user makes changesEntire web page not reloaded each time user makes changes–– Entire web page not reloaded each time user makes changesEntire web page not reloaded each time user makes changes–– Partial updates based on behind the scenes communication Partial updates based on behind the scenes communication

with the serverwith the server•• ClientClient postbackpostback•• Client Client postbackpostback

–– Increase web page interactivity, speed and usabilityIncrease web page interactivity, speed and usability

Synchronous response cycleSynchronous response cycle

•• RequestRequest--response cycle synchronousresponse cycle synchronousqq p y yp y y•• Page flashingPage flashing•• All content refreshed every timeAll content refreshed every time•• Loss of state on pageLoss of state on page

ClientClient

RequestRequest

ClientClient ClientClient

RequestRequest

ClientClient

ResponseResponse ResponseResponse

ServerServer

asynchronous response cycleasynchronous response cycle

•• RequestRequest--response cycle asynchronousresponse cycle asynchronous•• No more page flashingNo more page flashing•• Only if content changed on server, is it updated on Only if content changed on server, is it updated on

clientclientClient state maintainedClient state maintained•• Client state maintainedClient state maintained

ClientClient

ActionAction

UpdateUpdate

AJAX LayerAJAX Layer

RequestsRequestsResponsesResponses

ServerServer

AJAX LifecycleAJAX Lifecycle

•• AJAX lifecycle is independent from implementation on AJAX lifecycle is independent from implementation on y p py p pthe serverthe server

––Browser sends a request with certain Browser sends a request with certain paramsparamsExpects XML response in a specific formatExpects XML response in a specific format––Expects XML response in a specific formatExpects XML response in a specific format

•• Before phase: parse Before phase: parse paramsparams•• After phase: render responseAfter phase: render responseAfter phase: render responseAfter phase: render response

Before PhaseRestore ViewRequest

Apply Request ValuesRequest

Response

After PhaseRender Response

PhaseListenerPhaseListener: Client side (: Client side (JavascriptJavascript))

•• Set up a listener to the map control Set up a listener to the map control •• Create request parameter string with data required for Create request parameter string with data required for

iiprocessing on serverprocessing on server•• Send request to serverSend request to server•• Set callback function to process responseSet callback function to process response•• Set callback function to process responseSet callback function to process responsefunction init() {function init() {map.addUpdateListenermap.addUpdateListener("("mapInformationListenermapInformationListener", ",

d t M I f m ti R td t M I f m ti R t))updateMapInformationRequestupdateMapInformationRequest); ); … }… }

function function updateMapInformationRequestupdateMapInformationRequest() {() {"" i f tii f ti i f ti &f Idi f ti &f Id " +" +varvar paramsparams = "= "mapinformationmapinformation==mapinformation&formIdmapinformation&formId=" + =" +

map.formIdmap.formId ……

varvar xmlHttpxmlHttp == EsriUtils sendAJAXRequestEsriUtils sendAJAXRequest((urlurl paramsparams truetrue varvar xmlHttpxmlHttp = = EsriUtils.sendAJAXRequestEsriUtils.sendAJAXRequest((urlurl, , paramsparams, true, , true, function(){ function(){ updateMapInformationResponseupdateMapInformationResponse((xmlHttpxmlHttp); });}); });}

PhaseListenerPhaseListener : Server side (Java): Server side (Java)

•• Interrogate Interrogate PhaseListenerPhaseListener•• Get form and mapGet form and map•• Apply business logicApply business logic•• Render and return responseRender and return response

public class MapInformationPhaseListener implements PhaseListener {public void afterPhase(PhaseEvent phaseEvent) {if (! "mapinformation" equals(params get("mapinformation")))if (! mapinformation .equals(params.get( mapinformation )))

return; … MapControl mapControl = (MapControl) form.findComponent(mapId);WebMap map = mapControl.getWebMap(); WebExtent extent = map.getCurrentExtent(); double scale = map.getMapScale(); AJAXUtil it R (f C t t d )AJAXUtil.writeResponse(facesContext, doc);

}}

PhaseListenerPhaseListener: Client side (: Client side (JavascriptJavascript))

•• Parse XMLParse XML•• Update appropriate HTML elements on the pageUpdate appropriate HTML elements on the page

function updateMapInformationResponse (document) {var xml = xmlHttp.responseXML; p p ;document.getElementById("minx")… document.getElementById("miny")…document.getElementById("maxx")… document.getElementById("maxy")…document.getElementById("map-scale") ……}

Demo Demo

•• AJAX Function in Callout windowAJAX Function in Callout window––add the result to a ‘Candidate List’ add the result to a ‘Candidate List’ ––show the destination of the plane by drawing to the graphics show the destination of the plane by drawing to the graphics

layerlayerlayerlayer

Result ActionsResult Actions

•• What are actions?What are actions?––Functionality invoked on a Functionality invoked on a

selected featureselected feature––ZoomZoom––ZoomZoom––HighlightHighlight––Clear highlightClear highlight

––Custom Actions?Custom Actions?

Implementing a custom actionImplementing a custom action

•• Define the custom actionDefine the custom action•• Add to default action listAdd to default action list

––NameName––Method to handle business logicMethod to handle business logic

actions = new LinkedHashMap<String String>();actions = new LinkedHashMap<String, String>();actions.put("Zoom", "zoom");actions.put("Highlight", "highlight");actions.put("Clear Graphics", "clearGraphic");actions.put("Do My Action", "doMyaction");

Implementing a custom actionImplementing a custom action

•• Apply actions to Apply actions to WebResultsWebResults

WebResults wResults = wContext.getWebResults();if (results != null) {

ResultDefinition def = new ResultDefinition();ResultDefinition def new ResultDefinition();. . . .

def.setActionMethodNames(actions);

•• Implement business logicImplement business logic

. . .

•• Implement business logicImplement business logic

public void doMyaction() {. . .}

DemoDemo

•• Custom Action Custom Action ––Draw a point 3 degrees to the left of the target featureDraw a point 3 degrees to the left of the target feature

SummarySummary

•• Graphics ResourceGraphics Resourcepp•• CalloutsCallouts•• Custom actions on map resultsCustom actions on map results

•• Other sessionsOther sessionsB ildi d E t di T k f A GIS S J W bB ildi d E t di T k f A GIS S J W b––Building and Extending Tasks for ArcGIS Server Java Web Building and Extending Tasks for ArcGIS Server Java Web ApplicationsApplications•• Tuesday, March 24, 2009, 2:45pmTuesday, March 24, 2009, 2:45pm--4:00pm, 4:00pm, SmoketreeSmoketree A A -- EE

––Extending ArcGIS Server with Java Extending ArcGIS Server with Java •• Wednesday, 2:45pmWednesday, 2:45pm--4:00pm, Primrose C/D4:00pm, Primrose C/D

––Customizing Editing Workflows with the Java Web ADFCustomizing Editing Workflows with the Java Web ADF•• Wednesday, 10:30amWednesday, 10:30am--11:45am, Mesquite C11:45am, Mesquite C

Still have questions?Still have questions?

Additional ResourcesAdditional ResourcesQuestions, answers and information…Questions, answers and information…

•• Tech Talk Tech Talk •• ESRI Resource CentersESRI Resource Centers––Outside this room right Outside this room right

now!now!–– PPTs, code and videoPPTs, code and video

resources.esri.comresources.esri.com

•• Meet the TeamMeet the Team•• Social NetworkingSocial Networking

Meet the Team Meet the Team ––Java Development team Java Development team

Wednesday 6 Wednesday 6 –– 7pm Oasis 27pm Oasis 2 www.twitter.com/www.twitter.com/ESRIDevSummitESRIDevSummitESRIDevSummitESRIDevSummit

tinyurl.com/tinyurl.com/ESRIDevSummitFBESRIDevSummitFB

Want to Learn More?Want to Learn More?ESRI Training and Education ResourcesESRI Training and Education Resources

•• InstructorInstructor--Led TrainingLed Training––Developing Applications with ArcGIS Server Using the JavaDeveloping Applications with ArcGIS Server Using the Java––Developing Applications with ArcGIS Server Using the Java Developing Applications with ArcGIS Server Using the Java

PlatformPlatform

F W b T i i S iF W b T i i S i•• Free Web Training SeminarFree Web Training Seminar––Building Applications with ArcGIS Server Using the Java Building Applications with ArcGIS Server Using the Java

PlatformPlatform

http://www.esri.com/traininghttp://www.esri.com/training