XML和XSLT的转换使Web设计受益无穷。借助XML和 XSLT转换,你可以实现将动态用语(dynamic verbiage)和网站内容存储在数据库中。你可以在XML中传输数据库,然后再通过XSLT转换将其转变为HTML脚本。
在网络发展初期,凝聚性(cohesiveness)是由服务器端实现的,但要牵涉到大量的人工文件治理工作。幸运的是,随着网络的日益成熟,网络开发工具也日臻完善。例如,在.NET框架下,你可以创建各种Web控件来统一设计。
在设计用户/数据交互功能时,如何让数据的完整性、用户界面的功能性和商务规则的完善实现。本文将提供一个网站实例,并说明XML 和XSLT如何使你的网站设计浑然一体。
以下是引用片段
%26lt;html%26gt;
%26lt;head%26gt;
%26lt;/head%26gt;
%26lt;body%26gt;
%26lt;form method="POST" name="thisForm" id="thisForm" action="somepage.php"%26gt;
%26lt;input type="text" name="txtText" id="txtText" size="25"%26gt;%26lt;br%26gt;
%26lt;input type="submit" name="btnSubmit" id="btnSubmit" value="Submit"%26gt;
%26lt;/form%26gt;
%26lt;/body%26gt;
%26lt;/html%26gt;
以上代码段完成了主要功能,但还需用XML和XSLT来对其加以美化。
在XML中,代码有开头和结尾标签,而在HTML中没有。INPUT 和BR标签是个特例,它们不需结尾标签。然而,在结尾标签标记“%26gt;”前加一个正斜杠,可确保HTML符合XML规范。假如在编写HTML脚本时注重遵从这些规范,你就能够将XML/HTML(aka XHTML)转换为不错的HTML页面。
以下是引用片段
%26lt;form method="POST" name="thisForm" id="thisForm" action="somepage.php"%26gt;
%26lt;input type="text" name="txtText" id="txtText" size="25" transform="blueText"/%26gt;
%26lt;br/%26gt;
%26lt;input type="submit" name="btnSubmit" id="btnSubmit" value="Submit"
transform="bigButton"/%26gt;
%26lt;/form%26gt; 运行下列代码,完成XSLT转换
%26lt;?xml version="1.0"?%26gt;
%26lt;xsl:stylesheet
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"
%26gt;
%26lt;xsl:output method="html"/%26gt;
%26lt;xsl:template match="/"%26gt;
%26lt;table width="100%" cellpadding="0" cellspacing="0"%26gt;
%26lt;tr%26gt;%26lt;td align="center"%26gt;This is the defined header%26lt;/td%26gt;%26lt;/tr%26gt;
%26lt;tr%26gt;%26lt;td%26gt;%26lt;xsl:apply-templates select="//form"/%26gt;%26lt;/td%26gt;%26lt;/tr%26gt;
%26lt;tr%26gt;%26lt;td align="center"%26gt;This is the defined footer%26lt;/td%26gt;%26lt;/tr%26gt;
%26lt;/table%26gt;
%26lt;/xsl:template%26gt;
%26lt;xsl:template match="form"%26gt;
%26lt;xsl:element name="form"%26gt;
%26lt;xsl:attribute name="method"%26gt;%26lt;xsl:value-of
select="@method"/%26gt;%26lt;/xsl:attribute%26gt;
%26lt;xsl:attribute name="action"%26gt;%26lt;xsl:value-of
select="@action"/%26gt;%26lt;/xsl:attribute%26gt;
%26lt;xsl:attribute name="name"%26gt;%26lt;xsl:value-of select="@name"/%26gt;%26lt;/xsl:attribute%26gt;
%26lt;xsl:attribute name="id"%26gt;%26lt;xsl:value-of select="@id"/%26gt;%26lt;/xsl:attribute%26gt;
%26lt;xsl:apply-templates select="*"/%26gt;
%26lt;/xsl:element%26gt;
%26lt;/xsl:template%26gt;%26lt;xsl:template match="*"%26gt;
%26lt;xsl:choose%26gt;
%26lt;xsl:when test="@transform='blueText'"%26gt;%26lt;xsl:element name="input"%26gt;
%26lt;xsl:attribute name="name"%26gt;%26lt;xsl:value-of select="@name"/%26gt;%26lt;/xsl:attribute%26gt;
%26lt;xsl:attribute name="id"%26gt;%26lt;xsl:value-of select="@id"/%26gt;%26lt;/xsl:attribute%26gt;
%26lt;xsl:attribute name="type"%26gt;text%26lt;/xsl:attribute%26gt;
%26lt;xsl:attribute name="style"%26gt;color:blue%26lt;/xsl:attribute%26gt;
%26lt;xsl:if test="@value"%26gt;%26lt;xsl:attribute name="value"%26gt;%26lt;xsl:value-of
select="@value"/%26gt;%26lt;/xsl:attribute%26gt;%26lt;/xsl:if%26gt;
%26lt;/xsl:element%26gt;
%26lt;/xsl:when%26gt;
%26lt;xsl:when test="@transform='redText'"%26gt;%26lt;xsl:element name="input"%26gt;
%26lt;xsl:attribute name="name"%26gt;%26lt;xsl:value-of
select="@name"/%26gt;%26lt;/xsl:attribute%26gt;
%26lt;xsl:attribute name="id"%26gt;%26lt;xsl:value-of
select="@id"/%26gt;%26lt;/xsl:attribute%26gt;
%26lt;xsl:attribute name="type"%26gt;text%26lt;/xsl:attribute%26gt;
%26lt;xsl:attribute name="style"%26gt;color:red%26lt;/xsl:attribute%26gt;
%26lt;xsl:if test="@value"%26gt;%26lt;xsl:attribute name="value"%26gt;%26lt;xsl:value-of
select="@value"/%26gt;%26lt;/xsl:attribute%26gt;%26lt;/xsl:if%26gt;
%26lt;/xsl:element%26gt;
%26lt;/xsl:when%26gt;
%26lt;xsl:when test="@transform='bigButton'"%26gt;%26lt;xsl:element name="input"%26gt;
%26lt;xsl:attribute name="name"%26gt;%26lt;xsl:value-of
select="@name"/%26gt;%26lt;/xsl:attribute%26gt;
%26lt;xsl:attribute name="id"%26gt;%26lt;xsl:value-of
select="@id"/%26gt;%26lt;/xsl:attribute%26gt;
%26lt;xsl:attribute name="style"%26gt;height:30px;width:100px;font-
size:18pt;font-weight:700;%26lt;/xsl:attribute%26gt;
%26lt;xsl:attribute name="value"%26gt;%26lt;xsl:value-of
select="@value"/%26gt;%26lt;/xsl:attribute%26gt;
%26lt;/xsl:element%26gt;
%26lt;/xsl:when%26gt;
%26lt;/xsl:choose%26gt;
%26lt;/xsl:template%26gt;
%26lt;/xsl:stylesheet%26gt;
以上代码无法为你实现创建命名空间、定义XML标签、确认DTD或schema。它使你能够创建可行的HTML脚本,并可转化为完整的新页面,无需担心设计因素。
在样式表中,用HTML标签的转换属性驱动转换操作。我曾考虑用一个FORM窗体作为定义转换操作所需的用户控件的单元,因为所有用于用户输入的控件都应在一个FORM中。本例中,输出为一个文本INPUT,文本颜色为蓝色;一个高20像素、宽100像素的按钮,字体为18点加粗。我们可以通过修改转换属性来改变文本框中的文本颜色。
有多种方法可将静态内容添加到网页中本例中只采用最简单的方式,即在样式表中增加header和footer。
现在,要创建一个新窗体用于用户输入时,要做的只是创建一个一般窗体。一旦一般窗体通过测试,就可以将这些窗体添加到转换中生成主题的HTML输出。你只要记住输入控件类型,并注重把它添加为转换属性即可。
