![Page 1: Building Your Own Widget with ArcGIS API for JavaScript · release widget instance. TypeScript decorators • Allows us to define and modify common behavior in existing properties,](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed181ae7ccbff5d266f29b1/html5/thumbnails/1.jpg)
Building Your Own Widget with ArcGIS API for JavaScriptBen RamsethSoftware Engineer - Esri
![Page 2: Building Your Own Widget with ArcGIS API for JavaScript · release widget instance. TypeScript decorators • Allows us to define and modify common behavior in existing properties,](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed181ae7ccbff5d266f29b1/html5/thumbnails/2.jpg)
Topics covered
• What is a widget?• Typescript• Setting up the Developer Environment• Creating a basic web mapping app with typescript• Implementing Accessor• Widget framework• Building a widget• @arcgis/cli• Summary
![Page 3: Building Your Own Widget with ArcGIS API for JavaScript · release widget instance. TypeScript decorators • Allows us to define and modify common behavior in existing properties,](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed181ae7ccbff5d266f29b1/html5/thumbnails/3.jpg)
About Widgets
• What?- Encapsulated UI components- Cohesive (integrated, unified)- Single-purpose pieces of functionality
• Why?- Reusable- Interchangeable
• How?- Extend esri/Widgets/Widget
![Page 4: Building Your Own Widget with ArcGIS API for JavaScript · release widget instance. TypeScript decorators • Allows us to define and modify common behavior in existing properties,](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed181ae7ccbff5d266f29b1/html5/thumbnails/4.jpg)
Let’s take a look at a few…What are widgets
![Page 5: Building Your Own Widget with ArcGIS API for JavaScript · release widget instance. TypeScript decorators • Allows us to define and modify common behavior in existing properties,](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed181ae7ccbff5d266f29b1/html5/thumbnails/5.jpg)
Widgets can also be views that make up an app
![Page 6: Building Your Own Widget with ArcGIS API for JavaScript · release widget instance. TypeScript decorators • Allows us to define and modify common behavior in existing properties,](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed181ae7ccbff5d266f29b1/html5/thumbnails/6.jpg)
JS API + TypeScriptDeveloper environment
![Page 7: Building Your Own Widget with ArcGIS API for JavaScript · release widget instance. TypeScript decorators • Allows us to define and modify common behavior in existing properties,](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed181ae7ccbff5d266f29b1/html5/thumbnails/7.jpg)
Typescript - https://www.typescriptlang.org/
![Page 8: Building Your Own Widget with ArcGIS API for JavaScript · release widget instance. TypeScript decorators • Allows us to define and modify common behavior in existing properties,](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed181ae7ccbff5d266f29b1/html5/thumbnails/8.jpg)
Typed JavaScriptinterface Person
name: string; age: number;
const person: Person = name: "Franco", age: 33 ;
person.age = "24"; // TS2322: Type '"24"' is not assignable to type 'number' person.height = 5.11; // TS2339: property 'height' does not exist on type 'Person'
![Page 9: Building Your Own Widget with ArcGIS API for JavaScript · release widget instance. TypeScript decorators • Allows us to define and modify common behavior in existing properties,](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed181ae7ccbff5d266f29b1/html5/thumbnails/9.jpg)
JS of the future,now// let and const
let canChange = 5;const cannotChange = 5;
// fat arrow functionsconst logName = (person) => console.log(person.name);
// template stringsconst greeting = `Hello, my name is $person.name and
I am $person.age years old
// destructuringconst name, age = person;
// property shorthandconst shorthand = person ;
![Page 10: Building Your Own Widget with ArcGIS API for JavaScript · release widget instance. TypeScript decorators • Allows us to define and modify common behavior in existing properties,](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed181ae7ccbff5d266f29b1/html5/thumbnails/10.jpg)
IDE SupportVisual Studio WebStorm Sublime Text and more!
![Page 11: Building Your Own Widget with ArcGIS API for JavaScript · release widget instance. TypeScript decorators • Allows us to define and modify common behavior in existing properties,](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed181ae7ccbff5d266f29b1/html5/thumbnails/11.jpg)
JSAPI API – Typescript - VSCode
Setting up the Dev Environment
![Page 12: Building Your Own Widget with ArcGIS API for JavaScript · release widget instance. TypeScript decorators • Allows us to define and modify common behavior in existing properties,](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed181ae7ccbff5d266f29b1/html5/thumbnails/12.jpg)
https://developers.arcgis.com/javascript/latest/guide/implementing-accessor/index.html
Implementing Accessor
![Page 13: Building Your Own Widget with ArcGIS API for JavaScript · release widget instance. TypeScript decorators • Allows us to define and modify common behavior in existing properties,](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed181ae7ccbff5d266f29b1/html5/thumbnails/13.jpg)
How we built it.Widget Framework
![Page 14: Building Your Own Widget with ArcGIS API for JavaScript · release widget instance. TypeScript decorators • Allows us to define and modify common behavior in existing properties,](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed181ae7ccbff5d266f29b1/html5/thumbnails/14.jpg)
Pieces needed for the Widget Framework
• Typescript• JSX• esri/core/Accessor
![Page 15: Building Your Own Widget with ArcGIS API for JavaScript · release widget instance. TypeScript decorators • Allows us to define and modify common behavior in existing properties,](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed181ae7ccbff5d266f29b1/html5/thumbnails/15.jpg)
Widget life cycle
• constructor (params)- widget is initially created- access to getting, setting, and watching properties
• postInitialize()- Runs after creation and before render
• render()- only required method- renders the UI
• destroy()- release widget instance
![Page 16: Building Your Own Widget with ArcGIS API for JavaScript · release widget instance. TypeScript decorators • Allows us to define and modify common behavior in existing properties,](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed181ae7ccbff5d266f29b1/html5/thumbnails/16.jpg)
TypeScript decorators
• Allows us to define and modify common behavior in existing properties, methods, and constructors at design time
- @subclass (used in conjunction with declared)- underlying glue that is used to create 4.x classes
- @property()- used to define an Accessor property
- @renderable()- schedules the render whenever a property is modified- @property() and @renderable() often used together
- @aliasOf()- keep code clean so as to not duplicate existing properties- links to properties in the ViewModel
![Page 17: Building Your Own Widget with ArcGIS API for JavaScript · release widget instance. TypeScript decorators • Allows us to define and modify common behavior in existing properties,](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed181ae7ccbff5d266f29b1/html5/thumbnails/17.jpg)
Widget implementation
• Extend the widget• Implement properties and methods• Render the widget• Export module
![Page 18: Building Your Own Widget with ArcGIS API for JavaScript · release widget instance. TypeScript decorators • Allows us to define and modify common behavior in existing properties,](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed181ae7ccbff5d266f29b1/html5/thumbnails/18.jpg)
Extend the widget
• extending from the base Widget class
![Page 19: Building Your Own Widget with ArcGIS API for JavaScript · release widget instance. TypeScript decorators • Allows us to define and modify common behavior in existing properties,](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed181ae7ccbff5d266f29b1/html5/thumbnails/19.jpg)
Implement properties and methods
![Page 20: Building Your Own Widget with ArcGIS API for JavaScript · release widget instance. TypeScript decorators • Allows us to define and modify common behavior in existing properties,](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed181ae7ccbff5d266f29b1/html5/thumbnails/20.jpg)
Render the widget
• render is the only required method
![Page 21: Building Your Own Widget with ArcGIS API for JavaScript · release widget instance. TypeScript decorators • Allows us to define and modify common behavior in existing properties,](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed181ae7ccbff5d266f29b1/html5/thumbnails/21.jpg)
Widget rendering
• classes: use the classes helper method • styles: Allows styles to be changed dynamically• afterCreate: executes after the node is added to the DOM• afterUpdate: executes every time the node is updated• bind: set the value for event handlers• key: uniquely identify a DOM node. Needed if sibling elements with the same selector and
the elements are added/removed dynamically
![Page 22: Building Your Own Widget with ArcGIS API for JavaScript · release widget instance. TypeScript decorators • Allows us to define and modify common behavior in existing properties,](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed181ae7ccbff5d266f29b1/html5/thumbnails/22.jpg)
Export module
• end of the code page
![Page 23: Building Your Own Widget with ArcGIS API for JavaScript · release widget instance. TypeScript decorators • Allows us to define and modify common behavior in existing properties,](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed181ae7ccbff5d266f29b1/html5/thumbnails/23.jpg)
Walk before runningHello World Widget
![Page 24: Building Your Own Widget with ArcGIS API for JavaScript · release widget instance. TypeScript decorators • Allows us to define and modify common behavior in existing properties,](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed181ae7ccbff5d266f29b1/html5/thumbnails/24.jpg)
Beyond the basics…Building a Widget
![Page 25: Building Your Own Widget with ArcGIS API for JavaScript · release widget instance. TypeScript decorators • Allows us to define and modify common behavior in existing properties,](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed181ae7ccbff5d266f29b1/html5/thumbnails/25.jpg)
Building a Map Widget
Custom RecenterWidget
![Page 26: Building Your Own Widget with ArcGIS API for JavaScript · release widget instance. TypeScript decorators • Allows us to define and modify common behavior in existing properties,](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed181ae7ccbff5d266f29b1/html5/thumbnails/26.jpg)
ArchitectureSeparation of concerns
Views + ViewModels UI replacement Easier integration
![Page 27: Building Your Own Widget with ArcGIS API for JavaScript · release widget instance. TypeScript decorators • Allows us to define and modify common behavior in existing properties,](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed181ae7ccbff5d266f29b1/html5/thumbnails/27.jpg)
Views• Extend esri/widgets/Widget
• Rely on ViewModel Focus on UI
![Page 28: Building Your Own Widget with ArcGIS API for JavaScript · release widget instance. TypeScript decorators • Allows us to define and modify common behavior in existing properties,](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed181ae7ccbff5d266f29b1/html5/thumbnails/28.jpg)
ViewModelsExtend esri/core/Accessor Provide APIs to support View Focus on business logic
![Page 29: Building Your Own Widget with ArcGIS API for JavaScript · release widget instance. TypeScript decorators • Allows us to define and modify common behavior in existing properties,](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed181ae7ccbff5d266f29b1/html5/thumbnails/29.jpg)
View + ViewModel inactionView renders the state of the VM
Looks at properties on VM and renders accordingly User interacts with View (property/method)
Causes a change on VM or View View updates
Renders again due to changes on VM
![Page 30: Building Your Own Widget with ArcGIS API for JavaScript · release widget instance. TypeScript decorators • Allows us to define and modify common behavior in existing properties,](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed181ae7ccbff5d266f29b1/html5/thumbnails/30.jpg)
The easy way…Helpful blog post
@arcgis/cli
![Page 31: Building Your Own Widget with ArcGIS API for JavaScript · release widget instance. TypeScript decorators • Allows us to define and modify common behavior in existing properties,](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed181ae7ccbff5d266f29b1/html5/thumbnails/31.jpg)
Summary
![Page 32: Building Your Own Widget with ArcGIS API for JavaScript · release widget instance. TypeScript decorators • Allows us to define and modify common behavior in existing properties,](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed181ae7ccbff5d266f29b1/html5/thumbnails/32.jpg)
Additional ResourcesImplementing Accessor Setting up TypeScript Widget DevelopmentJavaScript API SDKStylingWidget Patterns
![Page 33: Building Your Own Widget with ArcGIS API for JavaScript · release widget instance. TypeScript decorators • Allows us to define and modify common behavior in existing properties,](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed181ae7ccbff5d266f29b1/html5/thumbnails/33.jpg)
Let’s have some questions…
![Page 34: Building Your Own Widget with ArcGIS API for JavaScript · release widget instance. TypeScript decorators • Allows us to define and modify common behavior in existing properties,](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed181ae7ccbff5d266f29b1/html5/thumbnails/34.jpg)
![Page 35: Building Your Own Widget with ArcGIS API for JavaScript · release widget instance. TypeScript decorators • Allows us to define and modify common behavior in existing properties,](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed181ae7ccbff5d266f29b1/html5/thumbnails/35.jpg)
Please Take Our Survey on the AppDownload the Esri Events app and find your event
Select the session you attended
Scroll down to find the feedback section
Complete answersand select “Submit”
![Page 36: Building Your Own Widget with ArcGIS API for JavaScript · release widget instance. TypeScript decorators • Allows us to define and modify common behavior in existing properties,](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed181ae7ccbff5d266f29b1/html5/thumbnails/36.jpg)
Presentation TitlePresenter Names
![Page 37: Building Your Own Widget with ArcGIS API for JavaScript · release widget instance. TypeScript decorators • Allows us to define and modify common behavior in existing properties,](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed181ae7ccbff5d266f29b1/html5/thumbnails/37.jpg)
![Page 38: Building Your Own Widget with ArcGIS API for JavaScript · release widget instance. TypeScript decorators • Allows us to define and modify common behavior in existing properties,](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed181ae7ccbff5d266f29b1/html5/thumbnails/38.jpg)
![Page 39: Building Your Own Widget with ArcGIS API for JavaScript · release widget instance. TypeScript decorators • Allows us to define and modify common behavior in existing properties,](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed181ae7ccbff5d266f29b1/html5/thumbnails/39.jpg)
![Page 40: Building Your Own Widget with ArcGIS API for JavaScript · release widget instance. TypeScript decorators • Allows us to define and modify common behavior in existing properties,](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed181ae7ccbff5d266f29b1/html5/thumbnails/40.jpg)
Sample Name Here
Click HereFor DEMO
![Page 41: Building Your Own Widget with ArcGIS API for JavaScript · release widget instance. TypeScript decorators • Allows us to define and modify common behavior in existing properties,](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed181ae7ccbff5d266f29b1/html5/thumbnails/41.jpg)
![Page 42: Building Your Own Widget with ArcGIS API for JavaScript · release widget instance. TypeScript decorators • Allows us to define and modify common behavior in existing properties,](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed181ae7ccbff5d266f29b1/html5/thumbnails/42.jpg)
Please Take Our Survey on the AppDownload the Esri Events app and find your event
Select the session you attended
Scroll down to find the feedback section
Complete answersand select “Submit”