Home >Backend Development >XML/RSS Tutorial >The combination of XML and XSLT makes website design seamless
The combination of XML and XSLT makes website design seamless
- 黄舟Original
- 2017-02-27 16:23:341748browse
The conversion of xml and XSLT benefits web design immensely. With XML and XSLT transformations, you can store dynamic verbiage and website content in a database. You can transfer the database in XML and then convert it into HTML script through XSLT transformation.
In the early days of network development, cohesiveness was achieved on the server side, but it involved a lot of manual file management work. Fortunately, as the web matures, so do web development tools. For example, under the .NET framework, you can create various Web controls to unify the design.
When designing user/data interaction functions, how to achieve data integrity, user interface functionality and business rules perfection. This article will provide an example of a website and explain how XML and XSLT can make your website design seamless.
The following is a quotation fragment:
<html> <head> </head> <body> <form method="POST" name="thisForm" id="thisForm" action="somepage.php"> <input type="text" name="txtText" id="txtText" size="25"><br> <input type="submit" name="btnSubmit" id="btnSubmit" value="Submit"> </form> </body> </html>
The above code fragment has completed the main function, but it still needs to be processed using XML and XSLT beautify it.
In XML, code has opening and closing tags, but in HTML there is none. INPUT and BR tags are special cases, they do not require a trailing tag. However, adding a forward slash before the closing tag tag ">" ensures that the HTML conforms to the XML specification. If you pay attention to following these specifications when writing HTML scripts, you can convert XML/HTML (aka XHTML) into good HTML pages.
The following is a quote fragment:
<form method="POST" name="thisForm" id="thisForm" action="somepage.php"> <input type="text" name="txtText" id="txtText" size="25" transform="blueText"/> <br/> <input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" transform="bigButton"/> </form> 运行下列代码，完成XSLT转换： <?xml version="1.0"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0" > <xsl:output method="html"/> <xsl:template match="/"> <table width="100%" cellpadding="0" cellspacing="0"> <tr><td align="center">This is the defined header</td></tr> <tr><td><xsl:apply-templates select="//form"/></td></tr> <tr><td align="center">This is the defined footer</td></tr> </table> </xsl:template> <xsl:template match="form"> <xsl:element name="form"> <xsl:attribute name="method"><xsl:value-of select="@method"/></xsl:attribute> <xsl:attribute name="action"><xsl:value-of select="@action"/></xsl:attribute> <xsl:attribute name="name"><xsl:value-of select="@name"/></xsl:attribute> <xsl:attribute name="id"><xsl:value-of select="@id"/></xsl:attribute> <xsl:apply-templates select="*"/> </xsl:element> </xsl:template><xsl:template match="*"> <xsl:choose> <xsl:when test="@transform='blueText'"><xsl:element name="input"> <xsl:attribute name="name"><xsl:value-of select="@name"/></xsl:attribute> <xsl:attribute name="id"><xsl:value-of select="@id"/></xsl:attribute> <xsl:attribute name="type">text</xsl:attribute> <xsl:attribute name="style">color:blue</xsl:attribute> <xsl:if test="@value"><xsl:attribute name="value"><xsl:value-of select="@value"/></xsl:attribute></xsl:if> </xsl:element> </xsl:when> <xsl:when test="@transform='redText'"><xsl:element name="input"> <xsl:attribute name="name"><xsl:value-of select="@name"/></xsl:attribute> <xsl:attribute name="id"><xsl:value-of select="@id"/></xsl:attribute> <xsl:attribute name="type">text</xsl:attribute> <xsl:attribute name="style">color:red</xsl:attribute> <xsl:if test="@value"><xsl:attribute name="value"><xsl:value-of select="@value"/></xsl:attribute></xsl:if> </xsl:element> </xsl:when> <xsl:when test="@transform='bigButton'"><xsl:element name="input"> <xsl:attribute name="name"><xsl:value-of select="@name"/></xsl:attribute> <xsl:attribute name="id"><xsl:value-of select="@id"/></xsl:attribute> <xsl:attribute name="style">height:30px;width:100px;font- size:18pt;font-weight:700;</xsl:attribute> <xsl:attribute name="value"><xsl:value-of select="@value"/></xsl:attribute> </xsl:element> </xsl:when> </xsl:choose> </xsl:template> </xsl:stylesheet>
The above code cannot create a namespace, define XML tags, confirm DTD or schema for you. It enables you to create working HTML scripts that can be transformed into complete new pages without worrying about design considerations.
In the style sheet, use the conversion attribute of the HTML tag to drive the conversion operation. I have considered using a FORM form as the unit for defining the user controls required for conversion operations, since all controls for user input should be in a FORM. In this example, the output is a text INPUT, the text color is blue; a button 20 pixels high and 100 pixels wide, with an 18-point bold font. We can change the text color in the text box by modifying the transform property.
There are many ways to add static content to a web page. In this example, we only use the simplest way, which is to add header and footer to the style sheet.
Now, when you want to create a new form for user input, all you have to do is create a regular form. Once the general forms pass the test, these forms can be added to the transformation to generate the HTML output of the theme. All you need to do is remember the input control type and be sure to add it as a conversion property.
The above is the content of the combination of XML and XSLT to make the website design integrated. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!