DIY Flex


Published on

Do-It-Yourself (DIY) with Adobe Flex and ArcGIS Server Flex API.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

DIY Flex

  1. 1. Do-It-Yourself (DIY) Flex<br />Ian Grasshoff – Waupaca County<br />Dan McFarlane – UW Stevens Point<br />
  2. 2. Goal:<br /> 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.<br />
  3. 3. Overview<br />What is Flex and How does it Work?<br />Why use Flex?<br />Why Do-It-Yourself (DIY)?<br />Getting Started<br />Learning Pathways<br />Brief Examples<br />Lessons Learned<br />Resources<br />Questions<br />
  4. 4. What is Flex?<br />Flash Builder IDE<br />Flex SDK<br />MXML<br />ActionScript<br />Flex Class Library<br />Flex is a Software Development Kit (SDK) for building expressive web applications that deploy consistently on all major browsers<br />Flex was created to make it easier for developers to construct applications using Flash platform<br />Two core pieces: MXML and ActionScript <br />February 2008 Adobe released Flex 3 SDK under open source Mozilla Public License<br />Applications can be developed using Eclipse Integrated Development Environment (IDE) (free) or Adobe Flash Builder ($$)<br />Source:<br />
  5. 5. What is MXML?<br />MXML (no official meaning)<br />XML based markup language<br />Used for laying out user interface<br /> components and data sources<br />Similar to HTML but more structured and richer set of tags (about 100)<br />Complies to .swf file (small web format, opens with Flashplayer) or .air<br />Flash Builder IDE<br />Flex SDK<br />MXML<br />Simple Example:<br /><mx:Canvasid="siteTitle" width="239.5" height="46" top="46" left="168“ backgroundAlpha="1.0" styleName="titleIconCanvas" borderSides="top,right" cornerRadius="0" includeIn="State1"><br /><mx:Labeltext="Radon Test Results" fontWeight="bold" fontSize="22“ left="-2" top="1“ fontFamily="CourierNew" width="100%" height="25“ textAlign="center" color="#1f5c5b"/><br /><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"/><br /></mx:Canvas><br />
  6. 6. What is Action Script?<br />ActionScript (Current Version: 3.0)<br />Object-oriented programming language <br /> developed by Macromedia<br />ECMAScript, which means syntax is similar to<br /> Javascript<br />ActionScript makes things happen! MXML and ActionScript go together<br />Complies to .swf file (small web format, opens with Flashplayer)<br />Flash Builder IDE<br />Flex SDK<br />ActionScript<br />Simple Example:<br /><![CDATA[<br />importmx.controls.Alert;<br /> private functionmyFunction(txt:String):void<br />{<br />,”MyAlert”,Alert.OK);<br />}<br />]]><br /><mx:VBox width=“500” top=“10” left=“10”><br /> <mx:TextInput id=“myText” width=“95%”/><br /> <mx:Buttonid=“myButton” click=“myFunction(myText.text)” label=“click me”/><br /></mx:VBox><br />Example Link<br />
  7. 7. How Flex Works<br />Flash Builder IDE<br />Client Web Browser<br />Flex SDK<br />Flash Player<br />MXML<br />ActionScript<br />Flex Class Library<br />Data<br />Data<br />Web Server<br />.air<br />.swf<br />Flex Remote Objects<br />XML/HTTP, REST, SOAP Web Services<br />J2EE/Cold Fusion/PHP/.NET<br />AIR Runtime on Desktop Computer<br />Existing Applications and Infrastructure<br />
  8. 8. Flex & ArcGIS Server<br />Client Web Browser<br />Flash Player<br />Data<br />Web Server<br />XML/HTTP, REST, SOAP Web Services<br />Data<br />ArcGIS Server<br />Server Object Manager (SOM) and Server Object Container (SOC)<br />SDE<br />Geodatabase<br />File<br />Geodatabase<br />
  9. 9. Why Use Flex?<br />Pros<br />Tons of Core Components (About 100)<br />Large User Base (especially among GIS community)<br />An easy to use integrated development environment (IDE), aka Flash Builder 4 (previous version is Flex Builder 3)<br />Polished visual appeal, slick animation effects<br />MXML/ActionScript 3.0 very similar to JavaScript so it’s fairly easy to learn<br />Fast Deployment<br />Esri has made it easy to use Flex with ArcGIS Server<br />Lots of online resources<br />
  10. 10. Why Use Flex?Cont.<br />Cons<br />Database access isn’t easy as it could be (but it is possible)<br />Integration with Microsoft .NET solutions is complicated (WebOrb)<br />Requires Adobe Flash Player to be installed on client (Adobe claims 99.5% of web clients in US/Canada have ver. 10 installed)<br />Applications can be resource intensive<br />Doesn’t work well on mobile devices<br />Another new programming language to learn<br />
  11. 11. Why DIY?<br />Pros<br />Save $$$ (no vendor contracts)<br />No Vendor Lock-in<br />Maintain future applications in-house<br />Quicker adaptation of new technology<br />Flexibility to do what you want, when you want<br />Gain the knowledge to evaluate vendor products (if you choose to purchase services in the future)<br />Springboard to other programming languages<br />Cons<br />Takes time (which costs $$)<br />Learning curve (if you build from scratch)<br />Just one more thing to learn/maintain<br />
  12. 12. Learning Pathways<br />Flex in a Week Videos<br />ArcGIS Sample Flex Viewer Application<br />Sample Flex Viewer 2.2<br />Sample Flex Viewer 1.3<br />ArcGIS Flex API Samples (access from ArcGIS Resource Center)<br />Browse/Download Code Gallery Samples <br />Modify Code Gallery Samples<br />Build your own widget and/or modify Sample Flex Viewer<br />Create your own custom site from scratch (if deemed necessary)<br />
  13. 13. Getting Started<br />Quick and Easy<br />Requires access to AGS services (you can use Esri Services for free)<br />Download Esri Sample Flex Viewer Application (ArcGIS Resource Center)<br />Modify Sample Flex Viewer base config.xml file to point to ArcGIS Server services<br />Modify widget config.xml files<br />
  14. 14. Getting Started<br />More Involved<br />Access to ArcGIS Server services (you can use Esri Services for free)<br />Download Esri Sample Flex Viewer Application (ArcGIS Resource Center) source code<br />Download latest Esri Flex API source code<br />Download Adobe Flash Builder 4 (Free 60-day trial)<br />Flash Builder 4 Premium: $699 ($299.00 for upgrade from previous ver.)<br />Flash Builder 4 Standard: $249 ($99.00 for upgrade from previous ver.)<br />Setup Flex Project (import source code, setup config.xml files)<br />Compile and test the application<br />
  15. 15. Brief Examples<br />Example 1: ArcGIS Viewer for Flex<br />Example 2: Custom Widgets<br />Example 3: Custom Flex Application<br />
  16. 16. Brief Examples<br />ArcGIS Viewer for Flex<br />Example 1: ArcGIS Viewer for Flex<br />Ready to deploy GIS Web client for ArcGIS Server<br />Configurable, so you can easily add tools & data without programming<br />
  17. 17. Brief Examples<br />ArcGIS Viewer for Flex<br />Config.xml files<br />Titles, logos, start up page, application color <br />Overview map, navigation tools, etc<br />Map content (basemaps & operational layers)<br /><ul><li>must reference a published map service</li></ul>GIS client functionality<br />
  18. 18. Brief Examples<br />ArcGIS Viewer for Flex<br />Config.xml files<br /><ul><li> Controls appearance
  19. 19. Functionality
  20. 20. Data Content
  21. 21. No need to compile application</li></li></ul><li>Brief Examples<br />ArcGIS Viewer for Flex<br />Extend functionality with widgets from ESRI community<br />
  22. 22. Brief Examples<br />ArcGIS Viewer for Flex<br />Ready-to-deploy widgets<br />Example Link<br />
  23. 23. Brief Examples<br />Custom Widgets<br />Custom Sample Flex Viewer Widgets<br />Use the EsriBaseWidget Class<br />Plug right into Sample Flex Viewer Application<br />Just copy/paste any existing widget and modify as needed<br />Modify the config.xml to include your new widget!<br />Custom Widgets Example Link<br />
  24. 24. Brief Examples<br />Custom Application<br />Custom Flex Application<br />Goal: create a streamlined, simplified Flex application (started this prior to the release of Sample Flex Viewer 2.2) for viewing Radon Test Data<br /> Created with the idea to reuse the base code for future applications<br />Started small, grew more complex with each end-user review<br />Approx. 160 hours to build (this was mainly due to fact that I was learning as I went)<br />Learned basic object oriented programming through the process<br />Custom Flex Application Example Link<br />
  25. 25. Lessons Learned<br />Flex in a week video series: great starting point<br />Document (this can be as simple as good comments in your code)<br />Research: chances are someone else might have encountered a similar problem<br />Make your code as re-usable as possible (very difficult)<br />Look into “FlashVars”<br />Flex coupled with PHP provides even more functionality<br />Share your code, especially if you “borrow” heavily from others<br />
  26. 26. Resources<br />Flex<br />Tour de Flex (<br />Flex in a Week Videos (<br />Flex Developer Center (<br />Flex Cookbook<br /> (<br />Flex Examples (<br />Balsamiq(<br />Stack Overflow (<br />
  27. 27. Resources Cont.<br />ArcGIS Server Flex API<br />ArcGIS Server Blog (<br />ArcGIS API for Flex (<br /> Gallery<br />(<br />ArcGIS API 1.3 Code Gallery: Moved to ArcScripts(<br />API 1.3 code is still very useful!<br />
  28. 28. Questions?<br /><br /><br />