Upload
others
View
25
Download
0
Embed Size (px)
Citation preview
Patterns and Best Practices for Building gApplications with the ArcGIS API for Microsoft Silverlight/WPF
Art Haddad @ajhaddadRex Hansen @rex hansen@ _Morten Nielsen @sharpgis
AgendaAgendaAgendaAgenda
•• IntroductionsIntroductions•• OverviewOverview•• Deep DiveDeep Dive•• Deep DiveDeep Dive
–– BehaviorsBehaviors–– API ExtensibilityAPI Extensibility–– TemplatesTemplates–– Graphics Performance Graphics Performance
Tips/TricksTips/Tricks–– Custom SymbolsCustom Symbols–– Using WCFUsing WCF
ArcGIS API for Silverlight/WPF V2ArcGIS API for Silverlight/WPF V2
OVERVIEWOVERVIEWArcGIS API for Silverlight/WPF V2ArcGIS API for Silverlight/WPF V2
What is theWhat is the ArcGISArcGIS API for Microsoft Silverlight/WPF?API for Microsoft Silverlight/WPF?What is the What is the ArcGISArcGIS API for Microsoft Silverlight/WPF?API for Microsoft Silverlight/WPF?
•• Powerful Web and Desktop Mapping API Powerful Web and Desktop Mapping API •• Designed for the Silverlight and WPF PlatformsDesigned for the Silverlight and WPF Platforms•• UtilizeUtilize ArcGISArcGIS Server Bing Maps servicesServer Bing Maps services•• Utilize Utilize ArcGISArcGIS Server, Bing Maps servicesServer, Bing Maps services
•• Silverlight provides cross browser supportSilverlight provides cross browser support•• WPF supports native 64 bit (x64) platformsWPF supports native 64 bit (x64) platforms
I i h Mi f d l iI i h Mi f d l i•• Integrates with Microsoft development environmentsIntegrates with Microsoft development environments
BehaviorsBehaviors
DEEP DIVEDEEP DIVEBehaviorsBehaviors
BehaviorsBehaviorsBehaviorsBehaviors
•• What are they?What are they?–– Behaviors are selfBehaviors are self--contained, recontained, re--usable snippets of usable snippets of
interactivity that can be assigned interactively to art board interactivity that can be assigned interactively to art board contentcontent
•• What problems do they solve?What problems do they solve?•• What problems do they solve?What problems do they solve?–– Makes development simplerMakes development simpler–– Functionality is cleanly Functionality is cleanly encapsulated and encapsulated and reusablereusable
•• What’s the value to me?What’s the value to me?Code ReCode Re use anduse and XAMLifyXAMLify–– Code ReCode Re--use and use and XAMLifyXAMLify
Behavior in XAMLBehavior in XAMLBehavior in XAMLBehavior in XAML
<<i:Interaction.Behaviorsi:Interaction.Behaviors>><<esriBehaviors:ShowCoordinatesBehavioresriBehaviors:ShowCoordinatesBehavior/>/><<esriBehaviors:ShowCoordinatesBehavioresriBehaviors:ShowCoordinatesBehavior/>/>
</</i:Interaction.Behaviorsi:Interaction.Behaviors>>
Behaviors: ActionsBehaviors: ActionsBehaviors: ActionsBehaviors: Actions
•• Provide Provide functionality to do functionality to do somethingsomething
•• NOTE: Aren’t particularly useful on their ownNOTE: Aren’t particularly useful on their own•• NOTE: Aren t particularly useful on their ownNOTE: Aren t particularly useful on their own–– No way to No way to activate that functionality. activate that functionality.
•• Invoking actions requires a Invoking actions requires a triggertrigger. .
Behaviors:Behaviors: TriggersTriggersBehaviors: Behaviors: TriggersTriggers
•• Objects Objects that contain one or more actions and invoke those that contain one or more actions and invoke those actions in response to some stimulus. actions in response to some stimulus.
•• One One very common trigger is very common trigger is an an EventTriggerEventTrigger. .
OthOth ll•• Other Other examples examples –– might might include a trigger that fires on a timer, or a trigger that include a trigger that fires on a timer, or a trigger that
fires when an unhandled exception is thrown. fires when an unhandled exception is thrown.
Expression BlendExpression Blend
DEMO DEMO –– USING BEHAVIORSUSING BEHAVIORSExpression BlendExpression Blend
BehaviorsBehaviors –– Being practicalBeing practicalBehaviors Behaviors Being practicalBeing practical
•• Not a Magic bulletNot a Magic bullet•• Built as part of the Expression Blend Interactivity SDKBuilt as part of the Expression Blend Interactivity SDK
–– Designed as part of Expression BlendDesigned as part of Expression BlendDesigned as part of Expression BlendDesigned as part of Expression Blend•• Some things are simpler by using a button with simple Some things are simpler by using a button with simple
code behindcode behind–– Not a replacement for custom controlsNot a replacement for custom controls
Extensibility (Rex Hansen)Extensibility (Rex Hansen)
DEEP DIVEDEEP DIVEExtensibility (Rex Hansen)Extensibility (Rex Hansen)
Creating custom layersCreating custom layersCreating custom layersCreating custom layers
LayerLayer
Til dM S i LTil dM S i L D i LD i L G hi LG hi LTiledMapServiceLayerTiledMapServiceLayer DynamicLayerDynamicLayer GraphicsLayerGraphicsLayer
ArcGISArcGIS Server (Map)Server (Map) F t L
DynamicMapServiceLayerDynamicMapServiceLayer
ArcGISArcGIS Server (Map)Server (Map)BingBing
Open Open StreetMapStreetMapGoogleGoogle
ArcGISArcGIS Server (Map, Feature)Server (Map, Feature)Spatial Data ServiceSpatial Data Service
FeatureLayer
GoogleGoogleYahooYahoo
MapQuestMapQuest……
ArcGISArcGIS Server (Map, Image)Server (Map, Image)
WMSWMSA IMSA IMS
WFSWFSGeoRSSGeoRSS
……ArcIMSArcIMS
……* Included
DemoDemo
CUSTOM TILED MAP SERVICE LAYERCUSTOM TILED MAP SERVICE LAYERDemoDemo
Templates (Morten Nielsen)Templates (Morten Nielsen)
DEEP DIVEDEEP DIVETemplates (Morten Nielsen)Templates (Morten Nielsen)
Two outTwo out--ofof--thethe--box templatesbox templatesTwo outTwo out--ofof--thethe--box templatesbox templates(maybe more to come…)(maybe more to come…)
Standard TemplateStandard Template Showcase TemplateShowcase Template
Customizing the templatesCustomizing the templatesCustomizing the templatesCustomizing the templates
1.1. Add your own data to the map.Add your own data to the map.2.2. Modify shared resources for quick update of titles, color Modify shared resources for quick update of titles, color
scheme etc.scheme etc.scheme etc. scheme etc. 3.3. Add more items/buttons to the menu.Add more items/buttons to the menu.4.4. Reuse application’s actions and userReuse application’s actions and user--controls like controls like
draggabledraggable windows to create new toolbars, views etc.windows to create new toolbars, views etc.5.5. Add more ESRI and 3Add more ESRI and 3rdrd party controls.party controls.66 Write custom application codeWrite custom application code6.6. Write custom application code.Write custom application code.7.7. Keep on extending…Keep on extending…
DemoDemo
CUSTOMIZING THE TEMPLATECUSTOMIZING THE TEMPLATEDemoDemo
Custom SymbolsCustom Symbols
DEEP DIVEDEEP DIVECustom SymbolsCustom Symbols
Symbol HierarchySymbol HierarchySymbol HierarchySymbol Hierarchy
SymbolSymbol
MarkerSymbolMarkerSymbol LineSymbolLineSymbol FillSymbolFillSymbolCustom Symbols
Si l M k S b lSi l M k S b l Si l Li S b lSi l Li S b l Si l FillS b lSi l FillS b l
Symbols
SimpleMarkerSymbolSimpleMarkerSymbol
TextSymbolTextSymbol
SimpleLineSymbolSimpleLineSymbol
CartographicLineSymbolCartographicLineSymbol
SimpleFillSymbolSimpleFillSymbol
PictureFillSymbolPictureFillSymbolTextSymbolTextSymbol
PictureMarkerSymbolPictureMarkerSymbol
CartographicLineSymbolCartographicLineSymbol PictureFillSymbolPictureFillSymbol
SealedClassAbstract
ControlTemplateControlTemplateControlTemplateControlTemplate
Template defines the UI Elements inside symbol.Template defines the UI Elements inside symbol.
•• MarkerSymbolMarkerSymbol: : –– Can be any Can be any UIElementUIElement
•• Fill and Fill and LineSymbolLineSymbol: : Only: <Path x:Name="Element" /> onlyOnly: <Path x:Name="Element" /> only–– Only: <Path x:Name= Element /> onlyOnly: <Path x:Name= Element /> only
MarkerSymbol ControlTemplateMarkerSymbol ControlTemplateMarkerSymbol.ControlTemplateMarkerSymbol.ControlTemplate
<<esriSymbols:MarkerSymbolesriSymbols:MarkerSymbol x:Key="MySymbol">x:Key="MySymbol"><<esriSymbols:MarkerSymbol.ControlTemplateesriSymbols:MarkerSymbol.ControlTemplate>><<ControlTemplateControlTemplate>><<ControlTemplateControlTemplate>>
<Ellipse Width="10"<Ellipse Width="10"Height="10"Height="10"Fill="Red" />Fill="Red" />
</</ControlTemplateControlTemplate>>// iS b l k S b l C l liS b l k S b l C l l</</esriSymbols:MarkerSymbol.ControlTemplateesriSymbols:MarkerSymbol.ControlTemplate>>
</</esriSymbols:MarkerSymbolesriSymbols:MarkerSymbol>>
FillSymbol ControlTemplateFillSymbol ControlTemplateFillSymbol.ControlTemplateFillSymbol.ControlTemplate
<<esriSymbols:FillSymbolesriSymbols:FillSymbol x:Key="MySymbol">x:Key="MySymbol"><<esriSymbols:esriSymbols:FillFillSymbol.ControlTemplateSymbol.ControlTemplate>><<ControlTemplateControlTemplate>><<ControlTemplateControlTemplate>>
<Path x:Name="Element" Fill="Blue" <Path x:Name="Element" Fill="Blue" Stroke="Red"Stroke="Red"StrokeThicknessStrokeThickness="2.0" />="2.0" />
</</ControlTemplateControlTemplate>>//</</esriSymbols:esriSymbols:FillFillSymbol.ControlTemplateSymbol.ControlTemplate>>
</</esriSymbols:esriSymbols:FillFillSymbolSymbol>>
LineSymbol ControlTemplateLineSymbol ControlTemplateLineSymbol.ControlTemplateLineSymbol.ControlTemplate
<<esriSymbols:FillSymbolesriSymbols:FillSymbol x:Key="MySymbol">x:Key="MySymbol"><<esriSymbols:esriSymbols:FillFillSymbol.ControlTemplateSymbol.ControlTemplate>><<ControlTemplateControlTemplate>><<ControlTemplateControlTemplate>>
<Path x:Name="Element" <Path x:Name="Element" Fill="Blue"Fill="Blue"Stroke="Red"Stroke="Red"StrokeThicknessStrokeThickness="2.0" />="2.0" />
</</ControlTemplateControlTemplate>>//</</esriSymbols:esriSymbols:FillFillSymbol.ControlTemplateSymbol.ControlTemplate>>
</</esriSymbols:esriSymbols:FillFillSymbolSymbol>>
Binding to propertiesBinding to propertiesBinding to propertiesBinding to properties
public class public class MySymbolMySymbol : : MarkerSymbolMarkerSymbol {{public double Size { get; set; }public double Size { get; set; }
}}}}------<<esriSymbols:MarkerSymbolesriSymbols:MarkerSymbol x:Key="MySymbol">x:Key="MySymbol"><<esriSymbols:MarkerSymbol.ControlTemplateesriSymbols:MarkerSymbol.ControlTemplate>><<ControlTemplateControlTemplate>>
lli id h { i dilli id h { i di b l ib l i }}<<Ellipse Width="{Binding Ellipse Width="{Binding Symbol.SizeSymbol.Size}"}"HeightHeight="{Binding ="{Binding Symbol.SizeSymbol.Size}"}"Fill="{Binding Attributes[Color]}" />Fill="{Binding Attributes[Color]}" />Fill {Binding Attributes[Color]} />Fill {Binding Attributes[Color]} />
</</ControlTemplateControlTemplate>></</esriSymbols:MarkerSymbol.ControlTemplateesriSymbols:MarkerSymbol.ControlTemplate>>
</</esriSymbols:MarkerSymbolesriSymbols:MarkerSymbol>>
Visual StatesVisual StatesVisual StatesVisual States
•• Defines visual appearance for a control’s stateDefines visual appearance for a control’s state•• Animation defines the transition from one state to another.Animation defines the transition from one state to another.
Symbols have two Visual State Groups:Symbols have two Visual State Groups:•• SelectionStatesSelectionStates: Selected, Unselected: Selected, Unselected•• CommonStatesCommonStates: Normal, : Normal, MouseOverMouseOver
Visual StatesVisual StatesVisual StatesVisual States
<Grid><Grid><<VisualStateManagerVisualStateManager>><<VisualStateGroupVisualStateGroup Name="Name="CommonStatesCommonStates">"><<VisualStateGroupVisualStateGroup Name=Name= CommonStatesCommonStates >><<VisualStateVisualState Name="Name="MouseOverMouseOver">"><<StoryBoardStoryBoard>>
<!<!----Animation goes hereAnimation goes here---->></</StoryBoardStoryBoard>>// i li l</</VisualStateVisualState>>
<<VisualStateVisualState Name="Normal" />Name="Normal" /></</VisualStateGroupVisualStateGroup>></</VisualStateGroupVisualStateGroup> > <<VisualStateGroupVisualStateGroup Name="Name="SelectionStatesSelectionStates" />" /></</VisualStateManagerVisualStateManager>></Grid></Grid>
Symbol TemplatesSymbol Templates
DEMODEMOSymbol TemplatesSymbol Templates
Graphics Performance Tips/TricksGraphics Performance Tips/Tricks(Morten Nielsen)(Morten Nielsen)
DEEP DIVEDEEP DIVE(Morten Nielsen)(Morten Nielsen)
How do I render a 1 000 000+ graphics on theHow do I render a 1 000 000+ graphics on theHow do I render a 1,000,000+ graphics on the How do I render a 1,000,000+ graphics on the client?client?
Would the user really want to see a million features at the Would the user really want to see a million features at the same time? same time? How long would it take to download that many features toHow long would it take to download that many features toHow long would it take to download that many features to How long would it take to download that many features to the client?the client?
f ff fTry and limit the number of features displayed.Try and limit the number of features displayed.–– Use Use MaximumResolutionMaximumResolution property to hide features when property to hide features when
zomedzomed out.out.–– Cluster features together to show fewer elements.Cluster features together to show fewer elements.–– Let the user select an area of interest and only show data for Let the user select an area of interest and only show data for
that area.that area.that area.that area.
Optimizing the symbolsOptimizing the symbolsOptimizing the symbolsOptimizing the symbols
•• Simpler symbol templates render faster than complex Simpler symbol templates render faster than complex ones!ones!
•• Share resources as often as possible (brushesShare resources as often as possible (brushes etcetc))Share resources as often as possible (brushes Share resources as often as possible (brushes etcetc))
Things that often hurt rendering performance:Things that often hurt rendering performance:•• BindingBinding•• Visual StatesVisual States•• Disable Hit Test (Disable Hit Test (IsHitTestVisibleIsHitTestVisible="False")="False")•• Disable Hit Test (Disable Hit Test (IsHitTestVisibleIsHitTestVisible="False")="False")
InefficientInefficient Marker symbol:Marker symbol:Inefficient Inefficient Marker symbol:Marker symbol:
<<esriSymbols:MarkerSymbolesriSymbols:MarkerSymbol x:Key="MySymbol">x:Key="MySymbol"><<esriSymbols:MarkerSymbol.ControlTemplateesriSymbols:MarkerSymbol.ControlTemplate>><<ControlTemplateControlTemplate>><<ControlTemplateControlTemplate>><Grid><Grid><Ellipse Width="{Binding <Ellipse Width="{Binding Symbol.SizeSymbol.Size}"}"
Height="{Height="{Binding Binding Symbol.SizeSymbol.Size}"}"Fill=Fill="{Binding "{Binding Symbol.BrushSymbol.Brush}"}"
///>/></Grid></Grid></</ControlTemplateControlTemplate>></</ControlTemplateControlTemplate>></</esriSymbols:MarkerSymbol.ControlTemplateesriSymbols:MarkerSymbol.ControlTemplate>>
</</esriSymbols:MarkerSymbolesriSymbols:MarkerSymbol>>
Optimized MarkerOptimized Marker symbol:symbol:Optimized Marker Optimized Marker symbol:symbol:
<<esriSymbols:MarkerSymbolesriSymbols:MarkerSymbol x:Key="MySymbol">x:Key="MySymbol"><<esriSymbols:MarkerSymbol.ControlTemplateesriSymbols:MarkerSymbol.ControlTemplate>><<ControlTemplateControlTemplate>><<ControlTemplateControlTemplate>>
<Ellipse Width="10"<Ellipse Width="10"Height="10"Height="10"Fill="Red"Fill="Red"
///>/>
</</ControlTemplateControlTemplate>></</ControlTemplateControlTemplate>></</esriSymbols:MarkerSymbol.ControlTemplateesriSymbols:MarkerSymbol.ControlTemplate>>
</</esriSymbols:MarkerSymbolesriSymbols:MarkerSymbol>>
InefficientInefficient Picture Marker symbol:Picture Marker symbol:Inefficient Inefficient Picture Marker symbol:Picture Marker symbol:
<<esriSymbols:MarkerSymbolesriSymbols:MarkerSymbol x:Key="MySymbol">x:Key="MySymbol"><<esriSymbols:MarkerSymbol.ControlTemplateesriSymbols:MarkerSymbol.ControlTemplate>><<ControlTemplateControlTemplate>><<Image Width="20" Height="20" Image Width="20" Height="20"
SourceSource="http="http://myserver/myimage png://myserver/myimage png" />" />SourceSource="http="http://myserver/myimage.png://myserver/myimage.png" />" /></</ControlTemplateControlTemplate>></</esriSymbols:MarkerSymbol.ControlTemplateesriSymbols:MarkerSymbol.ControlTemplate>>y y py y p</</esriSymbols:MarkerSymbolesriSymbols:MarkerSymbol>>
Optimized Picture MarkerOptimized Picture Marker symbolsymbolOptimized Picture Marker Optimized Picture Marker symbolsymbol
<<ImageBrushImageBrush x:Key="MyImageBrush" x:Key="MyImageBrush" ImageSourceImageSource="http://...../myimage.png" />="http://...../myimage.png" />
<<esriSymbols:MarkerSymbolesriSymbols:MarkerSymbol x:Key="MySymbol">x:Key="MySymbol"><<esriSymbols:MarkerSymbol.ControlTemplateesriSymbols:MarkerSymbol.ControlTemplate>><<ControlTemplateControlTemplate>><Rectangle Width="20" Height="20"<Rectangle Width="20" Height="20"
Fill="{Fill="{StaticResourceStaticResource MyImageBrushMyImageBrush}" />}" />Fill="{Fill="{StaticResourceStaticResource MyImageBrushMyImageBrush}" />}" /></</ControlTemplateControlTemplate>></</esriSymbols:MarkerSymbol.ControlTemplateesriSymbols:MarkerSymbol.ControlTemplate>>// y y py y p</</esriSymbols:MarkerSymbolesriSymbols:MarkerSymbol>>
Using WCF (Rex Hansen)Using WCF (Rex Hansen)
DEEP DIVEDEEP DIVEUsing WCF (Rex Hansen)Using WCF (Rex Hansen)
What is WCF?What is WCF?What is WCF?What is WCF?
•• Windows Communication FoundationWindows Communication Foundation–– .NET communication architecture.NET communication architecture–– Fundamentals:Fundamentals:Fundamentals:Fundamentals:
•• Host and client agree on a contractHost and client agree on a contract•• Host provides an endpoint with binding, address, contractHost provides an endpoint with binding, address, contract•• Client uses proxy tied to the endpoint thus contractClient uses proxy tied to the endpoint thus contract•• Client uses proxy tied to the endpoint, thus contractClient uses proxy tied to the endpoint, thus contract
–– DeserializationDeserialization handled for youhandled for you•• Types must beTypes must be serializableserializable•• Types must be Types must be serializableserializable
•• You get to focus on functionality, not communication!You get to focus on functionality, not communication!
DemoDemo
SENDING GEOMETRY TO THE SERVER WITH SENDING GEOMETRY TO THE SERVER WITH WCFWCFDemoDemo
Questions ?Questions ?Questions ?Questions ?
Please fill out the session surveysPlease fill out the session surveysyy
Links and resources:Links and resources:Links and resources:Links and resources:•• Resource Center: Resource Center: http://http://esriurl.com/slesriurl.com/sl•• SDK Samples:SDK Samples: http://http://esriurl.com/slsdkesriurl.com/slsdk•• API Reference:API Reference: http://esriurl com/slrefhttp://esriurl com/slref•• API Reference: API Reference: http://esriurl.com/slrefhttp://esriurl.com/slref•• Silverlight/WPF Blog: Silverlight/WPF Blog: http://esriurl.com/slbloghttp://esriurl.com/slblog
T ittT ittTwitter:Twitter:•• @@ajhaddadajhaddad @@rex_hansenrex_hansen @@sharpgissharpgis