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

5 comments:

Anonymous said...

thanx
just did it

srjwebsolutions said...


We are leading responsive website designing and development company in Noida.
We are offering mobile friendly responsive website designing, website development, e-commerce website, seo service and sem services in Noida.

Responsive Website Designing Company in Noida
Website Designing Company in Noida
SEO Services in Noida
SMO Services in Noida

BatteryMantra No. 1online battery store said...

Battery Mantra is Authorized exide car battery dealer in Noida and Greater Noida. We are providing our service in Indirapuram, Delhi, Ashok Nagar.

Exide Battery Dealer in Noida
Battery Dealer in Noida
Authorized Battery Dealer in Noida
Car Battery Dealer in Noida
Car Battery Dealer
Exide Battery Dealer

Genxsoft said...

Egmedi.com is online medical store pharmacy in laxmi nagar Delhi. You can Order prescription/OTC medicines online.
Cash on Delivery available. Free Home Delivery


Online Pharmacy in Delhi
Buy Online medicine in Delhi
Online Pharmacy in laxmi nagar
Buy Online medicine in laxmi nagar
Onine Medical Store in Delhi
Online Medical store in laxmi nagar
Online medicine store in delhi
online medicine store in laxmi nagar
Purchase Medicine Online
Online Pharmacy India
Online Medical Store

Abhi said...

Thanks for info
Web Design Company in Bangalore
Website development in Bangalore