Saturday, August 2, 2008

Flex API For ArcGIS Server in action

This is one of my favorite usage of the API in pure MXML. I'm taking advantage of data binding to represent the output of a Query Task in graphical and textural format. In this application, I've created a QueryTask to a specific layer (countries) in an ArcGIS service (world). The QueryTask has a Query child specifying that the geomerty of the features should be returned, in addition to all the attribute fields. The application UI consists of a side by side map and data grid, and below those is a text field to define a "where" clause, and a button to execute the query. The map has two layers, a dynamic layer to show the world and a graphic layer to show the selected countries. When a user clicks the Query button, the Query "where" attribute is populated (via binding) with the textfield content and the QueryTask is executed. Upon a successful result, the graphic layer will be populated with new graphic objects and the data grid will contain new rows.

The binding "magic" is in the following two lines:

graphicProvider="{queryTask.executeLastResult.features}"

dataProvider="{queryTask.executeLastResult.attributes}"

where the graphic layer will be populated with the query task last result features, and the data grid will be populated with the query task last result attributes. Pretty cool, eh ? And the best part...no ActionScript :-)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:esri="http://www.esri.com/2008/ags"
xmlns:sample="com.esri.ags.sample.*"
layout="absolute"
>
<esri:QueryTask id="queryTask" url="http://tejas:8399/arcgis/rest/services/maps/world/MapServer/1">
<esri:Query id="query" returnGeometry="true" where="{where.text}">
<esri:outFields>
<mx:String>*</mx:String>
</esri:outFields>
</esri:Query>
</esri:QueryTask>
<mx:Panel width="100%" height="100%">
<mx:HBox width="100%" height="100%" horizontalGap="0">
<esri:Map id="map">
<esri:ArcGISDynamicMapServiceLayer
url="http://tejas:8399/arcgis/rest/services/maps/world/MapServer"/>
<esri:GraphicsLayer id="graphicsLayer"
graphicProvider="{queryTask.executeLastResult.features}">
<esri:symbol>
<esri:SimpleFillSymbol color="0xFF0000"/>
</esri:symbol>
</esri:GraphicsLayer>
</esri:Map>
<mx:DataGrid width="100%" height="100%"
dataProvider="{queryTask.executeLastResult.attributes}">
<mx:columns>
<mx:DataGridColumn headerText="Name" dataField="NAME"/>
<mx:DataGridColumn headerText="FIPS" dataField="FIPS_CODE"/>
<mx:DataGridColumn headerText="Area" dataField="AREA"/>
</mx:columns>
</mx:DataGrid>
</mx:HBox>
<mx:ControlBar>
<mx:TextInput id="where" text="FID < 10"/>
<mx:Button label="Query" click="queryTask.execute()"/>
</mx:ControlBar>
</mx:Panel>
</mx:Application>

5 comments:

CheckMate808 said...
This comment has been removed by the author.
CheckMate808 said...

for some reason i cant place a query inside of the queryTask tag without an error?

thunderhead said...

Old code :-( In the new version queryTask.execute takes a query as an argument.

CheckMate808 said...

well, that's alright.. I was able to use it anyway to figure out things.

Unknown said...

you have the newer code posted, or at least the fixed setion? I am running into the same error.

thx