top

Adding a NaCl module to your application

This article presents a method of embedding existing NaCl module in a Smart TV widget.

Got only a compiled .nexe file and no sources? No problem!

There are many possible cases when the previously compiled NaCl module can be delivered to be used in a project. The most common reason is security - the source code is compiled and cannot be modified.

This is no serious problem - the Native Client technology and Tizen Studio allow to embed an existing module into your page.

Necessary Things

There are two necessary files you need to supply:

  • the compiled NaCl module for the desired architecture (or couple of them for various architectures),
  • the manifest file that points to .nexe files.

Beside that you need to know what the module does and what is its API.

Embedding a Module

The necessary things to do in the JavaScript part of the application are the same as when creating a NaCl application with sources. You need to:

  • embed an element on the page,
  • add listeners to handle load, crash and message events,
  • provide the path to the manifest file.

Example

As an example we will create an application using a compiled module from Hello World in C++ demo. This module, after a successful load, waits for incoming text messages and upon receiving one sends it back with “Echo from NaCl:” prefix.

  1. Create a new empty NaCl project.
  2. Build the project to create makefile definitions needed for packing the widget.
  3. Remove C++ source files from the src folder and built .nexe, .pexe and .nmf files from the CurrentBin folder.
    The source files are not needed, as the module is already compiled, but they are automatically generated during project creation.
    The built products are to be replaced with the previously compiled NaCl module.
Note

Don’t remove source files before building the project for the first time. They are needed by the builder to generate proper building targets, including products folders.

  1. Copy the desired .nexe file to the project’s CurrentBin folder.
  2. In the CurrentBin folder create a manifest file pointing to the module. The manifest file name should be the same as the project name. An example manifest content:
{
  "files": {},
  "program": {
    "arm": {
      "url": "hello_world_module.nexe"
    },
  }
}
  1. Open the project.js file. The exampleSpecificActionAfterNaclLoad() function is invoked after the NaCl module successfully loads. Here we can add a call to the module.
    To communicate with the module add the following line to the body of the aforementioned function:
document.getElementById("nacl_module").postMessage("Hello World from JS");

This will send a message to the NaCl module. The module will send it back.
Also, unlock the logs area to allow to observe returned messages:

var uses_logging = true;
  1. Open the communication.js file. At the end of the handleNaClMessage() function add:
logs.value += message;
logs.scrollTop = logs.scrollHeight;

This will print the received message in the logs area and scroll it to the bottom.

  1. Pack your widget with the Build Package command and launch it. The NaCl module is loaded in the page and works as it should.