Flexible ADS – Combining popups with ActiveDataService

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:

Howdy!

Posted in adf, ajax, comet, java, javascript, jdeveloper, jsf, oracle, web²
4 comments on “Flexible ADS – Combining popups with ActiveDataService
  1. […] Faces has great and flexible support for Comet with its ADS facility. This post quickly describes you to push data from a […]

  2. Hi Matthias,

    This is a great example and I really want to make use of it. However, I have not been able to find out what the structure should be of the managed bean sitting underneath the af:activeOutput component (#{counterBean.state}) in your code. What is the source code for this counter bean? Surely state is more than just a String or a Long. Or is it?

    Thanks for any pointers you may be able to share.

    Lucas

  3. matthiaswessendorf says:

    I am glad you like the article.

    Yes, you are right the state is darn simple – however the bean itself contains about more, leveraging our “proxy” approach. Once I am back from San Francisco, I’ll make the code available.

  4. deepak parmar says:

    Matthias,

    This is really good trick to initiate event on client whenever server send any update.

    I am having one requirement:

    I want to visible/invisible adf panel on UI whenever i get update from webservices. I am also consuming one web services which is sending me update at specified interval.

    so in this use case, do i really need to use ADS? , or can u share back-in bean source code?

    Regards,
    Deepak

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: