Lab 3: ArcGIS Flex Viewer

Introduction:

This week’s work is designed to provide an overview of and introduction to the ArcGIS Application Builder for Adobe(now Apache) Flex.  Flex is a software development kit for rich web applications; it creates extensively cross-platform services (including Android and iOS) and since donation to the Apache Foundation it is open-source.  The ArcGIS App Builder uses Flex for an application programming interface that facilitates a variety of web mapping services.  By the time the lab is complete, I will have developed a web application with the Flex App Builder and manipulated an application and some widgets with XML config files. 

fig 1: ESRI does many things, one of which is maintain the ArcGIS Viewer for FLEX, which will be used in this project. 

Methods:

Parts 1 and 2: “ArcGIS Flex Application Builder Interface”

This half of the lab consists of working in the ArcGIS for Flex API.  First, we are guided through production of a web application and then we are set loose to create our own, including pop-ups and widgets.

             Sections 1 and 2: Adding basemaps, operational layers, and configuring pop-ups

After completing laying the groundwork for this project by connecting the computer to the department’s virtual server, the first task is to set up the API’s web server base folder, which in this instance will not coincidentally be the department server.  After accomplishing this task, the API was used to develop two mapping applications.

The order for building the application is not necessary, but the first step taken in this assignment was to assign basemaps and operational layers.  The operational layers that were used were found in the ArcGIS Online “sample” servers, although the data could have been hosted anywhere in the web; after adding operational layers, pop-ups were configured for readability and functionality (in the “configure layer” window , see fig. 2).  Next the map extent was set with the viewer provided in the interface.

figue 2: this edit button opens the "configure layer" window, in which pop-ups can be modified.

In the “Widget” tab of the viewer, “Draw”, “Location”, “Print”, “Query”, and “Search” widgets were added across the two applications developed.  Some of these widgets will be configured later in the exercise.  The “Layout” tab was left with all of its defaults for the time being, so long as they produce an aesthetically pleasing interface.  In the “Design” tab, a title and subtitle were finally applied to the maps and some of the colors for the app were modified because let’s face it: cartographers like to play with colors.

The widgets were finally modified in Section 2 of the lab by navigating the API’s “Widgets” tab in more detail.  In the “locator” widget, which finds addresses or lat/long coordinates from a click, the match score was altered and then returned to the default settings, in order to explore the potential variance in results given different match scores.  The “Draw” widget was then modified to show end users distances along features that they may form on the map in the application.  For practice, the icon for “Draw” was also modified.

 

Part 3: “Configuring ArcGIS Flex Application Builder XML Config Files”

This, the final part of the lab, configures some files of the App Builder and customizes widgets using magic eXtensible markup language (MXML) config files.  This will include customizing a widgets and testing the work to ensure end-user functionality.

 

Section 1: Adding and configuring a custom widget through the config XML file

In this section, the “Chart” widget will be given a new icon and the types of charts provided will be manipulated through the XML configurations.  First, the widget was built in notepad++ using MXML (fig 3).  It is designed to use the draw tool to select data displayed in a map viewer, and then parse that data in a chart or graph to the end user in the map viewer itself. Changing the icon was simple: the .png image file was provided in the department server as when the app’s config files were modified to add the custom widget, the image was linked in the configuration file.

figure 3: chart widget code

 

Section2: Adding and configuring a custom widget directly in the application builder

This week’s work is designed to provide an overview of and introduction to the ArcGIS Application Builder for Adobe (now Apache) Flex.  Flex is a software development kit for rich web applications; it creates extensively cross-platform services (including Android and iOS) and since donation to the Apache Foundation is open-source.  By the time the lab is complete, I will have developed a web application with the Flex App Builder and manipulated an application and some widgets with XML config files.

           

Results:
           

figure 4: Part 1, Building Apps in the API

           Fig 4 is the end product of the first section of the lab.  The basemap is a topographic service provided by ESRI and the operational layers (also ESRI) are for Kansas petroleum development.  Open are a pop-up and the draw widget.  Notice the artful use of Trajan font, my personal favorite in serif.



figure 5: Customizing a Widget

           Fig 5 displays the use of the new widget: several blocks were selected with the draw tool and then used to create a chart, in this case showing population and parced by age.

figure 6: Customizing the Custom Widget

          Figure 6  shows how a bar graph might appear in place of the pie chart displayed in fig 5. A line and a column chart widget were also used.  It is more functional to use the GUI than the XML config files to decide on what an end user wants, however.

Sources:

ArcGIS Sample servers 1,2, and 6 (http://sampleserver1.arcgisonline.com/ArcGIS/rest/services) 2013.

Processed by Dr. C. Wilson. 2012.

Titles, fig 3 and organisation were pulled directly from the lab assignment posted by the miraculous Prof. Wilson.