Portlet Factory, Version 6.1.2

 

Using widget events

You can create widgets that use widget events to communicate with one another. To create widgets that use widget events to communicate, follow these basic steps:

  1. Create a project.

  2. Create a model that will fire (initiate) the event.

  3. Create a model that will handle the event.

  4. Publish the widgets to the IBM® Lotus® Mashups toolbox.

  5. Use Lotus Mashups to wire the widgets together.

The following procedure shows how to create two widgets: a source widget and a target widget. The source widget fires an event that sends a text string to the target widget. The target widget handles the event and displays the text string.

  1. Create a new project by clicking File > New. Select WebSphere Portlet Factory Project. Enter a project name (for example, TalkingWidgets). Click Next. Accept the default location, the selected extensions, and deselect Tutorials and Samples. Click Finish. When prompted whether you would like to deploy the project now, click Yes. Click here to watch this step.

  2. Create a source model. Click the icon for Create a New Portlet Factory Model. From the list of Available Projects, select the name of your new project. Click Next. For the Page Settings, accept the default Imported Page. Click Next. For the model type, select Main and Page. Click Next. Enter a meaningful model name, such as SourceModel. The model name will appear in directory paths and file names where the project is stored. Click Finish.

    1. Add the Widget Adapter builder. Click the Add a Builder icon. From the list of builders, select Widget Adapter. Enter a title for the widget (such as SourceWidget), the drawer where the widget will appear in the Lotus Mashups toolbox, and a description of the widget (optional). Click OK.

    2. Add the Widget Event builder. Click the Add a Builder icon. From the list of builders, select Widget Event. Enter a name for the Widget Event, such as SourceEvent. For Payload, select One Simple Parameter as Payload. For Payload Type/ID, select string. For Event Usage, select Fire this Event to other Widgets. Click OK.

    3. Add the Link builder. Click the Add a Builder icon. From the list of builders, select Link. Enter a name for the Link (optional). Enter the Page Location, where the Page is page1, and the Tag is namedTag. For Link text, enter the text that will constitute the link. For Action Type, choose Link to an action. For Action, choose Methods > fireSourceEvent, where SourceEvent is the event name you entered in the Widget Event builder inputs. In the Arguments section, for Evaluate arguments, choose As the page is rendered. In Input Mappings, note that fireSourceEvent_Arg1 is provided. In the value, enter the text string that you want to send to the target widget. Click OK. Click here to watch this step.

    The source widget is created. Click File > Save to save it.

  3. Create a target model that receives the message from the source model. Click the icon for Create a New Portlet Factory Model. Select the project name from the list. Click Next. For the model type, select Main and Page. Click Next. For the Page Settings, accept the default Imported Page. Click Next. Enter a meaningful model name, such as TargetModel. Click Finish.

    1. Add the Widget Adapter builder. Click the Add a Builder icon. From the list of builders, select Widget Adapter. Enter a title for the widget (such as TargetWidget), the drawer where the widget will appear in the Lotus Mashups toolbox, and a description of the widget (optional). Click OK.

    2. Add the Variable builder. Click the Add a Builder icon. From the list of builders, select Variable. Enter a meaningful variable name, such as MessageVariable. For Type, choose String. For the Initial Value, enter the initial text that will appear before the event is fired. Click OK.

    3. Add the Text builder. Click the Add a Builder icon. From the list of builders, select Text. Enter a meaningful name, such as TargetTag. For Page, choose page1. For Tag, choose namedTag. For Text, choose Variables > MessageVariable (the name of the variable created above). Click OK.

    4. Add the Widget Event builder. Click the Add a Builder icon. From the list of builders, select Widget Event. Enter a name for the event, such as TargetEvent. For Payload, choose One Simple Parameter as Payload. For Event Type, choose string. For Event Usage, choose Handle this event when fired by other widgets. Scroll down to the Event Handling section. For Action Type, leave the default setting (Execute one or more actions on the server). For Action List, choose Special > Assignment. The Assignment dialog box appears. For the Assignment Type, choose Replace. For the Target, choose Variables > MessageVariable(the variable created above). For Source, choose Arguments > simple_payload. Click OK to complete the Action. Create another Action by clicking the Choose icon in the next row. Choose Pages > page1. Click OK to create the builder.

    The target widget is created. Click File > Save to save it. Click here to watch this step.

  4. Publish the widgets. Right-click on the project name. Select Widgets, then click Publish widgets to Lotus Mashups Toolbox. Select the new widgets (SourceWidget and TargetWidget). Click OK. When prompted, enter your IBM Lotus Mashups administrator credentials. A progress bar shows when the publish action is completed. Click here to watch this step.

  5. Start Lotus Mashups , open Edit view, and open the drawer where you specified in the Widget Adapter builder. Drag each of the the new widgets onto the page. Use the Edit Wiring widget menu item to specify wiring between the source widget and the target widget as follows:

    1. Click the Edit Wiring menu item for SourceWidget.

    2. Select the Send tab.

    3. For Widget to send content, click the name of the source widget (in this example, SourceWidget).

    4. For Widget to receive content, click the name of the target widget (in this example, TargetWidget).

    5. For Select an action, choose the name of the target event (in this example, TargetEvent).

    6. Click Done.

    The widgets are now wired. Test communication by clicking the link in the source widget that is formed by the Link text supplied to the Link builder in the SourceWidget. The text on the target widget changes from the initial value supplied to the Variable builder in the TargetWidget, to the text string associated with fireSourceEvent_Arg1 in the Link builder in the SourceWidget. Click here to watch this step.

This example causes a simple exchange of a text string from one widget to another. Using additional builders, you can elaborate on this example by building more functionality into the source and target widgets.

Parent topic: Introduction to widgets

Library | Support |