xsl样式表_从XSL样式表输出HTML

xsl样式表

出于本技巧的目的,我将为潜在用户选择一个XML文件作为选择加入列表,并将其转换为表单。 该表单具有复选框,其中的一些复选框默认情况下处于选中状态,并且使用JavaScript确认提交表单之前提交截止日期尚未过去:

清单1.源文件
<?xml version="1.0"?>
<choices>
   <option default="no">
       <value>1</value><genre>Drama</genre>
   </option>
   <option default="yes">
       <value>2</value><genre>Comedy</genre>
   </option>
   <option default="yes">;
       <value>3</value><genre>Science Fiction</genre>
   </option>
   <option default="no">
       <value>4</value><genre>Romance</genre>
   </option>
   <option default="yes">
       <value>5</value><genre>Adventure</genre>
   </option>
</choices>

目标文件是执行脚本以确定是否提交表单的简单表单:

清单2.目标文件
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Select Choices</title>
<script version="1.3" type="text/javascript">

function checkDate() {
   var today = new Date();
   var deadlineDate = new Date('3/3/2002');
   if (today > deadlineDate) {
        alert('The deadline has passed.');
        return false;
   } else {
        return true;
   }   
}
</script>
</head>
<body>

<form onsubmit="return checkDate()" method="post" action="processform.jsp">
<p>We will send you information on the subjects in which you're
interested. Please check all that apply.</p>
   
<input type="checkbox" value="1">Drama<br>
<input type="checkbox" value="2" checked>Comedy<br>
<input type="checkbox" value="3" checked>Science Fiction<br>
<input type="checkbox" value="4">Romance<br>
<input type="checkbox" value="5" checked>Adventure<br>
<input value="Submit Choices" type="submit">
</form>

</body>
</html>

样式表

您可能会注意到目标文件不是格式正确的XML文档。 具体来说,HTML允许您省略某些结束标记(例如inputbr ),并最小化根据属性的存在而评估的某些属性值(例如, checked 。 还要注意checkDate()函数中的大于号( > )。

样式表必须考虑所有这些因素,并进行相应的调整:

清单3.样式表
<?xml version="1.0"?> 
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
    version="1.0">

<xsl:template match="/choices">
<html><head><title>Select Choices</title>

<script type="text/javascript" version="1.3">

function checkDate() {
   var today = new Date();
   var deadlineDate = new Date('3/3/2002');
   if (today > deadlineDate) {
        alert('The deadline has passed.');
        return false;
   } else {
        return true;
   }   
}
</script>

</head>
<body>
<form action="processform.jsp" method="post" onsubmit="return checkDate()">
<p>We will send you information on the subjects in which you're
interested. Please check all that apply.</p>
	<xsl:apply-templates/>
<input type="submit" value="Submit Choices"/>
</form>
</body>
</html>
</xsl:template>

<xsl:template match="option">
    <xsl:element name="input">
        <xsl:attribute name="type">checkbox</xsl:attribute>
        <xsl:attribute name="value"><xsl:value-of select="value"/>
        </xsl:attribute>
        <xsl:if test="@default='yes'">
            <xsl:attribute name="checked">checked</xsl:attribute>
        </xsl:if>
    </xsl:element>
    <xsl:value-of select="genre"/>
    <br />    
</xsl:template>

</xsl:stylesheet>

样式表本身非常简单。 根元素模板显示页面的主要结构,并为创建input元素的每个choice提供单独的模板。 该元素将value作为属性(可能还有checked属性)携带,并显示选择本身和<br />标记。

不幸的是,如果此样式表被处理为XML,则这些调整将保留到最终文档中:

清单4.结果为XML
<?xml version="1.0" encoding="UTF-8"?>
<html><head><title>Select Choices</title>
<script version="1.3" type="text/javascript">

function checkDate() {
   var today = new Date();
   var deadlineDate = new Date('3/3/2002');
   if (today > deadlineDate) {
        alert('The deadline has passed.');
        return false;
   } else {
        return true;
   }   
}
</script></head><body>
    <form onsubmit="return checkDate()" method="post" action="processform.jsp">
<p>We will send you information on the subjects in which you're
interested. Please check all that apply.</p>
   <input type="checkbox" value="1"/>Drama<br/>
   <input type="checkbox" value="2" checked="checked"/>Comedy<br/>
   <input type="checkbox" value="3" checked="checked"/>Science Fiction<br/>
   <input type="checkbox" value="4"/>Romance<br/>
   <input type="checkbox" value="5" checked="checked"/>Adventure<br/>
<input value="Submit Choices" type="submit"/></form></body></html>

在继续之前,让我承认上面的输出是有效的XHTML,因为所有标记都是现有的XHTML标记,格式正确,依此类推(XHTML只是将HTML 4.01重新构造为XML)。 除了空白可能使这一点难以阅读之外,许多旧版浏览器还没有正确解释此页面,这是因为空白标记中的斜杠。 (通常,开发人员只需在斜杠前添加一个空格以防止出现问题,但是处理器并不知道。)

此外,该脚本无法正确执行,因为大于号仍表示为实体( > )。

输出方式

幸运的是,XSLT的设计人员预见到了这个问题,并添加了output元素。 例如,要指定您希望输出文档为HTML,请将输出方法添加到样式表中:

清单5.添加输出方法
<?xml version="1.0"?> 
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
    version="1.0">

<xsl:output method="html" indent="yes" version="4.0"/>

<xsl:template match="/choices">
...

method属性可以采用以下三个值之一: xmlhtmltext

通过使用html作为输出方法,您可以告诉处理器做几件事,包括以下内容:

  • 对于脚本和样式元素,将所有转义字符(例如&> )替换为其实际值(分别为&> )。
  • 对于属性,将所有出现的>替换为>
  • 编写空元素,例如<br><img><input>而不关闭标签或斜杠。
  • 以最小化形式编写通过其存在而不是其值传达信息的属性,例如checkedselected

最终结果是任何浏览器都应该能够处理HTML文档。


翻译自: https://www.ibm.com/developerworks/xml/library/x-tiphtml/index.html

xsl样式表

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值