Lab 4: ArcGIS for FLEX API

Introduction:

The lab assignment for this week will use the Adobe Flash (née Flex) Builder which uses Apache (formerly Adobe) Flex to build web applications in this IDE.  Adobe Flash Builder is an integrated development environment (IDE), which is a rich development environment that can be used to develop programs. IDE's build and edit source code for applications and essentially serve as programs which make development easier and more efficient.  Flash Builder, like other IDE's, contains debuggers, compilers, source code editors, syntax highlighting and other useful tools which make programming much much easier.  Flash Builder (fig 1) is an extremely common way to build applications which use ActionScript, which is Adobe's object-oriented language from which Flash is built.  We will be using XML to serve existing data.
Thus, this week’s work will comprise a good deal of coding.  Upon completion, I will have learned how to create Flex projects in Flash Builder, set an SWC library, and write then run code that uses data served by ESRI to create interactive web maps utilizing the event handler graphic listener for additional functionality.

fig 1: the original fb: Flex Builder. Now Flash Builder.

Methods:

This part of the lab introduces the Flash Builder IDE by teaching how to create projects, set libraries, write, save and run code.  The final product will be XML code which opens a tiled map service.

First, a project is created that will house all of the work relating to this effort.  In the FB 4.7, this is accomplished through a dialogue opened from FileàNewàFlex Project.  A project name and file location is set, then the app type (Adobe Flash or AIR, i.e. web or desktop), and finally SDK version.  SDK’s are Software Development Kits: sets of tools for software development such as APIs and debuggers that in this case are presented in the format of the IDE.  The SDK required for the most recent ArcGIS Flex API is Flex 4, this is the default in Flash Builder.

The open project dialogue also guides users through server type, compiler filepath, library component settings, and web output URL which were left at their default settings before initializing the project.

Next, the API library was set in the properties menu accessed by right-clicking the project in the “Package Explorer” navigation bar.  In order for the code that will be written to work (as I discovered the difficult way), the project API needs to know what to do with the specialized code being implemented.  So, the library needed to be set in the project properties. This was the first goal of the lab.

fig 2: Completed Wisconsin Transportation Web Map

             The second goal is to import a previously designed web map, hosted on ArcGIS Online, to the script and display it. This was done by using the .createMapById method on the webMapUtil class, imported from the API, along with the map ID provided by ArcGIS Online.

fig 3:  the STATE_NAME variable above was originally South Carolina, and had to be set to Wisconsin for the window to work properly

Third, and most interestingly, we were tasked with applying an existing mouse-over action to the Wisconsin webmap.  This action was handled by a graphic listener built by ESRI and provided by Professor Wilson.  The only editing that had to be done for this markup to work was some changes of references to "South Carolina" to "Wisconsin" where the extent of the viewer is defined (see fig 2).

Conclusions:
          Ultimately, this lab was pretty short and straightforward. It familiarized the students with the use of Flex builder for web mapping, and allowed us to play around with a few of its capabilities.