Page History

...

For the Framework to be able to properly load our new plug-in module, we must declare which files comprise the new module. This is accomplished by creating a JSON-based configuration file within the module's root directory. For our example that would be

/js-i2b2/cells/plugins/examples/ExampHello/cell_config_data.js

The file would have the following structure:

// This file contains a list of all files that need to be loaded dynamically
// for this module. Every file in this list will be loaded after the module's Init()
// function is called
{
files

Wiki Markup
:\[

"ExampHello.js" ],
css

Wiki Markup
:\[

"ExampHello.css" ],
   config: {
      // additional configuration variables that are set by the system
      short_name: "Hello World",
      name: "Example #1 - Hello World",
      description: "This plugin cell demonstrates how to register your plugin
         with the i2b2 thin-client framework and display simple HTML.",
      category: ["celless", "plugin", "examples"],
      plugin: {
         isolateHtml: false,
         html: {
            source: 'injected_screens.html',
            mainDivId: 'ExampHello-mainDiv'
         }
      }
   }
}

...

The first step in the development of any plug-in module is the creation of a user interface. The i2b2 web framework eliminates the complexity of transforming simple HTML screens into an AJAX-based application.
To start, an HTML file must be created and put into the plug-in module's asset directory (/js-i2b2/cells/plugins/examples/ExampHello/assets). For our "Hello World" we will create a file called injected_screens.html and fill it with the following HTML:

<html>
   <body>
   <div id="ExampHello-mainDiv">
      This "Hello World" demonstrates how to register your plugin with the i2b2 Thin-Client framework and display some HTML.
   </div>
   <div>
      This text will not display because it is outside our targeted div
   </div>
   </body>
</html>

The text which emphasis added is what we want to display in the plug-in viewer's display window when the plug-in is selected and loaded.
The next step is to configure the plug-in (via the cell_config_data.js file) with the correct HTML file and ID for the HTML Element that contains the initial UI display.

plugin: {
   isolateHTML: false,
   html: {
   source: 'injected_screens.html' ,
   mainDivId: 'ExampHello-mainDiv' ,
}
}

...

Creating Constructor & Destructor Functions

Tip

title	Tip

Although it is not absolutely necessary, it is good practice to create constructor and destructor functions for your plug-in.

The plug-in constructor function is called after the Plugin Viewer has loaded the requested plug-in's initial HTML into the main DOM tree. When the constructor is called it is passed a reference to the DOM node that contains the plug-in's HTML.
If your plug-in contains a destructor function, it is called by the Plugin Viewer before it removes the plug-in's GUI from the main DOM tree.

Info

title	Be Careful

If your destructor function does not return true then the unload process is canceled.

i2b2.ExampHello.Init = function(loadedDiv) {
   // this function is called after the HTML is loaded into the viewer DIV
i2b2    i2b2.ExampHello.view.containerDiv = loadedDiv;
alert    alert("Hello World! This message is from the initialization routine.");
};

...

i2b2.ExampHello.Unload = function() {
   // this routine should be used to save the state of the plugin so that work can
   // resume if reloaded or to release memory currently held in plugin variables.
return    return confirm("Are you sure you want to unload the Hello World plugin?");
};

...

Versions Compared

Old Version 7

New Version 8

Key

Creating Constructor & Destructor Functions

Pages

Recently updated