XML A Standard for organizing data. Used for Exchanging data between systems. Used to define XHTML....

XML

A Standard for organizing data.

Used for Exchanging data between systems.

Used to define XHTML.

For organizing Hierarchical data.

XML tags don't have pre-defined meaning.

<student-body >

<student>

<name> <major >

Tree Structured Information

<address >

<street> <state ><zipcode> <city>

Root element

child element

siblings

multiple children

parent of

Web site – XML CSS DTD Link - like student5.xml

student-body

name

major

address

streetzipcodecitystate

Venn Diagram View

student

Hierarchical data

Defines XML structure

Access XML data

XML

DTD

HTML

eXtended Markup Language

Document Type Definition

XML

Web site – CSS and XML Examples - under XML CSS DTD Link

Eg: Live xml or RSS feeds

SAMPLE xml FILE

root element

<?xml version="1.0" ?>

<student-body>

</student-body>

<student>

</student>

<street> 5th Avenue </street><zipcode> 00707 </zipcode><city> NY </city><state> NY </state>

<name> Harry Houdini </name><major> IT </major><address>

</address>

more students <student> ... </student>

tag opens

tag closes

tag opens

tag closes

children of address element

be careful !

DTD – Document Type Definition

Define Structure of xml file by

DTD governing file

xml data file

xml - lists data(tree-like)

DTD defines underlying structure

(of xml data)

Cross-referenced File

<student-body >

<student*>

<name> <major?>

* 0 or more times

Frequency Notation

<address+ >

<street> <state ><zipcode> <city>

exactly once

+ one or more addresses

? 0 or once

exactly once

root element of tree

Endpoint – no children

Subordinate fields

<?xml version="1.0" ?>

DTD -governs structure

consists of one or more students

<!ELEMENT student-body (student+)>

<!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)>

<!ELEMENT state (#PCDATA)>more subordinates

Multiplicity notation0 or 1 majors allowed

B.dtd

A.xml

XML refers to DTD

<!DOCTYPE student-body SYSTEM "B.dtd">

DTD refers to XML root

<!ELEMENT student-body (student+)>

Cross-references

Html syntax to access xml data

html file

DTD file

xml data file CSS file

html file can access data in xml file

Html file refers to style sheet

Multiple cross-references

<name>

<student>

<student-body>

<major > <address>

<street> <zipcode >

easier to accessfrom html

harder to accessfrom html

Level 0

Level 1

Level 2

Level 3

xml (tree structured) dataHtml accessto xml data

How does Html access xml data?

dataFld attribute

<table datasrc = "#stuff " >

</table>

<body>

<xml id="stuff" src = "B.xml" />

Accessingname & major Link to xml data: Data Island

Local name for xml file

data element to retrieve

<tbody><tr>

</tr></tbody>

<td> Student's name: </td><td> <div dataFld = "name" /> </td>

<td> Student's major: </td><td> <div dataFld = "major" /> </td>

Identifies data source for table

(or other element)

only 1 template row

<name>

<student>

<student-body>

<major >

template

Table: - 1 row per student- 2 cells per row

Web site –XML CSS DTD Link - like student6.xml

id internal name for file

dataFld xml element accessed

<table datasrc = "#stuff " >

</table>


<tbody><tr>

</tr></tbody>

<td> <div dataFld = "name" /> </td> <td> Student's major: </td><td> <div dataFld = "major" /> </td>

src external xml file

datasrc internal reference to xml file

<body>

<td> Student's name: </td>

HTMLSyntax

See CSS XML Topics.doc

A.html

D.dtd

B.xml C.css

To reference xml file in html


To reference css in html

<style type = "text/css">

@import "C.css" ; </style>

To reference DTD in xml

<!DOCTYPE student-body SYSTEM "D.dtd">

Cross-references

DTD Errors

Alter: <!DOCTYPE student-body SYSTEM "student14.dtd">

- 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 - again triggers no error - but retrieval still fails in html – even though major not requested

- browser says can't find resource

Omit <state> NY </state> from student4.xml

wrong name

Web site – CSS and XML Examples - under XML-and-CSS menu

Viewing XML

html for accessing

CSS and XML Examples - under XML-and-CSS menu - like student7.html

xml data

as recordsviewed sequentially

<input type="button" value="Previous student" onclick="moveprevious ( )" />

<head><script type="text/javascript">

function movenext ( ) { r=stuff.recordset ;

</script></head><body>

<xml id="stuff" src = "student5.xml" > </xml>

Name: <span datasrc = "#stuff" dataFld = "name" > </span><br>

if (r.absoluteposition < r.recordcount) { r.movenext( ) }

function moveprevious ( ) { r=stuff.recordset ;

if (r.absoluteposition > 1) { r.moveprevious ( ) }

Major: <div datasrc = "#stuff" dataFld = "major" > </div> <br>

<input type="button" value="Next student" onclick="movenext( )" />

Move xml recordsthru element windows

Navigation buttons

Web site – CSS and XML Examples - under XML-and-CSS menu – student7.html

xml data island


function movenext ( )

{ r = stuff.recordset ;

if (r.absoluteposition < r.recordcount) { r.movenext ( ) }




data island's xml records

are available in r

test if scan past r's last record

advance view to next record in data island

( span & div )


function movenext ( ) { r = stuff.recordset ; if (r.absoluteposition < r.recordcount) { r.movenext( ) }




records from external xml source #stuff

current r record

number of records in r

move next record from data island into viewdon't fall past right end

r = stuff.recordset r.absoluteposition

r.recordcount

r.movenext ( )

datasrc = internal name for xml file

dataFld = element's name

<span

<div

built-in properties & methodsfor navigating thru xml records

<xml

id = "stuff"

src = "student5.xml"

Html tags & attributes

<table

Live XML data feeds

accessing xml data on the Internet

<xml id="stuff1"src="http://www.nws.noaa.gov/data/current_obs/KNYC.xml" ></xml>

Location: <span datasrc = "#stuff1" dataFld = "location" ></span><br>Temperature: <span datasrc = "#stuff1" dataFld = "temp_f" > </span><br>

Humidity: <span datasrc ="#stuff1" dataFld="relative_humidity"></span><br>Windspeed: <span datasrc = "#stuff1" dataFld= "wind_mph"> </span><br>

XML element namein KNYC.xml updated every 15

minutes - Live

CSS and XML Examples - XML-and-CSS menu - Kroge00.html – also Kroge01,02,03

http://www.nws.noaa.gov/data/current_obs/KNYC.xml

Relatively flat XML file

student5.html student5.xml student5.dtd

CSS-XML-Examples

images.html .xml

student7.html student5.xml student5.dtd

student3.xml

http://www.w3schools.com/xml/xml_applications.asp

http://www.nws.noaa.gov/data/current_obs/KNYC.xmlhttp://www.nws.noaa.gov/data/current_obs/KMIA.xml



http://www.nws.noaa.gov/data/current_obs/KMIA.xml

http://www.nws.noaa.gov/data/current_obs/KMIA.xml

Miscellaneous XML Access Problems

firstName Harry lastName Jones GPA 2.5

firstName Bert lastName Smith GPA

firstName Bill lastName Gates GPA 1.2

firstName John lastName Newman GPA 4.0

HTML table below pulls data from XML file andShows Student Names & GPAs.

Cascading Style Sheet governs paragraph, body, and Table tags.

Document Type definition file defines XML syntax.

data from different levels in the tree

Challenge Variation

Replace endpoint element Name with: <Name>

<firstName> </lastName >

Notes on Challenge

<Name>

<firstName> <lastName >

<student>

<roster>

<GPA >

cell: dataFld=firstName

table datasrc=roster datasrc=name

cell: dataFld=lastName

cell: dataFld=GPA

table datasrc = roster

Outer table - with single row - has cell for theGPA - like in basic example.

Nested inner table is inside 2nd cell in the single row of the outer table.The innertable itself has same formatas the outer table…but with the extra datasrc attributes shown.

Some key examples:HTML - exampleF03b1.html

- exampleF03b3.html- exampleF03b5.html & sheet2.css

XML - student1,2,3,4.xmlXML data binding - partsList.xml, parts.htmlDTD - student5.xml, student5DTD.dtd

Sebesta: XML pages CSS pages

McHugh: See Notes on CSS and XML on web site

Also links to w3schools etc.

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

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

Simple html data capture file:Link to style class

Style classes referenced

single row element – others generated automatically by browser

Note <tbody> tags

XML A Standard for organizing data. Used for Exchanging data between systems. Used to define XHTML....

Documents

Transcript of XML A Standard for organizing data. Used for Exchanging data between systems. Used to define XHTML....