building web application with arcgis api for flex
TRANSCRIPT
Moxie Zhang
Building Web Application with ArcGIS API for FlexTechnical Workshop
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
Desktop
Professional
Multi-User
Work-Groups
Federated
Enterprise Infrastructure
Organizations
MobileWeb
GDB
Desktop
Applications
ArcGIS Server
Services andGeospatialData Management
Mapping3D VisualizationGeoprocessingData Management
OpenAPIs
OGCKML
SOAPSQL
The Web Provides a New Pattern for Implementing GISBecoming a New Platform
. . . An Agile Framework for Collaboration & Integration of Systems
Supporting• Collaborative Computing• Service Integration (Mashups)• User Contributed Content• Distributed Data Management
Many Participants• Interconnected• Interoperable• Integrative• Dynamic
DistributedCollaboration
Web 2.0
Web 1.0
GeoWeb
The Goal: Better Sharing, Integrating and Using
• Creating mashups among GIS servers• Integrating varies basemaps with GIS data• Publishing GIS services into web viewers• Integrating georeferenced web content
(Geo-RSS, Photos, Documents . . . )
Base Maps& Globes
Web Users
GeoreferencedContent
GISServers
++
GISUsers
Sensor Network(GRSS)
Microsoft
ArcGIS
. . . Extending the Geographic Approach
Integrating Professional GISwith Everything on the Web
ArcGIS API for Flex
• Beta released in 2008 ESRI User Conference• 1.0 released in Q4 2008
Easier WebDevelopment
JavaScript
REST
FlexWeb 2.0Silverlight
Flex API Home
Flex API Reference
Flex API Samples
Flex API Code Gallery
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
Adobe FlashPlayer
Adobe Flex Builder
Adobe FlexSDK
Compiler
Flex SDK
Flex Code
MyApp.swf
.html + .js
Web Map
Web Server
How Flex API Fits into the ArcGIS development platforms
Web Application Development Platforms
• ESRI Web SDKs– WebADF– JavaScript API– Flex API– REST API
ArcGISServer
Web Mapping Application
Web 2.0
NEWRESTWeb ADF
(.NET/Java)
FlexJavaScript
Web Application Development Platforms
App Execution Server with AJAX in browser
Browser Browser with Flash Player
Development Visual Studio or NetBean IDE
Notepad or other text editor
Flex Builder or text editor with Flex SDK compiler
Languages .Net (C#, APS), Java JavaScript MXML and ActionScript
ArcGIS Access SOAP endpoints and ArcObject
REST API REST API
ArcGIS WebADF ArcGIS JavaScript API ArcGIS API for Flex
Services centric web application architecture
Services/server centric web application architecture
Serving Both Existing & New User CommunitiesPublishing
Services
GIS Organizations
S1
S2
S3
Sn
S2 +
S3
S1
Mashups
External Services
S1
Steps to Start Flex Application Development
Adobe Flex Builder
Flex Development Workflow
MXMLActionScript
Adobe FlashPlayer
Adobe FlexSDK
Compiler
Flex SDK
MyApp.swf
.html + .js
Web Map
Web Server
ArcGIS API for Flex
CSS
1
2
4
3
1
2
3
4
Develop using Flex Builder to write MXML and ActionScript code with Flex SDK and ArcGIS API for Flex
Compile MXML/ActionScript/CSS to .swf file (Flash)
Deploy the .swf with HTML wrapper to a web server
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/index.html
– Code Gallery: http://resources.esri.com/arcgisserver/apis/flex/index.cfm?fa=codeGallery
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
Config.xml
Extends the base widget
Write code to access map, data and services
Add the new widget into the configuration XML file
Widget Manager manages widget lifecycle based on configurationContainer communicates with widget via interfaces
Widget Programming Model UML
com.esri.solutions.flexviewer
WidgetTemplate
mx.modules.Module
GeoRSSWidget ServiceAreaWidget
<<interface>>IBaseWidget
BaseWidget
<Title>
Create a Widget - I
ANewWidget.mxml:
1. <?xml version="1.0" encoding="utf-8"?>2. <BaseWidget3. 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.swf8. </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