Do it yourself diy flex
1 / 26

DIY Flex - PowerPoint PPT Presentation

  • Uploaded on

Do-it-yourself Flex

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'DIY Flex' - igras705

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Do it yourself diy flex l.jpg

Do-It-Yourself (DIY) Flex

Ian Grasshoff – Waupaca County

Dan McFarlane – UW Stevens Point

Slide2 l.jpg

To provide a basic guide and the corresponding resources to help attendees get started using the Esri Flex Application Programming Interface (API) in conjunction with ArcGIS Server.

Overview l.jpg

  • What is Flex and How does it Work?

  • Why use Flex?

  • Why Do-It-Yourself (DIY)?

  • Getting Started

  • Learning Pathways

  • Brief Examples

  • Lessons Learned

  • Resources

  • Questions

What is flex l.jpg

Flash Builder IDE

What is Flex?

Flex SDK



  • Flex is a Software Development Kit (SDK) for building expressive web applications that deploy consistently on all major browsers

  • Flex was created to make it easier for developers to construct applications using Flash platform

  • Two core pieces: MXML and ActionScript

  • February 2008 Adobe released Flex 3 SDK under open source Mozilla Public License

  • Applications can be developed using Eclipse Integrated Development Environment (IDE) (free) or Adobe Flash Builder ($$)

Flex Class Library


What is mxml l.jpg
What is MXML?

  • MXML (no official meaning)

    • XML based markup language

    • Used for laying out user interface

      components and data sources

    • Similar to HTML but more structured and richer set of tags (about 100)

    • Complies to .swf file (small web format, opens with Flashplayer) or .air

Flash Builder IDE

Flex SDK


  • Simple Example:

    <mx:Canvasid="siteTitle" width="239.5" height="46" top="46" left="168“ backgroundAlpha="1.0" styleName="titleIconCanvas" borderSides="top,right" cornerRadius="0" includeIn="State1">

    <mx:Labeltext="Radon Test Results" fontWeight="bold" fontSize="22“ left="-2" top="1“ fontFamily="CourierNew" width="100%" height="25“ textAlign="center" color="#1f5c5b"/>

    <mx:Labeltext="Waupaca County, Wisconsin" fontWeight="bold" fontSize="12“ fontStyle="italic" left="0" top="23" fontFamily="Verdana" width="200" height="20“ textAlign="left" textDecoration="none" color="#000000"/>


What is action script l.jpg
What is Action Script?

  • ActionScript (Current Version: 3.0)

    • Object-oriented programming language

      developed by Macromedia

    • ECMAScript, which means syntax is similar to


    • ActionScript makes things happen! MXML and ActionScript go together

    • Complies to .swf file (small web format, opens with Flashplayer)

Flash Builder IDE

Flex SDK


Simple Example:



private functionmyFunction(txt:String):void




<mx:VBox width=“500” top=“10” left=“10”>

<mx:TextInput id=“myText” width=“95%”/>

<mx:Buttonid=“myButton” click=“myFunction(myText.text)” label=“click me”/>


Example Link

How flex works l.jpg
How Flex Works

Flash Builder IDE

Client Web Browser

Flex SDK

Flash Player



Flex Class Library



Web Server



Flex Remote Objects


J2EE/Cold Fusion/PHP/.NET

AIR Runtime on Desktop Computer

Existing Applications and Infrastructure

Flex arcgis server l.jpg
Flex & ArcGIS Server

Client Web Browser

Flash Player


Web Server



ArcGIS Server

Server Object Manager (SOM) and Server Object Container (SOC)





Why use flex l.jpg
Why Use Flex?

  • Pros

    • Tons of Core Components (About 100)

    • Large User Base (especially among GIS community)

    • An easy to use integrated development environment (IDE), aka Flash Builder 4 (previous version is Flex Builder 3)

    • Polished visual appeal, slick animation effects

    • MXML/ActionScript 3.0 very similar to JavaScript so it’s fairly easy to learn

    • Fast Deployment

    • Esri has made it easy to use Flex with ArcGIS Server

    • Lots of online resources

Why use flex cont l.jpg
Why Use Flex?Cont.

  • Cons

    • Database access isn’t easy as it could be (but it is possible)

    • Integration with Microsoft .NET solutions is complicated (WebOrb)

    • Requires Adobe Flash Player to be installed on client (Adobe claims 99.5% of web clients in US/Canada have ver. 10 installed)

    • Applications can be resource intensive

    • Doesn’t work well on mobile devices

    • Another new programming language to learn

Why diy l.jpg
Why DIY?

  • Pros

    • Save $$$ (no vendor contracts)

    • No Vendor Lock-in

    • Maintain future applications in-house

    • Quicker adaptation of new technology

    • Flexibility to do what you want, when you want

    • Gain the knowledge to evaluate vendor products (if you choose to purchase services in the future)

    • Springboard to other programming languages

  • Cons

    • Takes time (which costs $$)

    • Learning curve (if you build from scratch)

    • Just one more thing to learn/maintain

Learning pathways l.jpg
Learning Pathways

  • Flex in a Week Videos

  • ArcGIS Sample Flex Viewer Application

    • Sample Flex Viewer 2.2

    • Sample Flex Viewer 1.3

  • ArcGIS Flex API Samples (access from ArcGIS Resource Center)

  • Browse/Download Code Gallery Samples

  • Modify Code Gallery Samples

  • Build your own widget and/or modify Sample Flex Viewer

  • Create your own custom site from scratch (if deemed necessary)

Getting started l.jpg
Getting Started

  • Quick and Easy

    • Requires access to AGS services (you can use Esri Services for free)

    • Download Esri Sample Flex Viewer Application (ArcGIS Resource Center)

    • Modify Sample Flex Viewer base config.xml file to point to ArcGIS Server services

    • Modify widget config.xml files

Getting started14 l.jpg
Getting Started

  • More Involved

    • Access to ArcGIS Server services (you can use Esri Services for free)

    • Download Esri Sample Flex Viewer Application (ArcGIS Resource Center) source code

    • Download latest Esri Flex API source code

    • Download Adobe Flash Builder 4 (Free 60-day trial)

      • Flash Builder 4 Premium: $699 ($299.00 for upgrade from previous ver.)

      • Flash Builder 4 Standard: $249 ($99.00 for upgrade from previous ver.)

    • Setup Flex Project (import source code, setup config.xml files)

    • Compile and test the application

Brief examples l.jpg
Brief Examples

  • Example 1: ArcGIS Viewer for Flex

  • Example 2: Custom Widgets

  • Example 3: Custom Flex Application

Brief examples16 l.jpg
Brief Examples

ArcGIS Viewer for Flex

  • Example 1: ArcGIS Viewer for Flex

    • Ready to deploy GIS Web client for ArcGIS Server

    • Configurable, so you can easily add tools & data without programming

Brief examples17 l.jpg
Brief Examples

ArcGIS Viewer for Flex

  • Config.xml files

Titles, logos, start up page, application color

Overview map, navigation tools, etc

  • Map content (basemaps & operational layers)

  • must reference a published map service

GIS client functionality

Brief examples18 l.jpg
Brief Examples

ArcGIS Viewer for Flex

  • Config.xml files

  • Controls appearance

  • Functionality

  • Data Content

  • No need to compile application

Slide19 l.jpg

Brief Examples

ArcGIS Viewer for Flex

  • Extend functionality with widgets from ESRI community

Brief examples20 l.jpg
Brief Examples

ArcGIS Viewer for Flex

  • Ready-to-deploy widgets

Example Link

Brief examples21 l.jpg
Brief Examples

Custom Widgets

  • Custom Sample Flex Viewer Widgets

    • Use the EsriBaseWidget Class

    • Plug right into Sample Flex Viewer Application

    • Just copy/paste any existing widget and modify as needed

    • Modify the config.xml to include your new widget!

Custom Widgets Example Link

Brief examples22 l.jpg
Brief Examples

Custom Application

  • Custom Flex Application

    • Goal: create a streamlined, simplified Flex application (started this prior to the release of Sample Flex Viewer 2.2) for viewing Radon Test Data

    • Created with the idea to reuse the base code for future applications

    • Started small, grew more complex with each end-user review

    • Approx. 160 hours to build (this was mainly due to fact that I was learning as I went)

    • Learned basic object oriented programming through the process

Custom Flex Application Example Link

Lessons learned l.jpg
Lessons Learned

  • Flex in a week video series: great starting point

  • Document (this can be as simple as good comments in your code)

  • Research: chances are someone else might have encountered a similar problem

  • Make your code as re-usable as possible (very difficult)

  • Look into “FlashVars”

  • Flex coupled with PHP provides even more functionality

  • Share your code, especially if you “borrow” heavily from others

Resources l.jpg

  • Flex

    • Tour de Flex (

    • Flex in a Week Videos (

    • Flex Developer Center (

    • Flex Cookbook


    • Flex Examples (

    • Balsamiq(

    • Stack Overflow (

Resources cont l.jpg
Resources Cont.

  • ArcGIS Server Flex API

    • ArcGIS Server Blog (

    • ArcGIS API for Flex (

    • Gallery


    • ArcGIS API 1.3 Code Gallery: Moved to ArcScripts(

      • API 1.3 code is still very useful!