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

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.