Building Web Application with ArcGIS API for Flex
Technical Workshop
Moxie Zhang
Topics
• Introduce ArcGIS API for Flex
• How Flex API fits into ArcGIS
development platforms
• Services centric web application
architecture
• Steps to start Flex development
• Develop map based Flex application
• Develop GeoWeb application using
the Sample Flex Viewer
• What else and what’s coming
Introduce ArcGIS API for Flex
The Common Application Patterns
Multi-User Federated
Desktop
Enterprise Infrastructure
Professional Work-Groups Organizations
Desktop Web Mobile Open
APIs
OGC
KML
Applications SOAP
SQL
Mapping Services and
3D Visualization Geospatial
Geoprocessing GDB Data Management
Data Management
ArcGIS Server
The Web Provides a New Pattern for Implementing GIS
Becoming a New Platform
Supporting
• Collaborative Computing GeoWeb
• Service Integration (Mashups) Distributed
Collaboration
• User Contributed Content
• Distributed Data Management
Many Participants
• Interconnected
• Interoperable
• Integrative
• Dynamic
Web 2.0
Web 1.0
. . . An Agile Framework for Collaboration & Integration of Systems
The Goal: Better Sharing, Integrating and Using
Web Users
• Creating mashups among GIS servers GIS Sensor Network
Users (GRSS)
• Integrating varies basemaps with GIS data
• Publishing GIS services into web viewers
• Integrating georeferenced web content +
(Geo-RSS, Photos, Documents . . . ) +
Georeferenced
Content
Google
GIS
Servers
Microsoft
Base Maps
& Globes
ArcGIS
Integrating Professional GIS
with Everything on the Web
. . . Extending the Geographic Approach
ArcGIS API for Flex
Easier Web
Development
• Beta released in 2008 ESRI User Conference
Silverlight Web 2.0
Flex
• 1.0 released in Q4 2008 JavaScript
REST
Flex API Reference
Flex API Home Flex API Code Gallery
Flex API Samples
What is Adobe Flex?
Web GIS Services
Flex is a application framework
• Enables rich internet application development
• Based Adobe Flash platform (runtime and player)
• Offers free Flex SDK or Eclipse based Flex Builder
• Available to 97% connected PC with all browsers
• Current version is Flex 3.0
Web Map
Adobe Flash
Player
Adobe Flex Builder
MyApp.swf
Flex SDK
Adobe Flex
SDK Web Server
Compiler
Flex Code
.html + .js
How Flex API Fits into the ArcGIS development
platforms
Web Application Development Platforms
• ESRI Web SDKs Web Mapping
Application
– WebADF
– JavaScript API
– Flex API JavaScript Flex
– REST API
NEW
Web ADF REST Web 2.0
(.NET/Java)
ArcGIS
Server
Web Application Development Platforms
ArcGIS WebADF ArcGIS JavaScript API ArcGIS API for Flex
App Execution Server with AJAX in Browser Browser with Flash
browser Player
Development Visual Studio or Notepad or other text Flex Builder or text
NetBean IDE editor editor with Flex SDK
compiler
Languages .Net (C#, APS), Java JavaScript MXML and
ActionScript
ArcGIS Access SOAP endpoints and REST API REST API
ArcObject
Services centric web application architecture
Services/server centric web application architecture
GIS Organizations
S1
Serving Both Existing &
Publishing
New User Communities
Services
S1
Mashups
S2 S2 +
S3
Sn S3
S1
External Services
Steps to Start Flex Application Development
Flex Development Workflow Web Map
Adobe Flash
Player
Adobe Flex Builder
1
4
Flex SDK
2 3
ArcGIS API for Flex Adobe Flex
SDK
Compiler
MyApp.swf
Web Server
ActionScript MXML CSS
.html + .js
1 Develop using Flex Builder to write MXML and ActionScript code with Flex SDK and
ArcGIS API for Flex
2 Compile MXML/ActionScript/CSS to .swf file (Flash)
3 Deploy the .swf with HTML wrapper to a web server
4 Run the Flex application from a browser by access the HTML wrapper
Obtain the Software
• Adobe Flex Builder
• ArcGIS API for Flex
– http://resources.esri.com/arcgisserver/apis/flex/
– Need ESRI Global Account to download
• Sample code
– API samples:
http://resources.esri.com/help/9.3/arcgisserver/apis/flex/samples/ind
ex.html
– Code Gallery:
http://resources.esri.com/arcgisserver/apis/flex/index.cfm?fa=codeG
allery
Develop map based Flex applications
Flex Builder Examples
• Use Flex Builder to develop applications to:
– Display a map
– Display a marker
– Interactive with a map
• Click
• Draw
– Query map layers
– Run Geoprocess
Develop GeoWeb application using
the Sample Flex Viewer
What is the Sample Flex Viewer
• Can be deployed and used out-of-box
• Built on ArcGIS API for Flex
• Leverages ArcGIS server and ArcGIS
Online services
• Promote best practices
– Flex application development
– GeoWeb application architecture
– Business focused solution
development
• Simple widget programming model
• Not a supported product or framework
• Free
• Source code from Flex Code Gallery
Sample Flex Viewer Architecture
Sample Flex Viewer Widget Programming Model
Extends the base widget Widget Manager
manages widget
lifecycle based on
Write code to access map,
configuration
data and services
Container
Config.xml Add the new widget into communicates with
the configuration XML file widget via interfaces
Widget Programming Model UML
mx.modules.Module
com.esri.solutions.flexviewer
<<interface>>
IBaseWidget
BaseWidget
WidgetTemplate
<Title>
GeoRSSWidget ServiceAreaWidget
Create a Widget - I
ANewWidget.mxml:
1. <?xml version="1.0" encoding="utf-8"?>
2. <BaseWidget
3. xmlns="com.esri.solutions.flexviewer.*"
4. xmlns:mx=http://www.adobe.com/2006/mxml>
5.
6. <WidgetTemplate>
7. <!– Hello, World! -->
8.
9. </WidgetTeamplate>
10.
11. </BaseWidget>
Create a Widget - II
• The widget is compiled to be stand alone .swf file
• Add the widget to the application configuration file, config.xml:
1. <widgets>
2. <widget title =“My First Widget”
3. icon =“aicon.png”
4. menu =“menuWidgets”
5. config =“MyFirstWidget.xml”>
6.
7. MyFirstWidget.swf
8. </widget>
9. <widgets>
Create a Widget - III
Demo: Create a Widget in Flex Builder
Workshop Summary
Adobe Flex +
ArcGIS API for Flex +
ArcGIS Server 9.3
– Develop rich internet applications
(RIA) for GeoWeb
– Better user experience
– Service centric
– Web oriented architecture
– Mashups
– Fast, simple and agile
What else and what’s coming
• ArcGIS 9.3.1
• ArcGIS Silverlight SDK
• Sample Silverlight Viewer
Thank you
