ADF 11g : Using jQuery and ADF to provide a fading user feedback

Last week someone asked me if it was possible to inform the users of his application about the fact that data has been changed. No problem I told him. Whenever you use an actionListener or action that is implemented by a method in a bean, you can use showPopup() to show a popup from a backing bean. This was however not what he wanted. The usecase is a little more sophisticated: Save data, and inform the user without showing a popup that has to be ‘clicked’ away.

In this post I describe how to achieve this with jQuery

JQuery is a javascript library with lots of functionality. The one that I was looking for is ‘fadeTo()‘ or something similar. To use jQuery you have to download it first. You can find the jQuery library here. After downloading, you can use it in your app.

The strategy I used to create a fading feedback is the following.
1) Find out how to use jQuery fading.
2) Configure ADF app to implement the jQuery fading behavior.

The jQuery part.
The jQuery syntax is tailor made for selecting HTML elements and perform some action on the element(s).

Basic syntax is: $(selector).action()

* A dollar sign to define jQuery
* A (selector) to “query (or find)” HTML elements
* A jQuery action() to be performed on the element(s)

For how to use the ‘selector’ it is conveinient to know how this works.
$(“#test”).() – hides the element with id=”test”.
The ‘Selector’ will refer to an element for instance with the id=”myid”element with id=”test”
So to use fadeTo() this would be something like $(selector).fadeTo()
For using fadeTo() on an element with id = “fadeanim” I have to use $(“#fadeanim”).fadeTo().

With this knowledge I can now create a javascript file to implement the fading logic. For that I create a new javascript file (fade.js) in JDeveloper.
I will fade in 500 ms to an opacity of 1, and from there fade out in 5 secs.
Here is the code that does that.

function Fade(selector){
$(selector).fadeTo(500, 1.0);

$(selector).fadeTo(5000, 0);
}

With this code I can fade any html element as long as I call the Fade() function with the id of the element as an argument. For instance Fade(‘#theId’) will fade the element with id “theId”.

The ADF part.
Now I need to create an ADF element on the page that will be faded. I use an af:panelGroupLayout with layout=”vertical” because that will be rendered as a DIV. I add, a styleclass to it that will result in a not displayed DIV. Not displyed because I don’t want the message to be visible at all unless I tell jQuery to show it. In the panelGroupLayout I have an image containing the message I want to present to the user.
I put the panelgrouplayout at the end of the page, but more important is the id that I use. This id will be used by the Fade() method.
So first the code of the panelgrouplayout:

<af:panelGroupLayout id="fadeanim" layout="vertical" styleClass="fader">
<af:image source="/images/saved-complete.png" id="i2"/>
</af:panelGroupLayout>

Next the stylesheet that will make all panelgrouplayout components with styleClass ‘fader’ being not displayed.

af|panelGroupLayout.fader {display: none;
position:absolute;
top:20%;
left:45%;
}

Now I have to add jQuery and my own javascript file as a resource to the page. That is easy.

<af:document id="d1">
<af:messages id="m1"/>
<af:resource type="javascript" source="/javascript/libs/jquery-1.4.4.js"/>
<af:resource type="javascript" source="/javascript/fade.js"/>
<af:form id="f1">

At this point I have all I need: The javascript files, the stylesheet and the resources added to the page. Now it’s time to make it all work together.
As mentioned earlier, I use an action Listener so I can add custom code. Let’s add a button to the page to invoke the actionlistener

<af:commandButton text="Commit and give feedback"
id="cb1" partialSubmit="true"
actionListener="#{feedBackBean.actionListener}"/>

The actionListener method is where it al happens. First I execute the commit operation on the binding container. Next I need to call the javascript function that will do the fading of the message. In ADF you can use the ExtendedRenderKitService to call a jacascript function. The only thing you have to do is call the javascript function including its arguments (see highlighted line). The #fadeanim’ is a reference to the panelgrouplayout containing the message.

public void actionListener(ActionEvent actionEvent) {

FacesContext context = FacesContext.getCurrentInstance();
BindingContainer bindings = getBindings();
OperationBinding ob = bindings.getOperationBinding("Commit");
ob.execute();

if (AdfFacesContext.getCurrentInstance().isPartialRequest(context)) {
ExtendedRenderKitService erks =
Service.getRenderKitService(context,
ExtendedRenderKitService.class);
erks.addScript(context, " Fade('#fadeanim');");
}

Now when I change data on the page and push the button, first the data is committed, and next the message is faded in and faded out.

Resources

A sample can be downloaded here.
George Maggessy on ADF and jQuery.