...
In this example the first tab will be related to data entry. As such, we are going to create a DIV and register it with the SDX subsystem to allow it to recognize when data objects are dropped onto it.
In order for the DIV to be registered, it must have an id attribute, in this example we will call it ExampTabs-DROPTRGT.
<html>
< <body>
< <div id="ExampTabs-mainDiv">
<div id="ExampTabs-TABS" class="yui-navset">
< <!--{-}Define the tabs –| Wiki Markup |
|---|
> \[removed in this example\] |
< <!--{-}Define the tabs sub-screens –>
< <div class="yui-content" id="ExampTabs-CONTENT">
<div>
< <div class=" ExampTabs-MainContent">
<div class=" ExampTabs-MainContentPad">
<div>Drop an i2b2 object such as a search term or query onto the input box below, and then click
click the "View Results" tab for information about that object.
</div>
<div class="droptrgtlbl">i2b2 Object:</div>
<div class="droptrgt SDX-PRS" id="ExampTabs-DROPTRGT">
Drop Drop an object here
</div>
< </div>
</div>
< </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> |
The above HTML contains the following three DIV
...
In the plug-in's initialization routine we need to register the above-defined DIV to accept SDX drag drop operations for various data types handled by the SDX subsystem.
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);
// register DIV as valid DragDrop target for Patient Record Sets (PRS) objects
var var divName = "ExampTabs-DROPTRGT";
// register for drop events of the following datatypes
var var op_trgt = {dropTarget:true};
i2b2 i2b2.sdx.Master.AttachType(divName, 'CONCPT', op_trgt);
i2b2 i2b2.sdx.Master.AttachType(divName, 'QM', op_trgt);
i2b2 i2b2.sdx.Master.AttachType(divName, 'QI', op_trgt);
i2b2 i2b2.sdx.Master.AttachType(divName, 'PRS', op_trgt);
i2b2 i2b2.sdx.Master.AttachType(divName, 'PRC', op_trgt);
i2b2 i2b2.sdx.Master.AttachType(divName, 'PR', op_trgt);
i2b2 i2b2.sdx.Master.AttachType(divName, 'QDEF', op_trgt);
i2b2 i2b2.sdx.Master.AttachType(divName, 'QGDEF', op_trgt);
i2b2 i2b2.sdx.Master.AttachType(divName, 'XML', op_trgt);
}; |
...
A function needs to be added to the plug-in's main code file to accept the data from the SDX drop event. In this example we are going to be adding the function call doDrop() to the plug-in's root namespace i2b2.ExampTabs.
This function, like all SDX Drop event handlers, must accept an array containing one or more SDX Data Messages. For this example we will only be processing the first message.
i2b2.ExampTabs.doDrop = function (sdxData) {
// only interested in first SDX record in the MSG
sdxData sdxData = sdxData[0];
// save the info to our local data model
i2b2 i2b2.ExampTabs.model.currentRec = sdxData;
// let the user know that the drop was successful
// by displaying the name of the object
$ $("ExampTabs-PRSDROP").innerHTML = i2b2.h.Escape(sdxData.sdxInfo.sdxDisplayName);
// our input dataset has changed and any analysis needs to be redone
i2b2 i2b2.ExampTabs.model.dirtyResultsData = true;
}; |
...
When the SDX system is told to use an alternative drop event handler function, it saves an isolated clone of that function. If the same function is going to be registered to process 10 different types of SDX data then that function would be in memory 11 times (10 in the SDX system + the original copy of the function). This does not have a big impact if the cloned function is a small router function but can have a much larger impact if the drop handler is very large.
The code to map the drop event handler for this example is shown below:
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);
// register DIV as valid DragDrop target for Patient Record Sets (PRS) objects
var var divName = "ExampTabs-DROPTRGT";
// register for drop events of the following datatypes
var var op_trgt = {dropTarget:true};
i2b2 i2b2.sdx.Master.AttachType(divName, 'CONCPT', op_trgt);
i2b2 i2b2.sdx.Master.AttachType(divName, 'QM', op_trgt);
i2b2 i2b2.sdx.Master.AttachType(divName, 'QI', op_trgt);
i2b2 i2b2.sdx.Master.AttachType(divName, 'PRS', op_trgt);
i2b2 i2b2.sdx.Master.AttachType(divName, 'PRC', op_trgt);
i2b2 i2b2.sdx.Master.AttachType(divName, 'PR', op_trgt);
i2b2 i2b2.sdx.Master.AttachType(divName, 'QDEF', op_trgt);
i2b2 i2b2.sdx.Master.AttachType(divName, 'QGDEF', op_trgt);
i2b2 i2b2.sdx.Master.AttachType(divName, 'XML', op_trgt);
// Use an event router to demultiplex the callbacks to the single
// drop event even handler used by
// this plugin. This also recreates a properly
// scoped "this" keyword within the event handler
var var eventRouterFunct = (function (sdxData) { i2b2.ExampTabs.doDrop(sdxData);});
// register the event handler via eventRouterFunc
var var refSDXMaster = i2b2.sdx.Master;
refSDXMaster refSDXMaster.setHandlerCustom(divName, 'CONCPT', 'DropHandler', eventRouterFunc);
refSDXMaster refSDXMaster.setHandlerCustom(divName, 'QM', 'DropHandler', eventRouterFunc);
refSDXMaster refSDXMaster.setHandlerCustom(divName, 'QI', 'DropHandler', eventRouterFunc);
refSDXMaster refSDXMaster.setHandlerCustom(divName, 'PRS', 'DropHandler', eventRouterFunc);
refSDXMaster refSDXMaster.setHandlerCustom(divName, 'PRC', 'DropHandler', eventRouterFunc);
refSDXMaster refSDXMaster.setHandlerCustom(divName, 'PR', 'DropHandler', eventRouterFunc);
refSDXMaster refSDXMaster.setHandlerCustom(divName, 'QDEF', 'DropHandler', eventRouterFunc);
refSDXMaster refSDXMaster.setHandlerCustom(divName, 'QGDEF', 'DropHandler', eventRouterFunc);
refSDXMaster refSDXMaster.setHandlerCustom(divName, 'XML', 'DropHandler', eventRouterFunc);
}; |
...
At this point in the example's development we have three working tabs with the first tab containing text and a target DIV that accepts SDX drop events and saves the dropped information. The next step is to create an output screen to display the results of processing the dropped SDX data.
<html>
< <body>
< <div id="ExampTabs-mainDiv">
<div id="ExampTabs-TABS" class="yui-navset">
< <!--{-}Define the tabs –| Wiki Markup |
|---|
> \[removed in this example\] |
< <!--{-}Define the tabs sub-screens –>
< <div class="yui-content" id="ExampTabs-CONTENT">
<div>| Wiki Markup |
|---|
\[TAB 1's screen removed in this example\] |
</div>
<div>
< <div class="ExampTabs-MainContent">
<div class="results-directions">
You You must first provide an i2b2 object. Please return to the "Specify Data" tab then
then drag and drop an i2b2 object onto the input box.
</div>
<div class="results-finished" style="display:none;">
< <div class="results-text">
The following information was passed to the plugin in the i2b2 object:
< </div>
< <div id="ExampTabs-InfoSDX">
<table>
<tr>
<tr>
<th>Display Name</th>
<td class="sdxDisplayName"></td>
< </tr>
<tr>
<tr>
<th>SDX Datatype Code</th>
<td class="sdxType"></td>
< </tr>
<tr>
<tr>
<th>Controlling Cell</th>
<td class="sdxControlCell"></td>
< </tr>
<tr>
<tr>
<th>Primary Key Column</th>
<td class="sdxKeyName"></td>
< </tr>
<tr>
<tr>
<th>Primary Key Value</th>
<td class="sdxKeyValue"></td>
< </tr>
<tr>
<tr>
<th>Original XML Data</th>
<td class="sdxOriginalXML">
< <div class="sdxOriginalXML"></div>
</td>
< </tr>
</table>
< </div>
</div>
< </div>
</div>
<div>This "Hello World" demonstration text shows up on Tab #3</div>
< </div>
</div>
< </div>
< </body>
</html> |
Add a Processing Routine to the Plug-in
...
