Building Your own Widget with ArcGIS API for JavaScript

Transcription

1 Building Your own Widget with ArcGIS API for JavaScript Matt JC

2 Agenda About Widgets Prerequisites Widget framework Theming DO IT! Tips & tricks

3 About Widgets What? Encapsulated Cohesive Single-purpose pieces of functionality Why? Reusable Interchangeable How? Different frameworks are available

4 Prerequisites Accessor (esri/core/accessor) TypeScript

5 Accessor JavaScript API Foundation Consistent developer experience TypeScript support

6 Accessor - Unified Object Constructor var view = new MapView({ container: "viewdiv", map: map }); var symbol = new SimpleMarkerSymbol({ style: "square", color: "blue" }); var widget = new BasemapToggle({ view: view, nextbasemap: "hybrid" });

7 Accessor - Defining Properties (getters + setters) var Foo = Accessor.createSubclass({ properties: { // read-only foo: { readonly: true, value: new // aliased bar: { aliasof: "foo" }, } }); // autocast baz: { type: SomeClass }

8 Accessor - Property watching // watch for changes using a property view.watch("map.basemap.title", handle // watch for changes to multiple prope view.watch("stationary, interacting",

9 TypeScript Superset of JavaScript Compiled to JavaScript Statically type-checked Syntactic sugar... sweet! Use ES6 syntax while targeting ES5 environments

10 Type safety let view: MapView SceneView; //... /* * TS2322: Type '"not-a-view"' is not * to type 'MapView SceneView'. */ view = "not-a-view";

11 Typings Help describe what things are: type PresenterName = "Alan" "Matt" interface Person { name: string; age: number; } interface Presenter extends Person { name: PresenterName; }

12 JS of the future, now Fat arrow functions const somefn = () => { /*... */ }; // instead of const somefn = function () { /*... */

13 JS of the future, now Template strings const text = `Hello. Nice to meet you, // instead of const text = "Hello. Nice to meet you,

14 JS of the future, now Destructuring const { map, zoom, scale } = view; // instead of const map = view.map; const zoom = view.zoom; const scale = view.scale;

15 JS of the future, now Rest Parameters function ignorefirst(first,...therest console.log(therest); } // instead of function ignorefirst() { var therest = Array.prototype.slice. } console.log(therest);

16 JS of the future, now foo = "foo";

17 TypeScript IDE Support Visual Studio: 2015/2013, Code WebStorm Sublime Text Atom Eclipse Brackets Emacs Vim

18 TypeScript + JS API 4 Install TypeScript Install JavaScript API typings Start writing code! TypeScript setup

19 Let's see some widget decorators

20 Creating a + class Foo extends declared(accessor) { //... }

21 Creating a class: multiple inheritance + declared interface Foo extends Bar, Baz class Foo extends declared(accessor, B //... }

22 Defining foo = new Foo();

23 set myproperty(value: string) { // note internal `_set` this._set("myproperty", value); this._ensurevalidity(value); }

24 dependson: ["firstname, lastname"] }) get fullname() { return `${this.firstname} ${this.las }

25 readonly: true }) myproperty = "I'm read-only";

26 Autocast type: MyClass }) myproperty; instance.myproperty = { /* params */ } console.log(instance.myproperty instan

27 Alias aliasof: "bar.baz" }) foo;

28 Alias foo;

29 Handle click and private function _dosomething() { //... }

30 Rendering when @renderable() title "viewmodel.foo", "viewmodel.bar" ]) viewmodel = new ViewModel();

31 More details in the SDK Implementing Accessor Widget Development

32 Widget framework JSX Lifecycle Properties Methods Events

33 Widget Framework: About esri/widgets/widget: Our new widget framework Accessor-based Built with TypeScript

34 Widget Framework: JSX JavaScript extension syntax adds XML syntax to JavaScript Looks similar to HTML Can use JS inline! <div class={classlookup.hello} onclick={this._handleclick} tabindex={0}> Hello World </div>

35 Widget Framework: Lifecycle constructor() postinitialize() render() destroy()

36 constructor() constructor(params?: any) { super(); // Do some stuff! }

37 postinitialize() postinitialize() { this.own( watchutils.on(this, "property", => ); }

38 render() Return JSX Virtual DOM render() { return ( <button>{this.title}</button> ); } Widget rendering (SDK)

39 destroy() destroy() { // cleanup listeners // destroy other widgets // dereference variables // etc. }

40 Framework: Getting/Setting Properties // normal setting of a prop mywidget.property = value; // normal getting of a prop console.log(mywidget.property); // internal set property // will not trigger setter this._set("property", propertyvalue); // internal get property // will not trigger getter this._get("property");

41 Framework: ViewModels (The brain) Core logic of widget resides here Provides necessary APIs for the view to do it's thing No DOM/UI concerns (think business logic)

42 ViewModels: Why? Framework integration Reusability Separates concerns

43 Widget Framework: Views (The face) esri/widgets/widget Uses ViewModel APIs to render the UI View-specific logic resides here

44 Views: Why? Separates concerns Framework compatibility

45 Views: Defining type: MyViewModel }) viewmodel: MyViewModel = new MyViewMod

46 Widget Framework: Method Convention Public Methods public mymethod() {} Private Methods private _mymethod() {}

47 Widget Framework: Events Views have ability to emit() an event. ViewModel needs to import dojo/evented in order to emit() Views can alias an event with vmevent decorator.

48 Widget Framework: View Events Widget views extend dojo/evented this.emit("my-event", {...});

49 Widget Framework: ViewModel Events 1. Import evented import Evented = require("dojo/evented 2. Extend Evented interface MyViewModel extends Evented... } 3. Emit event when necessary this.emit("my-event", {...});

50 Widget Framework: Aliased type: MyViewModel }) viewmodel: MyViewModel = new MyViewMod

51 Widget Theming Out of the box themes SDK: Styling topic Sass BEM

52 Widget Theming: Guide SDK Guide: Styles

53 Widget Theming: Out of the box Themes Demo

54 Widget Theming: Sass CSS preprocessor (group - (use - (split up - (inheritance) More power!

55 Sass makes it easier to... Restyle Theme Modular / DRY Be organized Write less code :)

56 Sass Install Installing Sass Themes source on Github

57 Widget Theming: BEM BEM: Block Element Modifier Methodology to create reusable components Uses delimiters to separate block, element, modifiers Provides semantics (albeit verbose) Keeps specificity low Scopes styles to blocks /* block */.example-widget {} /* block element */.example-widget input {}.example-widget submit {} /* block--modifier */.example-widget--loading {} /* block element--modifier */.example-widget submit--disabled {}

58 DO IT! Build a widget! Demo

59 Setup HTML & CSS with Sass HTML Setup Steps Sass Setup Steps

60 Tips & Tricks Collections Accessibility i18n

61 Rethinking Widget APIs Using esri/core/collection instead of Arrays Using esri/core/accessor instead of plain objects Adding properties to manage widget state Hiding nodes with Widget framework JSX instead of CSS setting JSX node to null when necessary Private/protected variables

62 Accessibility tabindex aria roles keyboard events

63 i18n Import language file import * as i18n from "dojo/i18n!./myw Setup root language file with languages // "/nls/mywidget" define({ root: ({ helloworld: "Hello World" }), "es": 1 }); Setup other languages. (\es) // "/nls/es/mywidget" define({ helloworld: "Hola Mundo" });

64 Suggested Sessions Building Classes Using Accessor and the ArcGIS API for JavaScript Using TypeScript with ArcGIS API for Javascript Deep Dive on How ArcGIS API for JavaScript Widgets Were Built

65 Additional Resources Styling Implementing Accessor Setting up TypeScript Widget Development JavaScript Sessions at DevSummit Documentation 4.3

66 Use the source luke esriurl.com/buildwidgets2017

67 Please Take Our Survey! 1. Download the Esri Events app and go to DevSummit 2. Select the session you attended 3. Scroll down to the "Feedback" section 4. Complete Answers, add a Comment, and Select "Submit"

68 Questions?

69 Thank you!

70