Leo : Examples Screenbook Maker XSLT

The page that you are looking is an HTML page created by the Screenbook Maker program. Screenbook Maker makes it easy to create online tutorials with screenshots. It also automatically creates tables of contents, full text search pages, rdf files, and other resources.

Before Screenbook Maker created this HTML page that you are reading now, however, it saved all of the text of this tutorial in an XML file. Then, it generates the HTML for this page from an XSLT template. But Screenbook Maker doesn't just create one HTML view of the tutorial. Screenbook Maker looks in the bookshelf folder (the folder containing the screenbook tutorials) for XSLT files. For every XSLT file that it finds there, it generates a different tutorial output.

An XSLT template file is a text file that contains XSLT (a specialized language) instructions and other output text. A processor is used to take the XML file for the tutorial and create an output file based on the XSLT instructions and text in the XSLT template.

Let's take a look at what this means in practice. Here is a screenshot from the first page of one of the Windows 2000 Tutorials in the evisa.com Screenbook Library.

Each folder containing HTML pages for a screenbook tutorial has the file sbook.xml , which contains all of the text and image names for the tutorial. If we change the url, we can see the xml file.

Here we've closed up some of the XML elements to make it easier to see the structure of this screenbook's XML. You can see that it contains a number of page elements.

Here we've opened up the first page element. You can see that each page element contains the page text and other information for the page.

Now we've returned to the first page of the tutorial, and will look at the Bookshelf table of contents.

Now the bookshelf table of contents is displaying.

Here you can see that there is a menu to choose other tutorial formats. We will choose Titles with Thumbnails.

You can see that now the same tutorial is being displayed in thumbnail format.

We saw in a previous screen that there are five different tutorial formats that can be chosen from. Each of these formats consists of HTML pages output from processing the XML file we saw previously.

There is also another XML file to be aware of, that for the Bookshelf. A bookshelf is a folder that contains multiple tutorials. When Screenbook Maker creates a tutorial, it automatically updates a file called sbooktoc.xml in the Bookshelf folder where the screenbook is stored.

Here is a view of the xml file for the Bookshelf we are examining.

So, we've seen that we've got at least two XML files, and numerous output files that must be produced. All output is produced by XSLT templates. Screenbook Maker is distributed with XSLT templates for all the output formats shown, and more. Each output format corresponds to one XSLT file.

Since Screenbook Maker users have access to the XSLT files, they can easily change the way an output format looks by editing the XSLT. For example, if you want to put a banner ad at the top of every HTML page in slide view, you simply edit the XSLT template that creates the slide version of the screenbook.

The only problem is, how is the average user to be able to figure out which of the many XSLT files to edit? And, since users may not know XSLT, how can the XSLT files be distributed and explained in such a way that the anyone who knows HTML will be able to edit the XSLT templates which produce HTML output?

There are basically only two possible solutions:

- Hire a team of programmers to create a fancy WYSYWIG editor that allows users to make some, but not all, of the changes they could make by editing the XSLT directly.
- Use Leo to distribute, categorize and explain the XSLT in such a clear fashion that any intelligent user who knows HTML will be able to edit the XSLT to produce any kind of HTML output that they want. More advanced users will be able to add completely new output formats.

Since at this point Screenbook Maker is a free program produced by a single programmer, option #1 is not realistic.

Here is a view of the sbstylesheets.leo file that comes with Screenbook Maker. If you would like to look at this file, download and install Screenbook Maker.

You can see that there are a number of categories. The node highlighted contains all of the XSLT templates for the XML in a single screenbook folder, that is, the XSLT for the tutorial formats.

When we expand the node for the XSLT templates for a screenbook, we can see that there are numerous files, one for each format.

Let's look at the first template. This is the one that creates the slide view format (one HTML page per screenbook page).

There is a directive here that may be new to you: this is the @first directive. This allows you to specify that the following text will be written to the target file first before any Leo sentinel lines. This is necessary since the XSLT format requires that the <?xml?> declaration be the first line of the file.

Now let's look at the main template node. You can see that it contains some XSLT instructions (with the special <files> element used by Screenbook Maker to break a single XML input file into multiple output files), plus the <html></html> elements, plus a couple of subsections.

At this point there are probably two main reactions by the reader:

XSLT experts: A lightbulb should be going on over your head at this point. That's right, this is the holy grail of XSLT development - the tool that makes XSLT as easy to read as any other language. XSLT is an extremely powerful tool, but XSLT templates can be very difficult to read. That makes it harder to for multiple people to work on a single template. No WYSYWIG tool will ever beat Leo in terms of making XSLT readable, and by using real XSLT, you get all of its power. (Still not a convinced fanatic? Move ahead to the DHTML Grid example, and see if you can imagine doing that one in anything but Leo).

Average Users: If you know HTML, but don't XSLT, hang on - you'll see that Leo makes the structure of the XSLT so transparent that you can make substantial changes to the output format without even glancing at the actual XSLT instructions.

To recap what the XSLT is doing, it is reading the sbook.xml file, and on the basis of that, outputting some HTML. It does this by

- Executing some XSLT instructions and
- Copying verbatim the HTML tags in the XSLT template

So now let's look at the << head >> element. Well hey... this is mostly just HTML! Want to change the stylesheet the screenbook will point to? Just edit the link here.

Hmm.. the <body> tag doesn't have much in it... suppose our goal is to add a banner ad to the output. That would probably be in the node entitled "layer 1".

Now we are looking at the "layer 1" node. There are some xsl (XSLT) elements at the beginning of the code. We'll just ignore those. We can see that the next thing is a <div> tag. Then, there is a table. The div tag's position is one pixel from the top, so this must be the first thing on the page. If we want to put in a banner add, we can just move this div tag down and put another div tag or table in front of it. Or, we could add another row to that first table.

After we make our changes and save the leo file, we can have Screenbook Maker regenerate our tutorials using this new XSLT template. We may have to come back and change some more HTML since this template is using absolute positioning, but you can see that it is basically a matter of editing HTML.

And for each change you make, you can add a Leo node, documenting your change for others in your organization who will be working with these files.

A further note for XSLT developers. Since the Leo file contains a library of XSLT templates for manipulating the XML generated by Screenbook Maker, when you want to add a totally new output format, all you need to do is add a new XSLT file, and you already have examples of just about every possible useful expression you could need for extracting from the XML using XSLT.

In the screenshot here, we can see that there is a file name toc_imsmanifest.xml.xsl. Screenbook Maker will use this XSLT file to create a file named imsmanifest.xml. The format for this xml is taken from Microsoft's LRN Resource, meaning that this bookshelf will now be SCORM compliant, since it will have a properly formatted imsmanifest.xml file. In other words, adding SCORM compliance (an industry standard for online training structure) consisted of:

1. examining Micorsoft's LRN format
2. using the same XSLT elements as in other files in this Leo tree to extract the data from the bookshelf XML and output to the LRN format.

Text Author: Joe Orr Copyright 2002 All Rights Reserved
Created with ScreenBook Maker Last update: 8/3/2002 Additional Trademark and Copyright Information