Widgets 101: Customizing and Creating Widgets with the ArcGIS API for JavaScript

60 Pages·2016·2.33 MB·English

Widgets 101: Customizing and Creating
Widgets with the ArcGIS API for JavaScript
JC Franco – @arfncode
Matt Driscoll – @driskull
Welcome
Agenda
Short URL: bit.ly/widgets101
About widgets
Building blocks
Building a widget
3.x
4.x
Tips & best practices
Resources
Q & A
Widgets
What?
Encapsulated
Cohesive
Single-purpose pieces of functionality
User interface
Why?
Reusable
Interchangeable
Modular
How?
Different frameworks are available
Focusing on Dijit
Dojo toolkit
Foundation of ArcGIS JavaScript API
AMD support
Class-based inheritance
Internationalization
Dijit
Dojo’s UI Library
Separate namespace (dijit)
Built on top of Dojo
Has themes
Asynchronous Module Definition (AMD)
Asynchronous loading
Web-based solution
Lazy loading
Fewer globals
Dependency handling
AMD example
define
// moduleA.js
define(["moduleB"], function (moduleB) {
// module API
return {
_data: 100,
calculate: function () {
moduleB.calculate(this._data);
}
};
});
require
// main.js
require(["moduleA"], function (moduleA) {
moduleA.calculate();
});
AMD Plugins
text
"dojo/text!./templates/WikiWidget.html"
i18n
"dojo/i18n!./nls/WikiWidget",
Building blocks