Develop Reference

Cordova: How to write native plugins that can repeatedly invoke a Javascript callback?

When developing Cordova plugins, all of the tutorials I have found go something like this:
File: AwesomePlugin.js
var AwesomePlugin = {
kungfuGripAction = function(target, successCallback, failureCallback) {
return cordova.exec(
successCallback,
failureCallback,
'AwesomePluginClass',
'kungfuGripAction',
[target]
);
}
};
module.exports = AwesomePlugin;
File: AwesomePluginClass.java
#Override
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
if (ACTION_KUNGFU_GRIP.equals(action)) {
JSONObject target = args.getJSONObject(0);
if (gripTarget(target)) {
callbackContext.success("Target successfully gripped.");
return true;
} else {
callbackContext.error("Could not grip target.");
return false;
}
}
Log.d(LOG_TAG, "INVALID ACTION! " + action);
callbackContext.error("Invalid action: " + action);
return false;
}
File: clientCode.js
AwesomePlugin.kungfuGripAction(cobraEnemy, function(ok) { }, function(err) { });
In the above code, the callbacks can only be called once and are then disposed. If you attempt to call the .success() or .error() method of the callback context object, it will not work and you will get a log message:
Attempted to send a second callback for ID: AwesomePlugin2982699494<BR>W/CordovaPlugin(976) Result was: "Target successfully gripped."
It seems like it is not possible to write a method with a callback that can be called repeatedly seeing as .success() and .error() are the only documented ways to invoke a callback from within native plugin code. While this is mostly what we want, there are times when we want to have the plugin execute a callback repeatedly. For example:
AwesomePlugin.kungfuGripAction(cobraEnemy, function(ok) {
// After successful grip, punch repeatedly and update life meter.
AwesomePlugin.punchRepeatedly(cobraEnemy, function(hits) {
updateLifeMeter(cobraEnemy, hits);
}, function(err) { });
}, function(err) { });
AwesomePlugin.punchRepeatedly() above will execute repeatedly (maybe in a separate thread) and call function(hits) with each successful execution. If implemented in the de-facto way (using single-use callbacks), you have to either use a loop (which is bad as it is non-async) or tail-call AwesomePlugin.punchRepeatedly() in the callback (error-prone).
What would be the correct way to implement punchRepeatedly() in native code so that it is able register the callback once and then execute it repeatedly?

I think, you can use a pluginResult with the keepCallback property set to true.
PluginResult result = new PluginResult(PluginResult.Status.OK, "YOUR_MESSAGE");
// PluginResult result = new PluginResult(PluginResult.Status.ERROR, "YOUR_ERROR_MESSAGE");
result.setKeepCallback(true);
callbackContext.sendPluginResult(result);
You should be able to invoke the callback several times this way.

In jonas's answer, every time you call sendPluginResult you have to send the same value. So I changed the PluginResult class to add a method like this:
public void setStrMessage(String strMessage){
this.strMessage = strMessage;
}
This way, I can set the message I want to send to the JavaScript side.

passing parameters from javascript to gwt?

I am new to Gwt,i m implementing a webclipper project so my task to send some parameters from javascript file to Gwt so that i will be able to make the connection with my couchdb database but i am getting a problem in passing parameters like title, url ,and summary from webpage to Gwt n then couchdb.The following code is my javascript code:-
function onPageInfo(o) {
document.getElementById('title').value = o.title;
document.getElementById('url').value = o.url;
document.getElementById('summary').innerText = o.summary;
}
// Global reference to the status display SPAN
var statusDisplay = null;
// POST the data to the server using XMLHttpRequest
function addBookmark() {
// Cancel the form submit
event.preventDefault();
// The URL to POST our data to
var postUrl = "http://127.0.0.1:8888/practice.html? gwt.codesvr=127.0.0.1:9997&gwt.codesvr=127.0.0.1:9997/?title=1&url=2&summary=3";
// Set up an asynchronous AJAX POST request
var xhr = new XMLHttpRequest();
xhr.open('POST', postUrl, true);
// Prepare the data to be POSTed
var title = encodeURIComponent(document.getElementById('title').value);
var url = encodeURIComponent(document.getElementById('url').value);
var summary = encodeURIComponent(document.getElementById('summary').value);
var tags = encodeURIComponent(document.getElementById('tags').value);
var params = 'title=' + title +
'&url=' + url +
'&summary=' + summary +
'&tags=' + tags;
// Replace any instances of the URLEncoded space char with +
params = params.replace(/%20/g, '+');
// Set correct header for form data
xhr.setRequestHeader('Content-type', 'application/json');
// Handle request state change events
xhr.onreadystatechange = function() {
// If the request completed
if (xhr.readyState == 4) {
statusDisplay.innerHTML = '';
if (xhr.status == 200) {
// If it was a success, close the popup after a short delay
statusDisplay.innerHTML = 'Saved!';
window.setTimeout(window.close, 1000);
} else {// Show what went wrong
statusDisplay.innerHTML = 'Error saving: ' + xhr.statusText;
}
}
};
// Send the request and set status
xhr.send(params);
statusDisplay.innerHTML = 'Saving...';
}
// When the popup HTML has loaded
window.addEventListener('load', function(evt) {
// Handle the bookmark form submit event with our addBookmark function
document.getElementById('addbookmark').addEventListener('submit', addBookmark);
// Cache a reference to the status display SPAN
statusDisplay = document.getElementById('status-display');
// Call the getPageInfo function in the background page, injecting content_script.js
// into the current HTML page and passing in our onPageInfo function as the callback
chrome.extension.getBackgroundPage().getPageInfo(onPageInfo);
});
Thanks.....

You can call a function defined in a java file (of GWT client module) by exporting that function. Let's assume there is a class A.java which is also your entry point class. This class contains someMethod() which you need to call from javascript passing some parameters. The content of your class A would be something like
public class A implements EntryPoint {
public static functionExported = false;
public void onModuleLoad() {
ExportToBeCalledFromJs();
// other code goes here
}
public static native void ExportToBeCalledFromJs() /*-{
$wnd.toBeCalledFromJs = $entry(function(s1, s2) {
return #com.practice.gwt.client.A::someFunction();
});
#com.practice.gwt.client.A:functionExported = true;
}-*/;
}
Above code exports the function and makes it available to javascript. You can simply call toBeCalledFromJs(param1, param2) fromyour js where param1 would substitute s1 and param2 would substitute s2. If you wish to add more parameters you can modify $entry(function(s1, s2) in the code above.

Java json object call function by name

I'm wondering if it is possible to call a function from a java json object?
Example
java:
JSONObject json = new JSONObject();
json.put("fnRowCallback", "test()");
jquery:
$ (function () {
"use strict";
function test() {
alert('test');
}
}(jQuery));
Ultimate accomplishment needed.
JSONObject json = new JSONObject();
json.put("fnRowCallback", function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
if (aData["rush"] == "Rush" ) {
$(nRow).addClass("gradeX");
}
});

You can accomplish this if you instead have your Java return javascript.
<script src="myjavapage.jsp"></script>
have your Java return
$(function(){
alert('test');
});
however I can't think of a good reason to code it this way rather than instead having a js file that gets the content on demand using ajax and not including code in your json. It seems pretty pointless.

I ended up answering my own question. The solution is to use a JSONLiteral like so,
Java
public JSONObject getOptions() {
JSONObject json = new JSONObject();
json.put("fnRowCallback", new JSONLiteral(String.format("fnRowCallback()")));
return json;
}
JS.
function fnRowCallback(){
var fnRowCallback = function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
if (aData["rush"] == "Rush" ) {
nRow.className = nRow.className + " gradeX";
}
};
return fnRowCallback;
}
Thanks Everyone.

See Function.prototype.call or Function.prototype.apply
var obj = {
foo: function() {
console.log('foo called');
}
};
var json = {method: "foo"};
obj[json.method].call(this);

Synchronous RPC Calls in GWT

(That title alone should cause people to come out of the woodwork to bash me with clubs, but hear me out).
I have a use case where I need to return a value from a asynchronous call. (I'm using GWT-Platform, but the concepts are the same.) I declared a final JavaScriptObject array, then assigned the value within the AsyncCallback. However, I need to return the value, and the method returns before the AsyncCallback completes. Therefore, I need to block somehow until the AsyncCallback completes. I need the returned value in another method, or I'd just do what I need to in onSuccess().
I've tried loops, Timers, and a few other methods with no luck. Can anyone help?
#Override
public JavaScriptObject doGetWhereAmIMarker(final double lng, final double lat) {
final JavaScriptObject[] markerArray = new JavaScriptObject[1]; // ugly hack, I know
dispatch.execute(new GetLocationDescriptionsAction(lng, lat), new AsyncCallback<GetLocationDescriptionsResult>() {
#Override
public void onFailure(Throwable caught) {
caught.printStackTrace();
}
#Override
public void onSuccess(GetLocationDescriptionsResult result) {
Map<String, Location> resultMap = result.getResult();
StringBuffer message = new StringBuffer();
for (String key : resultMap.keySet()) {
message.append(key).append(": ").append(resultMap.get(key)).append("\n");
}
Map tempMap = new HashMap();
tempMap.put("TITLE","Location Information");
tempMap.put("LAT", lat);
tempMap.put("LNG", lng);
tempMap.put("CONTENTS", message.toString());
JavaScriptObject marker = GoogleMapUtil.createMarker(tempMap);
markerArray[0] = marker;
if (markerArray[0] != null) {
GWT.log("Marker Array Updated");
}
}
});
return markerArray[0];
}
UPDATE: As requested, here is the code that calls doGetWhereIAmMarker(). I've tried having a separate native method with the Google Map object (as a JavaScriptObject) as a parameter, but it appears that passing that object between native methods kills the ability to update said object.
public native void initMap(JavaScriptObject mapOptions, JavaScriptObject bounds, JavaScriptObject border, JsArray markerArray, Element e) /*-{
// create the map and fit it within the given bounds
map = new $wnd.google.maps.Map(e, mapOptions);
if (bounds != null) {
map.fitBounds(bounds);
}
// set the polygon for the borders
if (border != null) {
border.setMap(map);
}
// set up the info windows
if (markerArray != null && markerArray.length > 0) {
var infoWindow = new $wnd.google.maps.InfoWindow({
content:"InfoWindow Content Goes Here"
});
for (var i = 0; i < markerArray.length; i++) {
var marker = markerArray[i];
marker.setMap(map);
$wnd.google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(marker.content);
infoWindow.open(map, this);
});
}
}
// need to reference the calling class inside the function(), so set a reference to "this"
var that = this;
$wnd.whereAmI=function(lng, lat) {
that.#org.jason.mapmaker.client.view.MapmakerMapViewImpl::whereAmI(DD)(lng,lat);
}
$wnd.google.maps.event.addListener(map, 'click', function(event) {
var lat = event.latLng.lat();
var lng = event.latLng.lng();
$wnd.whereAmI(lng, lat);
});
}-*/;

At some point I had to do something similar but eventually I eliminated that code in favor of asynchronous stuff. Therefore, I can't give exact code that you need to use but only few pointers on how to approach it.
Firstly, this blog describes how to do synchronous AJAX using javascript.
Second, you must provide support for sync calls. The problem is that GWT does not support the parameter that provides synchronous AJAX calls. Most likely is that they don't want to encourage its use. Therefore you would need to use JSNI to add appropriate method to XMLHttpRequest (which you probably would extend) and then to RequestBuilder (also should extend it).
Finally, amend your service using extended RequestBuilder. Something like
((ServiceDefTarget)service).setRpcRequestBuilder(requestBuilder);
And in conclusion - from the same blog post (slightly out of context):
Because of the danger of a request getting lost and hanging the browser,
synchronous javascript isn't recommended for anything outside of
(onbefore)unload event handlers.

I Think its all fate....
We cannot do in Gwt to catch the Response and Send it, because immediately after the request is send the next method starts executing, neither bothering the response
Still however they satisfy us to use the Timers, is what i think...
Timer t = new Timer() {
#Override
public void run() {
Window.alert("Nifty, eh?");
}
};
t.schedule(5000);

Is it possible to register a javascript event that triggers when java applet is fully loaded?

I have a web application that uses java applet defined in a <applet> tag. Is it possible to add a javascript event that is triggered after the applet is fully loaded? This is some initialization javascript that is dependent on that the applet is fully loaded and valid.

javascript invoking is rather simple:
Your init() method can include the jsObject declaration and javascript invoking:
#Override
public void init() {
// some code
JSObject jsObject = JSObject.getWindow(this);
jsObject.eval("your javascript");
}

If you don't have source code control over the applet, you can poll for the applet to be loaded before calling methods on it. Here is a utility function I wrote that does just that:
/* Attempt to load the applet up to "X" times with a delay. If it succeeds, then execute the callback function. */
function WaitForAppletLoad(applet_id, attempts, delay, onSuccessCallback, onFailCallback) {
//Test
var to = typeof (document.getElementById(applet_id));
if (to == 'function' || to == 'object') {
onSuccessCallback(); //Go do it.
return true;
} else {
if (attempts == 0) {
onFailCallback();
return false;
} else {
//Put it back in the hopper.
setTimeout(function () {
WaitForAppletLoad(applet_id, --attempts, delay, onSuccessCallback, onFailCallback);
}, delay);
}
}
}
Call it like this:
WaitForAppletLoad("fileapplet", 10, 2000, function () {
BuildTree("c:/");
}, function () {
alert("Sorry, unable to load the local file browser.");
});

You have an initializer function (i think it is run) in java applet. From there you can call a javascript in the web page after initialization work.
To work you must add the MAYSCRIPT attribute to your applet definition
<applet id="someId" code="JavaApplet.class" codebase="/foo" archive="Applet.jar" MAYSCRIPT>
</applet>
Code example to invoke a JavaScript:
public String invokeJavaScript(Object caller, String cmd) throws TiNT4Exception {
printDebug(2, "Start JavaScript >>" + cmd + "<<");
try {
// declare variables
Method getw = null;
Method eval = null;
Object jswin = null;
// create new instance of class netscape.javascript.JSObject
Class c = Class.forName("netscape.javascript.JSObject"); // , true, this.getClass().getClassLoader()); // does it in IE too
// evaluate methods
Method ms[] = c.getMethods();
for (int i = 0; i < ms.length; i ++) {
if (ms[i].getName().compareTo("getWindow") == 0) { getw = ms[i]; }
else if (ms[i].getName().compareTo("eval") == 0) { eval = ms[i]; }
} // for every method
printDebug(3, "start invokings");
Object a[] = new Object[1];
a[0] = caller;
jswin = getw.invoke(c, a);
a[0] = cmd;
Object result = eval.invoke(jswin, a);
if (result == null) {
printDebug(3, "no return value from invokeJavaScript");
return "";
}
if (result instanceof String) {
return (String)result;
} else {
return result.toString();
}
} catch (InvocationTargetException ite) {
throw new TiNT4Exception(ite.getTargetException() + "");
} catch (Exception e) {
throw new TiNT4Exception(e + "");
}
} // invokeJavaScript

You can use the param tag to pass the name of a JS function into your applet:
<applet id="myapplet" code="JavaApplet.class" codebase="/foo"
archive="Applet.jar" MAYSCRIPT>
<param name="applet_ready_callback" value="myJSfunction"/>
</applet>
In your applet, get the value of the param and call the function when ready:
#Override
public void init() {
String jsCallbackName = getParameter("applet_ready_callback");
JSObject jsObject = JSObject.getWindow(this);
jsObject.eval(jsCallbackName + "()");
}

I used another way to call a JavaScript function from an applet.
try {
getAppletContext().showDocument(new URL("javascript:appletLoaded()"));
} catch (MalformedURLException e) {
System.err.println("Failed to call JavaScript function appletLoaded()");
}
...must be called in the applet class which extends Applet or JApplet. I called the JavaScript function at the end of my start() method.

It is possible with Java 7 SE. You can register onLoad() event or just poll status, see Handling Initialization Status With Event Handlers for an example.
In order to use this functionality, you should deploy the applet with java_status_events parameter set to true.
The article Applet Status and Event Handlers outlines the status and events:
Status
LOADING = 1 - Applet is loading
READY = 2 - Applet has loaded completely and is ready to receive JavaScript calls
ERROR = 3 - Error while loading applet
Events
onLoad: Occurs when applet status is READY. Applet has finished loading and is ready to receive JavaScript calls.
onStop: Occurs when applet has stopped.
onError: Occurs when applet status is ERROR. An error has occurred while loading the applet.
You can register or determine an event handler in the JavaScript code of a web page as shown in the following code snippets.
// use an anonymous function
applet.onLoad(function() {
//event handler for ready state
}
// use a regular function
function onLoadHandler() {
// event handler for ready state
}
// Use method form
applet.onLoad(onLoadHandler);
// Use attribute form
applet.onLoad = onLoadHandler;