Getting started

This page describes an older version, please read about the latest version at:
http://resources.arcgis.com/en/help/flex-viewer/concepts/

Getting started with ArcGIS Viewer for Flex

The ArcGIS Viewer for Flex application enables users to create GIS-enabled web mapping applications, without requiring programming. It is designed so users can configure and deploy a web mapping application easily and quickly.

This help topic shows you how to start using the ArcGIS Viewer for Flex application. First, ensure the software requirements are met, then follow the instructions to download and set up the viewer. After reviewing some key aspects of the Viewer application (default appearance), practice configuring the Viewer by modifying elements such as the: title, colors, and map extent. Lastly, steps are given to add new functionality to the Viewer (by adding a widget) and some custom data content (by adding a web service).

Requirements:

  • A web browser (e.g., Firefox 4, Internet Explorer 9).
  • A web server running on the machine where ArcGIS Viewer for Flex will be installed (e.g., IIS or Apache). Ask your systems administrator to verify that your machine has a web server running.

    How to start IIS on Windows 7:

    1. Click Start and then click Control Panel.
    2. In Control Panel, click Programs and then click Turn Windows features on or off.
    3. In the Windows Features dialog box, click Internet Information Services and then click OK.

    More information available at Installing IIS 7 on Windows Vista and Windows 7.
  • OPTIONAL: Access to ArcGIS Server Standard or Advanced editions; if you want to add your own web services. The Flex Viewer generally supports ArcGIS Server 9.3 and above, but certain functionality, like web editing and support for time-aware data requires version 10 or above of ArcGIS Server.

Download package options:

Two download packages are available:

  • Compiled package - This download package does not include source code, but is already compiled and ready to use.
  • Uncompiled package - This download package includes the Viewer application's source code. You will need to compile this before using it.

Only one download package is needed to install and use the ArcGIS Viewer for Flex. The compiled package is targeted at users who intend to create custom web mapping applications by configuring the Viewer's XML configuration files. The uncompiled package is targeted at developers who intend to create custom widgets and/or extend the core Viewer application. Decide which download package meets your business workflow, then follow the relevant instructions below.

Part 1. Download the ArcGIS Viewer for Flex package

  1. Click the download link on the web page containing the download package; agree to the Esri Attribution and License Agreement, then click Download and save the ZIP file anywhere on your machine.
  2. Unzip the download package file; it will create a new folder called flexviewer.

  3. Place the flexviewer folder into your machine's web server folder. The actual folder location may be different depending on your web server configuration, but when using IIS, the default is: "C:\inetpub\wwwroot".

    Screenshot showing typical wwwroot folder structure for IIS.
    NoteNote:

    You will need write permissions for this folder. Depending on your operating system and user privileges, you might have to ask your systems administrator for assistance.

    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).

    1. Right-click on the folder and select Permissions.
    2. Go to the Security tab.
    3. Note that Users have only read rights. Change this to Full access and Windows should not complain anymore.

    More information available at Installing IIS 7 on Windows Vista and Windows 7.
  4. Open a web browser and test the ArcGIS Viewer for Flex application by entering the following URL: http://<machinename>/flexviewer/index.html. Substitute <machinename> with the name of your machine (e.g., http://mymachinename/flexviewer/index.html).

The ArcGIS Viewer for Flex application should appear in your web browser. The graphic below shows the Viewer application (default appearance) with some of its key user interface components labeled:

Screenshot showing Flex Viewer with its main parts pointed out.

By default, the Viewer application has been preconfigured to reference several web services from ArcGIS.com; these are displayed in the main display and listed in the Map Switcher widget. The Navigation and Overview Map widgets are both built into the Viewer UI. The scale bar is part is actually a property of the map; it is not an individual widget. Additional widgets (i.e., additional GIS functionality) are contained in the widget tray at the top of the application.

Explore the ready-to-deploy ArcGIS Viewer for Flex application by experimenting with some of its functionality. Once you are familiar with the application, continue with the next section to learn how to configure the Viewer.

Part 2. Practice configuring the ArcGIS Viewer for Flex

1. Finding the files

Minimize the web browser and navigate back to the flexviewer folder location on your machine. (e.g., C:\inetpub\wwwroot\flexviewer). Expand the folder to view its contents.

Screenshot showing files inside default flexviewer folder

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.
  • 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.

2. Change titles, logo and style colors in config.xml

Open config.xml in a text editor, such as Notepad or TextPad. Leave the Viewer application open in the web browser.

Change the title, subtitle, logo, and colors XML tag values from this:

<title>ArcGIS Viewer for Flex</title>
<subtitle>a configurable web mapping application</subtitle>
<logo>assets/images/logo.png</logo>
<style>
    <colors>0xFFFFFF,0x333333,0x101010,0x000000,0xFFD700</colors>
    <alpha>0.8</alpha>
</style>

to this:

<title>My Flex Viewer</title>
<subtitle>Sample configuration</subtitle>
<logo>assets/images/i_solar.png</logo>
<style>
    <colors>0x000000,0xFFFFFF,0xEFEFEF,0xFFFFFF,0x000000</colors>
    <alpha>1.0</alpha>
</style>

Save the config.xml file (but leave it open) and refresh the Viewer application to observe the changes you just made.

NoteNote:

You might need to clear your cache to make sure the web browser has the new version of the file.

3. Change the initial extent

Change the initial spatial extent of the map so when the Viewer application opens, the map is zoomed to Australia. Edit the <map> tag's initialextent property to:

<map initialextent="12042000 -5619000 17795000 -952000" top="40">

Save the config.xml file (but leave it open) and refresh the Viewer application to observe the changes you just made. The Viewer's map display should now zoom to the new spatial extent you specified.

NoteNote:

The spatial extent is specified in the WGS 1984 Web Mercator Auxiliary Sphere projection because the ArcGIS Online basemaps preconfigured with the Viewer are in this projection. If your web services are in a different projection, you will have to change the Viewer application's initial extent to match that projection.

4. Add your data as an operational layer

Add a <layer> to <operationallayers>: 

<layer label="Boundaries and Places" type="tiled" visible="true"
    url="http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places_Alternate/MapServer"/>
NoteNote:

#1: If this service is not running in the same web server, your ArcGIS Server will need a crossdomain.xml file.

#2 If your ArcGIS Server map service has not been cached (i.e. not "tiled"), then use type="dynamic".

5. Add a widget

Next, you will add a widget to enable more functionality in the Viewer. Scroll about halfway down the file, until you see a <widgetcontainer> tag. This section of the config.xml file contains the widgets for the Viewer widget tray. Add the following XML code to the bottom, before </widgetcontainer>: 

<widget label="Traffic Camera"
    icon="assets/images/i_camera.png"
    config="widgets/Query/QueryWidget_Louisville_TrafficCams.xml"
    url="widgets/Query/QueryWidget.swf"/>

Next steps: more details on how to configure the viewer.

Copyright © 1995-2012 Esri. All rights reserved.
2/15/2012