Developing a GIS Portal Using the Flex API

2009 Ohio GIS Conference

September 17, 2009

Joe LaCombeSystem ArchitectWoolpert, Inc.

What I will talk about…What I will talk about…

• What is Flex? • What is the ArcGIS Server Flex API?• Discuss ESRI’s Sample Viewer and the

widget programming model• Case Study: Extending the Sample Flex

Viewer• Integration with other platforms - Show

how you can consume .Net WCF services via REST from the Flex environment

• Benefits of Flex• How it compares with other API’s?

What is Flex?What is Flex?

• Adobe Flex is a software development kit released by Adobe Systems for the development and deployment of cross-platform rich Internet applications based on the Adobe Flash platform. Flex applications can be written using Adobe Flex Builder or by using the freely available Flex compiler from Adobe

What is Flex?What is Flex?

Flex = .NetMXML = HTMLActionScript = JavaScript + VB/C#

Flex Development Kit

MXML Markup

ActionScript scripting/core programming

OR

.SWF file

Flex Development Flex Development EnvironmentEnvironment• Adobe Flex Builder

– Built upon eclipse– Could develop in notepad, use Adobe’s

free compiler– Various open source IDE’s, even a plug-

in for Visual Studio– But, Flex Builder is the recommended

option– Relatively cheap

ArcGIS Server Flex APIArcGIS Server Flex API

HTTP/JSON

HTTP/XML

DCOM

ArcGIS Server Flex APIArcGIS Server Flex API

• http://resources.esri.com/arcgisserver/apis/flex/index.cfm?fa=home– Samples– API Reference– Community/Code Gallery– Sample Viewer

Sample Flex ViewerSample Flex Viewer

• FlexViewerDevelopersGuide.pdf• Provided by a group from ESRI but ESRI

“technically” does not support• Nice looking GUI Widget programming

model• Architected efficiently and in a way so

don’t need to worry about the plumbing• Easy to extend

Sample Flex ViewerSample Flex Viewer

• liberates programmers from having to deal with:– the programming complexity of managing maps– map navigation– application configuration– inter-component communication– data management, etc.

• focus their time and effort on implementing core business functions in their custom applications.

• quickly develop/deploy customizations into existing Sample Flex Viewer applications in the form of widgets

• Add a configuration entry into the Sample Flex Viewer application’s configuration file.

Case Study: Northern Kentucky Case Study: Northern Kentucky Area Planning Commission Area Planning Commission (NKAPC) (NKAPC) • Objective: rewrite/combine

existing ArcIMS websites into one portal

LinkGIS ViewerLinkGIS Viewer

Presentation Tier

Business Logic Tier

Data Tier

LinkGIS ViewerLinkGIS Viewer

Based on ESRI’s Sample Flex Viewer

GIS Layer Display

Graphic Operations

Printing

Data Retrieval

Data Retrieval

Flood Hazard Analysis

Widget–based Approach: Mapping Portal

.Net Web

Services

SDE

Consume .Net ServicesConsume .Net Services

• Printing– ArcMap based layout ArcObjects– Provide map description, graphics as JSON – Web service does the work– Return URL to viewer

• Flood Plain Analysis– ArcObjects performs spatial analysis– Populate FEMA PDF form with GIS attributes– Return determination and URL to viewer as JSON

• Search– Full-text indexing on specific layer table columns– Configuration tells search service what tables/indexes

to search based upon parameters– Return results as JSON

Consume .Net ServicesConsume .Net Services• Various options

– SOAP XML– HTTP Get, Post, etc. REST/WCF Services

• XML• JSON(JavaScript Object Notation)

JSON

XML

Why JSON?Why JSON?

• JSON has much smaller grammar • JSON is processed more easily because its structure

is simpler• XML translates the structure of the data into a

document structure. This mapping can be complicated. JSON structures are based on arrays and records. That is what data is made of.

• Maps more directly onto the data structures used in modern programming languages, i.e. JavaScript/ActionScript Objects

Consume .Net ServicesConsume .Net Services

•REST/WCF via JSON

Consume .Net ServicesConsume .Net Services

•Decode results

Benefits of Flex Benefits of Flex

• Rich Internet Applications (RIA) rich functionality and enhanced user experience

• Browser independent runs in Flash Player (Web) or AIR (Desktop)

• Stable, mature product • Flex provides efficient integration with a

variety of systems, data, and technologies• Modular development approach

– Each component is a separate Flash file(.swf)– “Flexible” architecture results in more

extendable applications– Perfect for building portals and dashboards

• It works!

Other API’sOther API’s

• Flex, Silverlight, or JavaScript?– All have their pros/cons– 9.4 to have templates of each to start from– Whichever one you are comfortable with

Questions?Questions?

Contact InformationContact Information

Joe LaCombeSystem ArchitectWoolpert, Inc.317-223-2264joe.lacombe@woolpert.com