BIA-XML

Introduction to XML

Standard Generalized Markup Language (SGML)

parent markup languages
standard for describing markup languages
syntax in the document type definition (DTD) of HTML or XML are defined by the syntax in SGML's formal language definition ==> HTML, XML are descendents of SGML

What is XML?

eXtensible Markup Language
developed by W3C
originally designed to meet the challenges of large-scale electronic publishing
a markup language much like HTML
a common, open, Internet standard that eases data exchange over the Internet
a meta-language, which was designed to describe data in a structured manner
uses a Document Type Definition (DTD) or an XML Schema to describe the data
XML with a DTD or XML Schema is designed to be self-descriptive

HTML Vs XML

XML is not a replacement for HTML
XML was designed to describe data and to focus on what data is, HTML was designed to display data and to focus on how data looks
XML tags are not predefined, tags required must be "invented", HTML tags and the structure of HTML documents are predefined

More on XML…

XML does not DO anything
XML is created as a way to structure, store and send information.
It is pure information wrapped in XML tags.
Software is required to send it, receive it or display it.
Examples : employee.xml

<employee>
<lastname>Chan</lastname>
<firstname>Peter</ firstname >
<department>Business Administration </department>
<phone>22567123</phone>
</employee>

XML is as a cross-platform, software and hardware independent tool for transmitting information.
With XML, data is stored outside HTML, changes in the underlying data will not require any changes to HTML
In the real world, computer systems and databases contain data in incompatible formats. One of the most time-consuming challenges for developers has been to exchange data between such systems over the Internet.
XML data is stored in plain text format, so it provides a software- and hardware-independent way of sharing data. It has high compatibility and can work with different applications

Markup language created using XML

Wireless Markup Language (WML) - used to markup Internet applications for handheld devices
Mathematical Markup Language (MathML) - for describing mathematical notations www.w3.org/amaya/user/bindist.html
Chemical Markup Language (CML) - represent molecular and chemicalinformation http://www.xml-cml.org/

XML Syntax

simple but very strict
An example XML document

<?xml version="1.0"?>
<employee>
   <lastname>Chan</lastname>
   <firstname>Peter</firstname >
   <department>Business Administration </department>
   <phone>22567123</phone>
</employee>

<?xml version="1.0"?> : the XML declaration, it defines the XML version of the document.

<employee> …</employee> : describes the root element of the document. This document is about an employee

In XML all elements must have a closing tag

<p>This is a paragraph</p>
<p>This is another paragraph</p>

XML tags are case sensitive (i.e. <firstname> and </Firstname> is NOT a pair of tag)
All elements must be properly nested within each other (i.e. <i><b>sentence</i></b> is invalid)
All XML documents must have a root tag

XML Elements have Relationships, imagine a book described as below:

Book Title: Computer Network
Chapter 1: Introduction to Networking
What is Networking?
History of Networking
Chapter 2: OSI model
What is OSI model?
Layers of OSI model

XML describes the book :

<book>
<title>Computer Network</title>
<prod id="1234-5678" media="paper"></prod>
<chapter>Introduction to Networking
<para> What is Networking?</para>
<para> History of Networking </para>
</chapter>
<chapter> OSI model
<para> What is OSI model?</para>
<para> Layers of OSI model </para>
</chapter>
</book>

Book is the root element, it is the parent element of both title and chapter.

Title and chapter are child elements of Book.

Store date as date attribute

<employee appoint_date="1/9/94">
<lastname>Chan</lastname>
<firstname>Peter</firstname >
<department>Business Administration </department>
<phone>22567123</phone>
</employee>

Store date as date element

<employee>
<appoint_date>1/9/94</appoint_date>
<lastname>Chan</lastname>
<firstname>Peter</ firstname >
<department>Business Administration </department>
<phone>22567123</phone>
</employee>

Store date as expanded date element

<employee>
<appoint_date>
   <day>1</day>
   <month>9</month>
    <year>94/year>
</appoint_date>
<lastname>Chan</lastname>
<firstname>Peter</firstname >
<department>Business Administration </department>
<phone>22567123</phone>
</employee>

ID references can be assigned to elements, and used as a unique identifier to identify the different employee in the XML file, and not a part of the employee data.

<staff>
<employee ID="120">
<lastname>Chan</lastname>
<firstname>Peter</firstname>
<department>Business Administration </department>
<phone>22567123</phone>
</employee>
<employee ID="121">
<lastname>Au</lastname>
<firstname>Albert</firstname>
<department>Computing</department>
<phone>22567321</phone>
</employee>
</staff>

XML Validation

XML with correct syntax is Well Formed XML
XML validated against a DTD is Valid XML
Internet Explorer 5.0 can validate XML against a DTD
Validate an XML by XML DOM click to a DOM validator
- Document Object Model (DOM) is a programming interface to be used with any programming language and any OS for XML documents. It defines the way an XML document can be accessed and manipulated. With the XML DOM, a programmer can create an XML document, navigate its structure, and add, modify, or delete its elements.

XML Document Type Definition (DTD)

defines the legal building blocks of an XML document
defines the document structure with a list of legal elements
provides an application independent way of sharing data, independent groups of people can agree to use a common DTD for interchanging data
application built can use a standard DTD to verify that data received from the outside world is valid. e.g.
- TV Schedule DTD from http://users.primushost.com/~dmoisan/
- Newspaper Article DTD from http://www.vervet.com/
DTD can be declared inline in an XML document, or as an external reference

XML document with Internal DTD

<?xml version="1.0"?>
<!DOCTYPE employee [
<!ELEMENT employee (lastname, firstname, department, phone?)>
<!ATTLIST employee sex (male | female) "female">
<!ELEMENT lastname (#PCDATA)>
<!ELEMENT firstname (#PCDATA)>
<!ELEMENT department (#PCDATA)>
<!ELEMENT phone (#PCDATA)>
]>

<employee sex ="male">
<lastname>Chan</lastname>
<firstname>Peter</firstname>
<department>Business Administration </department>
<phone>22567123</phone>
</employee>

Note:

(1) !ELEMENT employee (in line 3) defines the element "employee" as having four elements:
" lastname, firstname, department, phone".

(2) !ATTLIST employee (in line 4) defines the attribute "sex"

(3) !ELEMENT lastname (in line 5) defines the "lastname" element as the type "PCDATA". PCDATA is parsed character data

(4) phone? (in line 3) indicates that element "phone" is optional.
(phone* indicates 0 or more occurrences
phone+ indicates 1 or more occurrences)

XML document with External DTD

<?xml version="1.0"?>

<!DOCTYPE employee SYSTEM "employee.dtd">
<employee>
<lastname>Chan</lastname>
<firstname>Peter</firstname>
<department>Business Administration </department>
<phone>22567123</phone>
</employee>

File "employee.dtd" containing the Document Type Definition:

<?xml version="1.0"?>
<!ELEMENT employee (lastname, firstname, department, phone)>
<!ELEMENT lastname (#PCDATA)>
<!ELEMENT firstname (#PCDATA)>
<!ELEMENT department (#PCDATA)>
<!ELEMENT phone (#PCDATA)>
]>

Displaying XML with JavaScript

To display XML data inside an HTML page, JavaScript can be used to import data from an XML file.
XML file – employee.xml

<?xml version="1.0"?>
<employee>
<lastname>Chan</lastname>
<firstname>Peter</firstname>
<department>Business Administration </department>
<phone>22567123</phone>
</employee>

HTML file – employee-js.htm

<html>
<head>
<script language="JavaScript" for="window" event="onload">
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("employee.xml")
nodes = xmlDoc.documentElement.childNodes
lastname.innerText = nodes.item(0).text
firstname.innerText = nodes.item(1).text
department.innerText = nodes.item(2).text
phone.innerText = nodes.item(3).text
</script>
<title>HTML using XML data</title>
</head>
<body>
<h1>Employee data</h1>
<b>Lastname: </b><span id="lastname"></span><br>
<b>Firstname: </b><span id="firstname"></span> <hr>
<b>Department Name : </b><span id="department"></span><br>
<b>Phone number : </b><span id="phone"></span>
</body>
</html>

Load employee-js.htm at browser

Employee data

Lastname: Chan

Firstname: Peter

Department Name : Business Administration

Phone number : 22567123

Displaying XML with CSS

Pure XML file employee-css.xml

<?xml version="1.0" ?>
<?xml-stylesheet type="text/css" href="employee.css"?>
<Stafflist>
<employee>
<lastname>Chan</lastname>
<firstname>Peter</firstname>
<department>Business Administration </department>
<phone>22567123</phone>
</employee>
<employee>
<lastname>Au</lastname>
<firstname>Albert</firstname>
<department>Computing</department>
<phone>22567321</phone>
</employee>
</Stafflist>

Cascading Style Sheets employee.css

Stafflist
{
background-color: #ffffff;
width: 100%;
}
employee
{
display: block;
margin-bottom: 30pt;
margin-left: 0;
}
lastname
{
color: #FF0000;
font-size: 30pt;
}
firstname
{
color: #0000FF;
font-size: 20pt;
}
department,phone
{
Display: block;
color: #000000;
margin-left: 20pt;
}

The Staff list formatted with the CSS file

Chan Peter

Business Administration

22567123

Au Albert

Computing

22567321

Displaying XML with XSL

XSL (the eXtensible Stylesheet Language) is the preferred style sheet language of XML
XSL is to transform XML into HTML before it is displayed by the browser
Pure XML file employee-xsl.xml

<?xml version="1.0" encoding="ISO8859-1" ?>
<?xml:stylesheet type="text/xsl" href="employee.xsl" ?>
<Stafflist>
<employee>
<lastname>Chan</lastname>
<firstname>Peter</firstname>
<department>Business Administration </department>
<phone>22567123</phone>
</employee>
<employee>
<lastname>Au</lastname>
<firstname>Albert</firstname>
<department>Computing</department>
<phone>22567321</phone>
</employee>
</Stafflist>

XSL Style sheet employee.xsl

<?xml version="1.0" ?>
<HTML xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<BODY STYLE="font-family:Arial, helvetica, sans-serif; font-size:12pt; background-color:#EEEEEE">

<xsl:for-each select="Stafflist/employee">
<DIV STYLE="background-color:teal; color:white; padding:4px">
<SPAN STYLE="font-weight:bold; color:white">
<xsl:value-of select="lastname" />
</SPAN>
<xsl:value-of select="firstname" />
</DIV>

<DIV STYLE="margin-left:20px; margin-bottom:1em; font-size:10pt">
Department : <xsl:value-of select="department" />
<SPAN STYLE="font-style:italic">
, Phone number : <xsl:value-of select="phone" />
</SPAN>
</DIV>
</xsl:for-each>

</BODY>
</HTML>

The Staff list formatted with XSL style sheet

Role of XSL and CSS

To render XML documents

(1)	if the document doesn't have to be transformed, use CSS, otherwise:
(2)	use XSL-T, the transformation language of XSL,
	(a)	generate the style properties together with the rearranged text, using a sub-language of XSL called XSL-FO (XSL Formatting Objects); or
	(b)	generate a new XML or HTML document and provide a CSS style sheet for that new document.