XML: Separating presentation from content

XML: Separating presentationfrom content Defining your own markup language SE2840Dr. Mark L. Hornick

XML: EXtensible Markup Language XML is a technology for defining markup languages • a meta markup language • designed to define structured data descriptions that are portable across languages, platforms, and OS’s SE2840 Dr. Mark L. Hornick

XML allows you to define your own markup language • You define your own tags • Tag vocabulary • XML uses a DTD(Document Type Definition) orXSD(XML Schema Defn) to formally describe the data • How tags can nest • What attributes a tag can/must have • i.e. tag grammar • Data that is described by a specified vocabulary & grammar is called an XML Application SE2840 Dr. Mark L. Hornick

(X)HTML is an XML application • (X)HTML is a description of data in web page documents, and how it is structured • (X)HTML is described by XML DTD • Actually, several: • Strict • Transitional • Frameset SE2840 Dr. Mark L. Hornick

XML schemas define how (X)HTML can be structured (for instance, a <title> can appear within a <head>, but not within a <body>) html body head h1 p p p title strong em em em strong SE2840 Dr. Mark L. Hornick

What else is XML good for? XML can be used as a format for storing data in files in a structured manner • Separating content from presentation, so that data created by an application written in Java can be read by an application written in C (or Javascript, or any other language) SE2840 Dr. Mark L. Hornick

Scenario Consider a Java collection of Students: List<Student> students;where public class Student { String firstname; String lastname; int id; String program; } SE2840 Dr. Mark L. Hornick

In Java, we can use serialization to write/store studentsto a file, to be read (later) by another Java application • Provided the other Java application knows the definition of Studentand List • It would be much more difficult for a program written in C or some other language (JavaScript) to read the file • Further complications arise when the file is read by an application running on another HW or OS platform SE2840 Dr. Mark L. Hornick

XML allows us to create a document that can be used to represent a portable collection of Students: <?xml version="1.0" encoding="ISO-8859-1"?> <student_list> <student> <firstname>Bill</firstname> <lastname>Bored</lastname> <id>1111</id> <program>SE</program> </student> <student> <firstname>Bob</firstname> <lastname>Sledd</lastname> <id>1112</id> <program>CE</program> </student> </student_list> XML grammars (like the one here) represent all data in plain text, which is most easily interpreted across platforms SE2840 Dr. Mark L. Hornick

The XML grammar itself may be defined by an XML Schema Definition (or a Document Type Defintion/DTD) <xs:schema targetNamespace="urn:StudentFileSchema" xmlns="urn:StudentFileSchema" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata"> <xs:element name="student_list"> <xs:complexType > <xs:element name="student" minOccurs="1"> <xs:complexType> <xs:sequence> <xs:element name="firstname" type="xs:string" minOccurs="1" maxOccurs="1"> <xs:element name="lastname" type="xs:string" minOccurs="1" maxOccurs="1"/> <xs:element name="id" type="xs:integer" minOccurs="1" maxOccurs="1"> <xs:element name="program" type="xs:string" minOccurs="1" maxOccurs="1"/> <xs:sequence> </xs:complexType> </xs:element> </xs:complexType> </xs:element> </xs:schema> XML Schema Definitions (like the one here) define the valid format of the XML data. For instance the <xs:sequence> tag specifies that the firstname…program tags MUST appear in only that sequence SE2840 Dr. Mark L. Hornick

Here is another XML document that can be used to represent a portable collection of Students: <?xml version="1.0" encoding="ISO-8859-1"?> <student_list> <student firstname=“Bill” lastname=“Bored” id=“1111” program=“SE” </student> <student firstname=“Bob” lastname=“Sledd” id=“1114” program=“CE” </student> </student_list> Note that this grammar defines firstname…program as attributes instead of child elements SE2840 Dr. Mark L. Hornick

The XML Schema Definition for the alternate grammar: <xs:schema targetNamespace="urn:StudentFileSchema" xmlns="urn:StudentFileSchema" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata"> <xs:element name="student_list"> <xs:complexType > <xs:element name="student" minOccurs="1"> <xs:complexType> <xs:sequence> <xs:attribute name="firstname" type="xs:string" /> <xs:attribute name="lastname" type="xs:string" /> <xs:attribute name="id" type="xs:integer" /> <xs:attribute name="program" type="xs:string“ /> <xs:sequence> </xs:complexType> </xs:element> </xs:complexType> </xs:element> </xs:schema> SE2840 Dr. Mark L. Hornick

What is XML good for? XML can be used to define the format to exchange information in a “neutral” format that is language and platform independent • Javascript/AJAX can request a complex response in XML format, rather than as text SE2840 Dr. Mark L. Hornick

How do you read the data from an XML document? • Most languages have XML Parsers that can navigate the elements of an XML file and retrieve the elements’ values • XML Parsers can be “told” to use the XML Schema to ensure that the XML file being parsed is in a valid format • Validation is optional; you can create XML files without creating an XML Schema, but then you have no way of constraining the syntax SE2840 Dr. Mark L. Hornick

Javascript has a built-in XML parser that parses the XML returned by an AJAX request into a navigable tree <?xml version="1.0" encoding="ISO-8859-1"?> <student_list> <student> <firstname>Bill</firstname> <lastname>Bored</lastname> <id>1111</id> <program>SE</program> </student> <student> <firstname>Bob</firstname> <lastname>Bored</lastname> <id>1112</id> <program>SE</program> </student> </student_list> var xml = xhr.responseXML; // responseXML is above XML text var students = xml.getElementsByTagName(“student”); // student arrayvar firstname = // result is “Bill” students[0].getElementsByTagName(“firstname”)[0].textContent; SE2840 Dr. Mark L. Hornick

XML/Ajax Demonstration SE2840 Dr. Mark L. Hornick

JSON – a lightweight alternative to XML • JSON took hold around 2005/2006 • Part of the JavaScript specification, but is really a language-independent data format JSON XML SE2840 Dr. Mark L. Hornick

Here is a JSON portable collection of Students: { “students”: [ { “firstname”:“Bill”, “lastname:“Bored”, “id”:“1111”, “program”:“SE” },{ “firstname”:“Bob”, “lastname:“Sledd”, “id”:“1114”, “program”:“CE” } ] } SE2840 Dr. Mark L. Hornick

Reading the data from a JSON response: { “students”: [ { “firstname”:“Bill”, “lastname:“Bored”, “id”:“1111”, “program”:“SE” },{ “firstname”:“Bob”, “lastname:“Sled”, “id”:“1114”, “program”:“CE” } ] } var jsonObject = JSON.parse(xhr.responseText); // responseText as above var firstname = jsonObject.students[0].firstname; // result is “Bill” SE2840 Dr. Mark L. Hornick

Can a browser display pure XML? HTML pages consist of predefined HTML tags • the meaning of these tags is well understood by a browser • <p> means a paragraph • <h1> means a header • the browser knows how to display these tags by default With XML we can define any tags we want • the meaning of these tags are not automatically understood by the browser • Because of the nature of XML, there is no standard way to display an XML document. SE2840 Dr. Mark L. Hornick

CSS for XML documents • In order to display XML documents, it is necessary to have a mechanism to describe how the document should be displayed. • One of these mechanisms is Cascading Style Sheets (CSS) SE2840 Dr. Mark L. Hornick

XML: Separating presentation from content