1. Esri Developer Summit in Europe
November 9 | Rotterdam
Configuring and Customizing ArcGIS
Viewer for Silverlight and ArcGIS
Viewer for Flex
Mark Jagt
Boudewijn Boogaard

2. Agenda
• Configuring the ArcGIS Viewer for Silverlight
• Extending the Silverlight viewer with Add-ins
• Configuring the ArcGIS Viewer for Flex
• Extending the Flex viewer with Widgets

3. ArcGIS Viewer for Silverlight
Overview

4. ArcGIS Viewer for Silverlight Overview
• Configurable ready-to-deploy Web client
- Built with ArcGIS API for Silverlight
• Easily and quickly create and implement GIS Web
mapping applications
• Set of core tools and functionality
• No programming or editing configuration files
- Ideal for novice Web application creators

5. ArcGIS Viewer for Silverlight Overview
• Hosted on-premise
• Consists of 3 components:
1. Configurable Viewer
2. Application Builder
3. Extensibility Kit

6. Building a Silverlight Viewer
Application Builder

7. Add-Ins

8. Add-Ins – Extending the Viewer
• The Viewer does the repetitive stuff
- Map configuration
- Overall app architecture
- Generic tools
- Generic app appearance (title, colors, logo)
• Add-ins enable specific workflows and branding
- “Add-in” → code module containing functionality
- Compiled as Silverlight packages (.xap files)
- Seamlessly plug-in to Viewer and Builder
- Encourages reusability

9. Add-Ins – Extending the Viewer
• Software for developing add-ins
- Visual Studio 2010 SP1 or Visual Web Developer 2010
Express
- ArcGIS API for Silverlight 3.0
- Silverlight 5 Tools for Visual Studio 2010
- Silverlight Toolkit
- ArcGIS Extensibility SDK for Silverlight 3.0
- Visual Studio 2010 template provided
• Same add-in will work in both the Silverlight Viewer
and ArcGIS for SharePoint

10. Add-Ins – Extensibility Points
Several ways to customize:
1. Tools → functionality initiated by tool on toolbar
2. Behaviors → non-UI logic
3. Layouts → custom application “look and feel”
4. Controls → UI integrated into application

11. Add-Ins – Implementation
• Develop using the Extensibility API
- Included in the Extensibility SDK
• ESRI.ArcGIS.Client.Extensibility assembly
- Lightweight API for Viewer (and SharePoint)
- Provides access to map, selected layer, and pop-up
- Methods to easily show UI in dialogs
- Hooks to store and load add-in configuration
• Any Silverlight library can be referenced
• Use the VS Template to start

12. Tools
• Simplest, most common extensibility endpoint
• Logic initiated by user click
• Appear as buttons on toolbars and menus
• Users can add them from Application Builder

13. Layouts - Overview
• Define application look and feel
• Loose xaml files – all markup, no code
• Position of viewer elements
• Side panel
• Navigation control
• Scalebar
• Title, logo, links
• More
• Styles used by Viewer
• Tool buttons
• Pop-ups
• Navigation control
• More

14. Layouts - Implementation
• Start with copy of an existing layout
• Open-ended
- Anything that can be declared in XAML
• Some well-known elements expected by Viewer
- If it has an x:Name, don’t remove it

15. Layouts - Deployment
• Copy to BuilderTemplatesDefaultConfigLayouts
• Create preview image
• Name the same as xaml file
• Ideal size is 580 x 359
• Tip - clear browser cache

16. Controls
• Pieces of UI that are “built-in”
• Included in layout
• Can implement a tool to toggle on/off
• Out-of-the-box examples
• Map
• Navigation control
• FeatureDataGrid (attribute table)

17. Templates
• Default Viewer configuration
• Map
• Tools
• Basemaps
• Layouts
• Colors
• Default template stored at BuilderTemplatesDefault
• Includes all files in a Viewer application

18. Creating Templates
• Configure a Viewer
• Deploy
• Copy Deployed Viewer folder to BuilderTemplates
• Add an entry to BuilderTemplates.xml

19. A Simple Tool and Behavior

20. ArcGIS Viewer for Flex
Overview

21. A quick primer before we get started…
• Configurable ready-to-deploy Web client
- Built with the ArcGIS API for Flex
• Easily and quickly build and implement GIS Web
mapping applications

22. Three flavors to choose from…
1 - Application Builder
- Great starting point.
2 - ArcGIS Viewer for Flex (compiled)
- Power users!
3 - ArcGIS Viewer for Flex (source)
- Flex developers - do anything you want!
- https://github.com/ArcGIS/ArcGISViewerForFlex

23. So what is this Application Builder?
• Build Flex Viewer applications
• GUI user experience to configure and deploy the
Viewer web application
Data Content Functionality Appearance

24. Building a Flex Viewer
Application Builder

25. Creating a new widget

26. Why create a new Widget?
• Needed functionality may not be given in core Viewer
• Or…functionality is provided but you may need to
tweak it to suit your specific needs
• Some examples for custom widgets could be:
- API functionality that is not provided directly in Viewer
- Social Media integration
- More great examples can be found at the Esri Code
Gallery

27. Before you begin, you will need
• An IDE of preference that will allow compiling the
Viewer (e.g. Flash Builder)
• Adobe Flex 4.5 SDK or later
• ArcGIS Viewer for Flex source code on Github
• ArcGIS API for Flex
• More instructions on our Flex Resource Center

28. Create a Custom Widget

29. Let’s wrap it all up

30. Summary
• The Viewers are configurable, but lots for devs, too
• Developers are the bridge from generic to specific
• Many ways to make the Viewer do what you need
• Add-Ins and Widgets are inherently reusable
• Easy, flexible, rich development environment
• Resource Center