Creating the Details widget

The Details widget displays information on the WebSphere product chosen by the Selection widget.

You should have created the Selection widget.

Let's build the Details widget to display the information about the product a user can choose from the Selection widget.

  1. Create a definition file called detailsSample_iWidget.xml that defines the Details widget, the events that it handles, the resources it uses, and the location of its implementation. Alternatively, use the Details widget implementation file included in the following directory: temporary directory\IBM_BSPACE_SAMPLES.ear\BSpaceWidgetsSamples.war\iWidget\widgets\samples\detailsSample

    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 modes, view and edit.
    • An attribute that determines the number of rows in the Details table.
    • The received event from the Selection widget.
    • The resources used are a utility loader and the implementation of the Details widget, detailsSample.js.
    • The Details widget has both a view and edit mode. The initial markup of these modes are shown at the end of the file.
  2. Create an implementation file called detailsSample.js containing the following code:

    Alternatively, you can uses the Details 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 table, a function to handle an event when an option is selected and a function to present the information in an edit configuration, which lets a user choose the number of rows.
    • The edit mode is the mode a user launches when the user clicks the Configure selection in the widget.
You have created another simple widget, which communicates with the widget created earlier through event processing. Next you should package and deploy your widgets as shown in Packaging and deploying widgets.