part i: arcgis api for flex -...
TRANSCRIPT
GEOG677 – Internet GIS University of Maryland at College Park
1
Lab Assignment 7 – ArcGIS Server
Due Date: 02/10/2012
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. About the basics of Flex and Flash Builder,
please take a video tutorial at http://learn.adobe.com/wiki/display/Flex/Getting+Started.
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—such as
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. 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 2.5 - http://help.arcgis.com/en/webapi/flex/ which is based on Flex 4 and
Flash Builder 4, and works great with the Adobe Flex 4.6 (and 4.1, 4.5, 4.5.1.) SDK.
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. http://www.adobe.com/products/flashbuilder/
b. The current version is 4.6.
c. FB is not freeware, but trial version is free for 60 days.
d. The download needs login.
2. Download and unzip the ArcGIS API for Flex ZIP file.
a. http://resources.arcgis.com/content/arcgis-flex-api-how-to-download
3. Using Flash Builder to create a Web application
4. Copy/paste/modify the sample codes from ESRI Web site
a. http://help.arcgis.com/en/webapi/flex/samples/index.html
5. Compile the code
6. Test/modify the code
7. Export release build
8. Publish the Web application to a server
For more information about how to work with the ArcGIS API for Flex, visit
http://help.arcgis.com/en/webapi/flex/help/index.html#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. (If you
are already familiar with ArcGIS API for Flex, you can jump to the end of this section on Page
#11 to look for the requirements/tasks for this exercise.)
The example -
http://www.terpconnect.umd.edu/~jma3/GEOG677/Demo_Flex/Felx_demo_query.html
GEOG677 – Internet GIS University of Maryland at College Park
3
Step 1: Downloading, Installing, and Configuring Flash Builder
First, go to this Web site - http://www.adobe.com/products/flashbuilder/ to download Adobe
Flash Builder 4.6. 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 hard drive (~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
For improved performance, adjust your Adobe Flash Builder settings as following:
Click Project > Properties > Flex Compiler, then uncheck the Enable integration with
browser navigation check box.
Click Project > Properties > Flex Build Path > Library Path and set Framework
linkage to Runtime Shared Library (RSL).
GEOG677 – Internet GIS University of Maryland at College Park
5
GEOG677 – Internet GIS University of Maryland at College Park
6
Step 2: Downloading ArcGIS API for Flex Zip File
First, go to this Web site - http://resources.arcgis.com/content/arcgis-flex-api-how-to-download
to download ArcGIS API 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_2_5\ArcGIS_Flex\libs)
GEOG677 – Internet GIS University of Maryland at College Park
7
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 5.
<?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:ArcGISDynamicMapServiceLayer url=" http://129.2.24.163/ArcGIS/rest/services/Geog677_W12/Lab5_jma3/MapServer" />
</esri:Map>
</s:Application>
GEOG677 – Internet GIS University of Maryland at College Park
8
The code is in XML format. Tag <esri:Map> defines a map display component, in which Esri is
a namespace. For detailed API definitions, please refer to online reference at
http://help.arcgis.com/en/webapi/flex/apiref/index.html.
Now, you can click on the Run button to “preview” the result displayed in a Web browser. See
below.
Note:
Depending on the programs installed on your computer, you may be required to install
the latest Flash Player.
Obviously, 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-
http://help.arcgis.com/en/webapi/flex/samples/index.html
GEOG677 – Internet GIS University of Maryland at College Park
9
Suppose you are interested in the sample below:
You can copy/paste the source code to replace the code in Flash Builder environment.
Note:
The map service in this new source code is different from the map service you used
earlier.
In this case, you can simply copy/paste the source code without making any changes yet.
GEOG677 – Internet GIS University of Maryland at College Park
10
Now, you can cick the Run button to see how the result displays in a Web browser.
GEOG677 – Internet GIS University of Maryland at College Park
11
Obviously, you can add more code from other samples to create a much more complex and
interactive Web appplication. Especially, you might want to add those common tools such as
Query, Find & Identify, Navigation, etc.
You will need to constantly test and modify the code in order to make it work perfectly.
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.
For more information, you can refer to this link:
http://help.arcgis.com/en/webapi/flex/help/index.html#deploy_application.htm#
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 4, click Project > Export Release Build from the main menu.
2. Click Finish.
GEOG677 – Internet GIS University of Maryland at College Park
12
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 from the “bin-release” folder to a folder on the
Terpconnect server.
Your tasks: You need to create a Web GIS application using ArcGIS API for Flex by practicing those
steps described earlier. You can use this example as a reference even though your own
application will be different -
http://www.terpconnect.umd.edu/~jma3/GEOG677/Demo_Flex/Felx_demo_query.html
Your application should have at least two features/tools. Especially, you might want to
add those common tools such as Query, Find & Identify, Navigation, Geocoding, etc.
Again, you can refer to the example above.
You can upload 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.
However, you can also 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: Downloading
Go to this Web site to download ArcGIS Viewer for Flex V2.5 -
http://resources.arcgis.com/content/arcgis-flex-viewer-download
Step 2: Unzipping
GEOG677 – Internet GIS University of Maryland at College Park
13
Step 3: Copying the folder - “flexviewer” into this folder - "C:\inetpub\wwwroot” on your own
computer.
Note:
Don’t perform this task on the Hyperion server because I have already saved the
folder there.
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://learn.iis.net/page.aspx/28/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.
Step 4: Testing the ArcGIS Viewer for Flex application
The generic URL should be something like this:
http://<machinename>/flexviewer/index.html
Example: http://129.2.24.163/flexviewer/index.html
When testing on your own computer, the URL is - http://localhost/flexviewer/index.html
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 new
features/tools.
Navigate to the flexviewer folder location on your machine – “C:\inetpub\wwwroot\flexviewer”.
Expand the folder to view its contents.
Open the file – “config.xml” in a text editor such as Notepad.
Now, you modify and change the titles, logo, style, initial extent, operational layer, and add a
widget, etc. For more details, you may refer to this Web page -
http://help.arcgis.com/en/webapps/flexviewer/help/01m3/01m300000021000000.htm
GEOG677 – Internet GIS University of Maryland at College Park
14
To illustrate how to configure and modify the ArcGIS Viewer for Flex, I will use this example -
http://terpconnect.umd.edu/~jma3/Waste2Energy/
First, based on the default configure file, I will customize the title, logo, etc.
Notice that I also customized the operational layer using my own map service. See the codes
highlighted in yellow color.
Then, I will select a group of Widgets that fit my project’s specific needs.
See the source code below.
<?xml version="1.0" ?>
<!--
////////////////////////////////////////////////////////////////////////////////
//
// Copyright (c) 2010 ESRI
//
// All rights reserved under the copyright laws of the United States.
// You may freely redistribute and use this software, with or
// without modification, provided you include the original copyright
// and use restrictions. See use restrictions in the file:
// <install location>/License.txt
//
// Read more about ArcGIS Viewer for Flex 2.2 - http://links.esri.com/flexviewer
//
////////////////////////////////////////////////////////////////////////////////
-->
<configuration>
<title>Turning Waste into Energy in New York State</title>
<subtitle>a spatial decision support system</subtitle>
<logo>assets/images/logo.png</logo>
<style>
<colors>0xCEE7F4,0x39628C,0x355D89,0x294867,0xCEE7F4</colors>
<alpha>0.8</alpha>
</style>
<!-- UI elements -->
<widget left="5" bottom="5" config="widgets/Coordinate/CoordinateWidget.xml"
url="widgets/Coordinate/CoordinateWidget.swf"/>
<widget left="10" top="50" config="widgets/Navigation/NavigationWidget.xml"
url="widgets/Navigation/NavigationWidget.swf"/>
<widget right="-2" bottom="-2" 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 initialextent="-9091000 4991000 -7828000 5656000" top="40">
<basemaps>
<layer label="Streets" type="tiled" visible="true" alpha="1"
url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
GEOG677 – Internet GIS University of Maryland at College Park
15
<layer label="Aerial" type="tiled" visible="false" alpha="1"
url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"/>
<layer label="Topo" type="tiled" visible="false" alpha="1"
url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"/>
</basemaps>
<operationallayers>
<!--
Using my own map service as the operational layer
-->
<layer label="Other Information" type="dynamic" visible="true"
url="http://129.2.24.163/ArcGIS/rest/services/Services/Other_Info/MapServer"/>
<layer label="Organic Waste Sources" type="dynamic" visible="true" alpha="1"
info="widgets/InfoTemplates/SimpleInfoWinWidget.swf"
infoconfig="widgets/InfoTemplates/IWT_Fires.xml"
url="http://129.2.24.163/ArcGIS/rest/services/Services/Waste_Sources/MapServer"/>
</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="Find an address" left="100" top="90"
icon="assets/images/i_target.png"
config="widgets/Locate/LocateWidget_US.xml"
url="widgets/Locate/LocateWidget.swf"/>
<widget label="Search" left="80" top="280"
icon="assets/images/i_search.png"
config="widgets/Search/SearchWidget_WasteSources.xml"
url="widgets/Search/SearchWidget.swf"/>
<widget label="Draw and Measure" 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"/>
</widgetcontainer>
</configuration>
Note:
It is a good practice to save a copy of the original config file as a backup.
GEOG677 – Internet GIS University of Maryland at College Park
16
Every time you make modification to this config file, make sure you save it.
Then, I need to configure those widgets.
For example, I will find the config file for the widget – Bookmark from this folder –
“\Flex_Viewer\Waste2Energy\widgets\Bookmark”.
Note:
If you are working from your computer, it is likely the path will be –
“C:\inetpub\wwwroot\Flex_Viewer\widgets\Bookmark”. It may vary depending on
whether you have created extra folders for your project or not.
To learn more about the Bookmark widget, go to this link -
http://help.arcgis.com/en/webapps/flexviewer/help/index.html#/Bookmark_widget_tags/01m300
00000m000000/GUID-7BE52CDD-C9CB-435C-BC07-B4DD00E326CF/
The original config file for the Bookmark widget is like this:
<?xml version="1.0" ?>
<configuration label="Bookmarks (example)">
<bookmarks>
<bookmark name="Contiguous USA">-13934000 2699500 -8034300
6710900</bookmark>
<bookmark name="San Francisco">-13638000 4541000 -13632000 4551000</bookmark>
<bookmark name="Louisville, Kentucky">-9559973 4601704 -9529513
4621654</bookmark>
<bookmark name="Los Angeles">-13211400 3993400 -13119200 4056100</bookmark>
<bookmark name="Japan">13917200 3452300 16908700 5477600</bookmark>
<bookmark name="Lisbon">-1039800 4665500 -993700 4696800</bookmark>
<bookmark name="Chile">-8732266 -8111526 -6810170 -1859588</bookmark>
</bookmarks>
</configuration>
<!--
See Bookmark widget tag reference at
http://links.esri.com/bookmarkwidget
-->
If your operational layer is one of your map services, obviously those bookmarks in the original
code do not make sense. You will need to create your own bookmarks for those extents or scales
of your interest.
GEOG677 – Internet GIS University of Maryland at College Park
17
So, you will need to do some test in the map document when opened in ArcMap by zoon-in and
–out to different scales. Write down those appropriate extents (coordinates of the corners).
Then, I replaced the source code with my own bookmarks. See below.
<?xml version="1.0" ?>
<configuration>
<bookmarks>
<bookmark name="Contiguous USA">-13934000 2699500 -8034300
6710900</bookmark>
<bookmark name="New York State">-9079000 5054000 -7816000 5720000</bookmark>
<bookmark name="Western New York">-8870000 5176000 -8554000
5343000</bookmark>
<bookmark name="Central New York">-8675000 5175000 -8359000
5341000</bookmark>
<bookmark name="Eastern New York">-8608000 5233000 -7977000
5566000</bookmark>
<bookmark name="Thompkins County, NY">-8551300 5204800 -8472300
5246400</bookmark>
<bookmark name="Cornell University">-8515170 5227620 -8512710
5228920</bookmark>
</bookmarks>
</configuration>
Save the config file.
Now, test the result using this URL - 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/
Your tasks: You need to create a Web GIS application based on ArcGIS Viewer for Flex.
You must customize at least two of these elements such as title, subtitle, logo, initial
extent, and background color.
You must add an operational layer using your own map service.
You must customize at least one widget. Or, you can add new widget that is not shown
on the default Flex Viewer.
You can upload the files to Terpconnect server.
Refer to this demo as the example - http://terpconnect.umd.edu/~jma3/Waste2Energy/
Make sure everything works.
GEOG677 – Internet GIS University of Maryland at College Park
18
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.
This is an example - http://129.2.24.163/flexviewers/Feb1_demo/
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 V2.5 -
http://resources.arcgis.com/content/arcgis-flex-viewer-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/
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.
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.
GEOG677 – Internet GIS University of Maryland at College Park
19
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.
The rest is very straight forward. You should be able to easily figure out how to do it. You can
also refer to my Lecture on 2/1/2012 when I did a demonstration about Flex Viewer Application
Builder.
Your tasks: You need to create a Web GIS application using ArcGIS Viewer for Flex Application
Builder.
You must use an operational layer from your own map services.
Refer to this demo as the example - http://129.2.24.163/flexviewers/Feb1_demo/
You can upload the files to Terpconnect server.
Make sure everything works.
Create a Word document with the URLs and also screen shots of your Web GIS
applications (include all Part I, II and III results).
Be creative!
----- THE END -----