Follow Us on Twitter

Invoke JavaScript from backing bean in ADF 11g

by Marcel Maas on May 24, 2012 · 9 comments

So, lets say you are working with ADF11g but also want to leverage the power of JQuery to display a messagebox that fades away after some seconds. For instance after creating a message. We can create the following JavaScript to make a message box appear, and slowly fade out after 5 seconds.

function autoremove(selector){
    $(selector).removeClass('hideBox');
    $(selector).fadeTo(5000, 1.0);
    $(selector).animate({
                          opacity: 0,
                          margin: '-50px 24px 0px 24px'
                          }, 1000, function() {
                               $(selector).addClass('hideBox');
                          });
}

In this code snippet we first show the box by removing a css class called hideBox. I then misuse the fade functionality to wait for 5 seconds. (there are surely better ways to do so) Then I use the animate function to fade and close the box to finally add the hideBox styleClass again.

But how to call this from a backing bean where my logic for storing the message is located? Use the following snippet.

/**
* Add a script to the render kit
*/
public static void addScriptOnPartialRequest(String script) {
    FacesContext context = FacesContext.getCurrentInstance();
    if (AdfFacesContext.getCurrentInstance().isPartialRequest(context)) {
        ExtendedRenderKitService erks =
        Service.getRenderKitService(context, ExtendedRenderKitService.class);
        erks.addScript(context, script);
    }
}

You can see we first get a handle to the AdfFacesContext which we use in turn to invoke a piece of javascript code.

In our case we call the method as such:

JsfUtils.addScriptOnPartialRequest(" autoremove('.autofade');");

As you can see we call the function autoremove using the css selector ‘.autofade’.

This way you can leverage the power of JQuery or any other JavaScript from a bean! Give it a try!

 

As promised, here is an example project: Example JDeveloper Project

 

A small addition to this post:

For this to work flawlessly you would have to disable content compression or else your style classes will be compressed from “.autoremove” to something like “.xyz”. You can do this by setting the following context parameter in your web.xml.

<context-param>
  <param-name>
    org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSION
  </param-name>
  <param-value>false</param-value>
</context-param>

Alternatively you could use the id for a lookup or AdfPage.PAGE.findComponent() to get a handle to the dom element.

Invoke JavaScript from backing bean in ADF 11g, 4.4 out of 5 based on 5 ratings

Ratings:
VN:F [1.9.22_1171]
Rating: 4.4/5 (5 votes cast)

9 comments on “Invoke JavaScript from backing bean in ADF 11g

  1. Hi ,

    Nice one !! leveraging the power of Jquery !!

    can you share the working sample piece.

    How are you adding the required jquery lib?

    thanks!!

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    • Hi Suresh,

      Good to hear you like the post. You can add the required lib by using the following tags:

      <af:resource type="javascript" source="/../SpacesAssets/js/jquery-1.7.2.min.js" />
      <af:resource type="javascript" source="/../SpacesAssets/js/functions.js" />
      

      As you can see I use the jquery in combination with ADF and Webcenter spaces and it is packaged in a different deployment.

      But you would usually try to simply add it to your own ADF project and reference it the same way. Right now I am not able to directly share my code, but I shall create a sample project and share it later this week.

      Bye!

      VN:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
  2. Thanks

    I am not able to see any syntax.. hope you missed pasting it.

    Eagerly waiting for you project :)

    bye

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  3. okay got it ]

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  4. Edgar Galván on said:

    Hi Marcel,

    Is it recomendable to affect the behavior of ADF Components via Javascript or JQuery?

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    • Hi Edgar,

      I think you should only do so with components that are not doing any important work such as displaying a feedback message. The thing is since jquery runs client side you always have the risk of someone injecting custom javascript into your application. Having said so JQuery runs fine in combination with ADF. So to recap my advice would be to use the ADF components to do the job, if they are insufficient then you can extend their functionality using for example JQuery.

      Good luck!

      VN:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
  5. Does ExtendedRenderKitService support loading JavaFx elements inside ADF?

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)

Leave a Reply

Your email address will not be published. Required fields are marked *

*

* Copy This Password *

* Type Or Paste Password Here *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

 

Previous post:

Next post:

About Whitehorses
Company profile
Services
Technology

Whitehorses website

Home page
Whitebooks
Jobs

Follow us
Blog post RSS
Comment RSS
Twitter