Tuesday 13 May 2014

Calling a Java method using javascript in ADF



Calling a java method from JavaScript can be useful in achieving many use case requirement in adf and this can be easily achieve using clientListener and serverListener tags.

<af:serverListener><af:clientListener>

ClientListener tag register a client-side script to be run when a specified event is triggered. 
ServerListener tag will register a server-side listener that should be run when a custom client-event is triggered and AdfCustomEvent.queue() JavaScript method will be use to fire a custom event.

Syntax : AdfCustomEvent(AdfUIComponent source, String type, Object params, Boolean immediate);

  • source” argument is the source UI component. It may be the component with the id - “d1”
  •  “type” argument is name of the serverListener component. E.g – “ReadJavaScript”
  •  params” argument is array consist of key:value pair delimited by commas,  e.g.{key1:value1,key2:value2,...}
  • The "immediate" flag determines whether the server call is handled during the JSF APPLY_REQUEST phase or during the InvokeApplication phase.

Let’s understand the concept by a sample application. 

Requirement: Capture the browser detail in java on load of the jspx page. If browser name is “Microsoft Internet Explorer” it should return true else false in java method.

Steps for implementation:

Step 1: Create a java class such as Demo.java. 
Step 2: Create a Jspx page such as Demo.jspx.

 


Step 3:  Add Demo class as managed bean in adfc-config.xml as shown below:  

 

Step 4: Add Client Listener method in Demo.java.

package com.test.demo;

import oracle.adf.view.rich.render.ClientEvent;

/**
 * Demo class
 */
public class Demo {


    /**
     * Method will be triggered using serverListener
     * Reads the values set in the javascript
     * @param clientEvent
     */
    public void readJavaScriptValue(ClientEvent clientEvent) {
        System.out.println("[Demo : readJavaScriptValue()] - Entry");
         //isIEBrowser is a key set in javascript
        System.out.println("Client return value - "+clientEvent.getParameters().get("isIEBrowser"));
    }

Step 5: Adding JavaScript, ClientListener and ServerListener in jspx page.

<?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:af="http://xmlns.oracle.com/adf/faces/rich">
  <jsp:directive.page contentType="text/html;charset=UTF-8"/>
  <f:view>
  <af:document id="d1" title="Demo application">
    <af:resource type="javascript">
    function
browserCheck(event){
        var eventData = event.getSource();
        var browserName = navigator.appName;
        if(browserName == "Microsoft Internet Explorer"){
            AdfCustomEvent.queue(eventData, "readJavaScript",{'isIEBrowser' : 'true'},false);
        }else{
            AdfCustomEvent.queue(eventData, "readJavaScript",{'isIEBrowser' : 'false'},false);
        }       
    }

    </af:resource>
    <af:clientListener method="browserCheck" type="load"/>
    <af:serverListener type="readJavaScript" method="#{demo.readJavaScriptValue}"/>
      <af:form id="f1">
        <af:pageTemplate viewId="/oracle/templates/threeColumnTemplate.jspx"
                         id="pt1">
          <f:facet name="center">
          <af:outputText value="JavaScript Demo application" id="ot1"/>
          </f:facet>
          <f:facet name="header"/>
        </af:pageTemplate>
      </af:form>
    </af:document>
  </f:view>
</jsp:root> 

Step 6: Console output as on Chrome:

 
*Comments and feedback are most welcomed, Thanks.