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.
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">
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.
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>
- Carey, P (2003) Creating Web Pages with HTML and XML. Thomson Course Technology. ISBN 0-619-10115-6.
|