The Oracle WebCenter Interaction Scripting Framework allows pagelets/portlets to respond to both page-level events and custom events raised by other pagelets/portlets.
The Oracle WebCenter Interaction Scripting Framework also allows pagelets/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" pagelet/portlet, which causes the content in other related "listener" pagelets/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> <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>