You are on page 1of 30

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

You might also like