21
DECO 3002 Advanced Technology Integrated Design Computing Studio Tutorial 5 – XML Basic School of Architecture, Design Science and Planning Faculty of Architecture Wei Peng [email protected] What is XML ? XML stands for eXtensible Markup Language which is a cross-platform, software and hardware independent tool for transmitting information XML is a markup language much like HTML – also a subset of Standard Generalized Markup Language (SGML) XML is for describing the data as HTML for displaying the data Before we introduce XML, have a look at HTML HTML (HyperText Markup Language) was introduced by Tim Berners-Lee and his colleagues in 1989 in order to manage and share large amounts of information among colleagues

DECO 3002 Advanced Technology Integrated Design Computing Studio Tutorial 5 – XML Basic School of Architecture, Design Science and Planning Faculty of

  • View
    214

  • Download
    1

Embed Size (px)

Citation preview

DECO 3002 Advanced Technology Integrated Design Computing Studio

Tutorial 5 – XML Basic

School of Architecture, Design Science and PlanningFaculty of Architecture

Wei [email protected]

What is XML ?

XML stands for eXtensible Markup Language which is a cross-platform, software and hardware independent tool for transmitting information

XML is a markup language much like HTML – also a subset of

Standard Generalized Markup Language (SGML)

XML is for describing the data as HTML for displaying the data

Before we introduce XML, have a look at HTML

HTML (HyperText Markup Language) was introduced by Tim Berners-Lee and his colleagues in 1989 in order to manage and share large amounts of information among colleagues

DECO 3002 Advanced Technology Integrated Design Computing Studio

Tutorial 5 – XML Basic

School of Architecture, Design Science and PlanningFaculty of Architecture

Wei [email protected]

What is HTML ?

HTML is a markup language, a structured language that lets you identify common sections of a document in terms of headings, paragraphs, etc.

An HTML file includes text and HTML markup elements that indicate how the document sections appear in a browser

Examples: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN“> <HTML> <HEAD><TITLE>XML Introduction - What is XML</TITLE> </HEAD> <BODY> <H2>XML is a complement to HTML</H2> <P><B>XML is not a replacement for HTML.</B></P> <P> …… </P> …… </BODY> </HTML>

HTML mixed style information within the structure limits the cross-platform compatibility of the content

DECO 3002 Advanced Technology Integrated Design Computing Studio

Tutorial 5 – XML Basic

School of Architecture, Design Science and PlanningFaculty of Architecture

Wei [email protected]

Cascading Style Sheets: CSS

Separating display information lets you reorient your content for multiple destinations.

Separation of style and structure was accomplished in 1996 by the W3C’s (www.w3c.org) specification for a Web style language named Cascading Style Sheets (CSS).

CSS only sets the format and placement of elements.

Such as:

Title (display: block; font-size: 16pt; font-weight: bold)

DECO 3002 Advanced Technology Integrated Design Computing Studio

Tutorial 5 – XML Basic

School of Architecture, Design Science and PlanningFaculty of Architecture

Wei [email protected]

XML Basics:

XML was designed to describe data and focus on what data is. While HTML was designed to display data and focus on how data looks.

XML tags are not predefined – you must define your own tags – XML is thus a language that lets you describe a markup language, allowing you to create your own elements to meet your information needs.

XML is a complement to HTML, not a replacement for HTML – In future Web development it is most likely that XML will be used to describe the data, while HTML will be used to format and display the same data.

XML 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

DECO 3002 Advanced Technology Integrated Design Computing Studio

Tutorial 5 – XML Basic

School of Architecture, Design Science and PlanningFaculty of Architecture

Wei [email protected]

Compare XML with HTML

HTML is used for data presentation and formatting, whereas XML’s focus is on data content only.

The XML document doesn’t tell you anything about how to render the information in the browser. You have to tell the browser.

When HTML is used to display data, the data is stored inside your HTML.

XML was designed to store, carry, and exchange data. XML was not designed to display data.

XML provides real cross-platform capability which comes from separating display and style from the structure of data.

DECO 3002 Advanced Technology Integrated Design Computing Studio

Tutorial 5 – XML Basic

School of Architecture, Design Science and PlanningFaculty of Architecture

Wei [email protected]

What is XML for ?

XML can separate data from HTML – in terms of data islands;

XML is used to exchange data – with XML, data can be exchanged between incompatible systems – relieve developers from the most time-consuming challenges;

XML and B2B – with XML, financial information can be exchanged over the Internet; XML is going to be the main language for exchanging financial information between businesses over the Internet;

XML can be used to share data because XML data is stored in plain text format, which provides a software- and hardware-independent way of sharing data;

XML can be used to store data – can be next generation database;

XML can be used to create new languages – such as WML (Wireless Markup Language) which is used to markup Internet applications for handheld devices like mobile phones.

…….

DECO 3002 Advanced Technology Integrated Design Computing Studio

Tutorial 5 – XML Basic

School of Architecture, Design Science and PlanningFaculty of Architecture

Wei [email protected]

XML Syntax (I):

An example: <?xml version="1.0" encoding="ISO-8859-1"?> XML declaration - defines the XML version and the character encoding

used in the document <note> -------------------------------------------------- this document is a note

<to>Bill</to> --------------------------------------- to Bill

<from>Hulk</from> ------------------------------- from Hulk

<heading>Reminder</heading> --------------- to remind Bill

<body>Don't forget to patch up my windows</body> </note>

All XML elements must have a closing tag – unlike HTML; XML tags are case sensitive – unlike HTML; All XML elements must be properly nested – <b> <i>This text is bold and italic</b></i> – not correct!!

DECO 3002 Advanced Technology Integrated Design Computing Studio

Tutorial 5 – XML Basic

School of Architecture, Design Science and PlanningFaculty of Architecture

Wei [email protected]

XML Syntax (II):

All XML documents must have a root element and all other elements must be within this root element;

Attribute values must always be quoted – it is illegal to omit quotation marks around attribute values;

<note date=12/11/2002> -- illegal here

With XML, white space is preserved rather than truncated;

Comments in XML is similar to that of HTML.

<!-- This is a comment -->

DECO 3002 Advanced Technology Integrated Design Computing Studio

Tutorial 5 – XML Basic

School of Architecture, Design Science and PlanningFaculty of Architecture

Wei [email protected]

XML Syntax (III):

XML elements have relationships which is related as parents and children; Example:<book>

<title>My First XML</title>

<prod id="33-657" media="paper"></prod>

<chapter>Introduction to XML

<para>What is HTML</para>

<para>What is XML </para>

</chapter>

<chapter>XML Syntax

<para>Elements must have a closing tag</para>

<para>Elements must be properly nested</para>

</chapter>

</book>

DECO 3002 Advanced Technology Integrated Design Computing Studio

Tutorial 5 – XML Basic

School of Architecture, Design Science and PlanningFaculty of Architecture

Wei [email protected]

XML Syntax (IV):

XML elements can have attributes in the start tag, just like HTML, which are used to provide additional information about elements;

such as <file type="gif">robot.gif</file>

Quote Styles, “male" = ‘male'? <person sex=“male"> should be same as <person sex='male'>

It is preferable to store data at bottom level: <note> <date> <day>12</day> <month>11</month> <year>2002</year> </date> <to>Bill</to> <from>Hulk</from> <heading>Reminder</heading> <body>Don't forget to patch up my windows!</body> </note>

DECO 3002 Advanced Technology Integrated Design Computing Studio

Tutorial 5 – XML Basic

School of Architecture, Design Science and PlanningFaculty of Architecture

Wei [email protected]

XML Syntax (V) – An attention here:

Avoid using attributes, because attributes are:

1. Not easily expandable – for future changes;

2. Not describe structures as child elements do;

3. More difficult to manipulate by program code;

4. Not easy to test against a DTD;

5. Not easy to read -- try to use elements to describe data.

DECO 3002 Advanced Technology Integrated Design Computing Studio

Tutorial 5 – XML Basic

School of Architecture, Design Science and PlanningFaculty of Architecture

Wei [email protected]

XML Validation:

An XML document that has correct XML syntax is called “well formed”.

A valid XML file is well-formed file which has a Document Type Definition (DTD) and which conform to it.

The purpose of a DTD is to define the legal building blocks of an XML document. A DTD is for specifying the structure (only) of an XML file: it gives the names of the elements, attributes, and entities that can be used, and how they fit together.

XML Schema is an XML based alternative to DTD.

A valid file begins with a Document Type Declaration, but may have an optional XML Declaration pre-pended:

<?xml version="1.0"?> <!DOCTYPE advert SYSTEM "http://www.foo.org/ad.dtd"> <advert> <headline>...</headline> <text>...</text> </advert>

DECO 3002 Advanced Technology Integrated Design Computing Studio

Tutorial 5 – XML Basic

School of Architecture, Design Science and PlanningFaculty of Architecture

Wei [email protected]

DTD I (Document Type Definition):

A DTD can be declared inline in your XML document, or as an external reference.

Internal DOCTYPE declaration If the DTD is included in your XML source file, it should be wrapped in a DOCTYPE definition with the

following syntax: <?xml version="1.0"?> <!DOCTYPE note [ <!ELEMENT note (to,from,heading,body)> <!ELEMENT to (#PCDATA)> <!ELEMENT from (#PCDATA)> <!ELEMENT heading (#PCDATA)> <!ELEMENT body (#PCDATA)> ]> <note> <to>Bill</to> <from>Hulk</from> <heading>Reminder</heading> <body>Don't forget to patch up my windows!</body> </note>

DECO 3002 Advanced Technology Integrated Design Computing Studio

Tutorial 5 – XML Basic

School of Architecture, Design Science and PlanningFaculty of Architecture

Wei [email protected]

DTD II (Document Type Definition):

External DOCTYPE declaration: If the DTD is external to your XML source file, it should be wrapped in a DOCTYPE definition with the following syntax: <!

DOCTYPE root-element SYSTEM "filename">

Example: <?xml version="1.0"?> <!DOCTYPE note SYSTEM "note.dtd"> <note> <to>Bill</to> <from>Hulk</from> <heading>Reminder</heading> <body>Don't forget to patch up my windows!</body> </note>

The file note.dtd looks like: <!ELEMENT note (to,from,heading,body)> <!ELEMENT to (#PCDATA)> <!ELEMENT from (#PCDATA)> <!ELEMENT heading (#PCDATA)> <!ELEMENT body (#PCDATA)>

DECO 3002 Advanced Technology Integrated Design Computing Studio

Tutorial 5 – XML Basic

School of Architecture, Design Science and PlanningFaculty of Architecture

Wei [email protected]

Why use DTD?

With DTD, each of your XML files can carry a description of its own format with it.

With a DTD, independent groups of people can agree to use a common DTD for interchanging data.

Your application can use a standard DTD to verify that the data you receive from the outside world is valid.

You can also use a DTD to verify your own data.

DTD tutorial online at

http://www.w3schools.com/dtd/default.asp

DECO 3002 Advanced Technology Integrated Design Computing Studio

Tutorial 5 – XML Basic

School of Architecture, Design Science and PlanningFaculty of Architecture

Wei [email protected]

XML Parser:

An XML processor (also called XML parser) evaluates the document to make sure it conforms to all XML specifications for structure and syntax.

Microsoft’s parser is called MSXML and is built into for IE versions 5.0 and above.

Netscape developed its own parser, called Mozilla, which is built into version 6.0 and above.

You can use parsers for validate your XML files or just

Use the online validation tool at

http://www.w3schools.com/dom/dom_validate.asp

DECO 3002 Advanced Technology Integrated Design Computing Studio

Tutorial 5 – XML Basic

School of Architecture, Design Science and PlanningFaculty of Architecture

Wei [email protected]

Browsing XML:

We focus on introducing IE 5.0 or above:

Viewing of XML documents

Full support for W3C DTD standards

XML embedded in HTML as Data Islands

Binding XML data to HTML elements

Transforming and displaying XML with XSL

Displaying XML with CSS

DECO 3002 Advanced Technology Integrated Design Computing Studio

Tutorial 5 – XML Basic

School of Architecture, Design Science and PlanningFaculty of Architecture

Wei [email protected]

Viewing XML:

To view an XML document in IE 5.0 (and higher):

1. you can click on a link, 2. type the URL in the address bar, 3. or double-click on the name of an XML file in a files folder.

If you open an XML document in IE, it will display the document with color coded root and child elements.

Example: A CD category files written in XML: CD; The related style sheets files in CSS: CSSexample; The file can be viewed in IE: CDXML;

DECO 3002 Advanced Technology Integrated Design Computing Studio

Tutorial 5 – XML Basic

School of Architecture, Design Science and PlanningFaculty of Architecture

Wei [email protected]

A Problem Here:

When this two files are added into one file, how can I sort out?

<table> <tr> <td> IBM </td> <td> Dell </td> </tr> </table>

<table> <name> Computer Table </name> <width> 800 </width> <length>1400 </length> </table>

Since element names in XML are not fixed – we have a name conflict here!

XML Namespaces provide a method to avoid element name conflicts.

DECO 3002 Advanced Technology Integrated Design Computing Studio

Tutorial 5 – XML Basic

School of Architecture, Design Science and PlanningFaculty of Architecture

Wei [email protected]

XML Namespace:

Solve this using a prefix added to the conflicted element names, like:

<h:table xmlns:h=“http://www.w3.org/TR/html4/”> <h:tr> <h:td> IBM </h:td> <h:td> Dell </h:td> </h:tr> </h:table>

<f:table xmlns:f=“http://www.arch.usyd.edu.au/furniture”> <f:name> Computer Table </f:name> <f:width> 800 </f:width> <f:length>1400 </f:length> </f:table>

The W3C namespace specification states that the namespace itself should be a Uniform Resource

Identifier (URI). Note that the address used to identify the namespace, is to give the namespace a unique name – may or

may not containing information about the namespace.

DECO 3002 Advanced Technology Integrated Design Computing Studio

Tutorial 5 – XML Basic

School of Architecture, Design Science and PlanningFaculty of Architecture

Wei [email protected]

References:

www.w3c.org

http://www.w3schools.com/default.asp