How to create a loading screen on WebCenter Portal

Prepare the template

1. Open the page template where you want to add a loading screen
2. Position yourself in an element that will be rendered for first (for example a panelGroupLayout or a panelStretchLayout
3. Inside this element, create a new panelGroupLayout. This will be the container of your content portal and the loading screen
4. Inside this new container, add two nested panelGroupLayout.
   
   • The panelGroup parent will have an id="pslload", a styleClass="loader" and an inlineStyle="position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10;".
   • The panelGroup child will have a styleClass="loaderSpinner" and an id="pglSpinner".
5.  Add to the container of your content portal this inlineStyle="position: absolute; top: 0; left: 0; height: 100%; width: 100%;"

<af:panelGroupLayout id="containerLoad">

    <af:panelGroupLayout id="pslload" styleClass="loader"

        inlineStyle="position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10;">

        <af:panelGroupLayout id="pglSpinner" styleClass="loaderSpinner"/>

    </af:panelGroupLayout>

    <af:panelStretchLayout id="pt_psl2" startWidth="300px"

        inlineStyle="position: absolute; top: 0; left: 0; height: 100%; width: 100%;">

        <f:facet name="center">

            -- your content portal here --

        </f:facet>

    </af:panelStretchLayout>

</af:panelGroupLayout>

 Add the javascript

1. In your template, add this script in the top of your page

   <af: resource>

       function loadScreen() {

           const loader = document.querySelector(".loader");

       //console.log(loader);

       if(!loader){

           setTimeout(loadScreen, 500);

       return;

           }

       loader.classList.remove("af_panelGroupLayout");

       loader.classList.add("loader-hidden");

           loader.addEventListener("transitionend", () => {

           loader.remove();        

           });

       }

   
   

       window.onload = loadScreen();

   </af: resource>

Create the css classes

1. Open the skins section
2. Open the portal's skin you want to edit
3. Add these classes inside your sheet

.loader {

    position: fixed;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100vw;

    display: flex;

    justify-content: center;

    align-items: center;

    background-color: #f7f9fb;

    transition: opacity 0.75s, visibility 0.75s;

}

.loader-hidden {

    opacity: 0;

    visibility: hidden;

}

.loaderSpinner {

    content: "";

    position: fixed;

    top: calc(50vh - 38px);

    width: 75px;

    height: 75px;

    border: 15px solid #dddddd;

    border-top-color: #02254f;

    border-radius: 50%;

    animation: loading 0.75s ease infinite;

}

@keyframes loading {

    from {

        transform: rotate(0turn);

    }

    to {

        transform: rotate(1turn);

    }

}

 

Oracle ADF caputure enter via javascript

 To capture enter key via javascript on an ADF input text do that:

       <af:panelGroupLayout id="pgl1">  
         <af:inputText label="Label 1" id="it1" clientComponent="true" autoSubmit="true">  
           <af:clientListener method="onInputTextKeyUp" type="keyUp"/>  
         </af:inputText>  
         <af:button text="button" id="b1" unsecure="disabled" disabled="true" clientComponent="true"  
               actionListener="#{myDemoRequestBean.onActionListener}"/>  
       </af:panelGroupLayout>  
 <af:resource type="javascript">  
         function onInputTextKeyUp(event){  
       //console.log("onInputTextKeyUp");  
       var component = event.getSource();  
        if(component != null){  
         var _keyCode = event.getKeyCode();  
         if(_keyCode==='Enter' || _keyCode ===13 ){  
           console.log("enter "+_keyCode);  
         }  
        }  
     }  
     </af:resource>  

Capturing enter you can do anything you want, for example associate a serverListener to execute code and simulate button click

       <af:panelGroupLayout id="pgl1">  
         <af:inputText label="Label 1" id="it1" clientComponent="true" autoSubmit="true"  
                valueChangeListener="#{myDemoRequestBean.onInputTextValueChange}">  
           <af:clientListener method="onInputTextKeyUp" type="keyUp"/>  
           <af:serverListener type="buttonClick" method="#{myDemoRequestBean.onServerListenerButtonClick}"/>  
         </af:inputText>  
         <af:button text="button" id="b1" unsecure="disabled" disabled="true" clientComponent="true"  
               actionListener="#{myDemoRequestBean.onActionListener}"/>  
       </af:panelGroupLayout>  
 ...........  
 <af:resource type="javascript">  
  function onInputTextKeyUp(event){  
       //console.log("onInputTextKeyUp");  
       var component = event.getSource();  
        if(component != null){  
         var _keyCode = event.getKeyCode();  
         if(_keyCode==='Enter' || _keyCode ===13 ){  
           //console.log("enter "+_keyCode);  
           AdfCustomEvent.queue(event.getSource(), "buttonClick",  
             null, true);  
         }  
        }  
     }  
     </af:resource>  

follow request bean java code:

 import javax.faces.event.ActionEvent;  
 import javax.faces.event.ValueChangeEvent;  
 import oracle.adf.view.rich.render.ClientEvent;  
 public class MyDemoRequestBean {  
   public MyDemoRequestBean() {  
   }  
   public void onActionListener(ActionEvent actionEvent) {  
     myMethod();  
   }  
   public void onServerListenerButtonClick(ClientEvent clientEvent) {  
     myMethod();  
   }  
   private void myMethod(){  
     System.out.println("my button code");  
   }  
   public void onInputTextValueChange(ValueChangeEvent valueChangeEvent) {  
     System.out.println(valueChangeEvent.getNewValue());  
   }  
 }  

Getting Application Module Configuration

Using Oracle ADF, sometime is necessary access to properties used by the Application module, for example to get the jndi used DS.
This is possible using class oracle.jbo.client.Configuration.
You can use this class to manage at runtime a configuration defined at design.

Run ADF Application on Jdeveloper 12c using verbose log

To run an ADF Application on Jdeveloper 12c and have a verbose log, halpfull to understanding what appened at runtime and witch DB statement execute, witch parameters are used, etc, etc....

You can add follow java parameter on project run:

-Djbo.debugoutput=console

1. Select the view controller project
2. click on "Manage Run Configuration..." 
3. Select the configuration (Default as well) 
4. Click "Edit" (pensil icon) on "Run Configurations"
5. Set the java option and confirm (press "ok" everywhere)