<?xml version='1.0'?>
<?xml:stylesheet type="text/ xsl" href="article.xsl"?>
<article volume='12' issue='12' page='8' type='tip'>
<title>Tips &amp; Techniques</title>

<abstract><p>This month's Tips and Techniques is designed to get you up and running using <acr def="Extensible Stylesheet Language">XSL</acr>. The new Microsoft Internet Explorer 5 implements an <acr>XSL</acr> processor that allows you to view <acr def="Extensible Markup Language">XML</acr> inside a browser by attaching a style sheet. Here are four short steps to using <acr>XSL</acr> today.</p></abstract>

<section><title>Get the software</title>

<p>Go to the Microsoft <acr def="Internet Explorer">IE</acr> installation area at <access type="url">http://microsoft.com/windows/ie/ie5</access>.</p>

<p>The installation routine could be quite time-consuming on a slow line. The browser installation requires between 8 and 24 megabytes, depending on the options you choose. Microsoft considers <acr def="Extensible Markup Language">XML</acr> to be a critical technology, so they include the <acr>XML</acr> and <acr def="Extensible Stylesheet Language">XSL</acr> processors in all installations.</p>

<p>When you install <acr>IE</acr>5, the <acr def="document object model">DOM</acr> objects and interfaces are loaded into your operating system as <acr>COM</acr> objects. That is, they are accessible to any program in your system, including server-side scripting, Java, Visual Basic, and other development environments. Both the <acr>XML</acr> and <acr>XSL</acr> processors are part of the <acr>DOM</acr>.</p>
</section>

<section><title>Create your <acr>XML</acr> document</title>

<p>Create a valid or well-formed <acr>XML</acr> document. If you can't decide, use the example in <xref id="fig12120801-1"/>. Notice that the example is well-formed; sending valid documents to a browser is overkill.</p>

<p><figure id="fig12120801-1">
<p><code>
&lt;?xml version="1.0"?&gt;
&lt;article&gt;
&lt;title&gt;New High-Viscosity Mayonnaise To Aid In American Swallowing&lt;/title&gt;
&lt;location&gt;Englewood Cliffs, NJ&lt;/location&gt;
&lt;paragraph&gt;The act of swallowing will soon be easier for millions of 
food-shoveling Americans, thanks to QX-1, a revolutionary new high-viscosity/
low-friction mayonnaise developed by scientists at Hellmann's.&lt;/paragraph&gt;
&lt;paragraph&gt;The mayonnaise, which received FDA approval Monday and is set 
to hit the nation's shelves early next month, utilizes special lubricant 
additives and anti-breakdown agents to help keep America's high-intake gullets 
running smoothly and efficiently.&lt;/paragraph&gt;
&lt;paragraph&gt;&lt;quote&gt;Americans' high-load, high-capacity eating puts 
a tremendous amount of stress on the alimentary canal &lt;/
quote&gt;, Hellmann's mayochemical engineer Gerald Lund said. 
&lt;quote&gt;Often, when the canal is overtaxed, it can &lt;quote&gt;seize
up&lt;/quote&gt;, resulting in choking and, in some cases, total eater 
breakdown. QX-1 was formulated with today's harder-working ingestion in 
mind&lt;/quote&gt;.&lt;/paragraph&gt;
&lt;/article&gt;
</code>
</p>
<caption><title><acr>XML</acr> Example</title></caption>
</figure>
</p>

<p>You can verify that this document is well-formed by loading it directly into the <acr>IE</acr>5 browser. When you do, you will see a collapsible representation of it, shown in <xref id="fig12120801-2.gif"/>.</p>
<p>
<figure id="fig12120801-2.gif"><graphic type="gif" name="fig12120801-2.gif"/><caption><title>Example of raw <acr>XML</acr> in browser</title></caption></figure></p>
</section>

<section><title>Create your <acr>XSL</acr> stylesheet</title>

<p>Create an <acr>XSL</acr> stylesheet according to the Microsoft extensions. Yes, Microsoft extensions. There are pieces of the Microsoft <acr>XSL</acr> implementation that are not included in the <acr def="World Wide Web Consortium">W3C</acr> <acr>XSL</acr> working draft. The most obvious change is the lack for the formatting object half of <acr>XSL</acr>. Microsoft suggests integrating "well-formed <acr def="HyperText Markup Language">HTML</acr>" with the <acr>XSL</acr> templates in order to create formatting effects.</p>

<p>If you can't decide, use the stylesheet shown in <xref id="fig12120801-3"/>.</p>
<p>
<figure id="fig12120801-3">
<p>
<code>
&lt;?xml version="1.0"?&gt;
&lt;xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl"&gt;
  &lt;xsl:template&gt;
    &lt;HTML&gt;
      &lt;BODY STYLE="font-family:helvetica;font-size:12pt;"&gt;
        &lt;xsl:apply-templates/&gt;
      &lt;/BODY&gt;
    &lt;/HTML&gt;
  &lt;/xsl:template&gt;
  &lt;xsl:template match="textnode()"&gt;
    &lt;xsl:value-of/&gt;
  &lt;/xsl:template&gt;
  &lt;xsl:template match="paragraph"&gt;
    &lt;P&gt;&lt;xsl:apply-templates/&gt;&lt;/P&gt;
  &lt;/xsl:template&gt;
  &lt;xsl:template match="article/title"&gt;
    &lt;H1 style="color:green;font-size:24pt;font-style:bold"&gt;
      &lt;xsl:apply-templates/&gt;
    &lt;/H1&gt;
  &lt;/xsl:template&gt;
  &lt;xsl:template match="location"&gt;
    &lt;DIV STYLE="text-transform:uppercase;font-size:75%;"&gt;
      &lt;xsl:apply-templates/&gt;
    &lt;/DIV&gt;
  &lt;/xsl:template&gt;
  &lt;xsl:template match="quote"&gt;
    '&lt;xsl:apply-templates/&gt;'
  &lt;/xsl:template&gt;
&lt;/xsl:stylesheet&gt;  
</code>
</p>
<caption><title><acr>XSL</acr> stylesheet</title></caption></figure>
</p>

<p><acr>XSL</acr> works by defining templates that match patterns in the text. Patterns can be as simple as a single element name ("paragraph" in this example), or can be identified by parent ("article/title" means any title that is a direct child of an article element) or many more ways.</p>

<p>Notice that this example contains <acr>HTML</acr> markup (the tags in uppercase) that wrap around some <acr>XSL</acr> elements. The <verbatim>&lt;xsl:apply-templates/&gt;</verbatim> element will recursively apply other templates that are found in the style sheet. For example, the template for the paragraph element outputs a <verbatim>&lt;P&gt;</verbatim> tag with some style information, then has a <verbatim>&lt;xsl:apply-templates/&gt;</verbatim> rule. The paragraph contains other information, (the actual text of the paragraph) which is collected by the <verbatim>textnode()</verbatim> template, which actually processes the text. In this way, templates are recursive.</p>

<p>Notice that our <acr>XML</acr> source has a quote that exists inside of another quote. There are two templates that handle quotes. The one matching the pattern "quote" surrounds the text with double quotation marks. The one matching the pattern "quote/quote" surrounds the text with single quotation marks. The order of these two templates is important, as <acr>XSL</acr> has rules concerning tie-breaking. That is, if more than one template matches a given event in the text, only one is selected. If this happens, the last one wins. So, when a quote comes in that is inside of another quote, the "quote/quote" pattern is matched, selecting the actions that follow. If these two template rules were swapped, the "quote/quote" rule would never be found.</p>
</section>

<section><title>Load it into the browser</title>

<p>You need to indicate to the browser which style sheet the document will use. Add this line to your <acr>XML</acr> document immediately following the <acr>XML</acr> declaration:</p>

<p><code>&lt;?xml:stylesheet type="text/xsl" href="article.xsl"?&gt;</code></p>

<p>Then, just load the <acr>XML</acr> document and see the display shown in <xref id="fig12120801-4.gif"/>.</p>

<p><figure id="fig12120801-4.gif"><graphic type="gif" name="fig12120801-4.gif"/><caption><title><acr>XML</acr> shown in browser with <acr>XSL</acr> stylesheet applied</title></caption></figure></p>

<p>For more information on <acr>XSL</acr> support in the Microsoft browser, see <access type="url">http://microsoft.com/xml/xsl/reference/start.asp</access>.                &lt;end/&gt;</p>
</section>
</article>
