Introduction to XML Please use speaker notes for additional information!

Introduction to XML

Please use speaker notes for additional information!

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?><HALLBOOKCASE> <TITLE>Books in the hall bookcase</TITLE> <SUBJECT>Talking Animal <AUTHOR>Thorton Burgess</AUTHOR> <TITLE>The Adventures of Reddy Fox</TITLE> <TITLE>The Adventures of Peter Rabbit</TITLE> <TITLE>The Adventures of Lightfoot the Deer</TITLE> <TITLE>The Adventures of Buster Bear</TITLE> <TITLE>The Adventures of Jimmy Skunk</TITLE> </SUBJECT> <SUBJECT>Pioneer Life <AUTHOR>Laura Ingles Wilder</AUTHOR> <TITLE>Little House on the Prairie</TITLE> </SUBJECT> <SUBJECT>Colonial Times <AUTHOR>Alice Turner Curtis</AUTHOR> <TITLE>A Little Maid of Bunker Hill</TITLE> <TITLE>A Little Maid of Virginia</TITLE> </SUBJECT></HALLBOOKCASE>

As you can see, I opened books1.xml from my A drive into Netscape. This is how it appears.

As you can see, I opened books1.xml from my A drive into Explorer. This is how it appears.

I clicked on the minus sign next to subtract and it reduced to just the element SUBJECT. If I click on the plus sign that is now there, the SUBJECT will expand to include the information beneath it.

I have now made the ELEMENT for Books in the hall bookcase <CATEGORY>

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?><?xml-stylesheet type="text/css" href="bookscss.css" ?><HALLBOOKCASE> <CATEGORY>Books in the hall bookcase</CATEGORY> <SUBJECT>Talking Animal <AUTHOR>Thorton Burgess</AUTHOR> <TITLE>The Adventures of Reddy Fox</TITLE> <TITLE>The Adventures of Peter Rabbit</TITLE> <TITLE>The Adventures of Lightfoot the Deer</TITLE> <TITLE>The Adventures of Buster Bear</TITLE> <TITLE>The Adventures of Jimmy Skunk</TITLE> </SUBJECT> <SUBJECT>Pioneer Life <AUTHOR>Laura Ingles Wilder</AUTHOR> <TITLE>Little House on the Prairie</TITLE> </SUBJECT> <SUBJECT>Colonial Times <AUTHOR>Alice Turner Curtis</AUTHOR> <TITLE>A Little Maid of Bunker Hill</TITLE> <TITLE>A Little Maid of Virginia</TITLE> </SUBJECT></HALLBOOKCASE>

This XML code is seen using the bookscss.css style sheet.

CATEGORY { color:navy; font-size:16pt; font-weight:bold; display:block; }SUBJECT { color:red; font-size:14pt; display:block; }

Partial style sheet.

CATEGORY { color:navy; font-size:16pt; font-weight:bold; display:block; }SUBJECT { color:red; font-size:14pt; display:block; }AUTHOR { color:green; font-size:12pt; display:block; margin-left:10pt; }TITLE { color:black; font-size:12pt; text-decoration:underline; display:block; margin-left:30pt; }

This is from my hard drive.

This is from the brinkster web site.

<?xml version="1.0" ?><PERSONNEL> <EMPLOYEE> <FIRST_NAME>Stephen</FIRST_NAME> <LAST_NAME>Daniels</LAST_NAME> <DEPT>Sports</DEPT> <JOB>Reporter</JOB> <SALARY>50000</SALARY> </EMPLOYEE> <EMPLOYEE> <FIRST_NAME>Al</FIRST_NAME> <LAST_NAME>Richards</LAST_NAME> <DEPT>Engineering</DEPT> <JOB>Consultant</JOB> <SALARY>95000</SALARY> </EMPLOYEE> <EMPLOYEE> <FIRST_NAME>Jennifer</FIRST_NAME> <LAST_NAME>Ames</LAST_NAME> <DEPT>Foreign</DEPT> <JOB>Consultant</JOB> <SALARY>55000</SALARY> </EMPLOYEE> <EMPLOYEE> <FIRST_NAME>Sarah</FIRST_NAME> <LAST_NAME>Grant</LAST_NAME> <DEPT>Scientific</DEPT> <JOB>Web</JOB> <SALARY>50000</SALARY> </EMPLOYEE>

<EMPLOYEE> <FIRST_NAME>Carl</FIRST_NAME> <LAST_NAME>Hersey</LAST_NAME> <DEPT>Foreign</DEPT> <JOB>Consultant</JOB> <SALARY>60000</SALARY> </EMPLOYEE></PERSONNEL>

payroll.xml

<html><head><title>Fall River Management</title><style>body { background:beige; }#Page_Header { font-style:bold; font-size: 26pt; text-align:center; color:brown; }#Sub_Header { font-style:bold; font-size: 22pt; text-align:center; color:brown; }#List_Header { font-size:16pt; color:brown; border-bottom: solid 1 brown; }table { color:brown; border:solid thin brown; }

.fortable { border:solid thin brown; bordercolordark:brown; bordercolorlight:brown; width:300pt; }.forbutton { color:beige; background:brown; }</style><body>

<xml id="Personnel_Data" src="payroll.xml"></xml><p id="Page_Header">Fall River Management</p><p id="Sub_Header">777 Elsbree Street<br>Fall River, MA</p><p id="List_Header">Personnel List</p><table class="fortable"> <tr> <td class="fortable">First Name:</td> <td class="fortable"><span datasrc="#Personnel_Data" datafld="FIRST_NAME"></span></td> </tr> <tr> <td class="fortable">Last Name:</td> <td class="fortable"><span datasrc="#Personnel_Data" datafld="LAST_NAME"></span></td> </tr> <tr> <td class="fortable">Department:</td> <td class="fortable"><span datasrc="#Personnel_Data" datafld="DEPT"></span></td> </tr>

This line establishes the link between what I will call Personnel_Data in my code and the actual data file which is called payroll.xml.

For each table column where I want to put data from the XML file, I specify the connection to Personnel_Data and the name of the field on the XML data file.

<tr> <td class="fortable">Job:</td> <td class="fortable"><span datasrc="#Personnel_Data" datafld="JOB"></span></td> </tr> <tr> <td class="fortable">Salary:</td> <td class="fortable"><span datasrc="#Personnel_Data" datafld="SALARY"></span></td> </tr> </table><br /><br /><br /> <button class="forbutton" onClick="Personnel_Data.recordset.moveFirst()">First</button> <button class="forbutton" onClick="Personnel_Data.recordset.movePrevious(); if (Personnel_Data.recordset.BOF) Personnel_Data.recordset.moveFirst()"> Previous</button> <button class="forbutton" onClick="Personnel_Data.recordset.moveNext(); if (Personnel_Data.recordset.EOF) Personnel_Data.recordset.moveLast()"> Next</button> <button class="forbutton" onClick="Personnel_Data.recordset.moveLast()">Last</button></body></html>

Note the if statement checking to see if moving back you go past the beginning of the file (BOF) and moving backward you go past the end of the file (EOF).

th { border:solid thin beige; background: brown; color: beige; width:80pt; }.fortable { border:solid thin brown; bordercolordark:brown; bordercolorlight:brown; width:400pt; }.forcell { border:solid thin brown; text-align:center; width:80pt; }.forbutton { color:beige; background:brown; }</style><body><xml id="Personnel_Data" src="payroll.xml"></xml><p id="Page_Header">Fall River Management</p><p id="Sub_Header">777 Elsbree Street<br>Fall River, MA</p><p id="List_Header">Personnel List</p>

<table class="fortable" datasrc="#Personnel_Data"> <thead> <th>First Name</th> <th>Last Name</th> <th>Department</th> <th>Job</th> <th>Salary</th> </thead> <tr> <td><span class="forcell" datafld="FIRST_NAME"></span> </td> <td><span class="forcell" datafld="LAST_NAME"></span> </td> <td><span class="forcell" datafld="DEPT"></span> </td> <td><span class="forcell" datafld="JOB"></span> </td> <td><span class="forcell" datafld="SALARY"></span> </td> </tr></table></body></html>

Note that I set up style for th in the style section - here is a copy:th { border:solid thin beige; background: brown; color: beige; width:80pt; }

Each data field is listed in a separate cell on the same line.

Binding the recordset to the table.

th { border:solid thin beige; background: brown; color: beige; width:80pt; }.fortable { border:solid thin brown; bordercolordark:brown; bordercolorlight:brown; width:400pt; }.forcell { border:solid thin brown; text-align:center; width:80pt; }.forbutton { color:beige; background:brown; }</style><body><xml id="Personnel_Data" src="payroll.xml"></xml><p id="Page_Header">Fall River Management</p><p id="Sub_Header">777 Elsbree Street<br>Fall River, MA</p><p id="List_Header">Personnel List</p>

<table class="fortable" datasrc="#Personnel_Data" id="persTable" datapagesize="2"> <thead> <th>First Name</th> <th>Last Name</th> <th>Department</th> <th>Job</th> <th>Salary</th> </thead> <tr> <td><span class="forcell" datafld="FIRST_NAME"></span> </td> <td><span class="forcell" datafld="LAST_NAME"></span> </td> <td><span class="forcell" datafld="DEPT"></span> </td> <td><span class="forcell" datafld="JOB"></span> </td> <td><span class="forcell" datafld="SALARY"></span> </td> </tr></table><br /><br /><br /> <button class="forbutton" onClick="persTable.firstPage()">First</button> <button class="forbutton" onClick="persTable.previousPage(); if (Personnel_Data.recordset.BOF) persTable.firstPage()"> Previous</button> <button class="forbutton" onClick="persTable.nextPage(); if (Personnel_Data.recordset.EOF) persTable.lastPage()"> Next</button> <button class="forbutton" onClick="persTable.lastPage()">Last</button></body></html>

This gives the table an id name and establishes the datapagesize at 2.

Navigating pages.

Introduction to XML Please use speaker notes for additional information!

Documents

Transcript of Introduction to XML Please use speaker notes for additional information!