XML

1. Introduction

eXtensible Mark-up Language (XML) tries to extend HTML by

· Allowing users to invent their own tags

· Making distinct

· The data content of a page held in an XML file

· How to display a page held in either i) a CSS file or ii) an XSL file or

iii) by using the XML DOM

· The structure of the data held in either i) a DTD file or ii) an XML-

Schema file. We can also manipulate structure of

the data using the XML DOM

We can visualise this as follows

Dynamic HTML has already accepted that we can divorce content from display via. Cascading Style Sheets (CSS), whereby we have the content (and implied structure) in an .html file and the display in a .css file

Document Type Definition (DTD) and XML-Schema files both define the rules that an XML file must follow and an eXtensible Style Language (XSL) file defines how an XML file is to be displayed. DTDs are dying and Schema are taking over.

We can thus see that the overall structure of this course will be to define how to construct a) XML b) DTD c) XSL files. Later we will consider a) XML-Schemas, and b) CSS + XML c) the XML Document Object Model (DOM) and d) Connecting Databases via XML.

XML is a growing subject (changing by the minute), and as of April 2002, could be considered to now have the following components.

2. A complete example

Here is an XML file (stock.xml) and here is its associated DTD (stock.dtd)

<?xml version="1.0"?>

<!DOCTYPE stock SYSTEM “stock.dtd”>

<stock>

<book>

<title> A First XML Book </title>

<author email="h.lafferty@shu.ac.uk">

Hugh Lafferty

</author>

<publisher>Wrox Press Ltd</publisher>

<price>29.99</price>

<qoh>30</qoh>

</book>

</stock>

<!ELEMENT stock (book)+>

<!ELEMENT book (title, author, publisher, price, qoh)>

<!ELEMENT title (#PCDATA)>

<!ELEMENT author (#PCDATA)>

<!ATTLIST author email CDATA #REQUIRED>

<!ELEMENT publisher (#PCDATA)>

<!ELEMENT price (#PCDATA)>

<!ELEMENT qoh (#PCDATA)>

Here is the XML file (slightly modified) and here is its associated XML-Schema (StockSchema.xml)

3. Software needed

At the moment there is not one simple/cheap software solution to integrating the above 3 components, and we are going to use 2 pieces of free software

· Validate.htm to check that an .xml file obeys the structural rules defined in a .dtd file

· Internet Explorer 5 (IE5) to display XML either via CSS or XSL or the XML DOM

We can visualise this as follows

Hopefully, in the future, IE6? (and other browsers) will be enabled to integrate all 3 components.

You need to consider the last line very carefully.

Do we really need to send 3 files every time we want to transmit some XML?
If the XML is produced by a program, why do we need to check its structure every time?
XML files can be up to 10 times as long as their flat-file equivalents
Does the ability to invent your own tags add 'meaning' to the data?
Since the tags are almost never going to be seen by humans why bother making them readable?

XML-Schema have changed rapidly, and for this 1st lecture we will show an outdated version of them because then we only need 1 program (viz. validate.htm). Later on we will show the new version of XML-Schema and download a tool (viz. XSV) that allows them to be validated.

ACTIVITY a. On F: drive create a directory called XMLTutorials

4. An XML file is a text file that obeys simple rules

ACTIVITY 1. Use Notepad to construct the following file and save it as

F:\ XMLTutorials \stock.xml (Be careful NOT to save it as a .txt file. Hopefully you know that saving it as “stock.xml” i.e. with quotes round it prevents it being saved as a .txt file )

The question marks identify a Processing Instruction (PI)

<?xml version="1.0"?>

<stock>

<book>

<title> A First XML Book </title>

<author email="h.lafferty@shu.ac.uk">Hugh Lafferty </author>

<publisher>Wrox Press Ltd</publisher>

</book>

</stock>

We note a number of things about this file that apply to all XML files

1. It must start with <?xml version=“1.0”?> NOTE. IE5 lets you get away with this

2. The question marks (?) imply that this in an XML Processing Instruction (see PI later)

3. XML is case sensitive

4. There is one (and one only) root tag. In this case <stock>

5. All tags must be accompanied by a closing tag. BUT, there is a shorthand for tags that have no content (apart, maybe for attributes) e.g. <book title=“War and Peace”/>

6. Tags must be nested sensibly, and not overlap

7. Attributes values must be enclosed on quotes (c.f. email in the above example)

Any XML file that obeys 4..7 above is said to be ‘well-formed’.

To put some ‘flesh’ on the above we cannot get away with the ‘sloppy’ HTML of

XML is CASE SENSITIVE

<HTML>

<HEAD>

</head>

</HTML>

-------------------------------------------------------------------

<HTML>

<HEAD>

</HEAD>

You would have to have an accompanying </p>

<BODY>

<p>This is a paragraph

</BODY>

</HTML>

-------------------------------------------------------------------

Tags must be properly nested

<Book>Contains

<Chapter> and </Book> verse </Chapter>

-------------------------------------------------------------------

To put the above right you would have to write

-------------------------------------------------------------------

Tags must be properly nested

<Book>Contains

<Chapter> and verse </Chapter>

</Book>

-------------------------------------------------------------------

Attribute values must be enclosed in quotes

<TABLE BORDER=1>

-------------------------------------------------------------------

To put this right you would have to write

-------------------------------------------------------------------

Attribute values must be enclosed in quotes

<TABLE BORDER=”1”>

-------------------------------------------------------------------

There is a further rule for well-formedness

8. The text characters (<) (>) and (“) must always be represented by the character entities (<) (>) and (")

5. Is a document well-formed?

Internet Explorer 5 (IE5) has an in-built parser which checks to see if an XML document is well-formed.

ACTIVITY 2. Run stock.xml through IE5 and this is what you should see.

NOTE. IE5 has an in-built default XSL stylesheet that causes this ‘pretty-printing’

ACTIVITY 3. Remove the / from </book> and save again in stock.xml. Refresh IE5 and this is what you should see.

Now, replace the / and save and run IE 5 again

6. A DTD is a text file that defines the structure of XML files

A Documents Type Definition (DTD) is a text file that describes the structure of one or more XML files. For example, all invoices might have a structure that starts with

· An invoice number (which must be present, and starts with a number with alphanumerics thereafter)

· Followed by a Customer name (all alpha)

· Followed by a Customer Address

· Followed, optionally, by a Customer delivery address

· …

ACTIVITY 4. Type the following into Notepad and save as stock.dtd

(If you want to be lazy, just type in the lines in bold below)

<!ELEMENT stock (book)+>

<!ELEMENT book (title, author, publisher, price, qoh)>

<!ELEMENT title (#PCDATA)>

<!ELEMENT author (#PCDATA)>

<!ATTLIST author email CDATA #REQUIRED>

<!ELEMENT publisher (#PCDATA)>

<!ELEMENT price (#PCDATA)>

<!ELEMENT qoh (#PCDATA)>

7. Is a document valid?

For an XML document to be valid it must have the structure defined by a DTD (or an XML Schema). To check whether an XML file is valid or not we have to run a piece of software that compares an XML file with a DTD. A piece of free software is validate.htm, which we give you, will do just this for you. It is called a validating parser. The code for validate.htm is shown in Appendix 1which consists mainly of Javascript.

ACTIVITY 4a. Copy validate.htm to F:\ XMLTutorials

ACTIVITY 5. a) add the following !DOCTYPE line to stock.xml

This just says where the DTD is

<?xml version=”1.0”?>

<!DOCTYPE stock SYSTEM “stock.dtd”>

<stock>

…rest of XML mark-up

</stock>

Can you remember what PI means?

b) Run stock.xml against stock.dtd by running validate.htm and this is what you should see

8. An XML-Schema is also a text file that defines the structure of XML files

ACTIVITY 5 a. Copy the following into F:\ XMLTutorials \stocka.xml

<?xml version="1.0"?>

<book>

<title> A First XML Book </title>

Hugh Lafferty

</author>

<publisher>Wrox Press Ltd</publisher>

</book>

</stock>

ACTIVITY 5 b. Copy the following into F:\ XMLTutorials \StockSchema.xml

<?xml version="1.0"?>

<Schema name="StockSchema"

xmlns="urn:schemas-microsoft-com:xml-data"

xmlns:dt="urn:schemas-microsoft-com:datatypes">

</ElementType>

</ElementType>

<description> The root of the stock of books </description>

</ElementType>

</Schema>

ACTIVITY 5c. Modify validate.htm so that it will 'see' these files

ACTIVITY 5d. Run stocka.xml throug validate.htm to see whether it is valid

9. An XSL file is a text file that describes how to display an XML file

An XSL file is a text file that contains formatting instructions for how to display an XML file.

ACTIVITY 6. Type the following into Notepad and save as xsl1.xsl

XSL documents are also XML documents

<?xml version="1.0"?>

An XSL document must be declared as a stylesheet

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

<xsl:template>

<TABLE>

<THEAD>

<TH>Title</TH>

<TH>Author</TH>

<TH>Publisher</TH>

<TH>Price</TH>

<TH>Quantity</TH>

</THEAD>

Select individual records of type ‘book’ from the set of records that are of type ‘stock’

<xsl:for-each select="stock/book">

<TR>

Place named ‘fields’ into separate cells of this row of the table

<TD><xsl:value-of select="title"/></TD>

Repeat for every ‘record’ in the XML file

</TR>

</xsl:for-each>

</TABLE>

</xsl:template>

</xsl:stylesheet>

ACTIVITY 7. Make a copy of stock.xml and call it stock1.xml

ACTIVITY 8. Add the line shown in bold to stock1.xml

This just says where the XSL is

<?xml version="1.0"?>

<?xml:stylesheet type="text/xsl" href="xsl1.xsl"?>

<stock>

<book>

<title> A First XML Book </title>

<author email="h.lafferty@shu.ac.uk">Hugh Lafferty </author>

<publisher>Wrox Press Ltd</publisher>

</book>

</stock>

ACTIVITY 9. Run stock1.xml through IE5 and this is what you should see

ACTIVITY 10. Add a few more records to stock1.xml and save as stock2.xml as shown below

<?xml version="1.0"?>

<?xml:stylesheet type="text/xsl" href="xsl1.xsl"?>

<stock>

<book>

<title> A First XML Book </title>

<author email="h.lafferty@shu.ac.uk">Hugh Lafferty </author>

<publisher>Wrox Press Ltd</publisher>

</book>

<book>

<title>A Second XML Book</title>

<author email="oz@shu.ac.uk">Ozoemenam Ezenwa</author>

<publisher>Oxford University Press</publisher>

</book>

<book>

<title>A Third XML Book</title>

<publisher>Marks & Spencer</publisher>

</book>

<book>

<title>What is xHTML</title>

<publisher>Oxford University Press</publisher>

</book>

<book>

<author email="oz@shu.ac.uk">Ozoemenam Ezenwa</author>

<publisher>Marks & Spencer</publisher>

</book>

<book>

<title>What is ColdFusion?</title>

<author email="Hugh@shu.ac.uk">Hugh Lafferty</author>

<publisher>Oxford University Press</publisher>

</book>

<book>

<title>I'm still Confused</title>

<author email="Hugh@shu.ac.uk">Hugh Lafferty</author>

<publisher>Oxford University Press</publisher>

</book>

<book>

<title>Another XML Book</title>

<author email="ian@shu.ac.uk">Ian Perry</author>

<publisher>Hodder and Stoughton</publisher>

</book>

</stock>

ACTIVITY 11. Run stock2.html through IE5 and this is what you should see

ACTIVITY 12. Modify the XSL document so that a border appears in the above table.

10. Summary

XML is the way data will be sent round the Internet.

The “Big Picture” is that XML will (in the near future) replace HTML because it will allow heterogeneous applications (e.g. Oracle and SAP) to communicate with each other. It is an improvement over HTML because it separates into 3 files

· Content (XML)

· Structure (DTD or XML-Schema)

· Display (XSL or CSS or via the XML DOM)

1. XML extends HTML by allowing users to define their own tags and divorcing i) content ii) structure iii) display into separate files viz. .xml, .dtd and .xsl

2. The three separate files are all text files.

3. An XML file contains user specified tags and to be well-formed the tags must have corresponding closing tags (with a shorthand), be sensibly nested and all attribute values must enclosed in quotes.

4. IE5 contains an in-built parser to check whether XML files are well formed.

5. A Document Type Definition (DTD) file contains pretty simple rules that define the structure of an XML file.

6. An XML-Schema does exactly the same job as a DTD but a) it follows XML syntax b) can handle very more datatypes (44 rather than 10) c) allows user-defined datatypes to be invented.

7. For an XML file to be valid it must conform to the rules contained in a DTD

8. To-date IE5 does not contain a validating parser, but we used a piece of free software viz validate.htm to validate .xml files

9. An XSL file contains instructions about how to display an XML file. These instructions are relatively complex and are much more powerful than Cascading Style Sheets (CSS)

10. Self-Test

1. What are the major differences between a) HTML b) XML c) Dynamic HTML?

2. In what document are the rules for the structure of a document held

3. What does XML stand for?

4. In what way is XML extensible?

5. What is a Mark-up Language?

6. What is XML a sub-set of?

7. What is XSL? What is its logical function?

8. What is a DTD? What is its logical function?

9. Does Netscape understand XML?

10. What does well-formed mean?

11. What does valid mean in this context?

12. What tools are there to check whether an XML document is well-formed?

13. What tools are there to check whether an XML document is valid?

14. Are there any tools available that can integrate all 3 components associated with an XML document?

15. What are the processes that have to be gone through to link XML and a database?

16. What is XHTML?

17. In <?xml version="1.0"?> what do the question marks mean

18. What is CSS? What is its logical function?

19. What is XSTL?

20. What is XSL-FO?

21.

11. References

11.1. Books

1. “XML Extensible Markup Language” by Elliotte Rusty Harold. Published by IDG Books.1998. ISBN 0-7645-31999-9

Critique. Pretty out of date

NOTE. He has brought out an “XML Bible” which everybody is quoting from, which I have not read yet (Thursday, 14 March 2002)

2. “XML applications” by F. Boumphrey et al. Published by Wrox. 1998. ISDN 1-861001-52-5

Critique. Despite the same date of publication as above it is not so out of date and was a good source for this lecture.

3. “XML Black Book” by N Pitts-Moultis & C Kirk. Published by Coriolis 1999. ISBN 1-57610-284-X. Cost in 1999 £46.99

Critique. It is ridiculously repetitive with not enough examples.

Text Box: 4. “XML IE5. Programmer’s Reference” by Alex Homer. Published by Wrox Press 1999. ISBN 1-861001-57-6

Critique. The best one that I have read so far.

12. Ideas for experiments

1. When you run validate.htm and see an output like the following

Try clicking on a) PI and b) ELEMENT

2. Look into validate.htm and show how you would add further xml and dtd files to the list. NOTE. It is vital that you learn how to do this, as the next lecture needs you to be familiar with this.

3. You should now examine the validate.htm code carefully and see what bits you understand. We will go through the ideas behind this code in a later session.

4. Make sure that you have gone through Activities 1..11 above. The crucial things that you must be familiar with are

a) Saving a DTD file

b) Running a DTD in a browser.

13. TUTORIAL

There are 3 objectives for this tutorial

· Getting used to creating XML files by hand

· Getting used to creating XSL files by hand

· Getting used to creating DTD files by hand

1. Create an xml file (and run it in IE 5) that will allow something like the following to be displayed

Fruit	Price per unit	Unit
Navel Oranges	£1.45	pound
Strawberries	£0.50	punnet
Limes	£0.30	each
Potatoes	£1.90	stone

NOTE. You might like to try creating 2 versions for the above a) one not containing attributes b) one containing attributes. This should cause you to ask “Which way is better?”

2. Create an xml file (and run it in IE 5) that will allow something like the following to be displayed

Film: Raising Arizona

Writers: Ethan Coen

Joel Coen

Producer: Ethan Coen

Director: Joel Coen

Actors: Holly Hunter

John Goodman

Harry King

Type: Comedy

Rating: PG-13

Year: 1987

Comment: A classic one-of-a-kind screwball love story

Film: Midnight Run

Writers: George Gallo

Producer: Martin Brest

Director: Martin Brest

Actors: Robert De Niro

Charles Grodin

Type: Comedy

Rating: R

Year: 1988

Comment: The quintissential road comedy

NOTE. You might like to try creating 2 versions for the above a) one not containing attributes b) one containing attributes.

3. Create an XSL file that allows the version of question 1 that does not contain attributes to be displayed.

4. Create a DTD to test the version of question 1 that does not contain attributes to be displayed.

· Test it against validate.htm (this will mean modifying validate.htm )

· Then use the XSL file created in 3. above that will allow the xml to be displayed

5. Create a DTD to test the version of question 1 that does contain attributes.

· Test it against validate.htm (this will mean modifying validate.htm )

6. a) Create a DTD to test the version of question 2 that does not contain attributes to be displayed.

b) Create a DTD to test the version of question 2 that does contain attributes to be displayed.

7. Create an xml file (and run it in IE 5) that will allow information about the hardware of a computer system (PC) to be displayed. This should fit in well with the ‘hardware spec.’ being built during the Comms. Networks Unit.

8. Create an xml file (and run it in IE 5) that will allow information about the software of a computer system (PC) to be displayed. This should fit in well with the ‘software spec.’ being built during the Comms. Networks Unit.

9. Create an xml file (and run it in IE 5) that will allow both 3. and 4. above.

10. Create an xml file (and run it in IE 5) that will allow bus timetables to be displayed.

Appendix 1. The code for validate.htm

<HTML>

<HEAD>

<STYLE>

.xml {font-size:10pt;font-family:Arial;cursor:hand}

.tag {color:purple; font-weight:bold;cursor:hand}

.attribute {color:blue; font-weight:bold;cursor:hand}

.attrvalue {color:magenta; font-weight:bold;cursor:hand }

.comment {color:green; font-weight:bold;cursor:hand }

.pi {color:brown; font-weight:bold;cursor:hand }

h3 { background-color:#80f0c0 }

A:link { color:#003399; text-decoration:none; }

A:visited { color:#6699CC; text-decoration:none; }

A:hover { text-decoration:underline; }

</STYLE>

</HEAD>

var xmldoc;

var xindex;

var NODE_ELEMENT = 1

var NODE_ATTRIBUTE = 2

var NODE_TEXT = 3

var NODE_CDATA = 4

var NODE_ENTITYREF = 5

var NODE_ENTITY = 6

var NODE_PI = 7

var NODE_COMMENT = 8

var NODE_DOCUMENT = 9

var NODE_DOCTYPE = 10

var NODE_DOCFRAG = 11

var NODE_NOTATION = 12

function validate()

{

xmldoc= new ActiveXObject("Microsoft.XMLDOM");

xmldoc.onreadystatechange = HandleReadyState

xmldoc.ondataavailable = HandleData

document.all("XML").innerHTML = "";

ERROR.innerHTML = "";

ERRORSRC.innerText = "";

if (schema.checked)

{

xmldoc.validateOnParse = true;

}

else

{

xmldoc.validateOnParse = false;

}

var url = xmlurl.value;

if (url != "")

{

xmldoc.load(url);

}

else

{

var xml = xmlsrc.value;

if (xml == "")

{

alert("Enter url OR paste XML text");

return

}

xmldoc.loadXML(xml);

}

function HandleData()

{

var count = xmldoc.childNodes.length;

var root = xmldoc.documentElement;

if (root != null)

{

count += root.childNodes.length;

}

ERROR.innerHTML = "Loaded " + count + " nodes";

}

function HandleReadyState()

{

if (xmldoc.readyState == 4)

{

if (xmldoc.childNodes.length == 0)

{

HandleError(xmldoc);

}

else

{

var msg = "Your XML is 'Well Formed'";

if (schema.checked)

msg += " and is also 'Valid'.";

ERROR.innerHTML = msg;

xindex = 0;

DisplayTree(xmldoc, document.all("XML"));

}

function FormatErrorCode(rc)

{

if (rc < 0) rc = (65536*65536) + rc;

return "0x" + rc.toString(16).toUpperCase();

}

function HandleError()

{

var err = xmldoc.parseError;

var msg = "<span class=tag>" + err.reason + "<br>File: " + err.url;

msg += "<br>Line: " + err.line;

msg += ", Position: " + err.linepos;

msg += ", ErrorCode: " + FormatErrorCode(err.errorCode);

msg += "</span>";

document.all("ERROR").innerHTML = msg;

var code = "";

if (err.linepos > 0 && err.srcText != "")

{

code = err.srcText.replace(/\t/g," ") + "\n";

for (var i = 1; i < err.linepos; i++)

{

code += "-";

}

code += "^";

}

document.all("ERRORSRC").innerText = code;

}

function ToggleVisibility(name)

{

var e = document.all(name);

if (e.style.display == "none")

{

e.style.display = "";

xmlurl.value = "";

}

else

{

e.style.display = "none";

}

function DisplayTree(node, html)

{

var id = "x" + xindex++;

html.innerHTML = "<dl class=xml><dt><dd id=" + id + "></dl>";

var dd = html.all(id);

var attributes = node.attributes;

if (attributes != null)

{

for (var child = attributes.nextNode(); child != null; child = attributes.nextNode())

{

AddRow(dd, child);

}

var children = node.childNodes;

for (var child = children.nextNode(); child != null; child = children.nextNode())

{

AddRow(dd, child);

}

function formatNode(type)

{

var types = new Array(

"none", // 0

"ELEMENT", // 1

"ATTRIBUTE",// 2

"TEXT", // 3

"CDATA", // 4

"ENTITYREF",// 5

"ENTITY", // 6

"PI", // 7

"COMMENT", // 8

"DOCUMENT", // 9

"SCHEMA", // 10

"DOCFRAG", // 11

"NOTATION" // 12

);

return types[type];

}

function getNodeName(node)

{

var type = node.nodeType;

var name = "";

if (type == NODE_ELEMENT ||

type == NODE_ATTRIBUTE ||

type == NODE_ENTITYREF ||

type == NODE_PI ||

type == NODE_DOCTYPE ||

type == NODE_ENTITY ||

type == NODE_NOTATION)

name = node.nodeName;

return name;

}

function AddRow(dd, child)

{

var id = "x" + xindex++;

var type = child.nodeType;

var row = "";

if (child.hasChildNodes())

row = "<li style='list-style-type:disc'>";

else

row = "<li style='list-style-type:circle'>";

var hideValue = false;

var style = "xml";

if (type == NODE_ELEMENT)

style = "tag";

else if (type == NODE_ATTRIBUTE)

style = "attribute";

else if (type == NODE_COMMENT)

style = "comment";

else if (type == NODE_PI)

{

if (child.attributes != null)

hideValue = true;

style = "pi";

}

row += "<span class=" + style + " onclick=ToggleRow('" + id + "') ";

row += "onmouseover=MouseMove('over') onmouseout=MouseMove('exit')>";

row += formatNode(type) + ": ";

row += getNodeName(child);

if (!hideValue && child.nodeValue != null )

row += " " + child.nodeValue;

row += "</span><div xstate=0 id=" + id + "></div>";

dd.insertAdjacentHTML("BeforeEnd", row);

// store XML nodes on html elements as expando properties.

var item = dd.children(dd.children.length-1); // the list item.

var div = item.all(id);

div.xml = child;

}

function ToggleRow(divid)

{

var div = XML.all(divid);

if (div.xstate == 0)

{

div.xstate = 1;

DisplayTree(div.xml, div);

}

else if (div.xstate == 1)

{

div.xstate = 2;

div.style.display = "none";

}

else

{

div.xstate = 1;

div.style.display = "";

}

function MouseMove(which)

{

var row;

var color = ((which == "over") ? "yellow" : "");

row = window.event.srcElement;

row.style.backgroundColor = color;

}

</SCRIPT>

<BODY>

<HR>

<H2>

<FONT color="#993300">What do you want to do?

<option value="Stock.xml" selected>Validate 'Stock.xml' (against 'Stock.dtd')</option>

<option value="Weather.xml">Validate 'Weather.xml' (against 'Weather.dtd')</option>

</select>

</FONT>

</H2>

<H3>Click the "Validate" button to see if your XML is "well formed".</H3>

If this box is checked, this form will also check if the XML is 'Valid', against a DTD.</H3>

<HR>

<HR>

</BODY>

</HTML>