Developing a GIS Portal Using the Flex API
description
Transcript of Developing a GIS Portal Using the Flex API
![Page 1: Developing a GIS Portal Using the Flex API](https://reader035.fdocuments.us/reader035/viewer/2022062322/56814932550346895db675d2/html5/thumbnails/1.jpg)
Developing a GIS Portal Using the Flex API
2009 Ohio GIS Conference
September 17, 2009
Joe LaCombeSystem ArchitectWoolpert, Inc.
![Page 2: Developing a GIS Portal Using the Flex API](https://reader035.fdocuments.us/reader035/viewer/2022062322/56814932550346895db675d2/html5/thumbnails/2.jpg)
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?
![Page 3: Developing a GIS Portal Using the Flex API](https://reader035.fdocuments.us/reader035/viewer/2022062322/56814932550346895db675d2/html5/thumbnails/3.jpg)
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
![Page 4: Developing a GIS Portal Using the Flex API](https://reader035.fdocuments.us/reader035/viewer/2022062322/56814932550346895db675d2/html5/thumbnails/4.jpg)
What is Flex?What is Flex?
Flex = .NetMXML = HTMLActionScript = JavaScript + VB/C#
Flex Development Kit
MXML Markup
ActionScript scripting/core programming
OR
.SWF file
![Page 5: Developing a GIS Portal Using the Flex API](https://reader035.fdocuments.us/reader035/viewer/2022062322/56814932550346895db675d2/html5/thumbnails/5.jpg)
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
![Page 6: Developing a GIS Portal Using the Flex API](https://reader035.fdocuments.us/reader035/viewer/2022062322/56814932550346895db675d2/html5/thumbnails/6.jpg)
ArcGIS Server Flex APIArcGIS Server Flex API
HTTP/JSON
HTTP/XML
DCOM
![Page 7: Developing a GIS Portal Using the Flex API](https://reader035.fdocuments.us/reader035/viewer/2022062322/56814932550346895db675d2/html5/thumbnails/7.jpg)
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
![Page 8: Developing a GIS Portal Using the Flex API](https://reader035.fdocuments.us/reader035/viewer/2022062322/56814932550346895db675d2/html5/thumbnails/8.jpg)
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
![Page 9: Developing a GIS Portal Using the Flex API](https://reader035.fdocuments.us/reader035/viewer/2022062322/56814932550346895db675d2/html5/thumbnails/9.jpg)
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.
![Page 10: Developing a GIS Portal Using the Flex API](https://reader035.fdocuments.us/reader035/viewer/2022062322/56814932550346895db675d2/html5/thumbnails/10.jpg)
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
![Page 11: Developing a GIS Portal Using the Flex API](https://reader035.fdocuments.us/reader035/viewer/2022062322/56814932550346895db675d2/html5/thumbnails/11.jpg)
LinkGIS ViewerLinkGIS Viewer
Presentation Tier
Business Logic Tier
Data Tier
![Page 12: Developing a GIS Portal Using the Flex API](https://reader035.fdocuments.us/reader035/viewer/2022062322/56814932550346895db675d2/html5/thumbnails/12.jpg)
LinkGIS ViewerLinkGIS Viewer
![Page 13: Developing a GIS Portal Using the Flex API](https://reader035.fdocuments.us/reader035/viewer/2022062322/56814932550346895db675d2/html5/thumbnails/13.jpg)
Based on ESRI’s Sample Flex Viewer
![Page 14: Developing a GIS Portal Using the Flex API](https://reader035.fdocuments.us/reader035/viewer/2022062322/56814932550346895db675d2/html5/thumbnails/14.jpg)
GIS Layer Display
![Page 15: Developing a GIS Portal Using the Flex API](https://reader035.fdocuments.us/reader035/viewer/2022062322/56814932550346895db675d2/html5/thumbnails/15.jpg)
Graphic Operations
![Page 16: Developing a GIS Portal Using the Flex API](https://reader035.fdocuments.us/reader035/viewer/2022062322/56814932550346895db675d2/html5/thumbnails/16.jpg)
Printing
![Page 17: Developing a GIS Portal Using the Flex API](https://reader035.fdocuments.us/reader035/viewer/2022062322/56814932550346895db675d2/html5/thumbnails/17.jpg)
Data Retrieval
![Page 18: Developing a GIS Portal Using the Flex API](https://reader035.fdocuments.us/reader035/viewer/2022062322/56814932550346895db675d2/html5/thumbnails/18.jpg)
Data Retrieval
![Page 19: Developing a GIS Portal Using the Flex API](https://reader035.fdocuments.us/reader035/viewer/2022062322/56814932550346895db675d2/html5/thumbnails/19.jpg)
Flood Hazard Analysis
![Page 20: Developing a GIS Portal Using the Flex API](https://reader035.fdocuments.us/reader035/viewer/2022062322/56814932550346895db675d2/html5/thumbnails/20.jpg)
Widget–based Approach: Mapping Portal
.Net Web
Services
SDE
![Page 21: Developing a GIS Portal Using the Flex API](https://reader035.fdocuments.us/reader035/viewer/2022062322/56814932550346895db675d2/html5/thumbnails/21.jpg)
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
![Page 22: Developing a GIS Portal Using the Flex API](https://reader035.fdocuments.us/reader035/viewer/2022062322/56814932550346895db675d2/html5/thumbnails/22.jpg)
Consume .Net ServicesConsume .Net Services• Various options
– SOAP XML– HTTP Get, Post, etc. REST/WCF Services
• XML• JSON(JavaScript Object Notation)
JSON
XML
![Page 23: Developing a GIS Portal Using the Flex API](https://reader035.fdocuments.us/reader035/viewer/2022062322/56814932550346895db675d2/html5/thumbnails/23.jpg)
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
![Page 24: Developing a GIS Portal Using the Flex API](https://reader035.fdocuments.us/reader035/viewer/2022062322/56814932550346895db675d2/html5/thumbnails/24.jpg)
Consume .Net ServicesConsume .Net Services
•REST/WCF via JSON
![Page 25: Developing a GIS Portal Using the Flex API](https://reader035.fdocuments.us/reader035/viewer/2022062322/56814932550346895db675d2/html5/thumbnails/25.jpg)
Consume .Net ServicesConsume .Net Services
•Decode results
![Page 26: Developing a GIS Portal Using the Flex API](https://reader035.fdocuments.us/reader035/viewer/2022062322/56814932550346895db675d2/html5/thumbnails/26.jpg)
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!
![Page 27: Developing a GIS Portal Using the Flex API](https://reader035.fdocuments.us/reader035/viewer/2022062322/56814932550346895db675d2/html5/thumbnails/27.jpg)
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
![Page 28: Developing a GIS Portal Using the Flex API](https://reader035.fdocuments.us/reader035/viewer/2022062322/56814932550346895db675d2/html5/thumbnails/28.jpg)
Questions?Questions?