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.

For reference, please include the templates that handle `xf:trigger` in the XSLTForms transformation. This question cannot be answered without this detail. — Tomalak, Jul 30 '14 at 12:42
Oh and FYI, there is no need to write `` or `` in most cases. Just write out the elements and use attribute value templates, like so: http://bpaste.net/show/mP0qkHEA8OwOTLy6KD9E/ — Tomalak, Jul 30 '14 at 12:46
I am not sure what exactly do you mean? The template for both the `` and the `
` are included. Check again please. — lapadets, Jul 30 '14 at 12:51
You included the template that creates a `` from your ``, but your *complaint* actually is about the template that creates an HTML button from a ``. That's the template you need to include in your question. (I'm aware that you did not write that template. Still, for this question this is necessary context.) — Tomalak, Jul 30 '14 at 12:59
Ah ok, got you. Well, I am using XSLTForms, thus the part that translates the trigger to html elements is from there. I pasted it here: http://bpaste.net/show/BXpf2Q2O1PQhQGlMOvbY/ But, It's not a good idea to edit it from there... So is there any other way? — lapadets, Jul 30 '14 at 13:14
Holy spaghetti, Batman. From the looks of it the XSLTForms project has a pretty horrible codebase. Anyway, whatever part of the whole thing you posted - it does not seem to be responsible for the HTML you show in your question. There is one line (line 73) that outputs a ` — Tomalak, Jul 30 '14 at 13:53
Yeah well, I did not pay much attention to the XLSTForms xsl - found the right template and added it here at the bottom - http://bpaste.net/show/c42CtcIcjbsI6GFGWK2q/ . You can notice that I added manually a `class="btn-success"` attribute, but that's gonna just make all buttons like that, and I want to be able to specifically change the appearance of buttons based on my declarative XML description. I will make an update on my question as well. — lapadets, Jul 30 '14 at 14:21
Just as I thought. The XLSTForms xsl does not allow this facet to be configured. Changing this will result in an ugly hack, no matter how you do it. I think you don't really want to change the XSLTForms source \*does Jedi mind trick gesture\*. As I said. If I were you I'd explore the possibility of adding the desired CSS class names with a few lines of JS code before you feed the whole thing to Bootstrap. — Tomalak, Jul 30 '14 at 14:38
Are you willing to elaborate as a question answer? I am not sure how to do this with jQuery. — lapadets, Jul 30 '14 at 14:42
Try this: You are able to add a CSS class without touching the XSLTForms xsl implementation. The class just does not end up on the right element. Spend some time to get the HTML that falls out of XSLTForms as close to your desired result as you can. Once you think you have that, post the HTML as a new question, omit all the tedious XSLT-specific background (you have decided you can't do a whole lot about that anyway) and ask how to best move the right classes to the right spots with Bootstrap in mind. If you've prepared everything well on your end you'll have a few suggestions within minutes. — Tomalak, Jul 30 '14 at 15:01
Alright, I made a new question - http://stackoverflow.com/questions/25041499/how-to-move-css-classes-to-the-right-html-elements :) — lapadets, Jul 30 '14 at 16:22
Looks like my prediction "an answer within minutes" was not correct. I blame your mentioning of XSLT in the first lines. I didn't say "omit that" without reason. ;) — Tomalak, Jul 30 '14 at 18:17

score 3 · Accepted Answer · answered Jul 30 '14 at 17:22

3

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.

answered Jul 30 '14 at 17:22

Bill Velasquez

875
4
9

I guess that's a solution without any extra complexity! Thanks :) – lapadets Jul 30 '14 at 18:19

XSL transformatiotion to XForms from simple XML file and applying CSS

1 Answers1

Linked