Do it yourself diy flex
Download
1 / 26

DIY Flex - PowerPoint PPT Presentation


Do-it-yourself Flex

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

Download Presentation

DIY Flex

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

Ian Grasshoff – Waupaca County

Dan McFarlane – UW Stevens Point


Goal:

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

  • 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


Flash Builder IDE

What is Flex?

Flex SDK

MXML

ActionScript

  • 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

Source: http://www.adobe.com/products/flex


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

MXML

  • 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"/>

    </mx:Canvas>


What is Action Script?

  • ActionScript (Current Version: 3.0)

    • Object-oriented programming language

      developed by Macromedia

    • ECMAScript, which means syntax is similar to

      Javascript

    • ActionScript makes things happen! MXML and ActionScript go together

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

Flash Builder IDE

Flex SDK

ActionScript

Simple Example:

<![CDATA[

importmx.controls.Alert;

private functionmyFunction(txt:String):void

{

Alert.show(txt,”MyAlert”,Alert.OK);

}

]]>

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

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

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

</mx:VBox>

Example Link


How Flex Works

Flash Builder IDE

Client Web Browser

Flex SDK

Flash Player

MXML

ActionScript

Flex Class Library

Data

Data

Web Server

.air

.swf

Flex Remote Objects

XML/HTTP, REST, SOAP Web Services

J2EE/Cold Fusion/PHP/.NET

AIR Runtime on Desktop Computer

Existing Applications and Infrastructure


Flex & ArcGIS Server

Client Web Browser

Flash Player

Data

Web Server

XML/HTTP, REST, SOAP Web Services

Data

ArcGIS Server

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

SDE

Geodatabase

File

Geodatabase


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.

  • 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?

  • 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

  • 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

  • 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 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

  • Example 1: ArcGIS Viewer for Flex

  • Example 2: Custom Widgets

  • Example 3: Custom Flex Application


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 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 Examples

ArcGIS Viewer for Flex

  • Config.xml files

  • Controls appearance

  • Functionality

  • Data Content

  • No need to compile application


Brief Examples

ArcGIS Viewer for Flex

  • Extend functionality with widgets from ESRI community


Brief Examples

ArcGIS Viewer for Flex

  • Ready-to-deploy widgets

Example Link


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

  • 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

  • Flex

    • Tour de Flex (http://www.adobe.com/devnet/flex/tourdeflex.html)

    • Flex in a Week Videos (http://www.adobe.com/devnet/flex/videotraining.html)

    • Flex Developer Center (http://www.adobe.com/devnet/flex.html)

    • Flex Cookbook

      (http://cookbooks.adobe.com/flex)

    • Flex Examples (http://blog.flexexamples.com)

    • Balsamiq(http://balsamiq.com/)

    • Stack Overflow (http://stackoverflow.com/)


Resources Cont.

  • ArcGIS Server Flex API

    • ArcGIS Server Blog (http://blogs.esri.com/Dev/blogs/arcgisserver/default.aspx)

    • ArcGIS API for Flex (http://help.arcgis.com/en/webapi/flex/index.html)

    • ArcGIS.com Gallery

      (http://www.arcgis.com/home/gallery.html)

    • ArcGIS API 1.3 Code Gallery: Moved to ArcScripts(http://arcscripts.esri.com)

      • API 1.3 code is still very useful!


Questions?

Ian.Grasshoff@co.waupaca.wi.us

  • Dan.McFarlane@uwsp.edu


ad
  • Login