This blog post discusses how the new ArcGIS API for JavaScript 4.0 deals with widgets.
What is a widget?
Working with widgets is an essential part of the ArcGIS API for JavaScript. Esri calls widgets “the building blocks of the user interface”. But what is a widget exactly? Typically, a widget is thought of as a piece of the API that encapsulates a specific set of functionality involving a visual element of the page, such as the legend. It consists of a chunk of portable code that can be used in any application. Flexible user interface placement, control over the map view and widgets are some of the capabilities for building a user-friendly app with the API.
New widgets
The new API provides ready-to-use widgets with predefined functionality, for example locating the user´s current location on a map, adding a legend to help visualize a map, or searching for features and locations within the map. Three new widgets are available: the NavigationToggle, Legend and Track widget.
The idea behind the new API is “mobile first”, meaning that design of widgets work on mobile devices as well as the traditional desktop browser. Widgets can now be easily placed in one of the corners or offset from the edge, while relative placement of the user interface elements helps accommodate multiple screen resolutions, enhancing the user experience.
Users planning to migrate from 3.x to the new 4.0 API might be interested to know that there are a significant number of changes in the API with regards to existing widgets, such as renamed properties, methods and events. These are listed in the “What’s New” section of the online API reference.
How it all works
The fundamental concepts of working with widgets are consistent across the board, regardless of the widget that is being used. First, a simple Map needs to be created and referenced in a View. Then, the widget is created and instantiated. After that, its properties are set and finally the startup method is called on the widget, finalizing its creation. Not all widgets are automatically made available to the MapView and SceneView by default. Some widgets need to be manually added into the application if the functionality of a widget isn´t standard and used throughout applications.
View Model
A View Model is a concept that was introduced with the new API, which treats the maps as a data source for a view (for both 2D and 3D). This concept also applies to widgets, meaning that the user can take the View Model of a widget and customize the interface. A view model’s source code is available in the new SDK. View Models can be rewritten in any framework and different ViewModels can be combined to create so-called “Frankenwidgets”.
