Web design benefits greatly from the transformation of XML and XSLT. 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 this involved a lot of manual file management. 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 complete data integrity, user interface functionality, and business rules. This article will provide an example of a website and explain how XML and XSLT can make your website design seamless.
Here is a quote:
<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 snippet completes the main function, but it needs to be beautified with XML and XSLT.
In XML, code has opening and closing tags, while in HTML there are not. 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.
Here is a quote:
<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> Run the following code to complete the XSLT conversion:
<?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, the transformation attribute of the HTML tag is used to drive the transformation 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.