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

Lucas Jellema 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">
          <trh:script source="fader/fader.js"></trh:script>
</f:facet>

2. Add the JavaScript function to the page:

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

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
          , " highlightComponent('ageIT');"
          );
        }//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.

One thought on “ADF Faces RC – Highlight partially refreshed areas to enlighten the user about automatic updates

  1. 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?

Comments are closed.

Next Post

RichFaces plugin for NetBeans updated

Facebook0TwitterLinkedinAbout a year ago, during JavaOne 2008, Geertjan Wielenga and I created NetBeans modules for JBoss RichFaces support. Last week we updated the modules so now version 3.3.0.GA of RichFaces is supported. I updated the components palette with the newest a4j and rich tags. Geertjan introduced some new images for […]