Creating the Selection widget

The Selection widget presents a drop-down list of WebSphere products without the details. Those details will be found in the Details widget.

You should have read the Sample widgets overview.

Let's build a simple widget that presents the drop-down list of products.

  1. Create a definition file called selectionSample_iWidget.xml. In the file, define the widget, the events it broadcasts, the resources it uses, and the location of its implementation. As an alternative to creating the definition file, you can use the Selection widget definition file provided in the temporary directory where you unzipped the samples widgets. The path to the definition is temporary directory\IBM_BSPACE_SAMPLES.ear\BSpaceWidgetsSamples.war\iWidget\widgets\samples\selectionSample

    This sample file includes comments to help you understand the code and has the following contents:

    • It begins with a declaration of its type, iWidget, its name, and its mode, view.
    • The events listed tell you that the widget is broadcasting the option that will be selected from the drop-down list.
    • The resources used are a utility loader and the implementation of the Selection widget, selectionSample.js.
    • The initial markup of the view mode is shown at the end of the file.
  2. Create an implementation file called selectionSample.js that displays a list of products and fires an event when the user selects one them. Alternatively, you can uses the Selection widget implementation file included with the samples. This sample file includes comments to help you understand the code and has the following contents:
    • The entry point to the Dojo iContext runtime environment begins the implementation.
    • The Dojo language dependencies are called.
    • When a widget is first loaded the onLoad() function is called, then the onview() function is called to load the view mode.
    • The functions of the implementation are provided including the loading of the widget and its dependencies, the visualization of the drop-down list and a function to fire an event when an option is selected. There is also a function (not used) that shows you how to interact with the registry and to retrieve an endpoint and make an outgoing REST API call. See Representational State Transfer (REST) APIs.
You have created one simple widget. Now you need to create the other one it communicates with, the Details widget.