ADF -Showing processing request popup for long running service calls/DB queries

Requirement-Sometimes we have requirement in our application/portal that when use clicks on any link or button we call service or DB Queries/DB update that takes usually more than 10 seconds to execute and in this case you want to show some user friendly processing or waiting popup rather than spinning mouse cursor.

what it also does is it prevents user to do any other action on screen until current request is completed


Solution :

Below is my sample screen and on click of search i want to show processing request popup to user until button action business logic execution  is completed

My jspx code looks like below

on lcik of search i am calling java script function enforcePreventUserInput which internally adds busy state listener and shows popup until the business logic execution is completed.

<?xml version='1.0' encoding='UTF-8'?>

<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"

          xmlns:f="http://java.sun.com/jsf/core"

          xmlns:h="http://java.sun.com/jsf/html"

          xmlns:af="http://xmlns.oracle.com/adf/faces/rich">

  <jsp:directive.page contentType="text/html;charset=UTF-8"/>

  <f:view>

    <af:document id="d1">

    <af:resource type="javascript">

            function enforcePreventUserInput(evt){                

                 var popup=AdfPage.PAGE.findComponentByAbsoluteId('p1');

                 if(popup!=null){

                    AdfPage.PAGE.addBusyStateListener(popup,handleBusyState);

                    evt.preventUserInput();

                 } 

            }

            

            //Javascript callback event handler

            function handleBusyState(evt){

              

                  var popup=AdfPage.PAGE.findComponentByAbsoluteId('p1');

                  popup.show();

                  if(popup!=null){

                      if(evt.isBusy()){

                          popup.show();

                      }

                      else if(popup.isPopupVisible()){

                          popup.hide();

                          AdfPage.PAGE.removeBusyStateListener(popup,handleBusyState);

                      }

                  }

             }            

    </af:resource>

      <af:form id="f1">

        <af:popup id="p1" contentDelivery="immediate">

          <af:dialog id="pt_d1" type="none">

            <af:panelGroupLayout halign="center" layout="vertical" id="pt_pgl2">

            

              <af:image source="/images/spinning-wheel_normal.gif"

                        shortDesc="System Busy" id="pt_i1"/>

                        <af:outputText value="Processing your request.."></af:outputText>

            </af:panelGroupLayout>

          </af:dialog>

        </af:popup>

        <af:spacer height="50"></af:spacer>

        <af:panelFormLayout>

        <af:inputText label="Employee Number "></af:inputText>

        <af:inputText label="Employee Name "></af:inputText>

        <af:commandButton text="Search" id="cb1"

                          actionListener="#{ManagedBean.actionListenerMethod}">

          <af:clientListener method="enforcePreventUserInput" type="action"/>

        </af:commandButton></af:panelFormLayout>

      </af:form>

    </af:document>

  </f:view>

</jsp:root>

In java Managed bean action listener i simply added sleep for 10 seconds for demonstration purpose as below.

    public void actionListenerMethod(ActionEvent actionEvent) {

        // Add event code here...

        try {

            //business logic which takes 10 seconds

            Thread.sleep(10000);

        } catch (InterruptedException e) {

        }

    }

On click of search UI looks like below for 10 seconds.