To read the article online, visit http://www.4GuysFromRolla.com/webtech/081300-2.3.shtml

Using XSL Stylesheets to Translate XML into HTML, Part 3

By Arno Jansen


  • Read Part 1
  • Read Part 2

  • In Part 2 we examined the full XSL stylesheet. In this third and final part of this article, we will look at extending the stylesheet to provide more options for our HTML output...

    Now suppose we want the message to be displayed using another font, e.g. Arial, we can put in the plain HTML for it (<FONT FACE="arial">), but we can also create it using XSL, which is preferred in some more complex ways. First we have to create the element itself:

    <xsl:element name="font">

    Then, we add the FACE attribute to it:

    <xsl:attribute name="face">arial</xsl:attribute>

    Now we want the message text to appear:

    <xsl:value-of select="."/>

    And finally, we have to close the element tag again:

    </xsl:element>

    Now, the whole template for the message tag will be:

    <xsl:template match="message">
      <xsl:element name="font">
        <xsl:attribute name="face">arial</xsl:attribute>
        <xsl:value-of select="."/>
      </xsl:element>
    </xsl:template>
    

    Now, translating to an HTML form is not all that different, the main difference is in the template that treats the memo tag. This template will have to write out not only an HTML header and footer, but also open and close the form. In between the opening and closing tags of the form will be the <xsl:apply-templates/> tag. Let's have a look at the template for the memo tag:

    <xsl:template match="memo">
      <html>
        <head>
          <title>XML/XSL memo example by Arno Jansen</title>
        </head>
        <body>
        <form name="theform" action="savememo.asp" method="post">
          <xsl:apply-templates />
        <br/>
        save as: <input type="text" name="saveas"/> 
        <input type="submit" value="Save As"/>
        </form>
        </body>
      </html>
    </xsl:template>
    

    As you can see, it is mostly just HTML that's put in there. Please be aware of the fact that all the "empty" tags (the ones that do not have a separate closing tag) end with /> instead of just the > (e.g. <INPUT ... /> instead of <INPUT ... >) There is also an extra textbox so that the user can enter a filename and later save the file with that name.

    Now, similar to this we can translage the other tags in the XML document into HTML form objects. For the FROM, TO and SUBJECT I chose to use a normal textbox. Basically this is the same for all three tags, so I'll explain just the FROM tag. Again, we use a normal XSL template tag. This time with a match pattern for the FROM tag. And once in there we want to create a textbox with the name "from" and the value must be the text between the <FROM> and </FROM> tags in the XML file. So we have to create an element with the name "input" and two attributes, one "name" attribute and one "value" attribute. And here is how we do that:

    <xsl:template match="from">
      <xsl:element name="input">
        <xsl:attribute name="name">from</xsl:attribute>
        <xsl:attribute name="type">text</xsl:attribute>
        <xsl:attribute name="value"><xsl:value-of select="."/></xsl:attribute>
      </xsl:element>
    </xsl:template>
    

    As you can see, this is not rocket science but there are a few things we have to keep an eye on. First thing is to make sure not only open the <xsl:element> tag, but also close it. Second is that everything between a <xsl:attribute> and </xsl:attribute> becomes the value of the attribute. So when we create the name attribute, we give it the value "from". Most tricky part here is the third attribute, the value attribute. Between the opening and closing tag of that attribute, we select the value of the current node, which is the text of the message tag, so that the textbox will be filled with the text from the file when it appears on screen. That whole template will translate into this in the HTML:

    <INPUT TYPE="text" NAME="from" VALUE="whatever was between the <MESSAGE> and </MESSAGE> tag in the memo.xml file"/>

    Again, we can see the forward slash before the closing bracket. That is how the stylesheets translate the memo into HTML. Now, which stylesheet we pick depends on a parameter that is passed to an ASP file that will parse both the XML document and one of the two stylesheets, but more on that in the main article.

    Happy Programming!

  • Arno Jansen


    Attachments:

  • Download the stylesheets, XML files, and ASP pages discussed in this article (in ZIP format)
  • Online Content Creation using ASP, XML and XSL


  • Article Information
    Article Title: Using XSL Stylesheets to Translate XML into HTML, Part 3
    Article Author: Arno Jansen
    Published Date: Sunday, August 13, 2000
    Article URL: http://www.4GuysFromRolla.com/webtech/081300-2.3.shtml


    Copyright 2017 QuinStreet Inc. All Rights Reserved.
    Legal Notices, Licensing, Permissions, Privacy Policy.
    Advertise | Newsletters | E-mail Offers