In this post I showed how to create a simple counter, based on the Active Data Service from ADF Faces. This facility works out of the box with components like:
- activeCommandToolbarButton
- activeImage
- activeOutputText
- table
- tree
- All DVT components
However not always this is enough. There are a bunch use-cases where you want more!
One scenario could be that you have a long-running task in the background and when it is finished, you want to inform the user. Ideally you want to show him a popup which contains some information regarding the scheduled task. Let’s take a look how that is possible with ADF Faces.
As the user is most-likely not interested in watching a ticket/counter, we need to use a (hidden) trick. We use an invisible <af:activeOutputText>, which has one child element (<af:clientListener />):
...
<af:activeOutputText id="activecomp"
value="#{counterBean.state}" visible="false">
<af:clientListener type="propertyChange" method="activeDataCallback" />
</af:activeOutputText>
...
The <af:clientListener/> is interested in a “propertyChange” event, which get’s triggered when a property of the component changes. So every time an update is send to the client, the invisible component changes one property, here it is the “value” property. So we leverage that “trick” to call our custom JavaScript activeDataCallback() function when an update reaches the client 
As you can tell from reading the JavaScript-Documentation the client-side event class has been modeled after the JSF ValueChangeEvent, but it is slightly different.
So let’s take a look at the required JavaScript:
...
<af:resource type="javascript">
activeDataCallback = function(event)
{
showPopup();
}
showPopup = function()
{
var popup = AdfPage.PAGE.findComponentByAbsoluteId("demoPopup");
popup.show();
}
</af:resource>
...
In this example the callback is not interested in a property of the event argument. It just want’s to show a popup component, which is nested inside of the page:
...
<af:popup id="demoPopup" contentDelivery="immediate">
<af:dialog closeIconVisible="false" title="Appointments!"
visible="true" id="d2">
<af:outputText value="Real content would go here" id="txtBox"/>
</af:dialog>
</af:popup>
...
The result looks like this, once the active data arrives the client:
