View
17
Download
0
Category
Preview:
Citation preview
Building Your Own Widget with ArcGIS API for JavaScriptBen RamsethSoftware Engineer - Esri
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
About Widgets
• What?- Encapsulated UI components- Cohesive (integrated, unified)- Single-purpose pieces of functionality
• Why?- Reusable- Interchangeable
• How?- Extend esri/Widgets/Widget
Let’s take a look at a few…What are widgets
Widgets can also be views that make up an app
JS API + TypeScriptDeveloper environment
Typescript - https://www.typescriptlang.org/
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'
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 ;
IDE SupportVisual Studio WebStorm Sublime Text and more!
JSAPI API – Typescript - VSCode
Setting up the Dev Environment
https://developers.arcgis.com/javascript/latest/guide/implementing-accessor/index.html
Implementing Accessor
How we built it.Widget Framework
Pieces needed for the Widget Framework
• Typescript• JSX• esri/core/Accessor
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
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
Widget implementation
• Extend the widget• Implement properties and methods• Render the widget• Export module
Extend the widget
• extending from the base Widget class
Implement properties and methods
Render the widget
• render is the only required method
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
Export module
• end of the code page
Walk before runningHello World Widget
Beyond the basics…Building a Widget
Building a Map Widget
Custom RecenterWidget
ArchitectureSeparation of concerns
Views + ViewModels UI replacement Easier integration
Views• Extend esri/widgets/Widget
• Rely on ViewModel Focus on UI
ViewModelsExtend esri/core/Accessor Provide APIs to support View Focus on business logic
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
The easy way…Helpful blog post
@arcgis/cli
Summary
Additional ResourcesImplementing Accessor Setting up TypeScript Widget DevelopmentJavaScript API SDKStylingWidget Patterns
Let’s have some questions…
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”
Presentation TitlePresenter Names
Sample Name Here
Click HereFor DEMO
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”
Recommended