COMP9321 Web Application EngineeringSemester 1, 2017

Dr. Amin BeheshtiService Oriented Computing Group, CSE, UNSW Australia

Week 4

1COMP9321, 17s1, Week 4

http://webapps.cse.unsw.edu.au/webcms2/course/index.php?cid=2457

Extensible Markup Language (XML)

2COMP9321, 17s1, Week 4

• XML is a markup language much like HTML

Designed to display data.HTML tags are predefined.

Designed to describe data.XML tags are not 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.

Extensible Markup Language (XML)

3COMP9321, 17s1, Week 4

• XML separates presentation issues from the actual data.

Extensible Markup Language (XML)

4COMP9321, 17s1, Week 4

Extensible Markup Language (XML)

5COMP9321, 17s1, Week 4

• XML plays an increasingly important role in the exchange of awide variety of data on the Web and elsewhere.

• Online Book Store Example (Lec01 Revisit)

mybook.com

Buy Book?Internet

Extensible Markup Language (XML)

6COMP9321, 17s1, Week 4

• XML plays an increasingly important role in the exchange of awide variety of data on the Web and elsewhere.

mybook.com

ieee.orgAmazon.com

Buy Book?Internet

springer.com/

Extensible Markup Language (XML)

7COMP9321, 17s1, Week 4

• XML plays an increasingly important role in the exchange of awide variety of data on the Web and elsewhere.

mybook.com

ieee.org

springer.com/

Amazon.com

Buy Book?Internet

Presentation

Logic

Data

Extensible Markup Language (XML)

8COMP9321, 17s1, Week 4

• XML plays an increasingly important role in the exchange of awide variety of data on the Web and elsewhere.

mybook.com

ieee.org

springer.com/

Amazon.com

Buy Book?Internet

Presentation

Logic

Data

Extensible Markup Language (XML)

9COMP9321, 17s1, Week 4

• XML plays an increasingly important role in the exchange of awide variety of data on the Web and elsewhere.

mybook.com

ieee.org

springer.com/

Amazon.com

Buy Book?Internet

Presentation

Logic

Data

Extensible Markup Language (XML)

10COMP9321, 17s1, Week 4

• XML plays an increasingly important role in the exchange of awide variety of data on the Web and elsewhere.

Communication protocol? SOAP

mybook.com

ieee.org

springer.com/

Amazon.com

Buy Book?Internet

Presentation

Logic

Data

Simple Object Access Protocol

Google(Simple Object Access Protocol)

Why XML?

11COMP9321, 17s1, Week 4

Why XML?

12COMP9321, 17s1, Week 4

Why XML?

13COMP9321, 17s1, Week 4

Separating the Content from Presentation

14COMP9321, 17s1, Week 4

HTML was designed to display data.

XML was designed to describe 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.

Separating the Content from Presentation

15COMP9321, 17s1, Week 4

XML Applications

16COMP9321, 17s1, Week 4

XML Applications

17COMP9321, 17s1, Week 4

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.

XML Applications

18COMP9321, 17s1, Week 4

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.

XML is …

19COMP9321, 17s1, Week 4

Quick XML syntax

20COMP9321, 17s1, Week 4

The XML Family

21COMP9321, 17s1, Week 4

XML: a markup language used to describe information.

The XML Family

22COMP9321, 17s1, Week 4

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

The XML Family

23COMP9321, 17s1, Week 4

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

The XML Family

24COMP9321, 17s1, Week 4

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

The XML Family

25COMP9321, 17s1, Week 4

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: … • Attributes: … • Entity References: < > & " '

The XML Family

26COMP9321, 17s1, Week 4

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: … • Attributes: … • Entity References: < > & " '

The character data inside an element must not contain certain characters with special meanings.You must escape the characters using entity references..

if x > 5 if x > 5

Programming Programming

The XML Family

27COMP9321, 17s1, Week 4

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: … • Attributes: … • 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.

Phonebook.xml with Internal DTD

28COMP9321, 17s1, Week 4

Phonebook.xml with External DTD. Phonebook.dtd

29COMP9321, 17s1, Week 4

CDATA Section

30COMP9321, 17s1, Week 4

Defining XML Content: Elements

31COMP9321, 17s1, Week 4

Defining XML Content: Modifiers

32COMP9321, 17s1, Week 4

Defining XML Content: Choices, Empty

33COMP9321, 17s1, Week 4

Defining XML Content: Mixed content, Any

34COMP9321, 17s1, Week 4

Defining XML Content: Creating Attributes

35COMP9321, 17s1, Week 4

Defining XML Content: Creating Attributes

36COMP9321, 17s1, Week 4

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.

Defining XML Content: Creating Attributes

37COMP9321, 17s1, Week 4

XML Custom Entities

38COMP9321, 17s1, Week 4

Parameter Entities

39COMP9321, 17s1, Week 4

The purpose of a parameter entity is to enable you to create reusable sections of replacement text.

Example:

…

Parameter Entities

40COMP9321, 17s1, Week 4

Well-formedness and Validity of XML

41COMP9321, 17s1, Week 4

Limitations of DTD

42COMP9321, 17s1, Week 4

The XML Family

43COMP9321, 17s1, Week 4

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

The XML Family

44COMP9321, 17s1, Week 4

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 documentsthemselves. But first, what is a namespace ?

XML Namespaces

45COMP9321, 17s1, Week 4

XML Namespaces (example)

46COMP9321, 17s1, Week 4

XML Namespaces

47COMP9321, 17s1, Week 4

Previous examples can now be ...

48COMP9321, 17s1, Week 4

XML Namespace Syntax

49COMP9321, 17s1, Week 4

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

Apples Bananas

African Coffee Table80 120

ApplesBananas

African Coffee Table80120

• Name conflicts in XML can easily be avoided using a name prefix.

XML Namespace Syntax

50COMP9321, 17s1, Week 4

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

Apples Bananas

African Coffee Table80 120

ApplesBananas

African Coffee Table80120

• Name conflicts in XML can easily be avoided using a name prefix.

XML Schema Definition (XSD)

51COMP9321, 17s1, Week 4

• a recommendation of the World Wide Web Consortium (W3C)• specifies how to formally describe the elements in an Extensible Markup Language

(XML) document.

Simple Types

52COMP9321, 17s1, Week 4

Attributes

53COMP9321, 17s1, Week 4

Type Restrictions

54COMP9321, 17s1, Week 4

Complex Types

55COMP9321, 17s1, Week 4

Complex Types

56COMP9321, 17s1, Week 4

The XML Family

57COMP9321, 17s1, Week 4

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.

The XML Family

58COMP9321, 17s1, Week 4

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

The XML Family

59COMP9321, 17s1, Week 4

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

• 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

The XML Family

60COMP9321, 17s1, Week 4

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

• 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

50001Adam B.85431

50002Alex C.39783

50001Adam B.85431

50002Alex C.39783

some XPath expressions:

/comp9321_student/student[1]• Selects the first “student” element that is the child

of the “comp9321_student” element

/comp9321_student/student[last()]• Selects the last “student” element that is the child of

the “comp9321_student” element

/comp9321_student/student[position()2]• Selects all the “student” elements of the

“comp9321_student” element that have a “stage” element with a value greater than 2.

…

some XPath expressions:

/comp9321_student/student[1]• Selects the first “student” element that is the child

of the “comp9321_student” element

/comp9321_student/student[last()]• Selects the last “student” element that is the child of

the “comp9321_student” element

/comp9321_student/student[position()2]• Selects all the “student” elements of the

“comp9321_student” element that have a “stage” element with a value greater than 2.

…

The XML Family

61COMP9321, 17s1, Week 4

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 documentsXPath: 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.

An XML document is a tree ...

62COMP9321, 17s1, Week 4

Attributes in XML tags

63COMP9321, 17s1, Week 4

Attributes in XML tags

64COMP9321, 17s1, Week 4

Parsing XML documents with Java

65COMP9321, 17s1, Week 4

Parsing XML documents with Java

66COMP9321, 17s1, Week 4

SAX and DOM as the Standard Interfaces

67COMP9321, 17s1, Week 4

Document Object Model (DOM)

68COMP9321, 17s1, Week 4

Dealing with Nodes in DOM

69COMP9321, 17s1, Week 4

An example XML here ...

70COMP9321, 17s1, Week 4

DOM for XML

71COMP9321, 17s1, Week 4

Using a DOM Parser (eg., Apache Xerces)

72COMP9321, 17s1, Week 4

Document Interface Methods

73COMP9321, 17s1, Week 4

Examples of Node Properties (XML), p.9.25

74COMP9321, 17s1, Week 4

Count/Print the number of 'book' elements

75COMP9321, 17s1, Week 4

Dealing with Nodes in DOM

76COMP9321, 17s1, Week 4

The method getNodeType() returns the number in the range 1 to 12.

More with DOM ...

77COMP9321, 17s1, Week 4

JSON(JavaScript Object Notation)

78COMP9321, 17s1, Week 4

JSON

79COMP9321, 17s1, Week 4

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

JSON

80COMP9321, 17s1, Week 4

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

JSON

81COMP9321, 17s1, Week 4

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

JSON

82COMP9321, 17s1, Week 4

• 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

JSON

83COMP9321, 17s1, Week 4

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.

JSON

84COMP9321, 17s1, Week 4

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

JSON

85COMP9321, 17s1, Week 4

JSON Data: "name": " value“

JSON Objects: {"firstName":"John", "lastName":"Doe"}

JSON Arrays: An array is an ordered collection of valuesAn array begins with [ and ends with ]Values are separated by , (comma).

"employees":[{"firstName":"John", "lastName":"Doe"},{"firstName":"Anna", "lastName":"Smith"},{"firstName":"Peter","lastName":"Jones"}

]

JSON

86COMP9321, 17s1, Week 4

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"

JSON Http Request

87COMP9321, 17s1, Week 4

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

browser

JSON Http Request

88COMP9321, 17s1, Week 4

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

browser

JSON Http Request

89COMP9321, 17s1, Week 4

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

Create a JavaScript function to display the array.

data.json

browser

JSON Http Request

90COMP9321, 17s1, Week 4

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

Write an XMLHttpRequest to read the file, and use myFunction() to display the array

data.json

browser

References

91COMP9321, 17s1, Week 4

• 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

92COMP9321, 17s1, Week 4