flex en silverlight viewer configuratie, esri, mark jagt, boudewijn boogaard
DESCRIPTION
TRANSCRIPT
![Page 1: Flex en silverlight viewer configuratie, Esri, Mark Jagt, Boudewijn Boogaard](https://reader031.vdocuments.us/reader031/viewer/2022012922/545746eaaf795900058b5c61/html5/thumbnails/1.jpg)
Configuring and Customizing ArcGIS Viewer for Silverlight and ArcGIS
Viewer for Flex
Mark Jagt Boudewijn Boogaard
Esri Developer Summit in EuropeNovember 9 | Rotterdam
![Page 2: Flex en silverlight viewer configuratie, Esri, Mark Jagt, Boudewijn Boogaard](https://reader031.vdocuments.us/reader031/viewer/2022012922/545746eaaf795900058b5c61/html5/thumbnails/2.jpg)
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
![Page 3: Flex en silverlight viewer configuratie, Esri, Mark Jagt, Boudewijn Boogaard](https://reader031.vdocuments.us/reader031/viewer/2022012922/545746eaaf795900058b5c61/html5/thumbnails/3.jpg)
ArcGIS Viewer for Silverlight Overview
![Page 4: Flex en silverlight viewer configuratie, Esri, Mark Jagt, Boudewijn Boogaard](https://reader031.vdocuments.us/reader031/viewer/2022012922/545746eaaf795900058b5c61/html5/thumbnails/4.jpg)
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
![Page 5: Flex en silverlight viewer configuratie, Esri, Mark Jagt, Boudewijn Boogaard](https://reader031.vdocuments.us/reader031/viewer/2022012922/545746eaaf795900058b5c61/html5/thumbnails/5.jpg)
ArcGIS Viewer for Silverlight Overview
• Hosted on-premise
• Consists of 3 components:
1. Configurable Viewer
2. Application Builder
3. Extensibility Kit
![Page 6: Flex en silverlight viewer configuratie, Esri, Mark Jagt, Boudewijn Boogaard](https://reader031.vdocuments.us/reader031/viewer/2022012922/545746eaaf795900058b5c61/html5/thumbnails/6.jpg)
Building a Silverlight ViewerApplication Builder
![Page 7: Flex en silverlight viewer configuratie, Esri, Mark Jagt, Boudewijn Boogaard](https://reader031.vdocuments.us/reader031/viewer/2022012922/545746eaaf795900058b5c61/html5/thumbnails/7.jpg)
Add-Ins
![Page 8: Flex en silverlight viewer configuratie, Esri, Mark Jagt, Boudewijn Boogaard](https://reader031.vdocuments.us/reader031/viewer/2022012922/545746eaaf795900058b5c61/html5/thumbnails/8.jpg)
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
![Page 9: Flex en silverlight viewer configuratie, Esri, Mark Jagt, Boudewijn Boogaard](https://reader031.vdocuments.us/reader031/viewer/2022012922/545746eaaf795900058b5c61/html5/thumbnails/9.jpg)
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
![Page 10: Flex en silverlight viewer configuratie, Esri, Mark Jagt, Boudewijn Boogaard](https://reader031.vdocuments.us/reader031/viewer/2022012922/545746eaaf795900058b5c61/html5/thumbnails/10.jpg)
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
![Page 11: Flex en silverlight viewer configuratie, Esri, Mark Jagt, Boudewijn Boogaard](https://reader031.vdocuments.us/reader031/viewer/2022012922/545746eaaf795900058b5c61/html5/thumbnails/11.jpg)
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
![Page 12: Flex en silverlight viewer configuratie, Esri, Mark Jagt, Boudewijn Boogaard](https://reader031.vdocuments.us/reader031/viewer/2022012922/545746eaaf795900058b5c61/html5/thumbnails/12.jpg)
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
![Page 13: Flex en silverlight viewer configuratie, Esri, Mark Jagt, Boudewijn Boogaard](https://reader031.vdocuments.us/reader031/viewer/2022012922/545746eaaf795900058b5c61/html5/thumbnails/13.jpg)
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
![Page 14: Flex en silverlight viewer configuratie, Esri, Mark Jagt, Boudewijn Boogaard](https://reader031.vdocuments.us/reader031/viewer/2022012922/545746eaaf795900058b5c61/html5/thumbnails/14.jpg)
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
![Page 15: Flex en silverlight viewer configuratie, Esri, Mark Jagt, Boudewijn Boogaard](https://reader031.vdocuments.us/reader031/viewer/2022012922/545746eaaf795900058b5c61/html5/thumbnails/15.jpg)
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
![Page 16: Flex en silverlight viewer configuratie, Esri, Mark Jagt, Boudewijn Boogaard](https://reader031.vdocuments.us/reader031/viewer/2022012922/545746eaaf795900058b5c61/html5/thumbnails/16.jpg)
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)
![Page 17: Flex en silverlight viewer configuratie, Esri, Mark Jagt, Boudewijn Boogaard](https://reader031.vdocuments.us/reader031/viewer/2022012922/545746eaaf795900058b5c61/html5/thumbnails/17.jpg)
Templates
• Default Viewer configuration• Map• Tools• Basemaps• Layouts• Colors
• Default template stored at Builder\Templates\Default• Includes all files in a Viewer application
![Page 18: Flex en silverlight viewer configuratie, Esri, Mark Jagt, Boudewijn Boogaard](https://reader031.vdocuments.us/reader031/viewer/2022012922/545746eaaf795900058b5c61/html5/thumbnails/18.jpg)
Creating Templates
• Configure a Viewer• Deploy• Copy Deployed Viewer folder to Builder\Templates• Add an entry to Builder\Templates.xml
![Page 19: Flex en silverlight viewer configuratie, Esri, Mark Jagt, Boudewijn Boogaard](https://reader031.vdocuments.us/reader031/viewer/2022012922/545746eaaf795900058b5c61/html5/thumbnails/19.jpg)
A Simple Tool and Behavior
![Page 20: Flex en silverlight viewer configuratie, Esri, Mark Jagt, Boudewijn Boogaard](https://reader031.vdocuments.us/reader031/viewer/2022012922/545746eaaf795900058b5c61/html5/thumbnails/20.jpg)
ArcGIS Viewer for FlexOverview
![Page 21: Flex en silverlight viewer configuratie, Esri, Mark Jagt, Boudewijn Boogaard](https://reader031.vdocuments.us/reader031/viewer/2022012922/545746eaaf795900058b5c61/html5/thumbnails/21.jpg)
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
![Page 22: Flex en silverlight viewer configuratie, Esri, Mark Jagt, Boudewijn Boogaard](https://reader031.vdocuments.us/reader031/viewer/2022012922/545746eaaf795900058b5c61/html5/thumbnails/22.jpg)
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
![Page 23: Flex en silverlight viewer configuratie, Esri, Mark Jagt, Boudewijn Boogaard](https://reader031.vdocuments.us/reader031/viewer/2022012922/545746eaaf795900058b5c61/html5/thumbnails/23.jpg)
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
![Page 24: Flex en silverlight viewer configuratie, Esri, Mark Jagt, Boudewijn Boogaard](https://reader031.vdocuments.us/reader031/viewer/2022012922/545746eaaf795900058b5c61/html5/thumbnails/24.jpg)
Building a Flex ViewerApplication Builder
![Page 25: Flex en silverlight viewer configuratie, Esri, Mark Jagt, Boudewijn Boogaard](https://reader031.vdocuments.us/reader031/viewer/2022012922/545746eaaf795900058b5c61/html5/thumbnails/25.jpg)
Creating a new widget
![Page 26: Flex en silverlight viewer configuratie, Esri, Mark Jagt, Boudewijn Boogaard](https://reader031.vdocuments.us/reader031/viewer/2022012922/545746eaaf795900058b5c61/html5/thumbnails/26.jpg)
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
![Page 27: Flex en silverlight viewer configuratie, Esri, Mark Jagt, Boudewijn Boogaard](https://reader031.vdocuments.us/reader031/viewer/2022012922/545746eaaf795900058b5c61/html5/thumbnails/27.jpg)
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
![Page 28: Flex en silverlight viewer configuratie, Esri, Mark Jagt, Boudewijn Boogaard](https://reader031.vdocuments.us/reader031/viewer/2022012922/545746eaaf795900058b5c61/html5/thumbnails/28.jpg)
Create a Custom Widget
![Page 29: Flex en silverlight viewer configuratie, Esri, Mark Jagt, Boudewijn Boogaard](https://reader031.vdocuments.us/reader031/viewer/2022012922/545746eaaf795900058b5c61/html5/thumbnails/29.jpg)
Let’s wrap it all up
![Page 30: Flex en silverlight viewer configuratie, Esri, Mark Jagt, Boudewijn Boogaard](https://reader031.vdocuments.us/reader031/viewer/2022012922/545746eaaf795900058b5c61/html5/thumbnails/30.jpg)
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
![Page 31: Flex en silverlight viewer configuratie, Esri, Mark Jagt, Boudewijn Boogaard](https://reader031.vdocuments.us/reader031/viewer/2022012922/545746eaaf795900058b5c61/html5/thumbnails/31.jpg)