COMP9321 Web Application Engineering

COMP9321 Web Application Engineering Semester 2, 2017 Dr. Amin Beheshti Service Oriented Computing Group, CSE, UNSW Australia Week 4 http://webapps.cse.unsw.edu.au/webcms2/course/index.php?cid= 2465 1

Extensible Markup Language (XML) XML is a markup language much like HTML Designed to describe data. XML tags are not predefined. Designed to display data. HTML tags are predefined. XML: is a W3C Recommendation is designed to be self-descriptive is derived from SGML (ISO 8879). originally designed to meet the challenges of large-scale electronic publishing. 2

Extensible Markup Language (XML) XML separates presentation issues from the actual data. 3

Extensible Markup Language (XML) 4

Extensible Markup Language (XML) XML plays an increasingly important role in the exchange of a wide variety of data on the Web and elsewhere. Online Book Store Example (Lec01 Revisit) Buy Book? Internet mybook.com 5

Extensible Markup Language (XML) XML plays an increasingly important role in the exchange of a wide variety of data on the Web and elsewhere. springer.com/ Amazon.com ieee.org Buy Book? Internet mybook.com 6

Extensible Markup Language (XML) XML plays an increasingly important role in the exchange of a wide variety of data on the Web and elsewhere. springer.com/ Amazon.com Buy Book? Internet ieee.org Presentation Logic Data mybook.com 7

Why XML? 11

Why XML? 12

Why XML? 13

Separating the Content from Presentation HTML was designed to display data. CSS: Cascading Style Sheets CSS defines how HTML elements are to be displayed All formatting could be removed from the HTML document, and stored in a separate CSS file. XML was designed to describe data. 14

Separating the Content from Presentation 15

XML Applications 16

XML Applications RSS : Really Simple Syndication With RSS it is possible to distribute up-to-date web content from one web site to thousands of other web sites around the world. RSS is written in XML RSS allows you to syndicate your site content RSS defines an easy way to share and view headlines and content RSS files can be automatically updated RSS allows personalized views for different sites RSS is useful for web sites that are updated frequently, like: e.g. News sites, Companies, and Calendars. Without RSS, users will have to check your site daily for new updates. 17

XML is 19

Quick XML syntax 20

The XML Family XML: a markup language used to describe information. 21

The XML Family XML: a markup language used to describe information. DOM: The Document Object Model (DOM) is an application programming interface (API) for valid HTML and well-formed XML documents. DOM Defines: the logical structure of documents; the way a document is accessed and manipulated; A graphical representation of the DOM of the example table https://www.w3.org/tr/dom-level-2-core/introduction.html 22

The XML Family XML: a markup language used to describe information. DOM: The Document Object Model (DOM) is an application programming interface (API) for valid HTML and well-formed XML documents. The DOM is separated into 3 different parts/levels: Core DOM - standard model for any structured document XML DOM - standard model for XML documents A standard object model for XML A standard programming interface for XML Platform- and language-independent HTML DOM - standard model for HTML documents 23

The XML Family XML: a markup language used to describe information. DOM: The Document Object Model (DOM) is an application programming interface (API) for valid HTML and well-formed XML documents. The DOM is separated into 3 different parts/levels: Core DOM - standard model for any structured document XML DOM - standard model for XML documents A standard object model for XML A standard programming interface for XML Platform- and language-independent HTML DOM - standard model for HTML documents 24

The XML Family XML: a markup language used to describe information. DOM: a programming interface for accessing and updating documents. DTD: A Document Type Definition (DTD) defines the structure and the legal elements and attributes of an XML document. from a DTD point of view, all XML documents are made up by the following building blocks: Elements: <student> </student> Attributes: <student id= 50001 > </student> Entity References: < > & " ' The character data inside an element must not contain certain characters with special meanings. You must escape the characters using entity references.. <mytag> if x > 5 </mytag> <mytag> if x > 5 </mytag> <mybook pub= O Reilly > Programming </mybook > <mybook pub= O'Reilly > Programming</myBook> 26

The XML Family XML: a markup language used to describe information. DOM: a programming interface for accessing and updating documents. DTD: A Document Type Definition (DTD) defines the structure and the legal elements and attributes of an XML document. from a DTD point of view, all XML documents are made up by the following building blocks: Elements: <student> </student> Attributes: <student id= 50001 > </student> Entities: < > & " ' PCDATA (Parsed Character DATA): is the text that WILL be parsed by a parser. CDATA (Character DATA) is the text that will NOT be parsed by a parser. Tags inside the text will NOT be treated as markup and entities will not be expanded. 27

Phonebook.xml with Internal DTD 28

Phonebook.xml with External DTD. Phonebook.dtd 29

CDATA Section 30

Defining XML Content: Elements 31

Defining XML Content: Modifiers 32

Defining XML Content: Choices, Empty 33

Defining XML Content: Mixed content, Any 34

Defining XML Content: Creating Attributes 35

Defining XML Content: Creating Attributes Use the #REQUIRED keyword if you don't have an option for a default value, but still want to force the attribute to be present. Use the #IMPLIED keyword if you don't want to force the author to include an attribute, and you don't have an option for a default value. Use the #FIXED keyword when you want an attribute to have a fixed value without allowing the author to change it. If an author includes another value, the XML parser will return an error. 36

Defining XML Content: Creating Attributes 37

XML Custom Entities 38

Parameter Entities The purpose of a parameter entity is to enable you to create reusable sections of replacement text. <!ENTITY % ename "entity_value"> Example: <!ELEMENT residence (name, street, pincode, city, phone)> <!ELEMENT apartment (name, street, pincode, city, phone)> <!ELEMENT office (name, street, pincode, city, phone)> <!ELEMENT shop (name, street, pincode, city, phone)> <!ENTITY % area "name, street, pincode, city"> <!ENTITY % contact "phone"> <!ELEMENT residence (%area;, %contact;)> <!ELEMENT apartment (%area;, %contact;)> <!ELEMENT office (%area;, %contact;)> <!ELEMENT shop (%area;, %contact;)> 39

Parameter Entities 40

Well-formedness and Validity of XML 41

Limitations of DTD 42

The XML Family XML: a markup language used to describe information. DOM: a programming interface for accessing and updating documents. DTD: describes the structure and content of XML documents. XML Schema: is an XML-based alternative to DTD. describes the structure of an XML document. defines elements and attributes that can appear in a document defines data types for elements and attributes defines default and fixed values for elements and attributes defines the child elements, their orders, etc. XML Schemas are much more powerful than DTDs. The XML Schema language is also referred to as XML Schema Definition (XSD). 43

The XML Family XML: a markup language used to describe information. DOM: a programming interface for accessing and updating documents. DTD: describes the structure and content of XML documents. XML Schema: XML Schema - W3C's recommendation for replacing DTD with features such as: Simple and complex data types Type derivation and inheritance Namespace-aware element and attributes Limits on number of appearances by an element Combining with regular expressions for finer control over document structure Most importantly, XML Schemas are well-formed XML documents themselves. But first, what is a namespace? 44

XML Namespaces 45

XML Namespaces (example) 46

XML Namespaces 47

Previous examples can now be... 48

XML Namespace Syntax When using prefixes in XML, a namespace for the prefix must be defined. The namespace can be defined by an xmlns attribute in the start tag of an element. The namespace declaration has the following syntax: xmlns:prefix="uri Name conflicts in XML can easily be avoided using a name prefix. <root> <table> <tr> <td>apples</td> <td>bananas</td> </tr> </table> <table> <name>african Coffee Table</name> <width>80</width> <length>120</length> </table> <h:table xmlns:h="http://www.w3.org/tr/html4/"> <h:tr> <h:td>apples</h:td> <h:td>bananas</h:td> </h:tr> </h:table> <f:table xmlns:f="http://www.w3schools.com/furniture"> <f:name>african Coffee Table</f:name> <f:width>80</f:width> <f:length>120</f:length> </f:table> </root> 49

XML Namespace Syntax <root xmlns:h = http://www.w3.org/tr/html4/ xmlns:f = "http://www.w3c.com/furniture > When using prefixes in XML, a namespace for the prefix must be defined. The namespace can be defined by an xmlns attribute in the start tag of an element. <h:table> The namespace declaration has the following syntax: <h:tr> <h:td>apples</h:td> xmlns:prefix="uri Name conflicts <h:td>bananas</h:td> in XML can easily be avoided using a name prefix. </h:tr> <root> </h:table> <table> <tr> <td>apples</td> <td>bananas</td> </tr> </table> <f:table> <f:name>african Coffee Table</f:name> <f:width>80</f:width> <f:length>120</f:length> </f:table> <table> <name>african </root> Coffee Table</name> <width>80</width> <length>120</length> </table> <h:table xmlns:h="http://www.w3.org/tr/html4/"> <h:tr> <h:td>apples</h:td> <h:td>bananas</h:td> </h:tr> </h:table> <f:table xmlns:f="http://www.w3schools.com/furniture"> <f:name>african Coffee Table</f:name> <f:width>80</f:width> <f:length>120</f:length> </f:table> </root> 50

XML Schema Definition (XSD) a recommendation of the World Wide Web Consortium (W3C) specifies how to formally describe the elements in an Extensible Markup Language (XML) document. 51

Simple Types 52

Attributes 53

Type Restrictions 54

Complex Types 55

Complex Types 56

The XML Family XML: a markup language used to describe information. DOM: a programming interface for accessing and updating documents. DTD and XML Schema: describes the structure and content of XML documents. XSLT: XSL stands for extensible Stylesheet Language, and is a style sheet language for XML documents. CSS = Style Sheets for HTML XSL = Style Sheets for XML XSL describes how the XML document should be displayed! XSLT (XSL Transformations) a language for transforming XML documents. 57

The XML Family XML: a markup language used to describe information. DOM: a programming interface for accessing and updating documents. DTD and XML Schema: describes the structure and content of XML documents. XSLT: a language for transforming XML documents XPath: XPath (XML Path language) is a language for finding information in an XML document. XPath contains a library of standard functions XPath is a major element in XSLT XPath is also used in XQuery, XPointer and XLink XPath is a W3C recommendation 59

The XML Family XML: <?xml a version="1.0" markup language.> used to describe some XPath information. expressions: <comp9321_students> DOM: a programming interface for accessing and updating documents. <student> /comp9321_student/student[1] DTD <id>50001</id> and XML Schema: describes the Selects structure the first and student content element of XML that documents. is the child XSLT: <name>adam a language B.</name> for transforming XML of the documents comp9321_student element XPath: <program>8543</program> XPath <stage>1</stage> (XML Path language) is a language /comp9321_student/student[last()] for finding information in an XML </student> document. Selects the last student element that is the child of the comp9321_student element <student> XPath contains a library of standard functions XPath <id>50002</id> is a major element in XSLT /comp9321_student/student[position()<3] XPath <name>alex is also C.</name> used in XQuery, XPointer Selects the and first XLink two student element that is the <program>3978</program> XPath is a W3C recommendation child of the comp9321_student element <stage>3</stage> </student> /comp9321_student/student[stage>2] </comp9321_students> Selects all the student elements of the comp9321_student element that have a stage element with a value greater than 2. 60

The XML Family XML: a markup language used to describe information. DOM: a programming interface for accessing and updating documents. DTD and XML Schema: describes the structure and content of XML documents. XSLT: a language for transforming XML documents XPath: a query language for navigating XML documents. XPointer: for identifying fragments of a document. XLink: generalises the concept of a hypertext link. XInclude: for merging documents. XQuery: a language for making queries across documents. RDF: a language for describing resources. 61

An XML document is a tree... 62

Attributes in XML tags 63

Attributes in XML tags 64

Parsing XML documents with Java 65

Parsing XML documents with Java 66

SAX and DOM as the Standard Interfaces 67

Document Object Model (DOM) 68

Dealing with Nodes in DOM 69

An example XML here... 70

DOM for XML 71

Using a DOM Parser (eg., Apache Xerces) 72

Document Interface Methods 73

Examples of Node Properties (XML), p.9.25 74

Count/Print the number of 'book' elements 75

Dealing with Nodes in DOM The method getnodetype() returns the number in the range 1 to 12. 76

More with DOM... 77

JSON (JavaScript Object Notation) 78

JSON JSON is a syntax for storing and exchanging data. JSON is an easier-to-use alternative to XML. XML: JSON: JSON uses JavaScript syntax, but the JSON format is text only, just like XML. 79

JSON JSON is a syntax for storing and exchanging data. JSON is an easier-to-use alternative to XML. XML: JSON: JSON uses JavaScript syntax, but the JSON format is text only, just like XML. 80

JSON The JSON format is syntactically identical to the code for creating JavaScript objects. Instead of using a parser (like XML does), a JavaScript program can use standard JavaScript functions to convert JSON data into native JavaScript objects. 81

JSON XML has to be parsed with an XML parser. JSON can be parsed by a standard JavaScript function. Using XML : Fetch an XML document. Use the XML DOM to loop through the document. Extract values and store in variables. Using JSON: Fetch a JSON string. JSON.Parse the JSON string. http://www.slideshare.net/ibrahimalibrahim1/xml-vs-json-47487221 82

JSON JSON Data: "name": " value A value can be a string in double quotes, or a number, or true or false or null, or an object or an array. These structures can be nested. 83

JSON JSON Data: "name": " value JSON Objects: An object is an unordered set of name/value pairs. An object begins with { and ends with } Each name is followed by : (colon) the name/value pairs are separated by, (comma). {"firstname":"john", "lastname":"doe"} 84

JSON JSON Data: "name": " value JSON Objects: {"firstname":"john", "lastname":"doe"} JSON Arrays: An array is an ordered collection of values An array begins with [ and ends with ] Values are separated by, (comma). "employees":[ {"firstname":"john", "lastname":"doe"}, {"firstname":"anna", "lastname":"smith"}, {"firstname":"peter","lastname":"jones"} ] 85

JSON JSON Data: "name": " value JSON Objects: {"firstname":"john", "lastname":"doe"} JSON Arrays: "employees":[ {"firstname":"john", "lastname":"doe"}, {"firstname":"anna", "lastname":"smith"}, {"firstname":"peter","lastname":"jones"} ] JSON Files: The file type for JSON files is ".json" The MIME type for JSON text is "application/json" 86

JSON Http Request A common use of JSON is to read data from a web server, and display the data in a web page. data.json browser 87

JSON Http Request A common use of JSON is to read data from a web server, and display the data in a web page. data.json browser 88

JSON Http Request A common use of JSON is to read data from a web server, and display the data in a web page. data.json browser Create a JavaScript function to display the array. 89

JSON Http Request A common use of JSON is to read data from a web server, and display the data in a web page. data.json browser Write an XMLHttpRequest to read the file, and use myfunction() to display the array 90

References http://www.w3.org/xml/ XML in a nutshell, Chapters 9 and 10 http://www.ibm.com/developerworks/library/xml-schema/ http://www.w3schools.com/ http://www.json.org/ Some examples in these notes are originated from Dr. David Edmond from QUT, Brisbane 91