Developing a GIS Portal Using the Flex API

1
2009 Ohio GIS Conference September 17, 2009

• Developing a GIS Portal Using the Flex API

Joe LaCombe System Architect Woolpert, Inc.
2
What I will talk about

• What is Flex?
• What is the ArcGIS Server Flex API?
• Discuss ESRIs 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 APIs?

3
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

4
What is Flex?
Flex ? Development Kit MXML ? Markup ActionScript
? scripting/core programming
.SWF file
OR

• Flex .Net
• MXML HTML
• ActionScript JavaScript VB/C

5
Flex Development Environment

• Adobe Flex Builder
• Built upon eclipse
• Could develop in notepad, use Adobes free
  compiler
• Various open source IDEs, even a plug-in for
  Visual Studio
• But, Flex Builder is the recommended option
• Relatively cheap

6
ArcGIS Server Flex API
Flex API
JavaScript API
SilverLight API
REST API
HTTP/JSON
SOAP API
HTTP/XML
Web ADF
DCOM
ArcGIS Server
7
What is REST?

• Representational State Transfer
• The Web is comprised of resources. A resource is
  any item of interest. ? ex http//www.boeing.com/a
  ircraft/747
• A representation of the resource is returned
  (e.g., Boeing747.html).
• The representation places the client application
  in a state.
• The result of the client traversing a separate
  hyperlink in Boeing747.html is another resource
  that is accessed.
• The new representation places the client
  application into yet another state. Thus, the
  client application changes (transfers) state with
  each resource representation --gt Representational
  State Transfer!

8
What is REST?

• REST is an architecture, not a standard
• HTTP, XML, image formats, etc.
• Been around for years, just easier now
• The web is a REST system
• REST uses existing HTTP functionality - verbs
• GET
• POST
• PUT
• DELETE

9
What is REST?

• Think of REST as GPS coordinates for the web
• http//www.boeing.com/aircraft/747
• Define in your URL exactly what resource you
  want? like a coordinate
• http//sampleserver1.arcgisonline.com/ArcGIS/rest/
  services/Specialty/ESRI_StateCityHighway_USA/MapSe
  rver/find?searchTextNewYorkcontainstruesearch
  Fieldssrlayers1returnGeometrytrue

10
ArcGIS Server Flex API

• http//resources.esri.com/arcgisserver/apis/flex/i
  ndex.cfm?fahome
• Samples
• API Reference
• Community/Code Gallery
• Sample Viewer

11
Sample 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 dont
  need to worry about the plumbing
• Easy to extend

12
Sample 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 applications configuration file.

13
Case Study Northern Kentucky Area Planning
Commission (NKAPC)

• Objective rewrite/combine existing ArcIMS
  websites into one portal

14
LinkGIS Viewer
Presentation Tier
Business Logic Tier
Data Tier
15
LinkGIS Viewer
16
Based on ESRIs Sample Flex Viewer
17
GIS Layer Display
18
Graphic Operations
19
Printing
20
Data Retrieval
21
Data Retrieval
22
Flood Hazard Analysis
23
Widgetbased Approach Mapping Portal
.Net Web Services
SDE
24
Consume .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

25
Consume .Net Services

• Various options
• SOAP ? XML
• HTTP Get, Post, etc. ? REST/WCF Services
• XML
• JSON(JavaScript Object Notation)

JSON
XML
26
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

27
Consume .Net Services

• REST/WCF via JSON

28
Consume .Net Services

• Decode results

29
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!

30
Other APIs

• 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

31
Questions?
32
Contact Information

• Joe LaCombe
• System Architect
• Woolpert, Inc.
• 317-223-2264
• joe.lacombe_at_woolpert.com