Learning:
The Journey of a Lifetime
A Cloud Chamber of the Mind

April 2006 Technology Notebook

I am going to try creating a set of steps with screen captures to document the basic ideas of XML and XSL using Stylus Studio.

Begin by opening Stylus Studio and select New Project from the Projects menu. This sets up a new area within the computer for storing all the files associated with the new project.

From the View menu, select Project Window.

This will display the files associated with this project.

From the File menu, select New -> XML Document.

You will then see the contents of a new XML file:

At the moment there is one line of code.

At the bottom of the window there are four tabs:

Toggle among them to see different displays of the same file. Text shows the actual XML code where one can see the actual tags that are created by Stylus Studio. Use the Text tab to begin creating the structure of the data file.

I plan to create a very basic data file that contains a small amount of information about my bird watching activities while in Australia. I begin by creating a tag that will contain all of my data, which I will call ausbirds.

Stylus Studio uses different colors to represent different XML properties. One of the basic rules for XML is that every tag must have a corresponding ending tag. Let's begin typing </ - as soon as Stylus Studio senses that you are creating a closing tag, it automatically completes the expression for you.

This is the smallest possible XML data file. It actually does not contain any data, but is simply the name of the data that is to be created.

The next step is to indicate that this file will contain a number of "records", one for each bird that I see. Place the cursor at the end of line 2 of the code and press Enter. Then press the Tab key to indent the next line and type the tag <bird>

Now add the end tag.

In a similar manner I now want to indicate the various "fields" that I will have for each bird I see.

At this point I have defined the overall structure of the data file. At any time I can check that my XML satisfies all of the rules of XML syntax by clicking on the check well-formed icon.

I will receive a message such as the following:

At this point it is a good idea to save this file. I will call it ozbirds4 to indicate to me that this is part of Project4. Then I will add this file to the Project:

The Project window now indicates that this file is part of the project.

So far, so good. I have now created a Project and have created one file in it, called ozbirds4. This file consists of a set of XML tags that defines the structure of the data that I will add shortly. I have also verified that this file conforms to all of the syntactic rules of a well-formed XML file.

The next step is to add a schema file that specifies the nature of the data that is to be added to each field. A schema file. This serves the same purpose as a Document Type Definition (DTD) but provides for a more detailed specification. A schema file is an XML file.

The following approach seems to be a relatively easy way to create a schema file using Stylus Studio. First open the XML data file and create one record using typical data.

Then select XML -> Create Schema from XML content

Specify a path for saving the schema file, and click on the OK button.

Stylus Studio creates an xsd file (the schema file) and links it to the XML file. This is now line 2 of the code in the XML file.

Click on the Schema tag at the bottom of the window to see a diagram of the schema.

Note that most fields are defined as integer, string or any URI.

One may now have Stylus Studio check on the validity of the XML file. This is a check that all data conforms
to the specification in the schema file. One does this by clicking on the Validate Document icon when viewing the text tab.
(Since the schema was created from this data, there should be no errors.)

At this point I have created a valid XML data file that satisfies the criteria created in the schema file. I can continue to add data to this file at any time using the Grid layout for convenience and can check my work for validity.

The remaining step is to create a stylesheet file for displaying this data on the web. This will involve creating the stylesheet file using the XSLT Editor within Stylus Studio and then applying it to the XML data file to create a new XHTML file that can be interpreted by a browser.

• XSL stands for Extensible Stylesheet Language.
  
  
• XSLT stands for Extensible Sylesheet Language Translator. The XSLT processor reads the XSL instructions (called a stylesheet) and creates a new XML or HTML file from the original XML data file that can then be read by a browser and thus display the data according to the commands in the XSL file. The stylesheet may copy, omit, and reorganize data in the source document, as well as add new data (such as headings). Thus the XSL file operates on the original XML data file to create a new XML/HTML file suitable for use by a browser.
  
  
• The XSLT processor uses a language called XPath to determine which nodes to apply the following instructions to.
  
  
• Stylesheets are themselves XML documents. As such they contain a series of XSLT elements and attributes. There are about 40 elements in the XSLT language.
  
  
• The first element of a stylesheet must be the element

  <xsl:stylsheet ... followed by a specification of the version of XSL that is being used. For example: xmlns:xsl="http:///www.w3.org/1999/XSL/Transform" version="1.0" >

  All stylesheet elements must be placed between the opening and closing tag for this element.

• The next element should be a template element. This is the element that uses XPath syntax to specify the node in the XML document that the subsequent XSL elements will apply to.

  <xsl:template ... followed by both a specification for describing the node for which the following commands are to be applied to as well as these actual commands that specify what to do.

  One common specification is the match="pattern" where pattern specifies the nature of the node.

  Example:

  <xsl:template match = "/"> (this identifies the root node)
  ...
  </xsl:template>

Begin by selecting File -> New -> XSLT: Text Editor

One then sees the following window:

Give the Scenario a name and then browse to the URL for the source XML file.

Click on the OK button.

Stylus Studio creates a new stylesheet and displays it in the XSLT Editor:

This default stylesheet creates one template which matches the root node of the corresponding XML data file.

Click on the Preview Result icon.

Stylus Studio displays a Save As window:

Type in an appropriate name and click on the Save button.

Stylus Studio applies the new stylesheet to bookstore.xml and displays the result in the Preview window. The result, displayed in the Preview window, has no contents because the template that matches the root node is empty.

In the Stylus Studio tool bar, click on the Save icon.

This is the completion of the steps for creating a very basic stylesheet.

What remain is further detail on the options available for stylesheets.