MYOML: Setting Things Up
In this installment of MYOML, we'll get the ball rolling by defining
a minimal set of files
that we will build on for the rest of the series. Once you see how
the overall files are structured, its easier to see how each new piece
fits into place.
Before we get started, you need to figure out if your browser supports
XSLT natively, or if you'll have to install an XSLT processor and do
the conversion manually.
Does your browser support XSLT?
As mentioned in the previous article
there are three ways to render XSLT to HTML:
... then your browser supports XSLT natively. You can continue to
the next section.
If not, or if you saw a screen like this:
Then your browser does not support XSLT. You'll need to set up xsltproc on your machine
in order to perform the conversion manually. For help on doing
that, see this page.
You don't have to read the whole document, just the first part about
xsltproc.
Once you have xsltproc installed on your machine, download
the following files:
Now, at a command prompt you can process the file yourself:
Now when you view test.html you should see the yellow box
on a blue background.
- Manually, by running xsltproc.
- Automatically, with a script on the webhost.
- Automatically, in the user's browser.
$ xsltproc test.xsl test.xml > test.html
Creating the Minimal Files
We're going to start off with three "minimal" files, and build on them
as we go along. The three files are:
Lets look at each of them, a few lines at a time.
- article.xml: The article, in our custom XML format.
- template.xsl: The XSLT template that converts our custom XML into HTML.
- style.css: The stylesheet that tells the browser how to display the HTML.
article.xml
<?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/xsl" href="template.xsl"?> <article> Hello Article! </article>
template.xsl
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<xsl:apply-templates />
</body>
</html>
</xsl:template>
</xsl:stylesheet>
style.css
body {
background: #000055;
color: #ffffff;
}
article.xml
The article follows the format discussed in the previous article.
Eventually, we'll end up with a format that looks like this:
<article>
<section>
<text>
...
</text>
<code>
...
</code>
<text>
..
</text>
... etc. ...
</section>
</article>
template.xsl
The first few lines are boilerplate that you can just copy into
all of your XSLT files. The first line defines this file as an
XML file. The second line denotes the version of the XSLT standard
we are using, and the third pulls in the xmlns namespace. (All XSLT
functions are defined like <xmlns:funcname ...>, so we have
to tell it where the <xmlns:> namespace is defined.)
There is a single template in this file, beginning with the following line:
Each template in the XSLT file operates on a certain portion of the XML file.
The "match" part tells the XSLT parser what
part of the XML file that this template operates on (i.e. a certain tag, or group
of tags). The pattern match="/" means that this
template will be run on the root of the XML document. In other words, this template
controls the overall structure of the output HTML stream.
The contents of this template are copied directly to the output HTML stream, with
the exception of the following tag:
This XSLT instruction tells the XSLT processor to keep applying templates to any
other tags found inside the XML file. Without this, it would stop processing
after matching the root node. We'll see more about that in coming articles.
For now,
it actually does nothing with the <article> tag. If you run xsltproc on this,
you'll see that the <article> tag actually vanishes (because we haven't told the XSLT
processor to do anything with it). Its content is rolled up into the <body> tag,
and styled accordingly. We'll see how to make it do something useful later on.
Also note that in the <head> section of the HTML stream, we've linked to
the CSS stylesheet:
This lets the browser know where to look for the styling information.
Which leads into the next section ...
<?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<xsl:apply-templates />
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
style.css
The final piece is to tell the user's browser how to display the
resulting HTML:
This tells the browser that whenever it sees a <body> tag that it
should style it according to the given rules. That is, it will make the background color
a dark blue (background: #000055;) and the foreground (text) color
white (color: #ffffff;).
We'll look at some more types of containers to stylize next time.
body {
background: #000055;
color: #ffffff;
}
Put it all together
If you save the three files (article.xml, template.xsl, and style.css)
to the same directory, and then load article.xml in your web browser, you should
see the text "Hello Article!" in white, on a blue background.
Now that the basic structure (XML, XSLT, CSS) is in place, it is just a matter of adding
pieces as we go to make the final style. As you can see, it's not just a matter of changing
the XSLT file, or the CSS, or the XML, but a combination of the three working together
that makes for a complete presentation.
If your browser supports XSLT, you can view the final result
here.
The final result should look like:
I'd recommend you download the three files to make sure you can also view
them locally, so you can edit them and try things out.