If you don’t already, start thinking about
designing your Web pages with a single, cohesive theme. You may
recall that in the early days of the Web, cohesiveness was
implemented with server-side includes, which involved a great deal
of laborious file management. Fortunately, as the Web matured, so
did the tools used to create it. For instance, in .NET, you create
Web controls to unify your design.

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.

Keep your developer skills sharp by automatically signing up for TechRepublic’s free Web Development Zone newsletter, delivered each Tuesday.