Building Rich Internet Applications Building Rich Internet Applications with the with the ArcGISArcGIS API for FlexAPI for Flex

Lee BockLee BockDan ODan O’’LearyLeary

AgendaAgenda

•• Rich Internet ApplicationsRich Internet Applications•• Introduction to Flash / FlexIntroduction to Flash / Flex•• Using FlexUsing Flex•• ArcGISArcGIS API for FlexAPI for Flex•• Sample Flex ViewerSample Flex Viewer•• WhatWhat’’s new for Flex at s new for Flex at ArcGISArcGIS 1010

Rich Internet ApplicationsRich Internet Applications

Rich Internet Applications (Rich Internet Applications (RIARIA’’ss))CoolCool……

•• ExpressiveExpressive•• InteractiveInteractive•• DynamicDynamic•• Allow data fetching Allow data fetching

without page without page refreshrefresh

Compare and ContrastCompare and ContrastTraditional vs. RIATraditional vs. RIA

RIAsRIAs Facilitate Data VisualizationFacilitate Data Visualization

Evolution of the Web ClientEvolution of the Web ClientBack to the Back to the ““thickthick”” clientclient

•• 11stst Gen: Gen: HTMLHTML ThinThin

•• 22ndnd Gen: Gen: ActiveX / JavaActiveX / Java ThickThick

•• 33rdrd Gen: Gen: Application ServerApplication Server ThinThin

•• 44thth Gen: Gen: Rich Internet ApplicationsRich Internet Applications ThickThick

Technologies for RIATechnologies for RIAExpressive, interactive, dynamicExpressive, interactive, dynamic

Introduction to Flash / FlexIntroduction to Flash / Flex

What is Flash?What is Flash?

•• Technology for delivering RIA to Technology for delivering RIA to browserbrowser

•• Flash apps are compiled executablesFlash apps are compiled executables–– Delivered as a SWF fileDelivered as a SWF file–– Embedded within HTMLEmbedded within HTML

•• Runs in the Flash PlayerRuns in the Flash Player–– PlugPlug--inin

•• You have seen it (even if you donYou have seen it (even if you don’’t t know it).know it).

Advantages of FlashAdvantages of Flash

•• UbiquityUbiquity–– Except Except iPhonesiPhones and and iPadsiPads……

•• CrossCross--browser compatibilitybrowser compatibility•• CompiledCompiled

–– Discover errors at compileDiscover errors at compile--time vs. run timetime vs. run time•• Layout toolsLayout tools•• BuiltBuilt--in transitions and effectsin transitions and effects

Disadvantages of FlashDisadvantages of Flash

•• Plug in requiredPlug in required•• Larger Larger ‘‘homehome’’ page = longer load timepage = longer load time•• Player version compatibilityPlayer version compatibility•• Search Engine Optimization (SEO)Search Engine Optimization (SEO)•• 508 Compliance508 Compliance•• Tendency to over design Tendency to over design –– over animateover animate

What is Flex?What is Flex?

•• Adobe Flex is the open source development environment used to Adobe Flex is the open source development environment used to create Flash applicationscreate Flash applications

•• Flex development toolsFlex development tools–– Adobe Flex Builder is a work bench (IDE)Adobe Flex Builder is a work bench (IDE)

•• Based on EclipseBased on Eclipse•• Accelerate developmentAccelerate development•• Costs:Costs:

–– $250 standard$250 standard–– $700 professional$700 professional

–– Adobe Flex Open SDKAdobe Flex Open SDK•• Open source compilerOpen source compiler•• Some Some ‘‘freefree’’ IDEsIDEs on webon web•• Can use Notepad to write Flex ApplicationsCan use Notepad to write Flex Applications

FYI: The next release of Flex Builder will be called : FYI: The next release of Flex Builder will be called : ““Flash Builder 4.0Flash Builder 4.0””

Hybrid of Two Programming LanguagesHybrid of Two Programming Languages

•• MXMLMXML–– XML based tagsXML based tags–– Declarative userDeclarative user--interface definition languageinterface definition language–– Used to create what we seeUsed to create what we see

•• ActionScriptActionScript–– EcmaEcma--based scripting languagebased scripting language–– Object orientedObject oriented–– Used to define what the application does (business logic)Used to define what the application does (business logic)

MXML & MXML & ActionScriptActionScript

Demo

SWFsSWFs & & SWCsSWCs

•• Applications are compiled into Applications are compiled into SWFsSWFs**–– Compiled Flash application file that is deployed on the web servCompiled Flash application file that is deployed on the web serverer

•• Component libraries can be compiled into Component libraries can be compiled into SWCsSWCs–– Shared between developersShared between developers–– ReRe--used across projectsused across projects

* It* It’’s also possible to compile as a desktop app, which is called an s also possible to compile as a desktop app, which is called an AIR app.AIR app.

ResourcesResources

Adobe.comAdobe.com

ArcGISArcGIS Resource CenterResource Center

Other Good Tips!Other Good Tips!

scalenine.comscalenine.comTour de FlexTour de Flex

ArcGISArcGIS API for FlexAPI for Flex

ArcGISArcGIS ArcGIS OnlineArcGIS Online

ArcGISArcGIS API for FlexAPI for Flex

Flash Application

Flex API

RESTREST

ArcGIS API for FlexArcGIS API for Flex

•• Collection of ActionScript classesCollection of ActionScript classes•• Delivered as a SWCDelivered as a SWC•• ProvidesProvides

–– Map canvasMap canvas–– Various GIS objectsVarious GIS objects

•• e.g. Graphic, Polygon, Layer, Symbol, Rendererse.g. Graphic, Polygon, Layer, Symbol, Renderers–– UtilitiesUtilities

•• e.g. Toolbarse.g. Toolbars

•• Handles communication w/ ArcGIS ServerHandles communication w/ ArcGIS Server•• Uses the Uses the REST APIREST API ArcGISArcGIS ArcGIS OnlineArcGIS Online

Flash Application

Flex API

RESTREST

Can also communicate with Bing Maps & can be customized to talk Can also communicate with Bing Maps & can be customized to talk to other data sources.to other data sources.

REST = REST = ReRepresentational presentational SState tate TTransferransfer

•• Popular web architecturePopular web architecture•• The URL tells the story:The URL tells the story:

–– http://www.myserver.com/customerdbservice?name=SMITH&transactionhttp://www.myserver.com/customerdbservice?name=SMITH&transactions>5s>5

•• Can returnCan return–– TextText–– XMLXML–– JSONJSON–– ImagesImages–– BinaryBinary

ArcGIS Server REST APIArcGIS Server REST API

•• Provides simple, open web interface to services hosted by ArcGISProvides simple, open web interface to services hosted by ArcGISServerServer

•• Capabilities include:Capabilities include:–– MapMap–– QueryQuery–– GeocodeGeocode–– GeoprocessingGeoprocessing–– GeometryGeometry–– ImageImage–– NetworkNetwork

Using the APIUsing the API

•• Download the SWC (from the Resource Center)Download the SWC (from the Resource Center)•• Add to Flex Project build pathAdd to Flex Project build path•• Begin coding!Begin coding!

Demo

TipsTips

•• Get a web debuggerGet a web debugger–– e.g. Fiddler, Firebuge.g. Fiddler, Firebug

•• ArcGIS Resource CenterArcGIS Resource Center

Some Application ExamplesSome Application Examples

Analyst’s Journal

FAA Vertical Obstructions

DHS Fusion Centers H1N1 Viewer

Chesapeake Watershed Profiler Our National Parks

Sample Flex ViewerSample Flex Viewer

Sample Flex ViewerSample Flex Viewer

•• RIA GIS viewer built with the ArcGIS API for FlexRIA GIS viewer built with the ArcGIS API for Flex•• Available through the Resource CenterAvailable through the Resource Center’’s Code Gallerys Code Gallery

–– Source code providedSource code provided•• Designed as a Designed as a templatetemplate

–– Configurable Configurable –– Plug in your own dataPlug in your own data

•• Uses a widget frameworkUses a widget framework–– ExtensibleExtensible

How do I get the Flex Sample Viewer?How do I get the Flex Sample Viewer?

•• Resource Center Resource Center Code GalleryCode Gallery

•• Configure to add organizational brandingConfigure to add organizational branding•• Configure to use Configure to use youryour datadata

–– Uses a series of config filesUses a series of config files

Configuring the Sample Flex ViewerConfiguring the Sample Flex Viewer

Creating your own WidgetsCreating your own Widgets

•• Widget architecture allows you to plug in:Widget architecture allows you to plug in:–– Your own custom widgetsYour own custom widgets–– 33rdrd party widgetsparty widgets

•• DeveloperDeveloper’’s Guide explains how to develop custom widgetss Guide explains how to develop custom widgets

A note of cautionA note of caution……

•• The good news:The good news:–– Flex Sample Viewer is a fantastic way to publish your data.Flex Sample Viewer is a fantastic way to publish your data.–– Can be a great foundation for creating applicationsCan be a great foundation for creating applications

•• HoweverHowever……–– It is not a silver bulletIt is not a silver bullet–– Design your application!Design your application!

•• RequirementsRequirements•• User InterfaceUser Interface•• DatabaseDatabase

–– Choose your solution based on your design.Choose your solution based on your design.

Remember that the Flex Sample Viewer is an application Remember that the Flex Sample Viewer is an application –– built on top of the built on top of the ArcGIS API for FlexArcGIS API for Flex..

WhatWhat’’s new at s new at 1010!!

Enhancements to REST at 10Enhancements to REST at 10

•• Support for representing tablesSupport for representing tables•• Handling relatesHandling relates•• TimeTime--aware layers / time queriesaware layers / time queries•• Support for AMFSupport for AMF•• Editing!Editing!•• Network Analysis enhancementsNetwork Analysis enhancements•• Much, much, more!Much, much, more!

ArcGIS API for FlexArcGIS API for Flex

•• At ArcGIS 10, will be called the ArcGIS API for Flex 2.0At ArcGIS 10, will be called the ArcGIS API for Flex 2.0•• Will support the enhancements made to REST APIWill support the enhancements made to REST API•• Will feature some other enhancementsWill feature some other enhancements

–– e.g. Representing point clusterse.g. Representing point clusters–– New Sample ViewerNew Sample Viewer

•• Will require Flash Builder 4.0Will require Flash Builder 4.0

ArcGIS Web Map for FlashArcGIS Web Map for Flash

•• What is it?What is it?–– Configurable web mapping applicationConfigurable web mapping application

•• Content and widgetsContent and widgets•• Look and feel (skins and layouts)Look and feel (skins and layouts)•• Easily deployable (your server or on ArcGIS.com)Easily deployable (your server or on ArcGIS.com)•• Audience is nonAudience is non--developersdevelopers•• Human readable configuration fileHuman readable configuration file

–– Improves upon Flex Viewer v1.xImproves upon Flex Viewer v1.x•• Core development Core development •• Technical supportTechnical support•• Easier to extendEasier to extend•• Better looking and Better looking and ‘‘richerricher’’

–– Released with 10Released with 10

Some quick feature demosSome quick feature demos

•• Related recordsRelated records•• EditingEditing•• Time sliderTime slider•• AMFAMF•• ClustererClusterer

THANKS!!!THANKS!!!

Have a good Have a good weekend!weekend!