University of Bahrain

University of Bahrain

Information Technology College

Computer Science Department

Semester 1, Year 2006/2007

ITCS 373: Class Lab Work

XML1

Instructor: Dr. Eshaa M. Alkhalifa

Today you will write your first XML and XSL scripts but they are not likely to be your last. Use HTML Kit, our wonderful editor, to open a new document. But then delete every single word that is auto generated by the document because your file will be XML and not HTML.

As with HTML an XML file must tell the browser what type of document it contains, in other words it must say something like “Hey, I’m XML don’t read this as if it were HTML” This is done in the document type line.
Start by writing the following;

<?xml version="1.0"?>

<note>

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>

The first line says that this is an XML file. The other tags you can invent as you wish, so this will be a list of notes and these notes are to be sent to someone. They are being sent from someone and they have a heading and a body then the note is complete.
As you can see, we can invent any word to place as a tag. Look at your file now in the Preview window.
You will see all your data where you will see the names of the sender and receiver, heading and body. You will not see the tags. So is this any different from HTML? Clearly no but where did the tags go?
To be able to recognize or see what your tags do, you must add an encoding attribute to the XML doc type. Otherwise, it will not work properly.
Replace the line <?xml version “1.0”?> with the line

<?xml version="1.0" encoding="ISO8859-1" ?>

Now take a look at the Preview window.
If you did not see a change, save your file as test.xml and then go to see the Preview again.
Now, this is a page structure that you are looking at. This means you can click on the little line next to the word note as if you do with any word directory. The reason this is useful, is that you can use a file to write your data, and another to display it. The XML file, is the one that will hold the data, in a structured way. The XSL file as you will learn a bit later is the one that will display it.
Go back to your file test.xml and add another note as follows;

<note>

<to>Mark</to>

<from>Jani</from>

<heading>Urgent</heading>

<body>I am learning more than you in XML!</body>

</note>

Then add a third note as follows;

<note>

<to>Harry</to>

<from>Jani</from>

<heading>HELP</heading>

<body>This script is not doing what I want it to do!</body>

</note>

Save your work and go to the Preview window to see the structure. You get an error. Do you know why?
Every HTML document starts with the tag <HTML> and ends with the tag </HTML>. Here we have no such tag, so XML takes the first tag you write to be the name of the container or box that will hold all other tags. So you have a list of three notes without a box to hold them. Add the tag <mynotes> after the doctype line and the tag </mynotes> at the end of the document. Now go to the Preview window (after saving your work) to see what happened.
Click on the little lines next to each of the notes and see how the structure is displayed clearly. This is the power behind XML.
But..where is our data? In order to see our data that we included in the XML file, we need a way of displaying the file onto a browser window. In HTML we used CSS to describe the general layout of the page. With XML you use XSL.
Open an new document in HTML Kit and type the following

<?xml version='1.0'?>

<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">

<xsl:template match="/">

The first line indicates that this is an xml file (even if it’s a style sheet, it still needs to associate itself with xml). The second line indicates the style sheet type it is, or the standard it is following. This means where the definitions of the style are located. The third indicates that you are writing a template from this point on, which implies that this may be applied once or more than once.
You then type the following;

<html>

<h1>References Data Internal Note</h1>

<xsl:for-each select="mynotes/note">

To: <xsl:value-of select="to" />

From: <xsl:value-of select="from" />

<hr />

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

<hr />

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

</xsl:for-each>

</body>

</html>

You already know how the read the XHTML file so the only new parts are the tags that have XSL in them.
We have a list of notes that are written as part of a unit which is mynotes, so for the output we must write a loop that repeats itself as long as there are notes. You can do this by using <xsl:for-each select="mynotes/note"> and this ends with </xsl:for-each>
So everything that goes between these two tags is repeated for every note tag that appears within the mynotes element. In our case, we only have three notes so the whole list of commands between the tags is repeated three times.
Notice that we do not write how many times the commands are repeated so any change to our XML file by adding new notes will not affect the XSL file and it will still work.
The second type of command that you need to know is

<xsl:value-of select="to" /> This brings the data value associated with the tag “to” and displays it in this position in the XSL output. Notice that XML is case sensitive even on a windows platform which means you must be extra careful. To¹TO¹tO¹to. This is why it is essential to use lower case tags to ensure that they match.

We also forgot to close the template and style sheet tags which can be done by adding these lines

</xsl:template>

</xsl:stylesheet>

Now save your XSL file calling it testxsl.xsl. Save it in the same directory as your XML file.
How can your XML file know which XSL file to refer to when it gets displayed? Just like we did with HTML we must add a line to the XML file to make sure it references our XSL file.
Add this line to your XML file just below the first line that says that this is an xml file <?xml-stylesheet type="text/xsl" href="testxsl.xsl"?> Notice that the file name here is the same as the one I told you to call your xsl file.
See the result of your work in the Preview window.
You should see the following page displayed.