The Selection widget presents a drop-down list of WebSphere
products without the details. Those details will be found in the Details
widget.
Let's build a simple widget that presents the drop-down
list of products.
- 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.
- 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.