Mobile applications with Flex

Version 3.7

Creating mobile applications for iOS and Android is easy with Adobe Flash Builder 4.5.1 or later. Esri has supported Flex mobile applications since the release of the 2.4 ArcGIS API for Flex. Use version 3.0 or later of the ArcGIS API for Flex for best experience (which requires Flex SDK version 4.6.0 or later). For more information about delivering native experiences on mobile devices using Flex, see the Adobe Mobile FAQ.

The API samples includes multiple Flex mobile samples. Below are the steps to get one of those samples running. You can access the samples from GitHub.

  1. Open Adobe Flash Builder, choose File > Import Flash Builder Project.
  2. Select Project folder > Browse and navigate to the downloaded project folder.
  3. Add the API Library to the project through Project > Properties > Flex Build Path > Library Path > Add SWC and locate the agslib-3.x-201x-xx-xx.swc library file.
  4. Add the following libraries to the build library path:${PROJECT_FRAMEWORKS}/libs/mx/mx.swc and ${PROJECT_FRAMEWORKS}/libs/sparkskins.swc.
  5. Run the application using a simulator or on a physical device. Using the Run Configurations (Run > Run Configuration) you can add a Mobile application and define the Launch Method as appropriate.


There is a known-limit when working with pop-up windows in mobile applications created with version 3.1. If doing so, please note that you will need to either: Add both mx.swc and sparkskins.swc to your project, or update PopUpRendererSkin and remove references to the RelationshipInspector.


If working with version 3.4 or above, you will come across errors unless you implement one of the following two options:

1. Add both the following libraries to the build library path:${PROJECT_FRAMEWORKS}/libs/mx/mx.swc and ${PROJECT_FRAMEWORKS}/libs/sparkskins.swc

2. Or, if you do not wish to go with the first option, you will need to a modify the AttributeInspectorSkin so that it no longer references CalendarField and the MemoField. Please see the snippet below demonstrating this.

AttributeInspectorSkin using a TextField instead of CalendarField and MemoField.

<fx:Component id="dateField">
   <!--<fieldClasses:CalendarField dateFormat="shortDate" useUTC="false"/>-->
   <fieldClasses:TextField minWidth="200"/>

<fx:Component id="memoField">
   <!--<fieldClasses:MemoField minWidth="200"/>-->
   <fieldClasses:TextField minWidth="200"/>

After modifying this skin, you will also need to override two styles in defaults.css. This file must be in the root of the src folder.

Modified defaults.css file that references the customized AttributeInspectorSkin.

@namespace esri "";

esri|AttributeInspector, esri|RelationshipInspector #attributeInspector
   skinClass: ClassReference("skins.AttributeInspectorSkin");