从简单 XML 文件到 XForms 的 XSL 转换并应用 CSS

Posted

技术标签:

【中文标题】从简单 XML 文件到 XForms 的 XSL 转换并应用 CSS【英文标题】:XSL transformatiotion to XForms from simple XML file and applying CSS 【发布时间】:2014-09-21 23:52:15 【问题描述】:

我正在将一些简单的 XML 文档转换为 XForms,并尝试为最终结果添加一些样式。我正在使用 XSLTForms 实现,并且指向本地 CSS 文件(Twitter 的引导程序)。所以 XML 文件看起来像这样:

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

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

<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>

现在,这会产生:(这对我目前的需要来说很好)

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

但我想为这个&lt;xf:trigger&gt; 添加一些样式规则。问题是当它被转换成 html 元素时,结构是

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

所以我不知道如何进行 XSLT 转换,以便将 class="btn-danger" 属性插入到 &lt;button&gt; 标记中。

换句话说,我需要在最终的 Html 中得到类似的东西:(目前我得到了,但在 button 标签中没有 class="btn-danger"

<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 的模板中添加&lt;xsl:attribute name="class"&gt;btn-danger&lt;/xsl:attribute&gt;,但这会在第一个span 元素处插入属性。 有任何想法吗?提前致谢!

更新:

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

<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 样式规则。但是,如果我有另一个按钮并且它没有样式规则,它应该具有默认外观。希望这很清楚。

【问题讨论】:

作为参考,请在 XSLTForms 转换中包含处理 xf:trigger 的模板。没有这个细节就无法回答这个问题。 哦,仅供参考,大多数情况下不需要写&lt;xsl:element&gt;&lt;xsl:attribute&gt;。只需写出元素并使用属性值模板,如下所示:bpaste.net/show/mP0qkHEA8OwOTLy6KD9E 我不知道你到底是什么意思?包括&lt;xf:trigger&gt;&lt;div&gt; 的模板。请再次检查。 您包含了从您的&lt;part class="Button"&gt; 创建一个&lt;xf:trigger&gt; 的模板,但您的投诉 实际上是关于从&lt;xf:trigger&gt; 创建一个HTML 按钮的模板。这是您需要在问题中包含的模板。 (我知道您没有编写该模板。不过,对于这个问题,这是必要的上下文。) 试试这个:您可以添加一个 CSS 类而无需触及 XSLTForms xsl 实现。该类只是没有在正确的元素上结束。花一些时间让 XSLTForms 中的 HTML 尽可能接近您想要的结果。一旦你认为你有这个,将 HTML 作为一个新问题发布,省略所有乏味的 XSLT 特定背景(你已经决定无论如何你不能做很多事情)并询问如何最好地将正确的类移动到考虑到 Bootstrap 的正确位置。如果你已经准备好了一切,你会在几分钟内得到一些建议。 【参考方案1】:

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

但你可以用这种方式定义一个适用于它的 CSS 规则来代替它:

#myclass button 
  color: red;

并在触发器中使用类:

<xf:trigger class="myclass >

对于每个 XForms 控件都是一样的。只需查看浏览器检查器即可查看生成的控件。

【讨论】:

我想这是一个没有任何额外复杂性的解决方案!谢谢:)

以上是关于从简单 XML 文件到 XForms 的 XSL 转换并应用 CSS的主要内容,如果未能解决你的问题,请参考以下文章

对XML与WEB SERVICE的一些认识

基于一定条件的xml数据到xsl文件的转换

简述XML,DTD,XSL,CSS,DSO,DOM各是啥东西

XForms 和 restxq 应用程序

使用 XForms 将 XML 元素作为 HTTP 标头发送

使用 XSL 转换合并两个 XML 文件