1 / 33

XML

XML. A Standard for organizing data. Used for Exchanging data between systems. For organizing Hierarchical data. Used to define X HTML. XML tags don't have pre-defined meaning. <name>. <major >. Tree Structured Information. Root element. <student-body >. parent of. child element.

camden
Download Presentation

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. XML A Standard for organizing data. Used for Exchanging data between systems. For organizing Hierarchical data. Used to define XHTML. XML tags don't have pre-defined meaning.

  2. <name> <major > Tree Structured Information Root element <student-body > parent of child element <student> siblings <address > multiple children <state > <street> <zipcode> <city> Web site – XML CSS DTD Link - like student5.xml

  3. HTML Page <html > <body> <head> <h1 > <p> <table> <title> <script> <row> <cell>

  4. Venn Diagram View student-body student address name street zipcode city state major

  5. XML eXtended Markup Language Hierarchical data XML Defines XML structure DTD Access XML data HTML Document Type Definition Eg: Live xml or RSS feeds Web site – CSS and XML Examples - under XML CSS DTD Link

  6. SAMPLE xml FILE be careful ! root element <?xml version="1.0" ?> tag opens <student-body> </student-body> <student> </student> tag opens <name> Harry Houdini </name> <major> IT </major> <address> </address> <street> 5th Avenue </street> <zipcode> 00707 </zipcode> <city> NY </city> <state> NY </state> tag closes more students <student> ... </student> tag closes children of address element

  7. Define Structure of xml file by DTD – Document Type Definition

  8. DTD governing file Cross-referenced File xml - lists data (tree-like) xml data file DTD defines underlying structure (of xml data)

  9. Frequency Notation *0 or more times exactly once exactly once <student*> ? 0 or once <major?> <name> + one or more addresses <student-body > <address+> <state > <street> <zipcode> <city>

  10. DTD -governs structure root element of tree Multiplicity notation 0 or 1 majors allowed Subordinate fields consists of one or more students <?xml version="1.0" ?> <!ELEMENT student-body (student+)> Endpoint – no children <!ELEMENT student (name, major?, address+)> <!ELEMENT name (#PCDATA)> <!ELEMENT major (#PCDATA)> <!ELEMENT address (street, zipcode, city, state> <!ELEMENT street (#PCDATA)> <!ELEMENT zipcode (#PCDATA)> <!ELEMENT city (#PCDATA)> more subordinates <!ELEMENT state (#PCDATA)>

  11. Cross-references B.dtd XML refers to DTD <!DOCTYPE student-body SYSTEM "B.dtd"> A.xml DTD refers to XML root <!ELEMENT student-body (student+)>

  12. Html syntax to access xml data

  13. Multiple cross-references CSS file DTD file html file can access data in xml file Html file refers to style sheet html file xml data file

  14. xml (tree structured) data Html access to xml data Level 0 <student-body> Level 1 <student> Level 2 <major > <name> <address> Level 3 <street> <zipcode > easier to access from html harder to access from html

  15. How does Html access xml data?

  16. <student-body> <student> <major > <name> Accessing name & major Link to xml data: Data Island <body> <xmlid="stuff" src = "B.xml" /> Local name for xml file <table datasrc = "#stuff " > </table> <tbody> <tr> </tr> </tbody> Identifies data source for table (or other element) Table: - 1 row per student - 2 cells per row <td> Student's name: </td> <td> <div dataFld = "name" /> </td> <td> Student's major: </td> <td> <div dataFld = "major" /> </td> template data element to retrieve dataFld attribute only 1 template row Web site –XML CSS DTD Link - like student6.xml

  17. id internal name for file src external xml file <body> HTML Syntax <xmlid="stuff" src = "B.xml" /> <table datasrc = "#stuff " > </table> datasrcinternal reference to xml file <tbody> <tr> </tr> </tbody> <td> Student's name: </td> <td> <div dataFld = "name" /> </td> <td> Student's major: </td> <td> <div dataFld = "major" /> </td> dataFld xml element accessed See CSS XML Topics.doc

  18. Cross-references B.xml C.css D.dtd To reference css in html <style type = "text/css"> @import "C.css" ; </style> To reference xml file in html <xml id="stuff" src = "B.xml" /> A.html To reference DTD in xml <!DOCTYPE student-body SYSTEM "D.dtd">

  19. DTD Errors Omit <state> NY </state> from student4.xml - triggers no error - same if add an extra gpa Omit <zipcode> 44 </zipcode> from student5.xml - triggers no diagnostic error - but html retrieval now fails – even though address not requested Omit a <major> from student6.xml wrong name - again triggers no error - but retrieval still fails in html – even though major not requested Alter: <!DOCTYPE student-body SYSTEM "student14.dtd"> - browser says can't find resource Web site – CSS and XML Examples - under XML-and-CSS menu

  20. Viewing XML html for accessing xml data as records viewed sequentially CSS and XML Examples - under XML-and-CSS menu - like student7.html

  21. <head><script type="text/javascript"> xml data island function movenext ( ) { r=stuff.recordset ; if (r.absoluteposition < r.recordcount) { r.movenext( ) } Move xml records thru element windows function moveprevious ( ) { r=stuff.recordset ; if (r.absoluteposition > 1) { r.moveprevious ( ) } </script></head><body> Navigation buttons <xml id="stuff" src = "student5.xml" > </xml> Name: <spandatasrc = "#stuff" dataFld = "name" > </span><br> Major: <div datasrc = "#stuff" dataFld = "major" > </div> <br> <input type="button" value="Previous student" onclick="moveprevious ( )" /> <input type="button" value="Next student" onclick="movenext( )" /> Web site – CSS and XML Examples - under XML-and-CSS menu – student7.html

  22. function movenext ( ) { r = stuff.recordset ; if (r.absoluteposition < r.recordcount) { r.movenext ( ) } function moveprevious ( ) { r=stuff.recordset ; if (r.absoluteposition > 1) { r.moveprevious ( ) } advance view to next record in data island ( span & div ) test if scan past r's last record data island's xml records are available in r <input type="button" value="Previous student" onclick="moveprevious ( )" /> <input type="button" value="Next student" onclick="movenext( )" />

  23. function movenext ( ) { r = stuff.recordset ; if (r.absoluteposition < r.recordcount) { r.movenext( ) } function moveprevious ( ) { r=stuff.recordset ; if (r.absoluteposition > 1) { r.moveprevious ( ) } move next record from data island into view current r record don't fall past right end records from external xml source #stuff number of records in r <input type="button" value="Previous student" onclick="moveprevious ( )" /> <input type="button" value="Next student" onclick="movenext( )" />

  24. r = stuff.recordset built-in properties & methods for navigating thru xml records r.absoluteposition r.recordcount r.movenext ( ) Html tags & attributes <xml id = "stuff" src = "student5.xml" <span <div <table datasrc = internal name for xml file dataFld = element's name

  25. Live XML data feeds accessing xml data on the Internet

  26. <xml id="stuff1"src="http://www.nws.noaa.gov/data/current_obs/KNYC.xml" ></xml> Location: <spandatasrc = "#stuff1" dataFld = "location" ></span><br> Temperature: <spandatasrc = "#stuff1" dataFld = "temp_f" > </span><br> Windspeed: <spandatasrc = "#stuff1" dataFld= "wind_mph"> </span><br> Humidity: <spandatasrc ="#stuff1" dataFld="relative_humidity"></span><br> XML element name in KNYC.xml updated every 15 minutes - Live CSS and XML Examples - XML-and-CSS menu - Kroge00.html – also Kroge01,02,03

  27. http://www.nws.noaa.gov/data/current_obs/KNYC.xml Relatively flat XML file

  28. CSS-XML-Examples student3.xml student5.html student5.xml student5.dtd images.html .xml student7.html student5.xml student5.dtd http://www.w3schools.com/xml/xml_applications.asp http://www.nws.noaa.gov/data/current_obs/KNYC.xml http://www.nws.noaa.gov/data/current_obs/KMIA.xml

  29. Miscellaneous XML Access Problems

  30. Challenge Variation Replace endpoint element Name with: <Name> HTML table below pulls data from XML file and Shows Student Names & GPAs. <firstName> </lastName > data from different levels in the tree Cascading Style Sheet governs paragraph, body, and Table tags. Document Type definition file defines XML syntax.

  31. Notes on Challenge <roster> Outer table - with single row - has cell for the GPA - like in basic example. <student> table datasrc = roster <Name> <GPA > cell: dataFld=GPA <firstName> <lastName > table datasrc=roster datasrc=name Nested inner table is inside 2nd cell in the single row of the outer table.The inner table itself has same format as the outer table…but with the extra datasrc attributes shown. cell: dataFld=firstName cell: dataFld=lastName

  32. McHugh: See Notes on CSS and XML on web site Some key examples: HTML - exampleF03b1.html - exampleF03b3.html - exampleF03b5.html & sheet2.css XML - student1,2,3,4.xml XML data binding - partsList.xml, parts.html DTD - student5.xml, student5DTD.dtd Also links to w3schools etc. Sebesta: XML pages CSS pages

  33. Simple html data capture file: Style classes referenced Note <tbody> tags single row element – others generated automatically by browser Link to style class <HTML><HEAD> <link rel = stylesheet type = "text/css" href = "d.css" </link> </HEAD> <BODY class = "class4"> <xml id="internalName" src = "b.xml" /> <p class=class3> remarks </p> <table class="class2" datasrc = "#internalName " > <tbody> <tr> <td> ...label... </td> <td> <div dataFld = "xmlElement-1" /> </td> <td> ...label... </td> <td> <div dataFld = "xmlElement -2" /> </td> </tr> </tbody> </table> </BODY> </HTML>

More Related