Post on 09-Jan-2019
GEOG677 – Internet GIS University of Maryland at College Park
1
Lab Assignment 6 – Flex API
Due Date: 01/31/2014
Overview
Adobe Flex is a software development kit (SDK) released by Adobe Systems for the
development and deployment of cross-platform rich Internet applications (RIA) based on the
Adobe Flash platform. Flex applications can be written using Adobe Flash Builder or by using
the freely available Flex compiler from Adobe.
Flex is becoming very popular in Web application development due to its superior user
experience. ArcGIS API for Flex enables you to build dynamic RIAs on top of ArcGIS Server.
The interactive and expressive Web applications leverage ArcGIS Server resources (e.g. maps,
locators, feature services and geoprocessing models) and Flex components such as grids, trees
and charts.
This lab assignment is designed to help you become familiar with different options for
developing Web GIS applications based on Flex.
Specifically, this assignment is divided into three parts:
Part I: ArcGIS API for Flex
Part II: ArcGIS Viewer for Flex
Part III: ArcGIS Viewer for Flex Application Builder
Part I: ArcGIS API for Flex
The ArcGIS API for Flex is built on the Adobe Flex framework, which allows the use of rich
Flex components such as data grids, trees, panels, and charts. With the ArcGIS API for Flex,
users can develop custom applications by integrating ArcGIS Server maps and web services
inside Adobe Flash Builder. You will be able to use maps and tasks from ArcGIS Server in your
Web applications. For example:
Display an interactive map containing your own data.
Execute a GIS model on the server and display the results.
Display your data on an ArcGIS Online basemap.
Search for features or attributes in your GIS data and display the results.
Locate addresses and display the results.
Edit your data (if published as a feature service)
Create mashups (information combined from multiple Web sources).
The latest version is 3.6 - https://developers.arcgis.com/flex/ which works great with the Adobe
Flex SDK 4.6 or later.
GEOG677 – Internet GIS University of Maryland at College Park
2
The general steps of building a Web application of ArcGIS API for Flex include:
1. Download and install Adobe Flash Builder
a. The most popular Flex development environment is Adobe Flash Builder. The
ArcGIS API for Flex is compatible with all versions of Flash Builder 4.6 and
later. The latest version is 4.7. You can download and install either one although I
prefer 4.7.
V4.6:
http://www.adobe.com/support/downloads/thankyou.jsp?ftpID=5517&file
ID=5536
V4.7: http://www.adobe.com/products/flash-builder.html (Click on “Try”
next to the “Buy” button.)
b. Flash Builder is not free, but the trial version is free to use for 60 days.
c. The download needs login.
2. Download and unzip the ArcGIS API 3.6 for Flex file.
a. http://links.esri.com/flex-api/latest-download
3. Using Flash Builder to create a Web application
4. Copy/paste/modify the sample codes from ESRI Web site
a. https://developers.arcgis.com/flex/sample-code/using-samples.htm
5. Compile the code
6. Test/modify the code
7. Export release build
8. Publish the Web application to a server such as TerpConnect.
Note:
Depending on the configurations on your computer, you may need to enable Internet
Information Services (IIS) on your computer or the Web server.
Guide on how to install IIS: http://www.iis.net/learn/install/installing-iis-7/installing-iis-
on-windows-vista-and-windows-7
For more information about how to work with the ArcGIS API 3.6 for Flex, visit
https://developers.arcgis.com/flex/guide/getting-started.htm
To demonstrate the specific procedures of creating an ArcGIS API for Flex, I will use an
example (see below) to explain the details, especially to point out some better practices. Then,
you will create your own application. (If you are already familiar with ArcGIS API for Flex, you
can jump to the end of this section to look for the requirements/tasks for this exercise.)
The example -
http://terpconnect.umd.edu/~jma3/GEOG677/W2013/Flex//API_for_Flex/Flex_API_demo_2013
.html
GEOG677 – Internet GIS University of Maryland at College Park
3
Step 1: Downloading, Installing, and Configuring Flash Builder
First, download Adobe Flash Builder 4.6 or 4.7. You will need to register first to be able to
download.
Unzip and install Flash Builder. This software will take a lot of space on the harddrive (~1.9
GB). So, make sure there is enough storage space on your computer.
Once you finished the installation, you can create a new Flex project. (There are different types
of projects that can be created. So, make sure you choose the right type of project.)
In the New Flex Project dialog, assign your project a name and choose a folder for the project. It
is a good practice that you organize your project files in a specific folder that you have created.
GEOG677 – Internet GIS University of Maryland at College Park
4
Step 2: Downloading ArcGIS API 3.6 for Flex Zip File
First, go to this Web site - http://links.esri.com/flex-api/latest-download to download ArcGIS
API 3.6 for Flex which is a zipped file package.
Unzip the files in an appropraite folder.
This file contains the ArcGIS API for Flex library (.swc), a samples directory, and a readme file.
Be sure to either store the .swc file in the libs folder in your project or specify the library path in
Adobe Flash Builder. To specify the path in Flash Builder, take the following steps:
1. Right-click the project and click Properties. Alternatively, on the file menu, go to Project
> Properties.
2. Click Flex Build Path.
3. Click the Library Path tab.
4. Click the Add SWC button.
5. Browse to the .swc file you unzipped earlier. (This file can be found within the unzipped
folder - \arcgis_api_for_flex_3_6\ArcGIS_Flex\libs)
GEOG677 – Internet GIS University of Maryland at College Park
5
Step 3: Writing, Compiling, Testing, and Modifying Code
Open the default mxml (named after your project) in the default package. Now, you are in the
Flex environment.
You can create an application by writing code to access the ArcGIS Server resources. For
example, you can write the following source code to access the map service that you created in
Lab 4.
GEOG677 – Internet GIS University of Maryland at College Park
6
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:esri="http://www.esri.com/2008/ags"
pageTitle="Example #1">
<esri:Map>
<esri:ArcGISTiledMapServiceLayer
url="http://129.2.24.54:6080/arcgis/rest/services/Geog677/Map_Caching_demo/M
apServer" />
</esri:Map>
</s:Application>
Notice that I am using the cached (tiled) map service layer. It must match with the specific
ArcGIS API for Flex compnant that you are using. You can use the other component
ArcGISTiledMapServiceLayer if you replace the map service layer with an un-cached one.
The code is in XML format. Tag <esri:Map> defines a map display component, in which Esri is
a namespace.
Now, you can click Run button to “preview” the result displayed in a Web browser. If there is no
error, you should be able to see the result.
Note:
Depending on the programs installed on your computer, you may be required to install
the latest Flash Player.
GEOG677 – Internet GIS University of Maryland at College Park
7
For now, this Web GIS application is very simple in terms of functionality, features or tools. To
improve it, you can go to the ESRI Web site to find the samples-
https://developers.arcgis.com/flex/sample-code/using-samples.htm
All of these samples include a live application and also the source code. You can copy/paste the
code into your project in Flash Builder. You can make necessary changes to customize it. Then,
you will compile the code to create your own application.
There are many things that you can customize the sample source code:
Adding/changing map service layer
Re-designing the layout
Adding new tools, features, tasks, or functions.
For example, suppose you are interested in the sample (in “Tools” category) below:
You can copy/paste the source code to replace the code in Flash Builder environment. You can
make some changes such as using your own map service.
GEOG677 – Internet GIS University of Maryland at College Park
8
Now, you can cick the Run button to see how the result displays in a Web browser.
Obviously, you can add more code from other samples to create a much more sophisticated and
interactive Web appplication. Especially, you might want to add those common tools such as
Query, Find & Identify, Locator, etc.
You will need to constantly test and modify the code in order to make it work perfectly.
So far, your project is still on your local computer. To make it available through the internet, you
need to deploy it to a web server.
Step 4: Deploying the Application
After you have compiled and run the code, a bin-debug folder will be generated within your
project folder. The HTML file generated by Flash Builder is ready to display your flex app in
browser. However, it is in debug version. To optimize the deployment, you need to take more
steps below.
Now, you're ready to deploy an application, use the Adobe Flex Export Release Build process to
create an optimized release-quality version of the SWF file as following:
1. In Flash Builder, click Project > Export Release Build from the main menu.
2. Click Finish.
GEOG677 – Internet GIS University of Maryland at College Park
9
Step 5: Publishing to the Web Server
The last step will be to upload the files to the Web server and publish the Web application.
You can use WinSCP to upload the files within the “bin-release” folder from your computer to a
folder on the Terpconnect server. It’s always a good practice to use folders to manage different
projects.
GEOG677 – Internet GIS University of Maryland at College Park
10
Your tasks:
You need to create a Web GIS application using ArcGIS API 3.6 for Flex by practicing
those steps described earlier. You can use these two examples as a reference even though
your own application will be different –
o http://www.terpconnect.umd.edu/~jma3/GEOG677/Demo_Flex/Felx_demo_quer
y.html
o http://terpconnect.umd.edu/~jma3/GEOG677/W2013/Flex//API_for_Flex/Flex_A
PI_demo_2013.html
Your application should have at least two features/tools. Especially, you might want to
add those common tools such as Query, Find & Identify, Geocoding, etc.
Deploy the web application by uploading the files to Terpconnect server.
Be creative!
Part II: ArcGIS Viewer for Flex
The ArcGIS Viewer for Flex is a ready-to-deploy configurable client application built with the
ArcGIS API for Flex. Essentially it is a template for ArcGIS API for Flex. The idea to reduce as
much programming as possible so that users can develop great Flex applications without
involving much coding. It is designed so users can configure and deploy a web mapping
application easily and quickly.
You can extend its functionality with custom widgets available from the Esri community, or
create custom widgets yourself with the ArcGIS API for Flex.
The ArcGIS Viewer for Flex is ideal if you want more control over the look and feel of your
application. It is also a good solution if you want to host your own Web mapping applications.
The general steps of using ArcGIS Viewer for Flex include:
Step 1: Download the ArcGIS Viewer 3.6 for Flex
Go to this Web site to download ArcGIS Viewer 3.6 for Flex -
http://links.esri.com/flex-api/latest-download
Note: For this part of exercises, you will download the compiled version.
GEOG677 – Internet GIS University of Maryland at College Park
11
Step 2: Unzip the file to save on your computer.
Step 3: Copy the folder - “flexviewer” into this folder - "C:\inetpub\wwwroot” on your own
computer.
Note:
Depending on the configurations on your computer, you may need to enable Internet
Information Services (IIS) on your computer or the Web server.
Guide on how to install IIS: http://www.iis.net/learn/install/installing-iis-7/installing-
iis-on-windows-vista-and-windows-7
When trying to save a file under C:\inetpub\wwwroot, you might get the following error,
especially on Windows 7 and Windows Vista: "You don't have permissions to save in this
folder". This happens even though you are an administrator on the machine. This is due to
increased access control (aka UAC or User Access/Account Control) on Windows 7 (and Vista)
when trying to save files in protected folders (like C:\inetpub\wwwroot).
Right-click on the folder and select Permissions.
Go to the Security tab.
Note that Users have only read rights. Change this to Full access and then the warning
message will disappear.
GEOG677 – Internet GIS University of Maryland at College Park
12
Step 4: Test the ArcGIS Viewer for Flex application
The generic URL should be something like this:
http://<machinename>/flexviewer/index.html
When testing on your own computer, the URL is - http://localhost/flexviewer/index.html
(It should be displayed on the Web browser.)
From the default web application, you can see it has a very good layout and have some tools
already. It will save a lot of time simply customizing this application to create your own.
Step 5: Configuring the ArcGIS Viewer for Flex
This step is the most important part. This is where you need to modify or customize the default
ArcGIS Viewer for Flex. For example, you can use your own map services or add widgets
(features/tools).
Navigate to the flexviewer folder location on your machine – “C:\inetpub\wwwroot\flexviewer”.
Expand the folder to view its contents. The flexviewer folder contains:
apps folder - Various samples including localized configuration files.
assets folder - Contains resources such as icons and graphics used by the application.
widgets folder - Contains widgets used by the application.
popups folder - Configuration to show key-value styled tables display a feature's attribute
information in the form of a table showing a field name with its associated value.
GEOG677 – Internet GIS University of Maryland at College Park
13
HTML wrapper pages: default.htm and index.html (server defaults to one of them when
not specifying file name).
The main application file: index.swf.
Localized HTML wrapper pages: index_{xx}.html.
Two XML configuration files for the Viewer application: config.xml and config-all.xml.
Esri license agreement document: readme.txt.
Other supporting files for Flash applications: *.swz, *swfobject.js,
playerProductInstall.swf.
Open the file – “config.xml” with a text editor such as Notepad. It is always a good practice to
make a copy as a backup.
GEOG677 – Internet GIS University of Maryland at College Park
14
Now, I started to modify and change the titles, logo, style, initial extent, operational layer, and
add widgets, etc. (The changes are highlighted in yellow).
<?xml version="1.0" ?>
<!--
////////////////////////////////////////////////////////////////////////////////
//
// Read more about ArcGIS Viewer for Flex - http://links.esri.com/flexviewer
//
////////////////////////////////////////////////////////////////////////////////
-->
<configuration>
<title>Demo: ArcGIS Viewer for Flex </title>
<subtitle>1/23/2014</subtitle>
<!-- I uploaded my own logo into the image subfolder within the flexviewer folder -->
<logo>assets/images/horse_small.png</logo>
<style>
<colors>0xFFFFFF,0x333333,0x101010,0x000000,0xFFD700</colors>
<alpha>0.8</alpha>
</style>
<!-- replace the following url with your own geometryservice -->
<geometryservice
url="http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer" />
<!-- UI elements -->
GEOG677 – Internet GIS University of Maryland at College Park
15
<widget left="10" top="50" config="widgets/Navigation/NavigationWidget.xml"
url="widgets/Navigation/NavigationWidget.swf"/>
<widget right="0" bottom="0" config="widgets/OverviewMap/OverviewMapWidget.xml"
url="widgets/OverviewMap/OverviewMapWidget.swf"/>
<widget right="20" top="55" config="widgets/MapSwitcher/MapSwitcherWidget.xml"
url="widgets/MapSwitcher/MapSwitcherWidget.swf"/>
<widget left="0" top="0"
config="widgets/HeaderController/HeaderControllerWidget.xml"
url="widgets/HeaderController/HeaderControllerWidget.swf"/>
<map wraparound180="true" initialextent="-8957000 4611000 -8224000 4840000"
fullextent="-20000000 -20000000 20000000 20000000" top="40" addarcgisbasemaps="true">
<operationallayers>
<layer label="Maryland" type="tiled" visible="true" alpha="1.0"
popupconfig="popups/PopUp_MD.xml"
url="http://129.2.24.54:6080/arcgis/rest/services/Geog677/Map_Caching_demo/MapServer"/>
<!-- <layer label="Demographics" type="tiled" visible="false" alpha="0.5"
url="http://server.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Median_House
hold_Income/MapServer">
<sublayer id="1"
popupconfig="popups/PopUp_Demographics_BlockGroups.xml"/>
<sublayer id="2" popupconfig="popups/PopUp_Demographics_Tracts.xml"/>
<sublayer id="3" popupconfig="popups/PopUp_Demographics_Counties.xml"/>
<sublayer id="4" popupconfig="popups/PopUp_Demographics_States.xml"/>
</layer>
-->
</operationallayers>
</map>
<!-- widgets organized into widget containers that manage close/open etc -->
<!-- supported layout property options: horizontal(default)|float|vertical|fix-->
<widgetcontainer layout="float">
<widget label="Bookmarks" left="430" top="90"
icon="assets/images/i_bookmark.png"
config="widgets/Bookmark/BookmarkWidget.xml"
url="widgets/Bookmark/BookmarkWidget.swf"/>
<widget label="Search" left="80" top="280"
icon="assets/images/i_search.png"
config="widgets/Search/SearchWidget_MD.xml"
url="widgets/Search/SearchWidget.swf"/>
<!--
<widget label="Earthquakes (GeoRSS)" left="410" top="280"
icon="assets/images/i_rss.png"
config="widgets/GeoRSS/GeoRSSWidget.xml"
GEOG677 – Internet GIS University of Maryland at College Park
16
url="widgets/GeoRSS/GeoRSSWidget.swf"/>
-->
<widget label="Draw" left="60" top="400"
icon="assets/images/i_draw2.png"
config="widgets/Draw/DrawWidget.xml"
url="widgets/Draw/DrawWidget.swf"/>
<widget label="Print" left="390" top="400"
icon="assets/images/i_print.png"
config="widgets/Print/PrintWidget.xml"
url="widgets/Print/PrintWidget.swf"/>
<!--
<widget label="My first widget"
icon="assets/images/i_widget.png"
config="widgets/Samples/HelloWorld/HelloWorldWidget.xml"
url="widgets/Samples/HelloWorld/HelloWorldWidget.swf"/>
-->
</widgetcontainer>
</configuration>
Save the Config.xml file.
Now, you also need to customize the associated widgets (.xml files), for example, Bookmarks,
PopUp, and Search.
For the PopUp widget, the original file name in Config is “PopUp_Fires.xml”. I did two changes:
(1) I changed the file name to “PopUp_MD.xml”. (Make sure you make a copy of the
original file before customizing it.)
(2) Then, I customized the code within this new XML file based on my needs.
GEOG677 – Internet GIS University of Maryland at College Park
17
Next, I customized the Bookmark widget.
From the folder – “widgets\Bookmark”, I open the BookmarkWidget.xml file using Notepad.
(Again, before doing that, you should save a copy to back up.)
I modified the code by creating various map extents of my own interest.
It can be tricky and time-consuming to find out the appropriate coordinates to define the spatial
extents. So, I would recommend you to use this tool from the ESRI web site. It is called Extent
Helper - http://help.arcgis.com/en/webapps/flexviewer/help/index.html#//01m300000012000000
From there, you can zoom in/out and pan to different areas of your interest. Then, you can find
out the coordinates that you need to customize the bookmarks.
I also needed to customize the Search widget. Again, I did two changes:
I changed the widget name to “SearchWidget_MD.xml”.
Then, I customized the code within.
GEOG677 – Internet GIS University of Maryland at College Park
18
To customize the code for this specific widget, you must know your data very well. You need to
open the attribute table of the original data used for the map service. Then, you can decide which
layer or field to create the search query. (I will not go into the details. You will need to try it
yourself when you work on this assignment.)
After customizing the config.xml file and also other associated .xml files, you can save them.
Then, you can try to re-load this web application: http://localhost/flexviewer/index.html
Note:
It is likely the map does not show any update even after you refresh the Web browser.
This may be caused by the memory cache.
You can clear or remove the cache by clearing recent history from the Web browser. This
step will vary depending on which Web browser you are using. You can refer to this link
for help - http://www.refreshyourcache.com/en/home/
The result of customizations should look like this web application below.
GEOG677 – Internet GIS University of Maryland at College Park
19
The final step is to deploy this web application on the Web server. You will upload the files to a
folder on Terpconnect. Here is my example -
http://terpconnect.umd.edu/~jma3/GEOG677/W2013/Flex/API_Viewer_for_Flex/Demo_API_V
iewer/
Your tasks:
You need to create a similar Web GIS application based on ArcGIS Viewer 3.6 for Flex.
You must customize at least three of these elements such as title, subtitle, logo, initial
extent, and background color.
You must add at least one operational layer using your own map services.
You must customize at least two widgets. Or, you can add at least one new widget that is
not shown on the default Flex Viewer.
Publish it on the Terpconnect server.
Write the URL in your lab report and also a brief description on the tools/features, map
layers, etc.
Make a few screen shots to demonstrate the tools or features. Then, include the screen
shots in your report.
Be creative!
GEOG677 – Internet GIS University of Maryland at College Park
20
Part III: ArcGIS Viewer for Flex Application Builder
The ArcGIS API for Flex Application Builder allows users to create new Web mapping
applications and also view/modify existing applications. You can easily configure and deploy a
new web mapping application without programming or configuration file editing. It has been
designed to be user friendly and makes the process of creating and deploying a new Flex-based
web application very easy. In the application builder, you specify the data content, functionality,
and look and feel of the web app, then deploy it.
The general steps of using ArcGIS Viewer for Flex Application Builder:
Step 1: Downloading
Go to this Web site to download ArcGIS Viewer for Flex Application Builder V3.6 -
http://links.esri.com/flex-viewer/latest-download
The application builder requires Adobe AIR which can be installed from Adobe AIR download
page - http://get.adobe.com/air/ . So, if you don’t have it on your computer, you will need to
download and install it.
Normally, you should have already had Adobe AIR installed if you have installed Flex Viewer.
Step 2: Installing
Step 3: Configuring
The first time the application builder is run, it requires two parameters to be set:
Web Server Base Folder
o The installation location of the Viewer software. Default value for Windows is
C:\inetpub\wwwroot\flexviewers.
Web Server Base Folder URL
o The URL base address to access your viewer applications in a web browser.
Default value for Windows is http://localhost/flexviewers/
GEOG677 – Internet GIS University of Maryland at College Park
21
Note:
It is important that you write the file path exactly as shown below. A typical mistake
is that you might write the folder – “flexviewers” as “flexviwer”. The latter is for
ArcGIS Viewer for Flex. So, don’t get confused.
Must have “Full control” permission to the folder – “wwwroot” for IIS users.
Click the Save button to save your settings. Next the Application List panel appears and shows
all the applications associated with the ArcGIS Viewer for Flex application builder. Since this is
the first time running the application, no applications have been created.
Click the Create a New application button to start the process. First, you will need to specify a
name for your new application. Notice that the Application URL address parameter
autocompletes to match the application name.
You will be asked to choose either using web maps or basemaps and operational layers. In our
case, we will select the latter because we have our own map services. This gives us more control
about what we want to do design.
Then, you can start to create your web applications. The Application Builder allows you to
define many settings by mostly clicking buttons.
GEOG677 – Internet GIS University of Maryland at College Park
22
To design a web application, you can define or modify the following components:
Maps (The maps can be added from ArcGIS Online, any map services within ArcGIS
server REST folders, or KML/CSV/GeoRSS files from Web.)
o Basemaps
o Operational layers
o Map extent
Widgets
o There are a variety of widgets that you can add. Some of them can be simply
added without doing anything. However, there are some other widgets need to be
further defined when being included into your web application. For example, you
need to know the attributes of your data when using the widget Chart, Query,
Time, etc.)
Layout
o It is very easy to change the layout by turning on/off certain components.
Design
o You will be able to change the logo, title, text font, and color scheme.
Then, you can preview your application within the Application Builder.
GEOG677 – Internet GIS University of Maryland at College Park
23
You can also preview it through a Web browser, for example, in my case -
http://localhost/flexviewers/Demo_Jan23_2014/
Finally, after you are satisfied with the design, you can deploy it to the Web server. You can
simply upload the folder which contains all the files of your web application. It should be a
folder with the same name of your application that is saved under the
“c:\inetpub\wwwroot\flexviewers” .
Here is my example -
http://terpconnect.umd.edu/~jma3/GEOG677/W2013/Flex/App_Builder/Jan17_2013_demo1/
Your tasks:
You need to create a Web GIS application using ArcGIS Viewer 3.6 for Flex Application
Builder.
You must use an operational layer from your own map services.
You must have at least five widgets in your web application. (Make sure everything
works.)
Deploy your application on Terpconnect server.
In the lab report, write the URL with a brief descriptions of the map layers, and
features/tools. Also screen shots of your Web GIS applications (include all Part I, II and
III results).
Be creative!
----- THE END -----