[//]: # (TOC generated with https://github.com/jonschlinkert/markdown-toc)
- [4.x Widget Development Guide [INTERNAL]](#4x-widget-development-guide-internal)
* [Widget development requirements](#widget-development-requirements)
+ [Node](#node)
+ [TypeScript](#typescript)
+ [JSX](#jsx)
+ [`esri/core/Accessor`](#esricoreaccessor)
+ [Sass](#sass)
* [Widget development setup](#widget-development-setup)
* [`esri/widgets/Widget`](#esriwidgetswidget)
* [Building `HelloWorld` widget](#building-helloworld-widget)
+ [Simple `HelloWorld`](#simple-helloworld)
+ [Defining properties](#defining-properties)
+ [Defining methods](#defining-methods)
+ [Responding to DOM events](#responding-to-dom-events)
+ [Responding to synthetic events](#responding-to-synthetic-events)
+ [Styling `HelloWorld` widget](#styling-helloworld-widget)
+ [Internationalizing `HelloWorld` widget](#internationalizing-helloworld-widget)
+ [Making `HelloWorld` accessible](#making-helloworld-accessible)
+ [Dynamic UI](#dynamic-ui)
+ [Putting it all together](#putting-it-all-together)
+ [Using `HelloWorld` widget](#using-helloworld-widget)
* [Advanced concepts](#advanced-concepts)
+ [Working with a viewModel](#working-with-a-viewmodel)
+ [`render()`](#render)
+ [Render relevant elements only](#render-relevant-elements-only)
+ [Binding](#binding)
+ [Distinguishable children](#distinguishable-children)
+ [Composite widgets](#composite-widgets)
+ [Dynamic CSS classes](#dynamic-css-classes)
+ [Dynamic inline styles](#dynamic-inline-styles)
+ [Spreading properties/attributes](#spreading-propertiesattributes)
* [TypeScript widget decorators](#typescript-widget-decorators)
+ [Properties](#properties)
+ [Methods](#methods)
* [Gotchas](#gotchas)
* [Widget file structure](#widget-file-structure)
* [Styling](#styling)
+ [Sass](#sass-1)
+ [CSS](#css)
* [ViewModel](#viewmodel)
* [Best Practices](#best-practices)
* [Tips](#tips)
+ [Behind the scenes](#behind-the-scenes)
* [Q&A](#qa)
* [Additional Examples](#additional-examples)
+ [Widgets](#widgets)
+ [Patterns](#patterns)
* [Additional References](#additional-references)
* [Unresolved/Workarounds](#unresolvedworkarounds)
* [Known issues (working on it!)](#known-issues-working-on-it)
* [Breaking changes](#breaking-changes)
* [Notes](#notes)
# 4.x Widget Development Guide [INTERNAL]
Widgets are reusable user-interface components and are key to providing a rich user experience. The ArcGIS for JavaScript API provides a set of ready-to-use widgets and also provides a foundation for you to create custom widgets.
This document will walk through developing a custom widget and also how to use a widget in an ArcGIS for JavaScript API application.
## Widget development requirements
### [Node](https://nodejs.org/en/)
Node is a JavaScript runtime environment and it powers some of the tooling used for widget development. It'll mostly be used to install all development dependencies and to compile our TypeScript and Sass.
### [TypeScript](https://www.typescriptlang.org/)
> TypeScript
> JavaScript that scales.
> TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
> Any browser. Any host. Any OS. Open source.
Widget development is done in TypeScript and the following are some of its main features:
* statically-typed
* transpiles ES6 to ES5 (our current target)
* class-based
The [TypeScript Tutorial](https://www.typescriptlang.org/docs/tutorial.html) and [Sitepen's Definitive Guide to TypeScript](https://www.sitepen.com/blog/2013/12/31/definitive-guide-to-typescript/) are excellent resources to start learning TypeScript.
Although not required, a code editor that supports TypeScript will ease development. See [TypeScript Editor support](https://github.com/Microsoft/TypeScript/wiki/TypeScript-Editor-Support) for more details.
### [JSX](https://facebook.github.io/jsx/)
JSX is a JavaScript extension syntax that allows us to describe our widget UIs similarly to HTML.
See [JSX in depth](https://facebook.github.io/react/docs/jsx-in-depth.html) for more information.
**Note:** Not all concepts from React resources are applicable.
### `esri/core/Accessor`
Accessor is one of the core features of 4.0 and it is the base for all classes. It is the foundation for widgets, so knowledge of Accessor will come pretty handy. It is strongly recommended to read learn [`Accessor` TypeScript usage patterns](https://devtopia.esri.com/WebGIS/arcgis-js-api/wiki/%5B4.0-Guides%5D-Accessor-usage-patterns-in-typescript) to become familiar with best practices using Accessor + TypeScript.
### [Sass](http://sass-lang.com/)
Sass is a CSS preprocessor that allows us to use variables, mixins, and functions. Widget CSS is authored in Sass in an effort to make it easier to style and to ensure a consistent look across widgets.
## Widget development setup
**Note:** The following steps assume the developer is working with the `arcgis-js-api` 4.x repo and that submodules have been initialized.
* Run `npm install && npm run start`
* Each widget belongs in a `.tsx` file, which allows us to use JSX to define our UIs.
* Each widget should have a reference to it in [`tsconfig.json`](https://devtopia.esri.com/WebGIS/arcgis-js-api/blob/4master/tsconfig.json#L13). Place entries in alphabetical order.
**Note:** this step will no longer be needed when [TypeScript 2.0](https://github.com/Microsoft/TypeScript/wiki/Roadmap#20) rolls out (see *Glob support in tsconfig.json*).
## `esri/widgets/Widget`
This module is the base for all ArcGIS for JavaScript API widgets. Like most 4.0 modules, it extends [`Accessor`](https://developers.arcgis.com/javascript/latest/api-reference/esri-core-Accessor.html). We are also able to leverage JSX to define our UIs.
The core principle for widgets is that the UI is created and updated inside `render()`. This method will rely on widget properties and methods (typically from the viewModel) for rendering.
It is recommended to design your widget to minimize relying on state to reduce complexity. Although this is not always possible, strive for simplicity when building your widget.
**Lifecycle**
* `constructor(params)` – †
* `postInitialize()` – this method is called when the widget's properties are ready, but before rendering
* `startup()` – deprecated; added for backwards-compatibility only
* `destroy()` – this method should be used to free up widget resources to ensure proper garbage collection
**Methods**
* `render()` – method where the UI is rendered
* `scheduleRender()` – invalidates the UI and schedules a subsequent render
* `on(eventType, listener)` – method used to register event listeners
* `emit(event, eventObject)` – method used to emit events
**Properties**
* `viewModel` – the widget's viewModel
† `srcNodeRef` is only needed when consumed outside of a Widget [see Composite widgets](#composite-widgets)
**Note**: This is not a 1:1 replacement for React/Dijit, etc...
As a developer, you will typically implement `postInitialize`, `destroy` and `render`; as well as define custom widget methods/properties.
Also, unlike `dijit/_WidgetBase`, `esri/widgets/Widget` will automatically call `destroy` on all superclasses when destroyed.
## Building `HelloWorld` widget
The following shows how to build `HelloWorld` widget.
**Note** This section assumes knowledge of [`Accessor` TypeScript usage patterns](https://devtopia.esri.com/WebGIS/arcgis-js-api/wiki/%5B4.0-Guides%5D-Accessor-usage-patterns-in-typescript)
```js
var helloWorld = new HelloWorld({}, "helloWorldDiv");
// renders <div>Hello, my name is Art Vandelay!</div>
```
### Simple `HelloWorld`
**HelloWorld.tsx**
```tsx
/// <amd-dependency
没有合适的资源?快使用搜索试试~ 我知道了~
arcgis_js_v410_api.zip
共2000个文件
js:8807个
css:1280个
png:794个
需积分: 10 1 下载量 155 浏览量
2022-07-15
15:44:50
上传
评论
收藏 23.48MB ZIP 举报
温馨提示
arcgis_js_v410_api
资源推荐
资源详情
资源评论
收起资源包目录
arcgis_js_v410_api.zip (2000个子文件)
main.css 172KB
main.css 172KB
main.css 172KB
main.css 172KB
main.css 172KB
main.css 172KB
main.css 172KB
main.css 172KB
main.css 172KB
main.css 172KB
main.css 171KB
view.css 147KB
view.css 146KB
iphone-app.css 139KB
windows.css 137KB
claro.css 135KB
iphone.css 134KB
android-app.css 130KB
android.css 124KB
blackberry.css 123KB
holodark.css 123KB
ios7.css 122KB
custom.css 122KB
mapviewer.css 120KB
index.css 79KB
tundra.css 79KB
nihilo.css 77KB
soria.css 76KB
dijit.css 55KB
base.css 53KB
android-compat.css 37KB
EnhancedGrid.css 34KB
tundraEnhancedGrid.css 34KB
EnhancedGrid.css 34KB
iphone-app-compat.css 34KB
claroEnhancedGrid.css 33KB
dijit.css 33KB
iphone-compat.css 33KB
android-app-compat.css 32KB
android-compat.css 32KB
blackberry-compat.css 31KB
custom-compat.css 30KB
android-compat.css 29KB
windows-compat.css 28KB
domButtons.css 28KB
transitions.css 27KB
Calendar.css 25KB
Calendar.css 25KB
Calendar.css 25KB
Calendar.css 25KB
base.css 23KB
index.css 22KB
base.css 21KB
base.css 19KB
base.css 19KB
base.css 19KB
base.css 19KB
Calendar.css 18KB
base.css 17KB
ColumnView.css 17KB
ColumnView.css 16KB
ColumnView.css 16KB
ColumnView.css 16KB
EnhancedGrid.css 16KB
claroGrid.css 15KB
index.css 13KB
tundraGrid.css 13KB
TabContainer.css 13KB
complete.css 12KB
complete.css 12KB
complete.css 12KB
complete.css 12KB
index.css 12KB
FilePickerTextBox.css 12KB
soriaGrid.css 12KB
nihiloGrid.css 12KB
cube.css 12KB
Calendar_rtl.css 11KB
style.css 11KB
claro_rtl.css 11KB
ColumnView.css 11KB
base-compat.css 10KB
gantt.css 10KB
TabBar.css 10KB
base-compat.css 10KB
base-compat.css 10KB
base-compat.css 10KB
SymbolStyler.css 10KB
base-compat.css 9KB
base-compat.css 9KB
TabContainer.css 9KB
base-compat.css 9KB
Slider.css 9KB
IconContainer.css 9KB
MatrixView_rtl.css 9KB
MatrixView.css 8KB
MatrixView.css 8KB
MatrixView.css 8KB
MatrixView.css 8KB
TabBar.css 8KB
共 2000 条
- 1
- 2
- 3
- 4
- 5
- 6
- 20
资源评论
梅里雪山GIS
- 粉丝: 2w+
- 资源: 498
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功