Progress Bar in ADF

This artical is going to demo on how to place Progress Bar in ADF pages.

Version:

JDEV 11.1.1.5


Step1:
Create ADF Fusion Web Application using JDev.


Step2;
Create First.jspx and Second.jspx files. Add them in adfc-config then link them

Step3:
Create a managedbean and add it in taskflow

Step4:
update First.jspx, add the action listener for a command link to the bean.

Step5:
update the bean to add some Thread sleep to delay the response.

Step6:
update the First.jspx, add the javascript; add the popup; add the clientlistener in the command link.

Step7:
Save All, run the First.jspx file.


First.jspx:
<?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('pt_p1');
            if (popup != null) {
                AdfPage.PAGE.addBusyStateListener(popup, handleBusyState);
                evt.preventUserInput();
            }
        }
        function handleBusyState(evt) {
            var popup = AdfPage.PAGE.findComponentByAbsoluteId('pt_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"
               inlineStyle="text-align:center; vertical-align:baseline; margin:20px; padding:20px; font-size:large; color:Blue; border-color:Fuchsia; border-style:double; text-decoration:none;">
        <af:panelGroupLayout id="pgl1" layout="vertical" halign="center"
                             valign="middle"
                             inlineStyle="text-align:center; vertical-align:middle;">
           <af:outputText value="FIRST PAGE" id="ot1"/>
           <af:commandLink text="Go2Second" id="cl1" actionListener="#{ProgressBean.onSecondAL}" action="second" inlineStyle="font-size:medium; text-decoration:underline;">
            <af:clientListener method="enforcePreventUserInput" type="action"/>
          </af:commandLink>
        </af:panelGroupLayout>
      </af:form>
      <af:popup id="pt_p1" contentDelivery="immediate">
        <af:dialog id="pt_d1" type="none" closeIconVisible="false">
          <af:panelGroupLayout id="pt_pgl15" layout="vertical" halign="center">
            <af:outputText id="ot15"
                           value="Please wait while your request is being processed..."
                           inlineStyle="font-family:Arial, Helvetica, sans-serif; font-size:12px;"/>
            <af:spacer width="1" height="20" id="s16"/>
            <af:image source="/image/spinningwheel.gif" shortDesc="System Busy"
                      id="pt_i1"/>
          </af:panelGroupLayout>
        </af:dialog>
      </af:popup>
    </af:document>
  </f:view>
</jsp:root>

Second.jspx;
<?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:form id="f1">
        <af:outputText value="SECOND PAGE" id="ot1"/>
      </af:form>
    </af:document>
  </f:view>
</jsp:root>

Bean:

package org.sen.poc.view;

import javax.faces.event.ActionEvent;

public class ProgressBean {

    public ProgressBean() {

    }

    public void onSecondAL(ActionEvent actionEvent) {

        // Add event code here...        

        System.out.println("onSecondAL() invoked.");

        for(int i=0;i<3;i++) {

            try {

                Thread.sleep(1000);

                System.out.println("Thread.sleep...");

            } catch (InterruptedException e) {

            }

        }

    }

}