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

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

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

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

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

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

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

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 March April July 2013

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

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

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

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

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

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

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

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

Esri UC2013. Technical Workshop. Additional design resources Kuler Smashing Magazine ColorPicker - Hex Color Picker (Mac) - ColorCop (Windows) ScreenRuler - PixelWindow ArcGIS Viewer for Flex - Advanced Topics

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

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

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

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

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

Esri UC2013. Technical Workshop. How can I get my hands on this code? skins-viewer-flex skins-viewer-flex Branch: wildfire ArcGIS Viewer for Flex - Advanced Topics

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

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

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

Esri UC2013. Technical Workshop. Managing custom widgets ArcGIS Viewer for Flex - Advanced Topics

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

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

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

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

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

Esri UC2013. Technical Workshop. Distribution Bundled with Application Builder Custom Widget - Widget - WidgetConfig - Module - Assets - Meta.xml ArcGIS Viewer for Flex - Advanced Topics

Esri UC2013. Technical Workshop. More information Documentation - flex/wiki/Custom-Modules-for-Application-Builder flex/wiki/Custom-Modules-for-Application-Builder Source code - viewer-builder-flex viewer-builder-flex ArcGIS Viewer for Flex - Advanced Topics

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

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

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

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 - builder/articles/tips-tricks.html builder/articles/tips-tricks.html Code Templates File Templates FlexFormatter ArcGIS Viewer for Flex - Advanced Topics

Esri UC2013. Technical Workshop. Code generation / code assist

Esri UC2013. Technical Workshop.

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

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

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

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

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

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

Esri UC2013. Technical Workshop. Viewer source code Resource Center Viewer help GitHub API Developers ArcGIS Viewer for Flex - Advanced Topics

Esri UC2013. Technical Workshop. More information Esri - developers.arcgis.com/en/flex GitHub - esri.github.io Apache - flex.apache.org Adobe - ArcGIS Viewer for Flex - Advanced Topics

Esri UC2013. Technical Workshop. Where can I get more info? Esri documentation, forums, samples Adobe ArcGIS Viewer for Flex— An Introduction

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

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

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

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