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

2. Esri UC2013. Technical Workshop. Introduction Lloyd Heberlie @lheberlie github.com/lheberlie Björn Svensson @bjorn_svensson github.com/bsvensson ArcGIS Viewer for Flex - Advanced Topics

3. Esri UC2013. Technical Workshop. Who are you? ArcGIS Viewer for Flex - Advanced Topics

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

5. Esri UC2013. Technical Workshop. Björn Developer overview ArcGIS Viewer for Flex - Advanced Topics

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

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

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

9. Esri UC2013. Technical Workshop. Viewer building blocks ArcGIS Viewer for Flex - Advanced Topics API library Application builder FlexViewer

10. Esri UC2013. Technical Workshop. GitHub Two repos: Viewer and BuilderViewerBuilder - Source code - branches - Issues Issues - Open or Closed - Assigned to milestonesmilestones ArcGIS Viewer for Flex - Advanced Topics

11. Esri UC2013. Technical Workshop. GitHub Demo ArcGIS Viewer for Flex - Advanced Topics

12. Esri UC2013. Technical Workshop. Lloyd Viewer customization ArcGIS Viewer for Flex - Advanced Topics

13. Esri UC2013. Technical Workshop. Wildfire viewer ArcGIS Viewer for Flex - Advanced Topics

14. Esri UC2013. Technical Workshop. Adobe Fireworks ArcGIS Viewer for Flex - Advanced Topics

15. Esri UC2013. Technical Workshop. Building components ArcGIS Viewer for Flex - Advanced Topics

16. Esri UC2013. Technical Workshop. 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. Esri UC2013. Technical Workshop. Additional design resources Kuler - http://kuler.adobe.com http://kuler.adobe.com Smashing Magazine - http://www.smashingmagazine.com/ http://www.smashingmagazine.com/ ColorPicker - Hex Color Picker (Mac) - ColorCop (Windows) ScreenRuler - PixelWindow ArcGIS Viewer for Flex - Advanced Topics

18. Esri UC2013. Technical Workshop. Visual components ArcGIS Viewer for Flex - Advanced Topics

19. Esri UC2013. Technical Workshop. Flash XML Graphics (FXG) ArcGIS Viewer for Flex - Advanced Topics

20. Esri UC2013. Technical Workshop. FXG workflow Declarative XML syntax for defining vector graphics ArcGIS Viewer for Flex - Advanced Topics

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

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

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

24. Esri UC2013. Technical Workshop. Lloyd Custom viewer setup Demo ArcGIS Viewer for Flex - Advanced Topics

25. Esri UC2013. Technical Workshop. Lloyd Application Builder custom modules ArcGIS Viewer for Flex - Advanced Topics

26. Esri UC2013. Technical Workshop. 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. Esri UC2013. Technical Workshop. Managing custom widgets ArcGIS Viewer for Flex - Advanced Topics

28. Esri UC2013. Technical Workshop. Widgets tab: custom widgets ArcGIS Viewer for Flex - Advanced Topics

29. Esri UC2013. Technical Workshop. Widgets vs. Widgets sans modules ArcGIS Viewer for Flex - Advanced Topics

30. Esri UC2013. Technical Workshop. 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. Esri UC2013. Technical Workshop. 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. Esri UC2013. Technical Workshop. 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. Esri UC2013. Technical Workshop. Distribution Bundled with Application Builder Custom Widget - Widget - WidgetConfig - Module - Assets - Meta.xml ArcGIS Viewer for Flex - Advanced Topics

34. Esri UC2013. Technical Workshop. More information Documentation - https://github.com/Esri/arcgis-viewer-builder- flex/wiki/Custom-Modules-for-Application-Builder 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 https://github.com/lheberlie/sample-module- viewer-builder-flex ArcGIS Viewer for Flex - Advanced Topics

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

36. Esri UC2013. Technical Workshop. Lloyd Tips and Tricks ArcGIS Viewer for Flex - Advanced Topics

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

38. Esri UC2013. Technical Workshop. 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 http://www.adobe.com/devnet/flash- builder/articles/tips-tricks.html Code Templates File Templates FlexFormatter ArcGIS Viewer for Flex - Advanced Topics

39. Esri UC2013. Technical Workshop. Code generation / code assist

40. Esri UC2013. Technical Workshop.

41. ArcGIS Viewer for Flex Directions Widget Widget containers ArcGIS Viewer for Flex - Advanced Topics

42. Esri UC2013. Technical Workshop. 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

43. Esri UC2013. Technical Workshop. Charles Web Debugging Proxy ArcGIS Viewer for Flex - Advanced Topics

44. Esri UC2013. Technical Workshop. Björn Road ahead ArcGIS Viewer for Flex - Advanced Topics

45. Esri UC2013. Technical Workshop. Road ahead Continue quarterly release cycles ArcGIS.com / Portal for ArcGIS Geoenrichment Offline / Sync Extra zoom levels ArcGIS Viewer for Flex - Advanced Topics

46. Esri UC2013. Technical Workshop. Björn Additional resources ArcGIS Viewer for Flex - Advanced Topics

47. Esri UC2013. Technical Workshop. Viewer source code Resource Center http://links.esri.com/flexviewer Viewer help GitHub https://github.com/Esri/arcgis-viewer-flex API Developers http://links.esri.com/flex ArcGIS Viewer for Flex - Advanced Topics

48. Esri UC2013. Technical Workshop. 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

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

50. Esri UC2013. Technical Workshop. http://www.esri.com/training Instructor-Led Courses - Building Web Applications Using the ArcGIS API for Flex (3.x) Building Web Applications Using the ArcGIS API for Flex - Migrating to ArcGIS 10.2 for Server - ArcGIS for Server: Sharing GIS Content on the Web (10.1) ArcGIS for Server: Sharing GIS Content on the Web 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 Esri training for Web developers ArcGIS Viewer for Flex— An Introduction

51. Esri UC2013. Technical Workshop. ArcGIS API for Flex – An Introduction - Tues. 7/9; 1:30-2:45 – Rm 15A - Wed. 7/10; 1:30-2:45 – Rm 15B ArcGIS Viewer for Flex – An Introduction - Wed. 7/10; 8:30-9:45 – Rm 14B ArcGIS Viewer for Flex – Advanced Topics - Wed. 7/10; 10:15-11:30 – Rm. 14B - Thurs. 7/11; 1:30-2:45 – Rm 31C ArcGIS API for Flex – Advanced Topics - Wed. 7/10; 3:15-4:30 – Rm. 15A - Thurs. 7/11; 8:30-9:45 – Rm. 15A UC Agenda: Flex Technical Workshops ArcGIS Viewer for Flex— An Introduction

52. Esri UC2013. Technical Workshop. Please fill out the session evaluation First Offering ID: 1347 Second Offering ID: 1245 Online – www.esri.com/ucsessionsurveys Paper – pick up and put in drop box Thank you… ArcGIS Viewer for Flex - Advanced Topics

53. Esri UC2013. Technical Workshop.ArcGIS Viewer for Flex - Advanced Topics