P. 1
Building Web Application With ArcGIS API for Flex

Building Web Application With ArcGIS API for Flex

5.0

|Views: 5,146|Likes:
Published by ss1214

More info:

Published by: ss1214 on Jul 18, 2009
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

07/24/2013

pdf

text

original

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
Desktop Multi-User Federated
Enterprise Infrastructure

Professional

Work-Groups

Organizations

Desktop

Web

Mobile

Open APIs
OGC KML SOAP SQL

Applications

Mapping 3D Visualization Geoprocessing Data Management

GDB

Services and Geospatial Data Management

ArcGIS Server

The Web Provides a New Pattern for Implementing GIS
Becoming a New Platform

Supporting
• • • • Collaborative Computing Service Integration (Mashups) User Contributed Content Distributed Data Management

GeoWeb
Distributed Collaboration

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 Integrating varies basemaps with GIS data Publishing GIS services into web viewers Integrating georeferenced web content (Geo-RSS, Photos, Documents . . . )
Google

GIS Users

Sensor Network (GRSS)

+

+
Georeferenced Content

GIS Servers Base Maps & Globes
ArcGIS

Microsoft

Integrating Professional GIS with Everything on the Web

. . . Extending the Geographic Approach

ArcGIS API for Flex

• Beta released in 2008 ESRI User Conference • 1.0 released in Q4 2008

Easier Web Development
Flex Silverlight Web 2.0

JavaScript

REST

Flex API Reference Flex API Home 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

Web Map Adobe Flash Player

Adobe Flex Builder

Flex SDK Adobe Flex SDK Compiler Flex Code

MyApp.swf

Web Server

.html + .js

How Flex API Fits into the ArcGIS development platforms

Web Application Development Platforms

• ESRI Web SDKs
– – – – WebADF JavaScript API Flex API REST API

Web Mapping Application

JavaScript

Flex

NEW
Web ADF (.NET/Java) REST Web 2.0

ArcGIS Server

Web Application Development Platforms

ArcGIS WebADF

ArcGIS JavaScript API ArcGIS API for Flex Browser Browser with Flash Player

App Execution

Server with AJAX in browser

Development

Visual Studio or NetBean IDE .Net (C#, APS), Java

Notepad or other text editor JavaScript

Flex Builder or text editor with Flex SDK compiler MXML and ActionScript REST API

Languages

ArcGIS Access

SOAP endpoints and ArcObject

REST API

Services centric web application architecture

Services/server centric web application architecture

GIS Organizations
S1

Publishing Services
S1 S2 S3 Sn S3 S1

Serving Both Existing & New User Communities

Mashups
S2

+

External Services

Steps to Start Flex Application Development

Flex Development Workflow

Web Map Adobe Flash Player

Adobe Flex Builder

1 4 2 3

Flex SDK ArcGIS API for Flex Adobe Flex SDK Compiler

MyApp.swf Web Server

ActionScript

MXML

CSS .html + .js

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/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 Write code to access map, data and services Config.xml Add the new widget into the configuration XML file

Widget Manager manages widget lifecycle based on configuration Container communicates with 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're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->