<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style>
v\:* { behavior: url(#default#VML); }
</style>
</head>
<body>
<v:rect style="width:50pt; height: 50pt" fillcolor="blue" />
</body>
</html>
Figure 9 Transformations
function window_onload() {
var oXML
var oXSL
var xslHTML
//Create XML objects
oXML = new ActiveXObject("Microsoft.XMLDOM");
oXML.async = false;
oXSL = new ActiveXObject("Microsoft.XMLDOM");
oXSL.async = false;
//load the xml document
oXML.load("info.xml");
//load xsl and transform the node (transformation 1)
oXSL.load("header.xsl");
xslHTML = oXML.transformNode(oXSL);
document.all.item("header").innerHTML = xslHTML;
//load xsl and transform the node (transformation 2)
oXSL.load("companyinfo.xsl");
xslHTML = oXML.transformNode(oXSL);
document.all.item("companyinfo").innerHTML = xslHTML;
}
Figure 10 The People Template
<xsl:template match="PERSON">
<TD align="center" valign="top" >
<xsl:element name="v:roundrect" >
<xsl:attribute name="style">width:110pt;height:33pt</xsl:attribute>
<xsl:attribute name="fillcolor">#ecac04</xsl:attribute>
<xsl:element name="v:fill">
<xsl:attribute name="color2">#F4DC8C</xsl:attribute>
<xsl:attribute name="type">gradient</xsl:attribute>
</xsl:element>
<xsl:element name="v:textbox">
<xsl:attribute name="style">padding-left: 0px</xsl:attribute>
<SPAN style="font-size: 8pt" align="left"><b><xsl:value-of
select="NAME" /> </b><BR/> (<xsl:value-of select="TITLE"/>)</SPAN>
</xsl:element>
</xsl:element>
<xsl:apply-templates select="PEOPLE" />
</TD>
</xsl:template>
Figure 12 Show/Hide Branches
function GetChildElem(eSrc,sTagName)
{
var cKids = eSrc.children;
for (var i=0;i<cKids.length;i++)
{
if (sTagName == cKids[i].tagName) return cKids[i];
}
return false;
}
function document.onclick()
{
var eSrc = window.event.srcElement;
if ("roundrect" == eSrc.tagName)
{
var eParent = eSrc.parentElement;
if( eParent = GetChildElem(eParent, "TABLE") )
{
eParent.style.display = ("block" == eParent.style.display ? "none" :
"block");
}
}
}