ArcGIS API for JavaScript Customizing Widgets€¦ · Agen da Set up dev environment Create a......
Transcript of ArcGIS API for JavaScript Customizing Widgets€¦ · Agen da Set up dev environment Create a......
ArcGIS API for JavaScriptCustomizing the WidgetsJulian Kissling | Rene Rubalcava
slides: https://git.io/Je0y6
1 / 31
Agenda
Set up dev environmentCreate a...
Custom ClassSimple WidgetCustom Widget
Enhance Custom Widget
2 / 31
Setting up the Dev
Environment
3 / 31
Developer
environmentJS API + TypeScript
4 / 31
TypeScript
5 / 31
Typed JavaScriptinterfaceinterface PersonPerson {{ name name:: stringstring;; age age:: numbernumber;; }}
constconst person person:: Person Person == {{ name name:: "Rocky""Rocky",, age age:: 3333 }};; personperson..age age == "24""24";; // TS2322: Type '"24"' is not assignable to type 'number'// TS2322: Type '"24"' is not assignable to type 'number' personperson..height height == 5.115.11;; // TS2339: property 'height' does not exist on type 'Person'// TS2339: property 'height' does not exist on type 'Person'
6 / 31
JS of the future, now// let and const// let and const letlet canChange canChange == 55;; constconst cannotChange cannotChange == 55;; // fat arrow functions// fat arrow functions
constconst logNamelogName == ((personperson)) =>=> consoleconsole..loglog((personperson..namename));; // template strings// template strings constconst greeting greeting == `Hello, my name is `Hello, my name is ${${personperson..namename}} and I am and I am ${${personperson..ageage}} years old.` years old.`;; // destructuring// destructuring constconst {{ namename ageage }} == personperson;;
7 / 31
IDE SupportVisual StudioWebStormSublime Textand more!
8 / 31
Install TypeScript + JS API
9 / 31
Dev EnvironmentInstalled TypeScript + JS API typingsBuilt mapping application
10 / 31
Creating a Class
11 / 31
esri/core/AccessorJavaScript API foundationConsistent developer experience
// unified object constructor// unified object constructor constconst me me == newnew PersonPerson(({{ name name:: "Franco""Franco",, age age:: 3333 }}));; // watch for changes to `age`// watch for changes to `age` meme..watchwatch(("age""age",, singHappyBirthday singHappyBirthday));;
12 / 31
// fetches webmaps from a portal and provides APIs to work with them// fetches webmaps from a portal and provides APIs to work with them interfaceinterface CustomClassCustomClass {{ // used to fetch webmaps items// used to fetch webmaps items portalportal:: Portal Portal;; webMapGroupIdwebMapGroupId:: stringstring;; // active webmap and all fetched ones// active webmap and all fetched ones readonlyreadonly active active:: PortalItem PortalItem;; readonlyreadonly webMaps webMaps:: PortalItem PortalItem[[]];;
// will be updated with the active webmap// will be updated with the active webmap viewview:: MapView MapView;;
13 / 31
Demo Recap: Custom Class
Implemented CustomClassExtended esri/core/AccessorCreated properties with @propertyTyped constructor argumentsCreated public + private methods
14 / 31
Writing a Widget
15 / 31
About Widgets
What?Encapsulated UI componentsCohesive (integrated, uni�ed)Single-purpose pieces of functionality
Why?ReusableInterchangeable
How?Extend esri/Widgets/Widget
16 / 31
esri/widgets/Widget
Base widget class (View)Extends esri/core/Accessor
PropertiesWatching properties
Lifecycle
17 / 31
Lifecycle
constructorpostInitializerenderdestroy
18 / 31
renderDe�nes UIReacts to state changesUses JSX (VDOM)
19 / 31
Write simple widget
20 / 31
Simple View
Extended esri/widgets/WidgetImplemented render()Added a renderable() property
Added onclick event
Added CSS Object + Toggled property with event to re-render
BEM Methodology
21 / 31
Improving Our
Widget
22 / 31
ArchitectureSeparation of concerns
Views + ViewModelsUI replacementEasier integration
23 / 31
ViewsExtend esri/widgets/WidgetRely on ViewModelFocus on UI
24 / 31
ViewModelsExtend esri/core/AccessorProvide APIs to support ViewFocus on business logic
25 / 31
View + ViewModel in action
View renders the state of the VMLooks at properties on VM and renders accordingly
User interacts with View (property/method)Causes a change on VM or View
View updatesRenders again due to changes on VM
26 / 31
Demos
27 / 31
Additional Resources
Implementing AccessorSetting up TypeScriptWidget DevelopmentJavaScript API SDKStylingWidget Patterns
28 / 31
Question Time
29 / 31
30 / 31
31 / 31