Design more cohesively with XML and XSLT
The biggest benefit to Web design, however, was the introduction of XML and XSLT transformations. With XML and XSLT transformations, you can store the dynamic verbiage or site content in a database. Then, you can transport the database in XML and transform it to HTML through an XSLT transformation. In this article, I'll provide an example of site content and demonstrate how XML and XSLT can help you bring together your site's design.
When I design user/data interaction, I'm mostly concerned with the integrity of the data, the functionality of the user interface, and the implementation of business rules. The last thing on my mind is what color I'll be using for a button. This is where designers normally add their skills; however, designers are few and far between, which means developers usually handle the design tasks as well.
When designing any brand new page, I usually introduce the bare minimum needed to accomplish the UI task. This could simply be a textbox and a Submit button. So, for my HTML page in this case, I add two INPUT tags to accomplish this task:
<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>
This creates what I need to get the job done, but its aesthetics leave much to be desired. This is where XML and XSLT come in handy.
HTML is just a few steps away from being proper XML. In XML, every opening tag requires a closing tag; that's not the case in HTML. INPUT and BR tags are two examples of tags that don't require a closing tag. However, adding a forward slash just before the final tag-closing token -- the ">" -- ensures that that HTML follows the conventions of XML. When you create your HTML, if you follow these conventions, you could transform the XML/HTML--aka XHTML--to a well laid out HTML page:
<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 this through the following XSLT transformation:
<?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>
This code doesn't get into the finer points of creating your own namespace, defining your own XML tags, validating against the DTD or schema, and re-inventing the wheel. It just gives us the ability to create workable HTML that you can later transform into a completely new page without worrying about the design aspects.
In my stylesheet, I chose to drive the transformation with a transform attribute on the HTML tag. I considered a FORM to be the unit for identifying user controls that needed to be transformed. This makes sense since all the controls that are applicable for user input should be located within a form. In this example, the output will be a text INPUT with its text color set to blue and a button that is 20 pixels high and 100 pixels wide with an 18-point, bold font. I could change the color of the text in the textbox by changing the transform attribute.
There are plenty of ways to add static content to the page, but I chose the simplest route for this demonstration, which is to add the header and footer in the stylesheet.
Now, anytime I want to create a new form for user input, all I have to do is create the generic form. Once the generic form tests okay, I can add that form to the transformation to produce the themed HTML output. This makes it easy since all you have to do is remember what style of input control you want and add that as transform attribute.
There are innumerable ways to tackle this same concept, but through this example, I hope I've stirred up your creative processes to help you think about adding a method to standardize your HTML output.
Phillip Perkins' experience ranges from machine control and client server to corporate intranet applications.