i2b2 Web Client
Space shortcuts
Space Tools

Versions Compared

Old Version 9

changes.mady.by.user Janice Donahoe

Saved on

compared with

New Version 10

changes.mady.by.user Janice Donahoe

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Within the examples folder create a new folder called ExampHello. We will be using the string "ExampHello" as the code that will be used to uniquely identify the plug-in from other plug-ins and cells. For our example we chose to use the abbreviation code "ExampHello" for our aptly-named "Hello World" example plug-in.

Within every plug-in directory there is an assets directory to contain all multimedia assets that are used by the plug-in. All CSS, HTML and image files are contained within this directory.

...

  • The DIV will need to have an id value of ExampTabs-mainDiv.
  • The tab-encapsulating DIV must be assigned the class yui-navset.
  • The tab rendering routines are expecting to find three child nodes, an unordered list assigned a class of yui-nav and a DIV assigned the class yui-content.


<html>
<      <body>
<      <div id="ExampTabs-mainDiv">
          <div id="ExampTabs-TABS" class="yui-navset">

<               <!--{-}Define the tabs -->
<                <ul class="yui-nav">
<                <li id="ExampTabs-TAB0">
                    <a href="#ExampTabs-TAB0"><em>Specify Data</em></a>
<               </ul>
<                <li id="ExampTabs-TAB1">
                    <a href="#ExampTabs-TAB1"><em>View Results</em></a>
<               </ul>
<                <li id="ExampTabs-TAB2">
                    <a href="#ExampTabs-TAB2"><em>Plugin Help</em></a>
<               </ul>
<               </ul>

<               <!--{-}Define the tabs sub-screens -->
<                <div class="yui-content" id="ExampTabs-CONTENT">
                    <div>This "Hello World" demonstration text shows up on Tab #1</div>
                    <div>This "Hello World" demonstration text shows up on Tab #2</div>
                    <div>This "Hello World" demonstration text shows up on Tab #3</div>
<               </div>
          </div>
<     </div>
<     </body>
</html>



A line must be added to the plug-in configuration file so that the tabs menu will be recognized and properly drawn by the Plugin Viewer.

plugin: {
isolateHtml      isolateHtml: false, // this means do not use an IFRAME
standardTabs      standardTabs: true, // the plugin viewer will display a standard tabs
html      html: {
source      source: 'injected_screens.html',
mainDivId      mainDivId: 'ExampTabs-mainDiv',
}



The final change required will be to put the following line into the initialization routine of the plug-in. This example also used the configuration variable set in the module loader configuration file as the default tab shown when the plug-in is loaded.

i2b2.ExampTabs.Init = function (loadedDiv) {
     // this function is called after the HTML is loaded into the viewer DIV
i2b2      i2b2.ExampTabs.view.containerDiv = loadedDiv; // save reference for later use
var      var cfgObj = {activeIndex : i2b2.ExampTabs.cfg.config.DefaultTab – 1 };
this      this yuiTabs = new YAHOO.widget.TabView("ExampTabs-TABS", cfgObj);
};

...