Introduction to Web Design - 18. XML

Introduction to Web Design - 18. XML - Meaning and More
18.1 Well-Formed and Validated \| 18.2Fields,Records and RecordSets \| 18.3Displaying RecordSets in HTML Tables
Preface Markup Languages – A Definition and Some History Beginning HTML HTML Lists HTML Tables HTML - Color, Fonts and Special Characters HTML Links HTML Images HTML Frames Cascading Style Sheets MicroSoft PhotoDraw JavaScript HTML Forms and Form Handling VBScript MicroSoft FrontPage Active Server Pages Java Applets XML Macromedia Flash 5.0 References	In Section 2, XML is describe as a meta language. That is a language to describe other languages. Section 2 demonstrates this functionality of XML with the DTD (document type definition) 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 HTML 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 HTML 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 HTML 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 HTML 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. See Section 10 for more on Cascading Style Sheets. 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. 18.1 Well-Formed and Validated Both current versions of Netscape and Internet Explorer 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 . Currently, only IE does validation checks on XML files. If we want the browser to validate the XML code with a DTD (document type definition), 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”> 18.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. 18.3 Displaying RecordSets in HTML Tables XML files containing a record, or a recordset can be linked to an HTML file. The XML file containing the information is then called the data island* . When Internet Explorer encounters a link to an XML data island, it will store in the information as a Data Source Object (DSO). The DSO supplies the data from the data island to the webpage. The author of the HTML 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. Please note that the following examples work only with Internet Explorer. To link an XML recordset to an HTML file, include a line like the following xml tag to the body of the HTML 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 HTML 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 HTML 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 HTML 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 HTML 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 HTML 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 HTML 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 Carey, P (2003) Creating Web Pages with HTML and XML. Thomson Course Technology. ISBN 0-619-10115-6.

Introduction to Web Design - 18. XML - Meaning and More

18.1 Well-Formed and Validated | 18.2Fields,Records and RecordSets | 18.3Displaying RecordSets in HTML Tables

In Section 2, XML is describe as a meta language. That is a language to describe other languages. Section 2 demonstrates this functionality of XML with the DTD (document type definition) 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 HTML 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 HTML 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 HTML 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 HTML 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. See Section 10 for more on Cascading Style Sheets. 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.

18.1 Well-Formed and Validated

Both current versions of Netscape and Internet Explorer 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 . Currently, only IE does validation checks on XML files.

If we want the browser to validate the XML code with a DTD (document type definition), 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”>

18.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.

18.3 Displaying RecordSets in HTML Tables

XML files containing a record, or a recordset can be linked to an HTML file. The XML file containing the information is then called the data island . When Internet Explorer encounters a link to an XML data island, it will store in the information as a Data Source Object (DSO). The DSO supplies the data from the data island to the webpage. The author of the HTML 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. Please note that the following examples work only with Internet Explorer.

To link an XML recordset to an HTML file, include a line like the following xml tag to the body of the HTML 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 HTML 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 HTML 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 HTML 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 HTML 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 HTML 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 HTML 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


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

Cynthia J. Martincic
cynthia.martincic@email.stvincent.edu
CIS Department
Saint Vincent College
Latrobe, PA 15650