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

最新推荐文章于 2021-05-07 10:55:04 发布

cuyi7076

最新推荐文章于 2021-05-07 10:55:04 发布

阅读量679

点赞数 1

文章标签： java html python css javascript ViewUI

原文链接：https://www.ibm.com/developerworks/xml/library/x-tiphtml/index.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允许您省略某些结束标记（例如input和br ），并最小化根据属性的存在而评估的某些属性值（例如， 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属性可以采用以下三个值之一： xml ， html或text 。

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

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

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

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

xsl样式表

cuyi7076

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫