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