The registerForWindowEvent and registerOnceForWindowEvent methods in the ALI Scripting Framework provide pagelets with access to page-level events. For a complete list, see Page-Level Events for Use with the ALI Scripting Framework. To register for notification of these events, pass in the name of the event and the name of the method that should be called when it occurs. When a page-level event is raised, the JavaScript event object is passed to the event handler as an argument.

The ALI Scripting Framework also allows pagelets to raise and respond to custom events using raiseEvent and registerForEvent. The Broadcast-Listener design pattern illustrates an important example of using notification services with session preferences. Users can select an item or perform some other action in a "broadcast" portlet, which causes the content in other related "listener" portlets to be redrawn.

In the following example, the broadcast portlet displays a form that allows you to enter a number in a text box.

When the user enters a number in the text box, the values in the listener portlets change. The first listener portlet displays the square root of the number entered in the broadcast portlet.

The second listener portlet displays the cube root of the number entered in the broadcast portlet.

The following steps summarize how the portlets work:

Broadcast Pagelet

<div style="padding:10px;" align="center">
<p><b>Enter number:</b>
&nbsp;<input type="text" style="font-size:22px;font-weight:bold;text-align:center;"
id="broadcast_prefName" value="4" size="7" onkeyup="broadcast_setPrefs(this.value)"></p>
<br>
</div>

<script type="text/javascript">

function broadcast_setPrefs(val)
{
	var prefName = 'broadcastNumber';
	var prefValue = val;
	PTPortlet.setSessionPref(prefName,prefValue);

	var broadcastPortlet = PTPortlet.getPortletByGUID('{D9DFF3F4-EAE7-5478-0F4C-2DBD94444000}');

  	if (!broadcastPortlet)
	{
		broadcast_debug('Could not locate PTPortlet object which corresponds to <b>Broadcast Portlet</b> on page.');
		return;
		}

  	broadcast_debug('<b>Broadcast Portlet</b> raising onBroadcastUpdate event.');
	broadcastPortlet.raiseEvent('onBroadcastUpdate',false);

}

function broadcast_debug(str)
{
	if (window.PTDebugUtil) 
	{ 
		PTDebugUtil.debug(str); 
	}
}
</script>

Listener Pagelet #1

<div style="padding:10px;" align="center">
<p><b>Square root:</b>
<div style="height:21px;border:2px solid black;padding:2px;overflow:visible;font-size:14px;"id="listener1-swatch">
</div>
</div>

<script>

function listener1_update()
{
	var broadcastNumber = parseFloat(PTPortlet.getSessionPref('broadcastNumber'));
	if (isNaN(broadcastNumber))
	{
		listener1_error('<b>Listener-1 Portlet</b> cannot parse number from session pref broadcastNumber');
		return;
	}

  	listener1_debug('<b>Listener-1 Portlet</b> computing square root of ' + broadcastNumber);
  	var swatch = document.getElementById('listener1-swatch');
	swatch.innerHTML = Math.sqrt(broadcastNumber);
}

function listener1_debug(str)
{
	if (window.PTDebugUtil) 
	{ 
		PTDebugUtil.debug(str); 
	}
}

function listener1_error(str)
{
	if (window.PTDebugUtil) 
	{ 
		PTDebugUtil.error(str); 
	}
}

function listener1_getPortlet()
{
	var portletGUID = '{D9DFF3F4-EAE7-5478-0F4C-2DBDB4F4A000}';
	var listener1Portlet = PTPortlet.getPortletByGUID(portletGUID);
	return listener1Portlet;
}

var listener1Portlet = listener1_getPortlet();
if (listener1Portlet)
{
	listener1Portlet.registerForEvent('onBroadcastUpdate','listener1_update');
	listener1_debug('<b>Listener-1 Portlet</b> registered refreshOnEvent for event onBroadcastUpdate');
	listener1Portlet.registerForEvent('onload','listener1_update');
}

</script>

Listener Pagelet #2

<div style="padding:10px;" align="center">
<p><b>Cube root:</b>
<div style="height:21px;border:2px solid black;padding:2px;overflow:visible;font-size:14px;"id="listener2-swatch">
</div>
</div>

<script>
var listener2_oneThird = (1/3);

function listener2_update()
{
	var broadcastNumber = parseFloat(PTPortlet.getSessionPref('broadcastNumber'));
	if (isNaN(broadcastNumber))
	{
		listener2_error('<b>Listener-2 Portlet</b> cannot parse number from session pref broadcastNumber');
		return;
	}

	listener2_debug('<b>Listener-2 Portlet</b> computing square root of ' + broadcastNumber);

	var swatch = document.getElementById('listener2-swatch');
	swatch.innerHTML = Math.pow(broadcastNumber,listener2_oneThird);
}

function listener2_debug(str)
{
	if (window.PTDebugUtil) 
	{ 
		PTDebugUtil.debug(str); 
	}
}

function listener2_error(str)
{
	if (window.PTDebugUtil) 
	{ 
		PTDebugUtil.error(str); 
	}
}

function listener2_getPortlet()
{
	var portletGUID = '{D9DFF3F4-EAE7-5478-0F4C-2DBDCA1C7000}';
	var listener2Portlet = PTPortlet.getPortletByGUID(portletGUID);
	return listener2Portlet;
}

var listener2Portlet = listener2_getPortlet();
if (listener2Portlet)
{
	listener2Portlet.registerForEvent('onBroadcastUpdate','listener2_update');
	listener2_debug('<b>Listener-2 Portlet</b> registered refreshOnEvent for event onBroadcastUpdate');
	listener2Portlet.registerForEvent('onload','listener2_update');
}

</script>