Implementation
Use the following steps to implement this example:
1. Configure the .dcf file by adding the following element:
<ActiveXControl element="date"
controlName="date"
scriptFileName="date.js"
scriptName="date"
programId="MSCAL.Calendar"
eventName="DOMActivate">
2. Create a control initialization function in your script. Match the function name prefix with the control name specified in the ActiveXControl element in the .dcf file as follows:
ActiveXControl element where the first part of the control name “date_OnInitialize()” parallels the ActiveXControlcontrolName attribute value of “date”.
3. Populate the script initialization function as detailed in date.js:
function date_OnInitialize(ActiveNode)
{
// Remember our active node for the embedded case
anode = ActiveNode;
// does this date element already have a child node?
if(ActiveNode.HasChildNodes())
{
// yes, get the first child to see if it's our PCDATA
var childNode = ActiveNode.FirstChild
if(childNode.NodeType == NODE_TEXT)
{
// set the Calendar control to the value of the XML data
date.Value = childNode.NodeValue
date.Refresh()
}
}
}
4. Create and populate the script close function as detailed in date.js.
function date_OnClose(ActiveNode)
{
// the active node should be an element,
// but let's make sure...
if(ActiveNode.NodeType == NODE_TEXT)
{
ActiveNode.replaceData(0, ActiveNode.length, date.Value);
}
else if(ActiveNode.HasChildNodes())
{
// does this date element already have a child node?
// and is it a text node?
var childNode = ActiveNode.FirstChild
if(childNode.NodeType == NODE_TEXT)
{
// yes, replace the text data with the control's data
childNode.replaceData(0, childNode.length, date.Value);
}
}
else
{
// no existing date PCDATA, create it
insertDate(ActiveNode);
}
}
The close function calls the following insertDate function to insert the date selected in the control:
function insertDate(thisNode)
{
// create a Range object
var domRange = Application.ActiveDocument.createRange();
// set that Range to the beginning of our <date> element
domRange.setStart(thisNode,0);
// select the entire <date> element
domRange.selectNodeContents(thisNode);
// collapse node to the end of the contents
// i.e. the insertion point is just before the end tag </date>
domRange.collapse(true);
// create a new text node, and populate with the control data
var textNode = Application.ActiveDocument.createTextNode(date.Value)
// inserts the text.... <date>here</date>
domRange.insertNode(textNode)
}
