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
Esri UC2013 . Technical Workshop .
Introduction •
Lloyd Heberlie @lheberlie github.com/lheberlie
•
Björn Svensson @bjorn_svensson github.com/bsvensson
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Who are you?
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Agenda •
Developer overview
•
Viewer customization
•
Application builder custom modules
•
Road ahead
•
Additional resources
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Developer overview Björn
Esri UC2013 . Technical Workshop .
Apache: Apache Flex •
Active mailing list (1,600 emails / month)
•
Website (~1,600 visitors/day)
•
> 22,000 4.9.x SDK downloads July 2012
Dec 2012
February 2013
Flex SDK
Flex SDK
Flex SDK
4.8.0
4.9.0
4.9.1
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Adobe: Adobe Flash Player & AIR •
Desktop apps and web browsers
•
Mobile devices
•
Gaming
•
Multimedia February 2013
March 2013
June 2013
beta
Flash Player
Flash Player
Flash Player
Flash Player
11.5
11.6
11.7
11.8
AIR
AIR
AIR
AIR
3.5
3.6
3.7
3.8
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Esri: ArcGIS for Flex API and Viewer
•
Well established
•
Active user community
•
Consistent release schedule
Dec 2012
March 2013
April 2013
July 2013
3.1
3.2
3.3
3.4
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Viewer building blocks
API library
FlexViewer
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Application builder
GitHub •
Two repos: Viewer and Builder -
Source code - branches
-
Issues - Open or Closed - Assigned to milestones
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Demo
GitHub
Esri UC2013 . Technical Workshop .
Viewer customization Lloyd
Esri UC2013 . Technical Workshop .
Wildfire viewer
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Adobe Fireworks
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Building components
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
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)
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Additional design resources •
Kuler -
•
Smashing Magazine -
•
http://www.smashingmagazine.com/
ColorPicker -
•
http://kuler.adobe.com
Hex Color Picker (Mac) ColorCop (Windows)
ScreenRuler -
PixelWindow
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Visual components
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Flash XML Graphics (FXG)
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
FXG workflow •
Declarative XML syntax for defining vector graphics
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Which components need modified? •
Modified components -
-
•
HeaderController - Navigation OverviewMap MapSwitcher WidgetTemplate WidgetTemplateSkin
Using custom widget template
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Additional modifications •
Custom stylesheet
•
Modify index.mxml to include custom.css
•
Change pageTitle in index.mxml
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
How can I get my hands on this code? •
https://github.com/lheberlie/custom-widgetsskins-viewer-flex
•
Branch: wildfire
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Demo
Custom viewer setup Lloyd
Esri UC2013 . Technical Workshop .
Application Builder custom modules Lloyd
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
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Managing custom widgets
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Widgets tab: custom widgets
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Widgets vs. Widgets sans modules
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Viewer requirements •
Make sure you use the same versions -
API Viewer Application Builder
•
Custom widgets
•
Compile your custom widget and the Viewer
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Application Builder requirements •
Compiled viewer and widget
•
Create your module -
CustomModel CustomModule CustomView
•
Add all CustomModules
•
Keep bin-release-temp
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
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!
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Distribution •
Bundled with Application Builder
•
Custom Widget -
Widget WidgetConfig Module Assets Meta.xml
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
More information •
Documentation -
•
https://github.com/Esri/arcgis-viewer-builderflex/wiki/Custom-Modules-for-Application-Builder
Source code -
https://github.com/lheberlie/sample-moduleviewer-builder-flex
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Demo
Sample Module
Documentation
Lloyd
Source code
Esri UC2013 . Technical Workshop .
Tips and Tricks Lloyd
Esri UC2013 . Technical Workshop .
Git and GitHub •
SourceTree (Mac + Windows)
•
Code school (try.github.io)
•
Pro Git (git-scm.com/book)
•
Git Essential Training -
Lynda.com (Kevin Skoglund)
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
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/flashbuilder/articles/tips-tricks.html
•
Code Templates
•
File Templates
•
FlexFormatter
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Code generation / code assist
Esri UC2013 . Technical Workshop .
Esri UC2013 . Technical Workshop .
ArcGIS Viewer for Flex •
Directions Widget
•
Widget containers
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
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
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Charles Web Debugging Proxy
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Road ahead Björn
Esri UC2013 . Technical Workshop .
Road ahead •
Continue quarterly release cycles
•
ArcGIS.com / Portal for ArcGIS
•
Geoenrichment
•
Offline / Sync
•
Extra zoom levels
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Additional resources Björn
Esri UC2013 . Technical Workshop .
Viewer source code
Viewer help
API
• Resource Center • http://links.esri.com/flexviewer
• GitHub • https://github.com/Esri/arcgis-viewer-flex
• Developers • http://links.esri.com/flex
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
More information •
Esri -
•
GitHub -
•
esri.github.io
Apache -
•
developers.arcgis.com/en/flex
flex.apache.org
Adobe -
http://www.adobe.com/devnet/flex.html
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
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
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex— An Introduction
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
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex— An Introduction
UC Agenda: Flex Technical Workshops •
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
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex— An Introduction
Thank you… 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 Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
ArcGIS Viewer for Flex Advanced Topics Lloyd Heberlie Björn Svensson
Esri UC2013 . Technical Workshop .
Introduction •
Lloyd Heberlie @lheberlie github.com/lheberlie
•
Björn Svensson @bjorn_svensson github.com/bsvensson
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Who are you?
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Agenda •
Developer overview
•
Viewer customization
•
Application builder custom modules
•
Road ahead
•
Additional resources
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Developer overview Björn
Esri UC2013 . Technical Workshop .
Apache: Apache Flex •
Active mailing list (1,600 emails / month)
•
Website (~1,600 visitors/day)
•
> 22,000 4.9.x SDK downloads July 2012
Dec 2012
February 2013
Flex SDK
Flex SDK
Flex SDK
4.8.0
4.9.0
4.9.1
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Adobe: Adobe Flash Player & AIR •
Desktop apps and web browsers
•
Mobile devices
•
Gaming
•
Multimedia February 2013
March 2013
June 2013
beta
Flash Player
Flash Player
Flash Player
Flash Player
11.5
11.6
11.7
11.8
AIR
AIR
AIR
AIR
3.5
3.6
3.7
3.8
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Esri: ArcGIS for Flex API and Viewer
•
Well established
•
Active user community
•
Consistent release schedule
Dec 2012
March 2013
April 2013
July 2013
3.1
3.2
3.3
3.4
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Viewer building blocks
API library
FlexViewer
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Application builder
GitHub •
Two repos: Viewer and Builder -
Source code - branches
-
Issues - Open or Closed - Assigned to milestones
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Demo
GitHub
Esri UC2013 . Technical Workshop .
Viewer customization Lloyd
Esri UC2013 . Technical Workshop .
Wildfire viewer
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Adobe Fireworks
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Building components
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
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)
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Additional design resources •
Kuler -
•
Smashing Magazine -
•
http://www.smashingmagazine.com/
ColorPicker -
•
http://kuler.adobe.com
Hex Color Picker (Mac) ColorCop (Windows)
ScreenRuler -
PixelWindow
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Visual components
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Flash XML Graphics (FXG)
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
FXG workflow •
Declarative XML syntax for defining vector graphics
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Which components need modified? •
Modified components -
-
•
HeaderController - Navigation OverviewMap MapSwitcher WidgetTemplate WidgetTemplateSkin
Using custom widget template
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Additional modifications •
Custom stylesheet
•
Modify index.mxml to include custom.css
•
Change pageTitle in index.mxml
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
How can I get my hands on this code? •
https://github.com/lheberlie/custom-widgetsskins-viewer-flex
•
Branch: wildfire
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Demo
Custom viewer setup Lloyd
Esri UC2013 . Technical Workshop .
Application Builder custom modules Lloyd
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
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Managing custom widgets
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Widgets tab: custom widgets
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Widgets vs. Widgets sans modules
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Viewer requirements •
Make sure you use the same versions -
API Viewer Application Builder
•
Custom widgets
•
Compile your custom widget and the Viewer
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Application Builder requirements •
Compiled viewer and widget
•
Create your module -
CustomModel CustomModule CustomView
•
Add all CustomModules
•
Keep bin-release-temp
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
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!
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Distribution •
Bundled with Application Builder
•
Custom Widget -
Widget WidgetConfig Module Assets Meta.xml
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
More information •
Documentation -
•
https://github.com/Esri/arcgis-viewer-builderflex/wiki/Custom-Modules-for-Application-Builder
Source code -
https://github.com/lheberlie/sample-moduleviewer-builder-flex
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Demo
Sample Module
Documentation
Lloyd
Source code
Esri UC2013 . Technical Workshop .
Tips and Tricks Lloyd
Esri UC2013 . Technical Workshop .
Git and GitHub •
SourceTree (Mac + Windows)
•
Code school (try.github.io)
•
Pro Git (git-scm.com/book)
•
Git Essential Training -
Lynda.com (Kevin Skoglund)
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
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/flashbuilder/articles/tips-tricks.html
•
Code Templates
•
File Templates
•
FlexFormatter
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Code generation / code assist
Esri UC2013 . Technical Workshop .
Esri UC2013 . Technical Workshop .
ArcGIS Viewer for Flex •
Directions Widget
•
Widget containers
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
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
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Charles Web Debugging Proxy
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Road ahead Björn
Esri UC2013 . Technical Workshop .
Road ahead •
Continue quarterly release cycles
•
ArcGIS.com / Portal for ArcGIS
•
Geoenrichment
•
Offline / Sync
•
Extra zoom levels
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Additional resources Björn
Esri UC2013 . Technical Workshop .
Viewer source code
Viewer help
API
• Resource Center • http://links.esri.com/flexviewer
• GitHub • https://github.com/Esri/arcgis-viewer-flex
• Developers • http://links.esri.com/flex
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
More information •
Esri -
•
GitHub -
•
esri.github.io
Apache -
•
developers.arcgis.com/en/flex
flex.apache.org
Adobe -
http://www.adobe.com/devnet/flex.html
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
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
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex— An Introduction
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
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex— An Introduction
UC Agenda: Flex Technical Workshops •
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
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex— An Introduction
Thank you… 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 Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
Esri UC2013 . Technical Workshop . ArcGIS Viewer for Flex - Advanced Topics
