Flex API – Some Tips and Tracks

I have been working with ESRI Flex API for almost around one year. I would like to share some  basics of Flex API along with tips and tracks.  If you are beginner then I’m sure this post will helps you lot.

Here is link to see the list of Web Sites developed using ESRI Flex API.  If you are coming from  Web ADF,  Flex API  is really damn cool.  We can develop light-weight to medium level application using the Flex/SL/JS API.  You cannot do editing functionality. Flex API V 1.2 comes up with integration of MS Virtual Earth.

Start with Flex Viewer sample. This is the ideal place to begin with, where you start widget based programming model. The help document comes with Flex viewer clearly explains and search on Google for design patterns. There are lot of heated discussions about frameworks and patterns. I leave to reader for making his/her own choice.

  1. When you start developing the application(non Flex viewer), one of the must requirement is TOC control. By default there is no in-built TOC control.  You can develop your own custom TOC otherwise you can download this sample from ESRI ArcScripts site and make use of it.
  2. Here is sample for Overview Map . Click here
  3. Sometimes we may want to design a Map control with rounded corners than rectangular one.  Here is sample code

Here’s a way to use a mask to create rounded corners:
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml&#8221;
xmlns:esri=”http://www.esri.com/2008/ags”&gt;
<mx:Canvas width=”100%” height=”100%”>
<esri:Map level=”1″ mask=”{maskCanvas}” cacheAsBitmap=”true”>
<esri:ArcGISTiledMapServiceLayer
url=”http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer”/&gt;
</esri:Map>
<mx:Canvas id=”maskCanvas” width=”100%” height=”100%” cacheAsBitmap=”true”
backgroundColor=”#FF0000″ borderStyle=”solid” cornerRadius=”15″/>
</mx:Canvas>
</mx:Application>

  1. If you are working with 9.2, still you can use Flex : While 9.2 isn’t supported by the Flex and JavaScript APIs out-of-the-box, you can create the map tiles in 9.2 and subsequently use the tiles in the Flex and JavaScript APIs by extending the TiledMapServiceLayer  to be able to connect to your specific service.  Here is link to study more. if you want do some geoprocessing and querying you have to use 9.3 version.
  1. You may want to some specific geoprocessing in Asynchronous mode, so that user can browse the application. Once processing is done, you can  work with results in asynchronous mode. Here is sample to start with
  2. Some times you may want functionality to save the map at client side.  File reference object is not available in Flash 9.x version. If you update with Flash 10.x you can do this pretty easily.                                                                Note1 : Do change the “Require Flash Player version” to 10 0 0 under the Flex Compiler section of your project properties and check your Flex SDK version it should be 3.2 and above
  3. We may require to zoom to set features extent after performing query.  This can easily done rather than looping through the record set and computing minx and max x

// zoom to extent of all features
var unionedExtent:Extent;
var multipoint:Multipoint = new Multipoint();

for (var j:Number = 1; j < resultCount; j++)
{
multipoint.addPoint(MapPoint(event.findResults[j].feature.geometry));
}
unionedExtent = multipoint.extent;
map.extent = unionedExtent.expand(1.1); // zoom out a little

4.  When you are querying using REST API and returning JSON response there may be chance that Error:  Unexpected I encountered.  First  check your data (i.e. value from the record). if it contains any special character like double quotes  then REST API throws error . ESRI  REST team is aware of this issue and they will be fixing it soon. One workaround would be to remove all double-quotes from your data (if possible). Another option may be to escape the quotes in your data.

5.  For parsing JSON response you need to download as3corelib.  You can use the JSON decoder from:
http://code.google.com/p/as3corelib/ to turn the JSON string into a Object.
e.g. var obj1:Object = JSON.decode(result);

6.  Another combining Dynamic and Tiled Services [Multi-layer cache] in LiveMap Widget for flex viewer sample

From the REST documentation:
“Note that multi-layer caches are only accessible in REST via export, and these requests are treated as a dynamic map service. Tile access is not supported in REST for multi-layer caches.”

http://resources.esri.com/help/9.3/arcgisserver/apis/rest/index.html?mapserver.html

7.  If you want add Identify Results into data-grid here is code snippet

var graphic:Graphic;
var myAtts:Object;
var myAc:ArrayCollection = New ArrayCollection();

for each (var result:IdentifyResult in event.identifyResults){
  myAtts=result.feature.attributes;
  myAc.addItem(myAtts);
}
dg.dataProvider = myAc;
Since its already getting late, I will post rest of the tips/tracks as second part, please bear with
me. Please write your queries/comments/suggestion.

Have a great day!

Advertisements

6 Responses to “Flex API – Some Tips and Tracks”

  1. Ming Says:

    If I want add editing function in Flex API V 1.2, any suggestion? Like can I load ESRI.ArcGIS.ADF.ArcGISServer.Editor in Flex?

    Thanks in advance!

  2. iamlaksh1 Says:

    Hi

    There is no editing functionality in Flex API.

  3. trilok Says:

    Hi

    Though you have already explain,Please help me understand as i am new to flex and esri map developement,Is it possible to load a map from ESRI server or any other private map server(with proper authentication) and edit map with our own points and save it back,Please reply

  4. Pramod Says:

    I M working on esri maps using shape file,
    when i click on particular country, that country extent should be applied to the map,so how can i change the zoomeffect for it.

  5. sreeharikm Says:

    I need to add a feature layer as graphic layer with attribute. can u plz give the code for that…

  6. Abhijat Says:

    I need to set the extent of the map to the loaded shape file extents. How to achieve this. I am using Flex.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: