Embed Size (px)
Citation preview
Extending the ArcGIS API for JavaScriptWidgets
Learn how to take an out-of-the-box widget and customize it to your heart's content
Matt Driscoll – @driskullJC Franco – @arfncode
Hello World
Why are we here?Learn how to extend and customize widgets
Focus on 4.x API
Make them unique!
ExtendVerbto enlarge the scope of, or make more comprehensive, asoperations, influence, or meaning:
http://dictionary.reference.com/browse/extend
AgendaTake Widgets
CustomizeRestyleTheme
ExtendCustom view
Different CSS LibraryDifferent Framework
Modify existing functionality
The Search Widget in 4.xHi there!
Demo
It's cool, but...
Doesn't match myFrameworkCSS LibraryBrandEtc.
We're SASSy is a scripting language that is interpreted into Cascading Style Sheets (CSS)Sass
Why SASS?SASS gives us...
VariablesMixins (group statements)@include - (getting mixins)@import@extend - (inheritance)More power!
SASS makes it easier to...RestyleThemeModular / DRYBe organizedWrite less code :)
Working with SASSNodeRubyGrunt
Lets use the power of SASS and...Restyle the search widgetTheme stuff!
Next up, ExtendingLets do more!
but how?
4.x Widget ArchitectureWidget Architecture
View – the faceViewModel – the brain
Reusable/Testable core widget logic sans UI concernsFramework compatibilitySeparates concerns
Comparison3.x 4.x
ViewUses ViewModel APIs to render the UIView-specific logic resides here
ViewModelCore logic of widget resides hereProvides necessary APIs for the view to do it's thingNo DOM/UI concerns (think data)Requires thinking, no silver-bullet
Custom Views!View customization via extensionView for Bootstrap (custom CSS classes)View for a framework (custom HTML/data binding or whatevs)
Extending Views!ViewToggle
Search ViewModel!
View Code!
Search.js (view)SearchViewModelDemo
React view
–
View Code!
View Models in ArcGIS JS APIReact View Model repo demoCustom widget in React
Let's SummarizeLearned how we can modify a widget's
StyleThemeView
Recommended sessionsArcGIS API for JavaScript: Discover 4.0 the Next GenerationThe Road Ahead: ArcGIS API for JavaScriptBuilding Your own Widget with ArcGIS API for JavaScriptUsing and Customizing the ArcGIS API for JavaScript WidgetsCSS: Rules to Style ByAccessible Web Mapping Apps: ARIA, WCAG and 508 ComplianceModern Tools for the Modern Web DeveloperOptimizing Your JavaScript App for PerformanceFull Stack End to End JavaScript Testing with InternUsing TypeScript with ArcGIS JS API DevelopmentWrite Better CodeAsk a UX & UI Expert
Additional ResourcesSource Code & PresentationJavaScript Sessions at DevSummitDocumentation - 4.0 beta
Rate Us!Esri Events Mobile App -
http://www.esri.com/events/eventsappiOSAndroid
Search for "Extending the ArcGIS API for JavaScript Widgets".
Q & AQuestions?
