ADF Faces RC – Highlight partially refreshed areas to enlighten the user about automatic updates

1

 

One of the rich aspects of ADF Faces RC (and most Web 2.0/AJAX components) is functionality that performs Partial Page Refresh operations: actions by the user trigger asynchronous communication between browser and server that in turn may cause selected areas of the page to be refreshed. For example: entering a value may lead to a refresh of a derived value or a conversion of the entered value. Sometimes a single user action lead to refresh of multiple items and areas on the page. On other occasions, server push may cause items or page areas to be refreshed.

Without additional effort, these partial updates are subtle. They just happen. When the changes are small, the user will probably not notice the refresh taking place. He/she may see the new value, wondering where that came from. And that may be just fine. However, it could also be we like to make it clear to the user that and when items and areas have been refreshed. For example by highlighting the item or region in question immediately after the refresh takes place and having the highlight effect slowly fade away.

It turns out to be fairly easy to implement such a ‘highlight after partial refresh with fade away’ effect. This article demonstrates a straightforward example of that behavior.

The implementation consists of three steps:

- add the fader.js javascript library to the page

- add a javascript function highlightComponent that performs the highlight-and-fade effect on the indicated component (based on the HTML DOM Element ID)

- write the javascript call to highlightComponent to the PPR response using ExtendedRenderKitService

1. Add the JavaScript library:

    <af:document id="doc">
      <f:facet name="metaContainer">
<strong>          &lt;trh:script source=&quot;fader/fader.js&quot;&gt;&lt;/trh:script&gt;<br /></strong>      &lt;/f:facet&gt;

2. Add the JavaScript function to the page:

    &lt;af:document id=&quot;doc&quot;&gt;
      &lt;f:facet name=&quot;metaContainer&quot;&gt;
        &lt;af:group&gt;
          &lt;trh:script source=&quot;fader/fader.js&quot;&gt;&lt;/trh:script&gt;
          &lt;trh:script&gt;function highlightComponent( id) {
                        colorFade(id,'background','FFFF00','ffffff',25,50);
                      }
          &lt;/trh:script&gt;
        &lt;/af:group&gt;
      &lt;/f:facet&gt;

3. Write the JavaScript to highlight a PPR-ed component to the Partial Response:

        FacesContext context = FacesContext.getCurrentInstance();
        if (AdfFacesContext.getCurrentInstance().isPartialRequest(context)) {
          ExtendedRenderKitService erks =
                                  Service.getRenderKitService
                                  (context, ExtendedRenderKitService.class);
          erks.addScript
          ( context
          , &quot; highlightComponent('ageIT');&quot;
          );
        }//if

Note: ideally, we would make use of the ClientId of the component, as determined at runtime – instead of this hardcoded reference.

Resources

Article introducing the fader javascript library.

Share.

About Author

Lucas Jellema, active in IT (and with Oracle) since 1994. Oracle ACE Director for Fusion Middleware. Consultant, trainer and instructor on diverse areas including Oracle Database (SQL & PLSQL), Service Oriented Architecture, BPM, ADF, Java in various shapes and forms and many other things. Author of the Oracle Press book: Oracle SOA Suite 11g Handbook. Frequent presenter on conferences such as JavaOne, Oracle OpenWorld, ODTUG Kaleidoscope, Devoxx and OBUG. Presenter for Oracle University Celebrity specials.

1 Comment

  1. Clément on

    I try to use this code :

    FacesContext context = FacesContext.getCurrentInstance();
    if (ADFFacesContext.getCurrentInstance().isPartialRequest(context))

    but “ADFFacesContext.getCurrentInstance().isPartialRequest(context)” always return true… does this method is reliable?