Inter iWidget communication

The iWidget specification has concept of Events similar to the Events in the portlet, the events allow widgets to communicate with each other. The Rational Application Developer iWidget wizard has a template for creating a iWidget that is capable fo publishing event as well as creating a iWdget that can subscribe to event.



I used the the RAD iWidget wizard to create a SampleEventPublisher widget, this widget is capable of publishing a event

<?xml version="1.0" encoding="UTF-8" ?>
<iw:iwidget id="SampleEventPublisher" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xmlns:iw="http://www.ibm.com/xmlns/prod/iWidget" supportedModes="view"
  mode="view" iScope="SampleEventPublisherScope">
 
 
  <iw:eventDescription id="sendName" payloadType="String" description="Event to send data" lang="en" />

  <iw:event id="sendEvent" description="sendName" published="true" />  

  
  <iw:resource src="SampleEventPublisher.js" id="SampleEventPublisherId" />

  <iw:content mode="view">
       <![CDATA[
             <div> Name: <span id="name"></span></div> 
             <div>
               <span id="nameField" class="nameField">
                    <input type="text" dojoType="dijit.form.TextBox" 
     maxlength="32" name="nameBox" id="nameBox" />
               </span>
             </div> 
             <div><input type="button" name="send" value="Send Name" 
    onclick="iContext.iScope().sendName()"/> </div> 
         ]]>
  </iw:content>
</iw:iwidget>


The eventDescription element declares the event that this widget can publish it also defines type of the event. The event element defines if this widget can publish event or subscribe event.

The SampleEventPublisher widget supports only view mode, in the view mode it displays a form where you can enter a name and click on Send Name button, when you do that it will pass control to the sendName() method. This is how the SampleEventPublisher.js looks like


dojo.declare("SampleEventPublisherScope", null,{ 
      sendName:function(){ 
          var data = {};
 
          this.iContext.iEvents.fireEvent("sendEvent",null,data.value); 

      }
});


The iEvents.fireEvent() method is used for publishing the event. The Universal Test Client for iWidget provides a nice UI for check if you event publishing.



When i enter a name can click on Send Name button i can see that the data being sent in Events sent by your iWidget window.

Similarly i used the RAD iWidget wizard for creating SampleEventSubscriber.xml widget, this is how the widget xml looks like

<?xml version="1.0" encoding="UTF-8" ?>
<iw:iwidget id="SampleEventSubscriber" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xmlns:iw="http://www.ibm.com/xmlns/prod/iWidget" supportedModes="view"
  mode="view" iScope="SampleEventSubscriberScope">
    
  <iw:eventDescription id="receiveName" payloadType="String"  
  description="Event to receive data" lang="en" />
    
  <iw:event id="receiveEvent" description="receiveName" handled="true" 
  onEvent="onReceiveName" />

  <iw:resource src="SampleEventSubscriber.js" id="SampleEventSubscriberId" />

  <iw:content mode="view">
       <![CDATA[
             <span id="helloSpan"><h1>Hello World</h1></span>
         ]]>
  </iw:content>
</iw:iwidget>


The SampleEventSubscriber widget defines one receiveEvent of String type. In the view mode it displays Hello World message which will be changed to display value of event. The value of onEvent attribute defines name of the JavaScript method that will get called when this event receives event. This is how the JavaScript for the SampleEventSubscriber looks like


dojo.declare("SampleEventSubscriberScope", null,{ 
    onReceiveName:function(iEvent){ 
       var data = iEvent.payload;
       if (dojo.isString(data)) 
          var name = data;
       else if (dojo.isString(data.value)) 
          var name = data.value;
       else
         return;
       
       var element = this.iContext.getElementById("helloSpan");
       element.innerHTML = "
Hello " + name + "
";
    }
});



The onReceiveName() will get called when this widget receives event. The widget container will pass object iEvent to the onReceiveName() method, inside this method we are reading payload of the event and displaying it to the user by changing markup of the view mode.

The Univeral test client for iWidget has a UI that lets you publish the widget and test event receiving part of your widget

2 comments: