1 / 53

ArcGIS Viewer for Flex Advanced Topics

2013 Esri International User Conference July 8–12, 2013 | San Diego, California. Technical Workshop. ArcGIS Viewer for Flex Advanced Topics. Lloyd Heberlie Björn Svensson. Introduction. Lloyd Heberlie @ lheberlie github.com / lheberlie Björn Svensson @ bjorn_svensson

benedict-levine
Download Presentation

ArcGIS Viewer for Flex Advanced Topics

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 2013 Esri International User Conference July 8–12, 2013 | San Diego, California Technical Workshop ArcGIS Viewer for FlexAdvanced Topics Lloyd Heberlie Björn Svensson

  2. Introduction • Lloyd Heberlie @lheberlie github.com/lheberlie • BjörnSvensson @bjorn_svensson github.com/bsvensson ArcGIS Viewer for Flex - Advanced Topics

  3. Who are you? ArcGIS Viewer for Flex - Advanced Topics

  4. Agenda • Developer overview • Viewer customization • Application builder custom modules • Road ahead • Additional resources ArcGIS Viewer for Flex - Advanced Topics

  5. Developer overview Björn ArcGIS Viewer for Flex - Advanced Topics

  6. Apache: Apache Flex • Active mailing list (1,600 emails / month) • Website (~1,600 visitors/day) • > 22,000 4.9.x SDK downloads February 2013 July 2012 Dec 2012 Flex SDK 4.9.1 Flex SDK 4.8.0 Flex SDK 4.9.0 ArcGIS Viewer for Flex - Advanced Topics

  7. Adobe: Adobe Flash Player & AIR • Desktop apps and web browsers • Mobile devices • Gaming • Multimedia March 2013 beta June 2013 February 2013 Flash Player 11.6 AIR 3.6 Flash Player 11.5 AIR 3.5 Flash Player 11.7 AIR 3.7 Flash Player 11.8 AIR 3.8 ArcGIS Viewer for Flex - Advanced Topics

  8. Esri: ArcGIS for Flex API and Viewer Well established Active user community Consistent release schedule March 2013 July 2013 April 2013 Dec 2012 3.2 3.1 3.3 3.4 ArcGIS Viewer for Flex - Advanced Topics

  9. Viewer building blocks ArcGIS Viewer for Flex - Advanced Topics

  10. GitHub • Two repos: Viewer and Builder • Source code • branches • Issues • Open or Closed • Assigned to milestones ArcGIS Viewer for Flex - Advanced Topics

  11. Demo GitHub ArcGIS Viewer for Flex - Advanced Topics

  12. Viewer customization Lloyd ArcGIS Viewer for Flex - Advanced Topics

  13. Wildfire viewer ArcGIS Viewer for Flex - Advanced Topics

  14. Adobe Fireworks ArcGIS Viewer for Flex - Advanced Topics

  15. Building components ArcGIS Viewer for Flex - Advanced Topics

  16. Fireworks Tips and Tricks • Vector autoshapes are your friend • Subselection tool • Don’t be afraid of the pen tool • Guides • Common Library • Path toolbar • Fireworks CS6 Essential Training • Lynda.com (with Ray Villalobos) ArcGIS Viewer for Flex - Advanced Topics

  17. Additional design resources • Kuler • http://kuler.adobe.com • Smashing Magazine • http://www.smashingmagazine.com/ • ColorPicker • Hex Color Picker (Mac) • ColorCop (Windows) • ScreenRuler • PixelWindow ArcGIS Viewer for Flex - Advanced Topics

  18. Visual components ArcGIS Viewer for Flex - Advanced Topics

  19. Flash XML Graphics (FXG) ArcGIS Viewer for Flex - Advanced Topics

  20. FXG workflow • Declarative XML syntax for defining vector graphics ArcGIS Viewer for Flex - Advanced Topics

  21. Which components need modified? • Modified components • HeaderController • Navigation • OverviewMap • MapSwitcher • WidgetTemplate • WidgetTemplateSkin • Using custom widget template ArcGIS Viewer for Flex - Advanced Topics

  22. Additional modifications • Custom stylesheet • Modify index.mxml to include custom.css • Change pageTitle in index.mxml ArcGIS Viewer for Flex - Advanced Topics

  23. How can I get my hands on this code? • https://github.com/lheberlie/custom-widgets-skins-viewer-flex • Branch: wildfire ArcGIS Viewer for Flex - Advanced Topics

  24. Demo Custom viewer setup Lloyd ArcGIS Viewer for Flex - Advanced Topics

  25. Application Builder custom modules Lloyd ArcGIS Viewer for Flex - Advanced Topics

  26. Custom modules • Not for everyone • What is a custom module? • Graphic User Interface for custom widgets • Why do you care? • Community widgets get better • Consistent look and feel like the default widgets • Community developers sharing widgets ArcGIS Viewer for Flex - Advanced Topics

  27. Managing custom widgets ArcGIS Viewer for Flex - Advanced Topics

  28. Widgets tab: custom widgets ArcGIS Viewer for Flex - Advanced Topics

  29. Widgets vs. Widgets sans modules ArcGIS Viewer for Flex - Advanced Topics

  30. Viewer requirements • Make sure you use the same versions • API • Viewer • Application Builder • Custom widgets • Compile your custom widget and the Viewer ArcGIS Viewer for Flex - Advanced Topics

  31. Application Builder requirements • Compiled viewer and widget • Create your module • CustomModel • CustomModule • CustomView • Add all CustomModules • Keep bin-release-temp ArcGIS Viewer for Flex - Advanced Topics

  32. Module details • Create a custom module (IBuilderModule) • Create a custom widget model (IWidgetModel) • Create a custom widget view (IWidgetView) Note: Layout widgets not yet supported. Tip: Read the source code for default modules! ArcGIS Viewer for Flex - Advanced Topics

  33. Distribution • Bundled with Application Builder • Custom Widget • Widget • WidgetConfig • Module • Assets • Meta.xml ArcGIS Viewer for Flex - Advanced Topics

  34. More information • Documentation • https://github.com/Esri/arcgis-viewer-builder-flex/wiki/Custom-Modules-for-Application-Builder • Source code • https://github.com/lheberlie/sample-module-viewer-builder-flex ArcGIS Viewer for Flex - Advanced Topics

  35. Demo Sample Module Documentation Lloyd Source code ArcGIS Viewer for Flex - Advanced Topics

  36. Tips and Tricks Lloyd ArcGIS Viewer for Flex - Advanced Topics

  37. Git and GitHub • SourceTree (Mac + Windows) • Code school (try.github.io) • Pro Git (git-scm.com/book) • Git Essential Training • Lynda.com (Kevin Skoglund) ArcGIS Viewer for Flex - Advanced Topics

  38. Adobe Flash Builder • General • Show line numbers • Key Bindings: Cmd(Ctrl) + Shift + L • Organize Imports: Shift + Cmd(Ctrl) + O • Fix Indentation: Cmd(Ctrl) + I • http://www.adobe.com/devnet/flash-builder/articles/tips-tricks.html • Code Templates • File Templates • FlexFormatter ArcGIS Viewer for Flex - Advanced Topics

  39. Code generation / code assist

  40. ArcGIS Viewer for Flex • Directions Widget • Widget containers ArcGIS Viewer for Flex - Advanced Topics

  41. Debugging • Clear browser cache • Debugging tools • Fiddler (Internet Explorer) • Charles Web Debugging Proxy (Mac + Windows) • Chrome Developer Tools • Firefox (HTTP fox, Firebug) • Be a detective ArcGIS Viewer for Flex - Advanced Topics

  42. Charles Web Debugging Proxy ArcGIS Viewer for Flex - Advanced Topics

  43. Road ahead Björn ArcGIS Viewer for Flex - Advanced Topics

  44. Road ahead • Continue quarterly release cycles • ArcGIS.com / Portal for ArcGIS • Geoenrichment • Offline / Sync • Extra zoom levels ArcGIS Viewer for Flex - Advanced Topics

  45. Additional resources Björn ArcGIS Viewer for Flex - Advanced Topics

  46. ArcGIS Viewer for Flex - Advanced Topics

  47. More information • Esri • developers.arcgis.com/en/flex • GitHub • esri.github.io • Apache • flex.apache.org • Adobe • http://www.adobe.com/devnet/flex.html ArcGIS Viewer for Flex - Advanced Topics

  48. Where can I get more info? Esri http://resources.arcgis.com documentation, forums, samples http://links.esri.com/flexviewer Adobe http://www.adobe.com/devnet/flex.html http://www.adobe.com/devnet/flex/videotraining.html http://www.adobe.com/devnet/flex/tourdeflex.html ArcGIS Viewer for Flex— An Introduction

  49. Esri training for Web developers • http://www.esri.com/training • Instructor-Led Courses • Building Web Applications Using the ArcGIS API for Flex (3.x) • Migrating to ArcGIS 10.2 for Server • ArcGIS for Server: Sharing GIS Content on the Web (10.1) • Online Training Seminars • Extending the ArcGIS Viewer for Flex (3.x) • Free, one-hour presentation and demos by Esri technical experts • Live seminar broadcast on a new topic every month ArcGIS Viewer for Flex— An Introduction

More Related