COMP9321 Web Application Engineering Semester 1, 2017

COMP9321 Web Application Engineering Semester 1, 2017
Dr. Amin Beheshti Service Oriented Computing Group, CSE, UNSW Australia Week 4 COMP9321, 17s1, Week 4

Extensible Markup Language (XML)
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. COMP9321, 17s1, Week 4

XML separates presentation issues from the actual data. COMP9321, 17s1, Week 4

COMP9321, 17s1, Week 4

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) Internet Buy Book? mybook.com COMP9321, 17s1, Week 4

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 Internet Buy Book? mybook.com COMP9321, 17s1, Week 4

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 Presentation Logic Internet Data Buy Book? mybook.com COMP9321, 17s1, Week 4

XML plays an increasingly important role in the exchange of a wide variety of data on the Web and elsewhere. Communication protocol? SOAP springer.com/ Amazon.com ieee.org Presentation Logic Internet Data Buy Book? mybook.com Google(Simple Object Access Protocol) Simple Object Access Protocol COMP9321, 17s1, Week 4

Why XML? COMP9321, 17s1, Week 4

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. COMP9321, 17s1, Week 4

Separating the Content from Presentation

XML Applications COMP9321, 17s1, Week 4

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. COMP9321, 17s1, Week 4

XML is … COMP9321, 17s1, Week 4

Quick XML syntax COMP9321, 17s1, Week 4

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 COMP9321, 17s1, Week 4

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 COMP9321, 17s1, Week 4

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: < > & " ' COMP9321, 17s1, Week 4

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> <myBook pub=’O’Reilly’ > Programming </myBook > <myBook pub=’O'Reilly’ > Programming</myBook> COMP9321, 17s1, Week 4

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. COMP9321, 17s1, Week 4

Phonebook.xml with Internal DTD

Phonebook.xml with External DTD. Phonebook.dtd

CDATA Section COMP9321, 17s1, Week 4

Defining XML Content: Elements

Defining XML Content: Modifiers
Google(regular expression) COMP9321, 17s1, Week 4

Defining XML Content: Choices, Empty

Defining XML Content: Mixed content, Any

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. COMP9321, 17s1, Week 4

XML Custom Entities COMP9321, 17s1, Week 4

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;)> COMP9321, 17s1, Week 4

Parameter Entities COMP9321, 17s1, Week 4

Well-formedness and Validity of XML

Limitations of DTD COMP9321, 17s1, Week 4

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). COMP9321, 17s1, Week 4

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 ? COMP9321, 17s1, Week 4

XML Namespaces COMP9321, 17s1, Week 4

XML Namespaces (example)

XML Namespaces COMP9321, 17s1, Week 4

Previous examples can now be ...

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> <h:table xmlns:h=" <h:tr> <h:td>Apples</h:td> <h:td>Bananas</h:td> </h:tr> </h:table> <f:table xmlns:f=" <f:name>African Coffee Table</f:name> <f:width>80</f:width> <f:length>120</f:length> </f:table> </root> <table> <tr> <td>Apples</td> <td>Bananas</td> </tr> </table> <name>African Coffee Table</name> <width>80</width> <length>120</length> COMP9321, 17s1, Week 4

XML Namespace Syntax <root xmlns:h = “http://www.w3.org/TR/html4/”
xmlns:f = " <h:table> <h:tr> <h:td>Apples</h:td> <h:td>Bananas</h:td> </h:tr> </h:table> <f:table> <f:name>African Coffee Table</f:name> <f:width>80</f:width> <f:length>120</f:length> </f:table> </root> 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> <h:table xmlns:h=" <h:tr> <h:td>Apples</h:td> <h:td>Bananas</h:td> </h:tr> </h:table> <f:table xmlns:f=" <f:name>African Coffee Table</f:name> <f:width>80</f:width> <f:length>120</f:length> </f:table> </root> <table> <tr> <td>Apples</td> <td>Bananas</td> </tr> </table> <name>African Coffee Table</name> <width>80</width> <length>120</length> COMP9321, 17s1, Week 4

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. COMP9321, 17s1, Week 4

Simple Types COMP9321, 17s1, Week 4

Attributes COMP9321, 17s1, Week 4

Type Restrictions COMP9321, 17s1, Week 4

Complex Types COMP9321, 17s1, Week 4

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. COMP9321, 17s1, Week 4

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 COMP9321, 17s1, Week 4

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 COMP9321, 17s1, Week 4

<?xml version="1.0" ….> <comp9321_students> <student> <id>50001</id> <name>Adam B.</name> <program>8543</program> <stage>1</stage> </student> <id>50002</id> <name>Alex C.</name> <program>3978</program> <stage>3</stage> </comp9321_students> 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()<3] Selects the first two “student” element that is the child of the “comp9321_student” element /comp9321_student/student[stage>2] Selects all the “student” elements of the “comp9321_student” element that have a “stage” element with a value greater than 2. … 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 COMP9321, 17s1, Week 4

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. COMP9321, 17s1, Week 4

An XML document is a tree ...

Attributes in XML tags COMP9321, 17s1, Week 4

Parsing XML documents with Java

SAX and DOM as the Standard Interfaces

Document Object Model (DOM)

Dealing with Nodes in DOM

An example XML here ... COMP9321, 17s1, Week 4

DOM for XML COMP9321, 17s1, Week 4

Using a DOM Parser (eg., Apache Xerces)

Document Interface Methods

Examples of Node Properties (XML), p.9.25

Count/Print the number of 'book' elements

Dealing with Nodes in DOM
The method getNodeType() returns the number in the range 1 to 12. COMP9321, 17s1, Week 4

More with DOM ... COMP9321, 17s1, Week 4

JSON (JavaScript Object Notation)

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. COMP9321, 17s1, Week 4

JSON JSON is a syntax for storing and exchanging data.
JSON is an easier-to-use alternative to XML. are "self describing" (human readable) can be parsed and used by lots of programming languages Both JSON and XML: are hierarchical (values within values) can be fetched with an XMLHttpRequest Unlike XML, JSON : doesn't use end tag is quicker to read and write is shorter can use arrays XML: JSON: JSON uses JavaScript syntax, but the JSON format is text only, just like XML. COMP9321, 17s1, Week 4

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. COMP9321, 17s1, Week 4

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. COMP9321, 17s1, Week 4

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. COMP9321, 17s1, Week 4

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"} COMP9321, 17s1, Week 4

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"} ] COMP9321, 17s1, Week 4

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" COMP9321, 17s1, Week 4

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 COMP9321, 17s1, Week 4

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. COMP9321, 17s1, Week 4

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 COMP9321, 17s1, Week 4

References http://www.w3.org/XML/ XML in a nutshell, Chapters 9 and 10
Some examples in these notes are originated from Dr. David Edmond from QUT, Brisbane COMP9321, 17s1, Week 4

COMP9321 Web Application Engineering Semester 1, 2017

Similar presentations

Presentation on theme: "COMP9321 Web Application Engineering Semester 1, 2017"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

COMP9321 Web Application Engineering Semester 1, 2017

Similar presentations

Presentation on theme: "COMP9321 Web Application Engineering Semester 1, 2017"— Presentation transcript:

Similar presentations

About project

Feedback