Embed XSL in Behaviors

Browsers Targeted: Internet Explorer 5

Behaviors let you create specific functionality within custom HTML tags. XSL (Extensible Stylesheet Language) lets you transform a block of XML into some form of output, including HTML. The two would seem to be ideally suited for one another, but hauling around an XSL file reference begins to weaken the power of such a combination. However, a nice feature of behaviors is that you can embed HTML within them, and more specifically, you can embed XML data islands inside of a behavior. Once embedded, you can retrieve the data island using its id property, then use XMLDocument to retrieve a reference to the XML document contained within.

For example, consider a behavior that takes a generic list of elements within a container element. The behavior will convert such a list into a selection list box, with the id of the container becoming the id of the <SELECT> tag and the default of the container becoming the selected item. The ids for each of the contained elements in turn become the values of their <OPTION> tags. Note that what is important here is not the names of the elements but the names of the attributes.

 
<XML ID="data">
	<colors id="colors" default="green">
		<color id="red">Red</color>
		<color id="green">Green</color>
		<color id="blue">Blue</color>
		<color id="yellow">Yellow</color>
		<color id="orange">Orange</color>
		<color id="brown">Brown</color>
		<color id="violet">Violet</color>
		<color id="black">Black</color>
		<color id="white">White</color>		
	</colors>
</XML>

 
<div id="optionBox" style="behavior:url(OptionBehavior.htc);" 
SourceID="data" default="blue">
Option Behavior
</div>

For this behavior, the code contains an XSL data island named filter. When the behavior is initialized, the filter is read through its ID ("filter") and stored in an XSL variable. When a refresh is called (as it is automatically when the control first loads), the initial data island passed by reference from the HTML document calls transformNode, taking as its argument the XSL document. This will apply the template to the document, which is in turn output to the innerHTML of the behavior's calling element.

 
<!-- Behavior definition in OptionBehavior.htc  -->
<PUBLIC:COMPONENT>
	<PUBLIC:PROPERTY NAME="SourceID">
		<GET internalNAME="get_SourceID"/>
		<PUT internalNAME="put_SourceID"/>
	</PUBLIC:PROPERTY>
	<PUBLIC:PROPERTY NAME="SourceXML">
		<GET internalNAME="get_SourceXML"/>
	</PUBLIC:PROPERTY>
	<PUBLIC:PROPERTY NAME="default">
		<GET internalNAME="get_Default"/>
		<PUT internalNAME="put_Default"/>
	</PUBLIC:PROPERTY>
	<PUBLIC:PROPERTY NAME="Size" VALUE="1"/>
	<PUBLIC:METHOD NAME="refresh"/>
	<PUBLIC:ATTACH EVENT="ondocumentready" ONEVENT="initialize()"/>

	<script language="VBScript">
dim m_sourceXML
dim m_sourceID
dim m_default

function initialize()
    'set m_SourceXML=nothing
    refresh
end function

function get_Default()
    get_Default=m_default
end function

function put_Default(dflt)
    m_default=dflt
end function

function get_SourceID()
    set getSourceID=m_SourceID
end function

function put_SourceID(xmlID)
    m_sourceID=xmlID
    set m_sourceXML=element.document.all(m_sourceID).xmlDocument
end function

function get_SourceXML()
    set get_SourceXML=m_sourceXML
end function

function refresh()
    if m_default<>"" then
        set defaultNode=m_sourceXML.selectSingleNode("//*[@default]")
        defaultNode.setAttribute "default",m_default	
    end if
    set xslDoc=filter.xmlDocument
    me.innerHTML=m_sourceXML.transformNode(xslDoc)
end function
</script>
	
<xml id="filter">
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
    <xsl:template match="/">
        <select>
            <xsl:attribute name="id"><xsl:value-of select="*/@id"/>
</xsl:attribute>
            <xsl:apply-templates select="*/*"/>
        </select>
    </xsl:template>
    <xsl:template match="*">
        <option>
        <xsl:attribute name="value"><xsl:value-of select="@id"/>
</xsl:attribute>
        <xsl:if test=".[@id = ../@default]">
            <xsl:attribute name="selected">selected</xsl:attribute>
        </xsl:if>
        <xsl:value-of/>
        </option>
    </xsl:template>
</xsl:stylesheet>
</xml>
</PUBLIC:COMPONENT>