Configuring and Customizing ArcGIS Viewer for Silverlight and ArcGIS

Viewer for Flex

Mark Jagt Boudewijn Boogaard

Esri Developer Summit in EuropeNovember 9 | Rotterdam

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

ArcGIS Viewer for Silverlight Overview

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

Install Configure Deploy

• Set of core tools and functionality

• No programming or editing configuration files - Ideal for novice Web application creators

ArcGIS Viewer for Silverlight Overview

• Hosted on-premise

• Consists of 3 components:

1. Configurable Viewer

2. Application Builder

3. Extensibility Kit

Building a Silverlight ViewerApplication Builder

Add-Ins

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

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

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

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

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

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

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

Layouts - Deployment

• Copy to Builder\Templates\Default\Config\Layouts• Create preview image

• Name the same as xaml file• Ideal size is 580 x 359

• Tip - clear browser cache

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)

Templates

• Default Viewer configuration• Map• Tools• Basemaps• Layouts• Colors

• Default template stored at Builder\Templates\Default• Includes all files in a Viewer application

Creating Templates

• Configure a Viewer• Deploy• Copy Deployed Viewer folder to Builder\Templates• Add an entry to Builder\Templates.xml

A Simple Tool and Behavior

ArcGIS Viewer for FlexOverview

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

Download Configure Deploy

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

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

Building a Flex ViewerApplication Builder

Creating a new widget

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

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

Create a Custom Widget

Let’s wrap it all up

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