In this tutorial you will create a basic Flex mobile application that displays a basemap. Before doing this, you will need to make sure you have the following:
Create a new mobile project
The following steps illustrate what you will need to do to create a new mobile project using Flash Builder 4.5.1 or higher. In this specific tutorial, we are targeting an Android device. The steps provided below will work the same regardless of whether you choose to target an Android device or iOS.
- In Flash Builder, click File > New > Flex Mobile Project.
- Specify a project name, e.g. MyBaseMap and a project location.
- Specify the Flex SDK you configured to embed the Adobe AIR SDK into Flex SDK, click Next. More information on how to do this can be found here.
If this SDK is not listed, click the Configure Flex SDKs... link and browse to the location of the newly configured SDK.
- Under the Mobile Settings tab, check Google Android and keep the default settings and click Next.
- (Optional) click the Permissions button and you can specify which permissions are allowed on the device at runtime. For the purpose of this tutorial, keep the defaults, click Next.
- Under the Server Settings tab, keep all defaults, click Next.
- Under the Build Paths tab, click Add SWC... and browse to the location of the downloaded Flex API. Keep the defaults for folder, file, and ID names.
For the purpose of this tutorial, we are not changing the Application ID. This is not practical in a real-world deployment scenario. Here, you would want to give your Application ID a fully qualified domain name, e.g. com.mydomain.myApp.
Currently, the app does not contain anything. In this next section we will provide the code to add a simple basemap to the app.
In Flash Builder, make certain the MyBaseMapHomeView.mxml (or whatever name you called your application) tab is active and the file is visible.
Inside the Editor view, add the following code and save.
<?xml version="1.0" encoding="utf-8"?>
title="A tiled map service">
<esri:Extent xmin="-19325128" ymin="-10948057"
Run the app
Now that you added the code portion to your project, you are ready to run it. Although it is always preferable to debug and test your app on an actual physical device, it is possible to test it out directly on your desktop. Flash Builder provides easy functionality that makes this possible. The steps below go over this:
- With the MyBaseMapHomeView.mxml (or whatever name you called it) open and active, click the Run button.
- In the Run Configurations dialog box, make certain that Google Android is the target platform.
- Do not change the AppID.
- Under the Launch method dropdown, select On AIR Simulator.
- Under the Launch Configuration dropdown, select a device. E.g. Motorola Droid, click Apply and Run.
The result should display similar to the screen capture below.
If using version 3.4 or above, you may receive an error upon running, Class mx.controls:: DateField could not be found. Class com.esri.ags.skins.fieldClasses::CalendarField could not be found . If this occurs, please see Mobile applications with Flex and/or the section discussing it in the FAQs.
The steps provided above are given as a basic tutorial and are not all-encompassing. For further information, please refer to Adobe's document for developing mobile applications.
The ArcGIS API for Flex provides mobile samples that demonstrate some of the above functionality. If you wish to explore these samples, please see the ArcGIS API for Flex samples on GitHub.
If you are using certain mx components, you will need to include the mx.swc among the project libraries. You might also want to include sparkskins.swc. See Mobile applications with Flex for more information.
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.