Invoking custom Javascript from AMX pages

In this edition of the ADF Mobile blog I'll tackle a topic that many have asked about.  How to invoke a custom Javascript method from an AMX page.  We'll also cover how to call back to Java from the same Javascript method.

Adding the custom Javascript to your AMX

To include a javascript file to an AMX feature, you need to go to Content tab of the adfmf-feature.xml.  This lets you include a javascript or CSS file.  In this case, we'll be including our custom javacript file.

Invoking the Javascript from a Java handler

From any Java code, you can use a built in method of the AdfmfContainerUtilities utility class to invoke a Javascript method.  Here's an example:

  AdfmfContainerUtilities.invokeContainerJavaScriptFunction("feature1", "doAlert", new Object[] {});

The above call invokes the "doAlert" method in the feature with featureid="feature1".  The last parameter is an array of parameters that will be sent to the method.   Here's an example of passing in 3 parameters:

  AdfmfContainerUtilities.invokeContainerJavaScriptFunction("feature1", "doAlert", new Object[] {"arg1", new Integer(123), "arg3"});

Handling Parameters in your Javascript methods

You can access parameters in your Javascript method by simply using the "arguments" variable.  In the example we call the same doAlert function with different numbers of parameters to show this.

     // This method shows you how to use variable args     doAlert = function () {        var args = arguments;        var str = "doAlert, argCount:" + args.length + ", arguments:";        for (x = 0;x < args.length;x++) {            if (x > 0) {                str += ", ";            }            str += arguments[x];        }        alert(str);    };

Calling back to Java

You can invoke Java methods by using the adf.mf.api.invokeMethod call:

        adf.mf.api.invokeMethod("mobile.MyClass", "FetchCallback", URI, 
            onInvokeSuccess, onFail);

In this method, the first parameter is the fully qualified Java class with the package name.  The second parameter is the method to invoke.  The second to last parameter is the javascript callback to be invoked on success and the last parameter is the javascript callback to be invoked when the function fails.  Any parameters added between the method and success callback are passes as the parameters to the java method.  Here are the signatures for the success and failure callbacks:

    function onSuccess(request, response) {
       // Process any return values that comes back in the "response" parameter 
    }; 

    function onFail(request, response)) {
    }; 

This shouldn't be confused with the success and failure callbacks from PhoneGap method calls.  Those have a different signature and you should consult the PhoneGap documentation for details.

If you wanted to just set a value of an EL expression, you can use the following method call:

        adf.mf.el.setValue( { "name": "#{pageFlowScope.myVariable}", "value": "some value" }, 
                onSuccess, onFail); 

With this method, you can simply set the value of the EL expression.  Note that the first parameter is a complex parameter that contains a JSON snippet that has a name/value pair.  It has the usual success and failure callbacks. 

The full example is available here.