1 / 23

Introduction to XML

Introduction to XML. Please use speaker notes for additional information!. <?xml version="1.0" encoding="UTF-8" standalone="yes" ?> <!-- Data on Childrens Books --> <HALLBOOKCASE> <TITLE>Books in the hall bookcase</TITLE> <SUBJECT>Talking Animal <AUTHOR>Thorton Burgess</AUTHOR>

mara-blankenship
Télécharger la présentation

Introduction to XML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introduction to XML Please use speaker notes for additional information!

  2. <?xml version="1.0" encoding="UTF-8" standalone="yes" ?> <!-- Data on Childrens Books --> <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>

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

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

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

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

  7. <?xml version="1.0" encoding="UTF-8" standalone="yes" ?> <!-- Data on Childrens Books --> <?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.

  8. 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; }

  9. This is from my hard drive. This is from the brinkster web site.

  10. <?xml version="1.0" ?> <!-- Data for Payroll --> <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

  11. <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; }

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

  13. <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).

  14. <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; }

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

  16. Binding the recordset to the table. 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; } <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> Each data field is listed in a separate cell on the same line.

  17. <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; }

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

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

More Related