Do it yourself diy flex
Download
1 / 26

DIY Flex - PowerPoint PPT Presentation


  • 769 Views
  • Uploaded on

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

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
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 l.jpg
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


What is flex l.jpg

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

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

      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 l.jpg
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 l.jpg
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 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
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 l.jpg
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 l.jpg
Questions?

[email protected]

  • [email protected]


ad