XML is described as a meta language. That is, a language to describe other languages. Section 2 demonstrates this functionality of XML with the DTD for a book, repeated here with the addition of a new parent element "reviewedbooks".

<!-- reviewedbooks.dtd -->

<!DOCTYPE reviewedbooks
[
<!ELEMENT reviewedbooks ( book+)>
<!ELEMENT book ( title, author+, publisher, isbn, review*)>
<!ELEMENT title ( #PCDATA)>
<!ELEMENT author ( firstname, lastname, flag)>
<!ELEMENT firstname ( #PCDATA)>
<!ELEMENT lastname ( #PCDATA)>
<!ELEMENT flag ( EMPTY)>
<!ATTLIST flag gender ( M | F ) "F">
<!ELEMENT publisher ( #PCDATA)>
<!ELEMENT isbn ( #PCDATA)>
<!ELEMENT review ( #PCDATA)>
]
>

The use of the DTD above without the addition of the new element, was demonstrated in Section 2 with the following book description.

<?xml version = "1.0" encoding="UTF-8" standalone="yes"?>
<!-- gwtw.xml -->
<!DOCTYPE book SYSTEM "book.dtd">

<book>
<title>Gone with the Wind</title>
<author>Margaret Mitchell </author>
<publisher>Warner Books</publisher>
<isbn>0446365386</isbn>
<review>
Sometimes only remembered for the epic motion picture
and "Frankly ... I don't give a damn," Gone with the Wind
was initially a compelling and entertaining novel. …
</review>
</book>

An important difference between XHTML and XML, is that with XML, an author can define and then use tags to mark up a document that are indicative of the content between the tags. An XHTML document containing the same book information might look as follows:

<html>
<head>
<title> Gone with the Wind Info </title>
</head>
<body>
<h2>Gone with the Wind</h2>
<emp>Margaret Mitchell</emp>
<br />
Warner Books ISBN 0446365386
<br />
<h4> Review </h4>
Sometimes only remembered for the epic motion picture
and "Frankly ... I don't give a damn," Gone with the
Wind was initially a compelling and entertaining novel. …
</body>
</html>

The XHTML markup tags describe how the content should appear in a browser, but give no indication of the meaning of the content.


The reverse is true of the XML version of the book information. The XML tags describe the meaning, but not how the document should appear in a browser. In fact, if you open the XML document in a browser, you will see all of the tags included in the browser window. Click on the links to take a look at the XHTML file and the XML file in your browser window. Note also, that in the XML file, the reference to the DTD has been commented out for now.


If we wanted to add more reviewed books to the XML file, we first need to specify another element that will serve as the "parent" element for the file. This is because XML files can have only one element as the parent element. All other elements in the file are child elements of that parent, or of another child of that parent element. In this file, two more reviewed books have been added as well as parent element, <reviewedbooks>.


In order to make the XML file more visually appealing, we can link this file to a style sheet. To link the XML file to a style sheet, we can add the following line to the XML file, where "revdbooks.css" is the name of the style sheet file.


<?xml-stylesheet type="text/css" href="revdbooks.css">


The style sheet file looks like this:

<!-- style sheet for reviewedbooks -->

TITLE { font-size: 2em; font-style: bold;
text-decoration: underline; margin-top: 1em}
ISBN { font-style: italic}
AUTHOR { color: blue; font-style: bold}
REVIEW { font-size: 0.8em}

The result is a much more appealing appearance in the browser. Click here to see the results.


16.1 Well-Formed and Validated

The browser will check to see if an XML file conforms to the XML specification defined by W3C, that is, they check to see if the XML file is well-formed. If a DTD is being used, the browser should also check to see that the XML in the file satisfies the rules defined in the DTD. That is, the browser checks to see if the XML file is valid.


If we want the browser to validate the XML code with a DTD, we also need to add a line to the XML file, specifying the DOCTYPE, which must have the same name as the root element of the XML file, and in which file the browser can locate the DTD.

<!DOCTYPE reviewedbooks SYSTEM "reviewedbooks.dtd">

16.2 Fields, Records and RecordSets

A field is an element that holds one piece of data or information. A record is a collection of fields that are related. Each book in the XML file can be considered a record, and the information associated with each book is contained in the fields, title, author, publisher, ISBN and review. All of the books are encapsulated in a higher level element, reviewedbooks. Reviewedbooks can be considered a recordset, a collection of records.



16.3 Displaying RecordSets in XHTML Tables

XML files containing a record, or a recordset can be linked to an XHTML file. The XML file containing the information is then called the data island . When the browser encounters a link to an XML data island, it will store in the information as a DSO. The DSO supplies the data from the data island to the webpage. The author of the XHTML page can write code to control which records are displayed in the webpage, using the methods of the DSO. Please note that the XML file must be well-formed and valid in order for the DSO to supply data to the webpage. If it is not well-formed and valid, nothing will be displayed and no error message is seen either.


To link an XML recordset to an XHTML file, include a line like the following <xml> tag to the body of the XHTML file. "idname" is an identifier of your choosing. For example, the value for the id attribute used for the book recordset was "booklist":

<xml id="idname" src="URL of XML file"> </xml>

Now that the recordset has been linked to the XHTML file, a table can be constructed to organize the information in the data island. One recordset will be displayed in the table at a time. Buttons will be added which will allow the user to navigate through the recordset using DSO methods.


Construct the table using standard XHTML table element tags. In the example below, a table has been constructed with table heading tags to label the columns. For the content of the data cells in the table, we use a <span> element with the "idname" defined in the <xml> tag above and indicate which data field from the record should be displayed in that cell. For example, to display the title data field from the booklist, the following is used:

<td>
<span datasrc="#booklist" datafld="title"></span>
</td>

Note the pound sign before the recordset idname "booklist". Similar span tags are added for the remaining data fields to be included in the table.


In order for the user to navigate through the recordset, one record at a time, buttons can be defined that will call DSO methods when clicked. For example, to advance to the next record in the recordset, define an XHTML button labeled "Next" that calls the recordset method moveNext(), as seen below.

<button onClick="booklist.recordset.moveNext(); if(booklist.recordset.EOF) booklist.recordset.moveLast()"> Next </button>

This action also includes an if statement that checks to see if we are at the end of the recordset file using EOF, which prevents the moveNext() method from displaying an empty table if the user is at the end of the recordset file and clicks the next button. Similar buttons are added labeled "First", "Previous" and "Last" which call the DSO recordsset methods moveFirst(), movePrevious(), and moveLast() respectively. The button for the previous record also includes an if statement to prevent an empty table from being displayed if the user is on the first record but clicks the "Previous" button. The if{…} statement checks to see if we are at the beginning of the recordset by using BOF.


The entire code for the XHTML table that uses the XML data island is:

<html>
<head>
<title> XML Data Islands</title>
</head>

<body>
<xml id="booklist" src="revdbksdi.xml"></xml>
<table border="1" bordercolordark="blue" bordercolorlight="#CCCCCC" cellpadding="10">
<tr>
<th>
<strong>Title</strong>
</th>
<th>
<strong>Author</strong>
</th>
<th>
<strong>Publisher</strong>
</th>
<th>
<strong>ISBN</strong>
</th>
<th>
<strong>Review</strong>
</th>
</tr>
<tr>
<td>
<span datasrc="#booklist" datafld="title"></span>
</td>
<td>
<span datasrc="#booklist" datafld="author"></span>
</td>
<td>
<span datasrc="#booklist" datafld="publisher"></span>
</td>
<td>
<span datasrc="#booklist" datafld="isbn"></span>
</td>
<td>
<span datasrc="#booklist" datafld="review"></span>
</td>
</tr>
</table>
<br />
<div align="center">
<button onClick="booklist.recordset.moveFirst()"> First</button>
<button onClick="booklist.recordset.movePrevious(); if(booklist.recordset.BOF) booklist.recordset.moveFirst()"> Previous </button>
<button onClick="booklist.recordset.moveNext(); if(booklist.recordset.EOF) booklist.recordset.moveLast()"> Next </button>
<button onClick="booklist.recordset.moveLast()"> Last </button>
</div>
</body>
</html>

If it is desired to view the entire recordset in a table, as opposed to viewing only one record at a time, the xml data island idname can be a value to an src attribute in the beginning <table> tag. That is, the <xml> tag identifying the data island would be included in the body of the XHTML file, and the beginning <table> tag would appear as follows:

<table border="1" bordercolordark="blue" bordercolorlight="#CCCCCC" cellpadding="10" datasrc="#booklist">

The table data cell contents do not need to mention the data island idname, since it is included in the table. The table data cell contents only need to refer to the data field desired. Since all of the data will be displayed in the table, there is no need to include the buttons as above. The entire XHTML code for the table using the same data island above is:

<html>
<head>
<title> XML Data Islands</title>
</head>

<body>
<xml id="booklist" src="revdbksdi.xml"></xml>
<table border="1" bordercolordark="blue" bordercolorlight="#CCCCCC" cellpadding="10" datasrc="#booklist">
<thead>
<th>
<strong>title</strong>
</th>
<th>
<strong>author</strong>
</th>
<th>
<strong>publisher</strong>
</th>
<th>
<strong>isbn</strong>
</th>
<th>
<strong>review</strong>
</th>
</thead>
<tr>
<td>
<span datafld="title"></span>
</td>
<td>
<span datafld="author"></span>
</td>
<td>
<span datafld="publisher"></span>
</td>
<td>
<span datafld="isbn"></span>
</td>
<td>
<span datafld="review"></span>
</td>
</tr>
</table>
</body>
</html>

References

  1. Carey, P (2003) Creating Web Pages with HTML and XML. Thomson Course Technology. ISBN 0-619-10115-6.

Introduction to Web Design by Cynthia J. Martincic :: Credits