Skip to end of metadata
Go to start of metadata

Demonstrates how to create and use a basic widget.

App Folder Location


Widgets have their own views/, controllers/, models/, styles/ and assets/ folders. These folders are organized in the same way as the top-level app/ directory in the Alloy project. By convention, widgets resides in the app/widgets folder. The sample application includes a widget named in the app/widgets/ folder, as shown below.

App and widget folder structure

The Alloy app's configuration file (config.json) must declare the widget as a dependency:


By convention, a widget's default view is located at  widget_folder/views/widget.xml, and it's controller and style files are are widget_folder/controllers/widget.js and widget_folder/styles/widget.tss. To include a widget in the main application, insert a <Widget/> element and set its src attribute to the name of the widget folder ("" in this case). By default, the widget.xml view is included; you can specify a different widget view XML file by specifying its name attribute.