Working with the sample widgets

Working with the sample widgets is the third step to learning about widgets before actually developing your own.

Before you can work with the sample widgets you must have deployed them and registered them.

In our example, we were using WebSphere Process Server running in WebSphere Integration Developer.

  1. Start your server.
  2. Launch a Web browser for Business Space widgets. For example, launch a browser with a URL like http://localhost:9080/BusinessSpace. The port number will depend on what other server products you have. In most cases, 9080 will work. Login to Business Space.

    Launch business space browser

  3. Create a Business Space called My Business Space. In the top left corner, click the Create new Business Space icon and in the following dialog name it My Business Space.
  4. Create a page called My Page. In the new Business Space, click the Create new page icon and in the following dialog name it My Page.
  5. Expand Add Widgets and find the Selection Sample and Details Sample widgets. They are under the Samples category. Drag them on to the page you created.

    Add Widgets with Selection and Detail widgets

  6. The Selection widget lets you choose a WebSphere product from a list. Once you do so, Selection will send an event to the Details widget telling the Detail widget what product has been selected. Expand the drop down list in Selection and choose a product such as WebSphere Process Server.

    Selecting a product

  7. Once selected, the Selection widget adds a message that it has fired an event; that is, sent the selection to the Details widget. The Details widget lists three rows of information about the product selected.

    Information about the product shown in the Details widget after receiving event from the Selection widget

  8. The Details widget has an attribute that it can be configured with, which is the number of rows in the table. To test this configuration attribute, expand the drop-down list on the top-right side and select Configure.

    Configuring the Details widget

  9. Select the number of rows to display. For example, select two rows and click OK.

  10. The rows in the table in the Details widget are reduced to the number you have selected.

    Rows reduced to the number selected by your configuration

  11. The URL to the help file is found in the widget registry XML. This sample does not have a help file associated with it, however, if a help file were registered in the widget's XML file, the help link would open.
  12. You have tested the functions of the Selection and Details widgets. You can try other combinations of selections and configurations. When finished testing, close the browser.
You have worked with the provided sample widgets after previously learning how to deploy them and register them. The next step is to develop your own widget. Begin by looking at the process for developing widgets in Process for developing your own widgets.