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.

ADF Printable view of page

Requirement-Common requirement in web application is to have printable view page for user.

How it works?

Inside adf commandlink or adf commandButton you can use <af:showPritablePageBehaviour/> tag as shown in below
<af:commandLink text="Print"
                                     id="cl2" >
                          <af:showPrintablePageBehavior  />
                         

 </af:commandLink> 

Scenario 1

if you dont want to show certain links in printable view user below render condition to hide that in printable view.



#{adfFacesContext.outputMode!='printable'}

Scenario 2

In many of the scenarios we come across requirement where we dont want to show header and footer in print preview and only jsff content should be shown in print view.
In this case

when we click on print button framework walks up the component tree, starting with the component that is the parent to the af:showPrintablePageBehavior  tag, until it reaches a panelSplitter or a panelAccordion or the root of the tree (whichever comes first). The tree is rendered from there. Additionally, certain components that are not needed in print version (such as buttons, tabs, and scrollbars) are omitted.


for example my page is having jspx with threecolumnLayout Template and inside jspx there is taskflow region as below.

when you click on print only paragraph in center should be printed or shown in print view.so trick here is to use panelSplitter inside your jsff fragment  as shown in below

my jspx code looks like below

<?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:pageTemplate viewId="/oracle/templates/threeColumnTemplate.jspx"
                         id="pt1">
          <f:facet name="center">
            <af:region value="#{bindings.taskflowdefinition1.regionModel}"
                       id="r1"/>
          </f:facet>
          <f:facet name="header"></f:facet>
          <f:facet name="end"></f:facet>
          <f:facet name="start">
            <af:outputText value="This is left menu"
                           inlineStyle="font-size:30px;font-weight:300;"></af:outputText>
          </f:facet>
          <f:facet name="branding"/>
          <f:facet name="copyright"/>
          <f:facet name="status"/>
        </af:pageTemplate>
      </af:form>
    </af:document>
  </f:view>

</jsp:root>

taskflowdefinition1 has jsff which looks like below


<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
          xmlns:af="http://xmlns.oracle.com/adf/faces/rich"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:c="http://java.sun.com/jsp/jstl/core"
          xmlns:h="http://java.sun.com/jsf/html">
  <af:panelSplitter orientation="horizontal" splitterPosition="0" id="ps1"
                    disabled="true" firstBorder="all" secondBorder="all"
                    dimensionsFrom="children"
                    inlineStyle="background-color:White; border-width:0px; border-style:solid; border-color:white; padding-right:0px;">
    <f:facet name="first"></f:facet>
    <f:facet name="second">
      <af:panelGroupLayout layout="vertical">
        <af:commandLink text="Print" inlineStyle="font-size:14px;"  id="cl2">
          <af:showPrintablePageBehavior/>
        </af:commandLink>
        <af:spacer height="10"></af:spacer>
        <af:panelGroupLayout>
        <af:outputText value="this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page."
                     inlineStyle="font-size:14px;"   id="ot1"/>
        <af:outputText value="this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page.this is large para for testing print preiew page."
                 inlineStyle="font-size:14px;"       id="ot2"/>
      
        </af:panelGroupLayout>
        <af:spacer height="10"></af:spacer>
          <af:commandButton text="Ok" id="cb1"/>
      </af:panelGroupLayout>
    </f:facet>
  </af:panelSplitter>

</jsp:root>

print view looks like below when clicked on print link

Conclusion :Use ADF panelspliter component to limit the print view to go further up to header and template.

Passing parameters to ADF popup at runtime

Requirement 
we often come across requirement of displaying help text on hover over of image or displaying different data on click of each row of ADF table.
As a example I am going to demonstrate how to display different help text in popup note window  on hover over of icon/image.

I have two field first name and email address  as shown in below.

Requirement is when user hover overs each of the question mark icon i want to display helptext as below
First Name -help text is ->First name must be at least 1 and no more than 31 letters long (no numbers). The only special characters accepted are -, ', &, ., and #.

Email Address help text is ->E-mail address needs to be in the following format: xx@xx.xxx

there may be more than two field like 10 fields on UI and you dont want to have 10 popups to display the help text

Solution

Step 1:Define client attribute

Inside each image tag we will have af:clientAttribute  tag with name and value as text we want to display to user.Inside af:image for popup display af:showPopupBehavior  tag will come to display popup on hover
Code will look like below

 <af:panelGroupLayout layout="horizontal">
          <af:inputText label="First Name" id="it20" autoSubmit="true"></af:inputText>
          <af:image source="/images/helpicon.png">
            <af:showPopupBehavior triggerType="mouseOver" align="endAfter"
                                  popupId="helpPopup"/>
            <af:clientAttribute name="helpText"
                                value="First name must be at least 1 and no more than 31 letters long (no numbers). The only special characters accepted are -, ', &amp;, ., and #."></af:clientAttribute>
          </af:image>
        </af:panelGroupLayout>
        <af:panelGroupLayout layout="horizontal">
          <af:inputText label="Email Address" id="it1" autoSubmit="true"></af:inputText>
          <af:image source="/images/helpicon.png">
            <af:showPopupBehavior triggerType="mouseOver" align="endAfter"
                                  popupId="helpPopup"/>
            <af:clientAttribute name="helpText"
                                value="E-mail address needs to be in the following format: xx@xx.xxx"></af:clientAttribute>
          </af:image>
        </af:panelGroupLayout>

Step2->reading the client attribute and using it inside popup

In our popup tab we need to have launcherVar attribute defined which will be used to read the client attribute that is passed to popup open event.use af:setPropertyListener from attribute to read the client attribute that is passed  and to attribute to set to a variable to use inside popup as shown in below popup code.

    <af:popup id="helpPopup" launcherVar="source"
                  contentDelivery="lazyUncached" eventContext="launcher">
          <af:setPropertyListener from="#{source.attributes.helpText}"
                                  to="#{viewScope.helpText}" type="popupFetch"/>
          <af:noteWindow id="nw1" inlineStyle="width:400.0px;">
            <af:panelGroupLayout id="pgl4">
              <af:outputText id="ot1" value="#{viewScope.helpText}"/>
            </af:panelGroupLayout>
          </af:noteWindow>

        </af:popup>

Screen will display like below

you can leverage same for opening popup on click of each row of adf table and pass data to popup depending on the row clicked on .

        

Jdeveloper 11g/12c Layout Hangs and does not compile project or workspace

After exhaustive use of Jdeveloper for debugging and development ,sometimes after opening the workspace of the project and when we try to build project compilation doesn't finish and at the bottom right of jdeveloper message comes forever saying "Scanning files.." .

this happens sometimes and all developers may not face issue .

Solution:

Go To C:\Users\XXXX\AppData\Roaming\JDeveloper\system12.2.1.3.42.170820.0914\o.ide folder .It will contain layout files as shown in below screenshot.

1. Close your jdeveloper 
2. remove all layout files or take a back up of it.
3. open jdeveloper again 

Now jdeveloper layout will look like a fresh one and compilation will work faster as before.once you restart jdeveloper  all layout files will be regenerated automatically.