从简单的XML文件到CSS的XSL转换为XForms [英] XSL transformatiotion to XForms from simple XML file and applying CSS

问题描述

我正在将一些简单的XML文档转换为XForms，并且试图为最终结果添加一些样式.我正在使用 XSLTForms 实现，并且指向本地CSS文件(Twitter的引导程序).因此，XML文件如下所示:

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>

将这些部分转换为XForms文档的XSLT:

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>

但是我想为此<xf:trigger>添加一些样式规则.事实是，当将其转换为html元素时，其结构为

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)

所以我不确定如何进行XSLT转换，以便将class="btn-danger"属性插入到<button>标记中.

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.

换句话说，我需要在最终的HTML中得到类似的东西:(当前我得到了，但是在button标记中没有class="btn-danger")

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>

此外，我尝试在xf:trigger的模板中添加<xsl:attribute name="class">btn-danger</xsl:attribute>，但这会在第一个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!

更新:

可以在此链接上找到负责将xforms:trigger元素转换为html元素的XSLT- http://bpaste.net/show/c42CtcIcjbsI6GFGWK2q/ 但是我不想编辑 XSLTForms 实现，而是找到一种解决方法，以便可以从XML文件中指定按钮的样式. 例如:

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>

因此，在这里，我要匹配部件名称，并说我希望带有id="b1"的按钮具有btn-danger的css样式规则.但是，如果我有另一个按钮，但没有样式规则，则它应该具有默认外观.希望这很清楚.

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.

推荐答案

您不能将class属性直接添加到XSLTForms生成的按钮元素中.

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

但是，您可以定义一个CSS规则来代替它，

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 >

每个XForms控件都相同.只需看看浏览器检查器即可查看生成的控件.

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

这篇关于从简单的XML文件到CSS的XSL转换为XForms的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！