Create the JavaScript part of the extension

The javascript_src folder of the memory extension sample contains the following resources:

client.js

Considered the client side, it exports APIs that are accessible from the client's application. The client.js file name is mandatory.

index.js

Considered the server side, it exports APIs that are accessible from the client.js file and communicates with the native side. The index.js file name is mandatory.

manifest.json

This is the extension descriptor that defines the whitelisting flag, ID, and dependencies of other extensions for the extension.

In the manifest.json file, example.memory is defined as the extension's ID and example.memory also serves as a prefix for all the methods and fields defined in the client.js file.

  • To retrieve free memory bytes, call the example.memory.getMemory method.
  • To register and be notified of memory events, call the example.memory.monitorMemory method.

Here's a snippet of code that uses the above-mentioned methods:

function memoryUsageCallback(memoryInByte) {
    alert("Event Callback. Free memory: " + memoryInByte);
}

var freeMemory = example.memory.getMemory();
alert("Free memory: " + freeMemory);

example.memory.monitorMemory(memoryUsageCallback);

Diving into the JavaScript part of the extension

The interaction between client.js and index.js is made by using APIs of the webworks object.

The client side can make synchronous or asynchronous calls to the server side. When you make a call to the server side, each method in client.js should provide the ID, method name, and arguments to execSync to get a synchronized call or to execAsync when the request is asynchronous. This call results in the invocation of a corresponding method name in index.js.

The webworks object has an event API that can be used to communicate between the client and server side. The client registers a callback against the event API, which the server side can trigger. An example of this functionality is shown in the monitorMemory function, which registers a callback on the client side:

window.webworks.event.add(_ID, "example.memory.memoryEvent", cb);

where the arguments to the function are the feature ID, event ID, and the callback.

Once the event is registered on the client side, it can be triggered by the server side when the memory usage changes:

_event.trigger("example.memory.memoryEvent", arg);

The server side uses the event ID to trigger the client side callback and passes the new memory usage as an argument for the callback.

Using the JNEXT interface

The interaction between index.js and the native side of the extension is made by using APIs from the JNEXT interface. The constructor function MemoryJNext is attached to JNEXT. The object should have the following structure:

  • onEvent : Events from the native side are passed as a String to this method. The onEvent method name is mandatory.
  • init : This function performs the following key operations:
    • Specifies the required module exported by the native side. The name of the required module memoryJnext should match the name of a shared library file (.so file).
      JNEXT.require("memoryJnext")
    • Creates an object by using an acquired module and saves the ID that's returned by the call.
      self._id = JNEXT.createObject("memoryJnext.Memory")
    • Registers itself to be notified of events so that the onEvent method is called.
      JNEXT.registerEvents(_self)
  • getID : Returns the ID that was previously saved.
    return self._id
  • Methods and fields that are used by index.js to redirect, when required, calls that initially came from client.js to the native side. The memory extension example has two methods: getMemoryJNext and monitorMemoryJNext.

The index.js file creates a MemoryJNext object and saves its instance in a variable. It then redirects calls to methods in index.js to the corresponding MemoryJNext method.

//Code in user's app.
var freeMemory = example.memory.getMemory();

//Code in user app trigger this code in client.js
return window.webworks.execSync(_ID, "getMemoryServer", null);

//Code in client.js trigger this code in index.js
getMemoryServer: function (success, fail, args, env) {
    ....
}

//Finally in index.js code that belongs to MemoryJNext object is triggered where
//call to native side takes place and returned value is passed back to the user.
_self.getMemoryJNext = function () {
    return JNEXT.invoke(_self._id, "getMemoryNative");
};

Last modified: 2014-03-10



Got questions about leaving a comment? Get answers from our Disqus FAQ.

comments powered by Disqus