Add a Glass Pane to a long running DB job using a Page Template and Page Fragments

Extension to ADF Code Corner 027

“How-to show a glasspane and splash screen for long running queries”

A Glass Pane is a pop-up that prevents user-input while a large database job or query is running in the background. It uses a splash screen with an animated image giving the impression of activity while the job completes.

As an extension to ADF code Corner 027 the Pages are built with a Page Template and use Page fragments.

Elements

The Glass Pane will consist of a pop-up that is activated by a javascript function included in the page-template

Ø  glasspane.js

o   enforcePreventUserInput

o   handleBusyState

 AdfPage.PAGE.findComponentByAbsoluteId is used to “find” the glass pane popup and to do so the address of the popup needs to be configured correctly.

The exact path through the containers to the popup is required.

The popup is created as the first item in the page fragment. The page fragment is dropped as a region on the page built using the page template.

 The address is therefore   ‘TemplateId:RegionID:PopupId’  in this case ‘pt1:r1:p1’ where

Ø  pt1 is the page template

Ø  r1 is the region

Ø  p1 is the popup

Javascript File

Create the javascript file glasspane.js and save it under public-html\js (create the folder js)

function enforcePreventUserInput(evt) {

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

            if (popup != null)

               { AdfPage.PAGE.addBusyStateListener(popup, handleBusyState);

                  evt.preventUserInput();

                }

        }

 function handleBusyState(evt) {

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

            if (popup != null)

                 { if (evt.isBusy())

                     { popup.show();}

                else { popup.hide();

                          AdfPage.PAGE.removeBusyStateListener(popup, handleBusyState);

                         }

                 }

        }

Add Javascript File to Page Template

Include this file in the Template by using a Resource from the Operations Component panel.

 Drop the Resource onto the Template Page

Select javascript as the type and in the properties window set the source to be /js/glasspane.js

Display Glass Pane

To display a glass pane we require a pop-up and a client listener.

Pop-Up

On the Page fragment where the glass pane will be displayed add a popup as the first item in the structure window under the jsp:root

In the Popup add a dialog window .

Add an image item and an animated image (to give the impression of progress)

Add an Output Text field value and set the value = .....please wait.

Set the Popup properties in the Properties Window

Common – ContentDelivery  =  immediate

Advanced- ClientComponent = true

Client Listener

On the button that calls the query or database job add a clientListener.

Add enforcePreventUserInput as the method (the javascript function we created earlier)

Ensure the PartialSubmit of the button is set to true (the default)