XSLT For Declarative Language

Question

Hi,

I am looking into using XSLT to convert an XML based declarative language into pure JavaScript code as its output. The declarative language will be used for describing user interfaces similar to Mozilla XUL. I am fairly new to XSLT, and I am not sure how to properly handle all the attributes that the tags can contain. For instance, below I have a "script" tag and a "button" tag, both with different attributes, many of which are optional. There will also be many additional tags with even more attributes. My question is, how do I design my XSLT script to properly handle all the possible attribute in a maintainable way?

<window>
    <script type="javascript">
        blah
     blah  
    </script> 
    <button id="button1" height="100" vOffset="0" renderer="Test.control.Button" /> 
</window>

I was thinking initialy something like the following

<xsl:template match="button">    
    var <xsl:value-of select="@id" /> = new <xsl:value-of select="@renderer" />({     
        id: <xsl:value-of select="@id" />,
        styles: {
            <xsl:apply-templates select="@*" />    
        },
    }).appendTo(panel);
</xsl:template>

<xsl:template match="button/@*">
    <xsl:if test="name() = 'height' or name() = 'vOffset'">
        &#9;&#9;<xsl:value-of select="name()" />: <xsl:value-of select="." />,
    </xsl:if> 
</xsl:template>

Answer 1

There are probably lots of different ways of doing the same thing. The example you give above is a very declarative method, and a good example of how XSLT can handle things very differently from other languages.

You could also use to loop through the attributes in the above "button" template.

Another alternative might be to provide a generic style attribute template, and give it a different mode:

<xsl:template match="button">           
    var <xsl:value-of select="@id" /> = new <xsl:value-of select="@renderer" />({               
        id: <xsl:value-of select="@id" />,
        styles: {
            <xsl:apply-templates select="@height | @vOffset" mode="style"/>                         
        },
    }).appendTo(panel);
</xsl:template>

<xsl:template match="@*" mode="style">
    &#9;&#9;<xsl:value-of select="name()" />: <xsl:value-of select="." />,
</xsl:template>

The style template can therefore be reused by many 'controls' with different style attributes.