XSL transformatiotion to XForms from simple XML file and applying CSS

Question

I am transforming some simple XML document into XForms and I am trying to add some style to the final result. I am using the XSLTForms implementation and I am pointing to a local CSS file (Twitter's bootstrap). So the XML file looks like that:

<structure>
    <part class="Container" id="container">           
        <part class="Button" id="b1"/>
    </part> 
</structure>
<style>
    <property part-name="b1" name="label">Submit</property>
</style>

My XSLT that transforms these parts to XForms document:

<xsl:key name="buttonLabels" match="property[@name='label']" use="@part-name"/>
<xsl:template match="part[@class='Button']"><!-- [key('buttonActions', @id)]-->
    <xsl:element name="xf:trigger">
        <xsl:attribute name="id">
            <xsl:value-of select="@id | @size | @style"/>
        </xsl:attribute>
        <xsl:element name="xf:label">
            <xsl:value-of select="key('buttonLabels', @id)"/>
        </xsl:element>
    </xsl:element>
</xsl:template>

<xsl:template match="part[@class='Container']">
    <xsl:element name="div">
        <xsl:attribute name="class">container</xsl:attribute>
        <xsl:apply-templates/>
    </xsl:element>
</xsl:template>

Now, this produces: (which is fine for what I need currently)

<div class="container">
    <xf:trigger id="b1">
       <xf:label>Submit</xf:label>
    </xf:trigger>
</div>

But I'd like to add some style rules to this <xf:trigger>. The thing is that when it gets transformed into html elements, the structure is

|_span
  |_span
     |_button
       |_span (for the label)

So I am not sure how to make the XSLT transformation, so that it inserts let's say class="btn-danger" attribute into the <button> tag.

In other words, I need to get something like that in the final Html: (currently I get it, but without the class="btn-danger" in the button tag)

<span id="b1">
    <span>
        <button type="button" class="btn-danger">
            <span id="xsltforms-mainform-label-2_6_2_4_3_" class="xforms-label">Submit</span>
        </button>
    </span>
</span>

Besides, I tried with adding an <xsl:attribute name="class">btn-danger</xsl:attribute> in the template for the xf:trigger, but that inserts the attribute at the first span element. Any ideas? Thanks in advance!

UPDATE:

The XSLT responsible for transforming the xforms:trigger element to html elements can be found on this link - http://bpaste.net/show/c42CtcIcjbsI6GFGWK2q/ But I don't want to edit the XSLTForms implementation, but rather find a workaround, so that I can specify the style of my buttons from my XML file. For example:

<structure>
    <part class="Container" id="container">           
        <part class="Button" id="b1"/>
    </part> 
</structure>
<style>
    <property part-name="b1" name="label">Submit</property>
    <property part-name="b1" name="style">btn-danger</property>
</style>

So here, I am matching the part-name and saying that I want the button with id="b1" to have css style rules for btn-danger for example. But if I have another button and there is no style rule for it, it should have default appearance. Hope that's clear.

Answer 1

You cannot add a class attribute directly to the button element generated by XSLTForms.

But instead of it, you can define a CSS rule that applies to it this way:

#myclass button {
  color: red;
}

and use the class in the trigger:

<xf:trigger class="myclass >

The same for every XForms control. Just take a look to the browser inspector to see the generated controls.