ESM: import * as widget from "@arcgis/core/widgets/support/widget.js";
CDN: const widget = await $arcgis.import("@arcgis/core/widgets/support/widget.js");
Object: @arcgis/core/widgets/support/widget
Since: ArcGIS Maps SDK for JavaScript 4.2
This module contains widget helpers.
Method Overview Name Return Type Summary Object accessibleHandler() FunctionThis convenience decorator is used to help simplify accessibility within the widget keyboard events.
widget cssTransition() FunctionUtility method used for creating CSS animation/transition functions.
widget isActivationKey() BooleanUtility method used to determine if a pressed key should activate button behavior.
widget isRTL() BooleanUtility method used to determine if the directionality of the text of the document is right-to-left.
widget messageBundle() FunctionThis convenience decorator is used to help simplify localization of the widget.
widget storeNode()This convenience method is used to assign an HTMLElement DOM node reference to a variable.
widget tsx() ObjectThis convenience method is used to render the JSX in the widget.render() method.
widget vmEvent() FunctionThis convenience decorator helps dispatch view model events on the widget instance.
widget Method Details accessibleHandler(){Function}
This convenience decorator is used to help simplify accessibility within the widget keyboard events. For example, it can be used to execute a method when the space
or enter
keys are pressed.
Returns
Type Description Function The property descriptor.Example
// .tsx syntax providing accessibility on a widget method
@accessibleHandler()
reset: () => void;
cssTransition(type, className){Function}
Since: ArcGIS Maps SDK for JavaScript 4.7 widget since 4.2, cssTransition added at 4.7.
Utility method used for creating CSS animation/transition functions.
Parameters
The animation/transition type.
Possible Values:"enter"|"exit"
The animation/transition class name.
Returns
Type Description Function The animation/transition function.Example
// .tsx syntax showing how to set up node enter/exit animations
render() {
const content = this.visible ? (
<div enterAnimation={cssTransition("enter", CSS.fadeIn)}
exitAnimation={cssTransition("exit", CSS.fadeOut)}>
I fade in and out.
</div>
) : null;
return (
<div class={CSS.base}>{content}</div>
);
}
isActivationKey(key){Boolean}
Since: ArcGIS Maps SDK for JavaScript 4.19 widget since 4.2, isActivationKey added at 4.19.
Utility method used to determine if a pressed key should activate button behavior. If the returned KeyboardEvent.key is either Enter
or a space (" "
), it returns true
.
Returns
Type Description Boolean Indicates whether the pressed keyboard key is eitherEnter
or a space (" "
).
Since: ArcGIS Maps SDK for JavaScript 4.9 widget since 4.2, isRTL added at 4.9.
Utility method used to determine if the directionality of the text of the document is right-to-left.
Returns
Type Description Booleantrue
if the directionality of the text of the document is right-to-left.
messageBundle(bundleId){Function}
Since: ArcGIS Maps SDK for JavaScript 4.18 widget since 4.2, messageBundle added at 4.18.
This convenience decorator is used to help simplify localization of the widget. It is useful to decorate a property that will be automatically populated with the localized message bundled specified by the identifier bundleId
. The property can then be used in the render()
function to display the localized content.
When a widget is instantiated, all of the message bundles are loaded and assigned to their corresponding properties. The widget's postInitialize method is called, followed by the first call to render.
When the locale changes, all of the message bundles for all of the active widgets are reloaded and reassigned. The widgets then render simultaneously.
If functions are working with translated strings outside of a widget, use intl.fetchMessageBundle instead.
Note that the first call to render()
only occurs after all the properties decorated with @messageBundle
have been populated with their corresponding bundle.
Returns
Type Description Function The property decorator.Example
// .tsx syntax to define a message bundle property
@property()
@messageBundle("my-application/MyBundle")
messages: { [key: string]: any };
render() {
return (
<div>{this.messages.myMessage}</div>
);
}
storeNode(node)
Since: ArcGIS Maps SDK for JavaScript 4.6 widget since 4.2, storeNode added at 4.6.
This convenience method is used to assign an HTMLElement DOM node reference to a variable. It does this by taking a HTMLElement passed from either the afterUpdate
or afterCreate
callbacks. In order to use this, the element must have a set data-node-ref
attribute. In addition, it must also be bound to the widget instance, e.g. bind={this}
.
Example
// The storeNode function is called after the node is
// added to the DOM. Bind the node to the widget and
// pass in the node's root element name.
render() {
return (
<div afterCreate={storeNode} bind={this} data-node-ref="rootNode" />
);
}
tsx(selector, properties, children){Object}
Since: ArcGIS Maps SDK for JavaScript 4.4 widget since 4.2, tsx added at 4.4.
This convenience method is used to render the JSX in the widget.render() method. It is required to import tsx
even though it is not explicitly called.
Returns
Type Description Object The virtual node.Example
// .tsx syntax importing jsxfactory
import { tsx } from "@arcgis/core/widgets/support/widget.js";
vmEvent(eventNames){Function}
This convenience decorator helps dispatch view model events on the widget instance.
Returns
Type Description Function The property decorator.Example
// .tsx syntax dispatching view model events
@property()
@vmEvent("search, search-clear, suggest")
viewModel: SearchViewModel;
GoToOverride(view, goToParameters)
The following properties define a goTo
override function.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4