introduction to xmlect7010/materials/lecture/xml_parti.pdf · introduction to xml ect7010 –...

Introduction to XML ECT7010 – Fundamentals of E-Commerce Technologies

1

Introduction to XML Objectives:

This module covers basic knowledge about XML, and its supporting technologies such as DTD, XML

Schema, CSS, and XSL. Also, it covers an introduction to an XML editor, Stylus Studio(eXcelon Corp.)

(Remark: Only Internet Explorer 5.0 or above supports XML.)

References:

� “XML in a Nutshell” by Elliotte Rusty Harold & W. Scott Means

� World Wide Web Consortium (W3C) -- http://www.w3.org

Part 1. XML Basics In this section, we will introduce some basic knowledge on XML with the use of Notepad , Internet

Explorer.

A. Create your first XML file

1. Click on START and point to PROGRAMS, then point to Accessories and select

Notepad* .

2. In the Notepad

type the following

codes:

3. Click on FILE in the menu bar and select Save As :

4. In the Save As dialog box select c:\user\demo as the Save In directory.

5. Type hello.xml in the File name box.

• Microsoft FrontPage also provides an XML editor, which can verify whether an XML

document is well-formed or not, but cannot validate the document with its DTD or XML

<?xml version=”1.0” standalone=”yes” ?> <woo>Hello XML </woo>


2

schema.

B. View your first XML file using a browser

1. Double click the Internet Explorer icon in the Desktop .

In the Address box type c:\user\demo\hello.xml

C. Use different tags

1. Switch to Notepad and change the codes that you have typed to the following

<?xml version=”1.0” standalone=”yes” ?> <Greeting>Hello XML </Greeting>


3

2. Click on File and

select Save

3. Switch to IE and

press the Refresh

button

You will see:

XML allows you to

create any tag you want. You can change the tag and repeat the steps again and again.

D. Start and End tags of XML

1. Switch to Notepad

2. Change the code

of the file hello.xml

to:

3. Click File and

select Save

4. Switch to IE and press Refresh again and you will see a warning.

If using the XML Editor in FrongPage:

<?xml version=”1.0” standalone=”yes” ?> <Greeting>Hello XML </Greet>

4

In each XML document should has a pair of Start Tag and End Tag . Start Tag should

match with End Tag .

E. Case Sensitivity of Start and End Tags

1. Switch to the Notepad

2. Change the codes to the following


select Save

4. Switch to IE and

press the

Refresh button

You will see a

warning

In each XML

document, Start Tags and

End Tags are

case-sensitive.

F. Comments in XML


2. Add the following codes into the XML file

You will see a page like this.

For Internet Explorer 5.0:

Comment should not come

before. The declaration must be

the very first thing in the XML

document.

<?xml version=”1.0” standalone=”yes” ?> <Greeting>Hello XML </greeting>

<?xml version=”1.0” standalone=”yes” ?>  <Greeting>Hello XML </Greeting>


5

G. Insert Empty Element


2. Click on File and select New to open a new document

3. Type the following code in the

Notepad

4. Click on File and select Save

5. In the Save As dialog select

c:\user\demo as the Save in

directory.

6. Type xml2.xml in the File

name box and press

Save

7. Switch to IE, type

c:\user\demo\xml2.xml in

the Address box and

press Enter

H. Tree Structure of XML


2. Change the code of

xml2.xml to the following

3. Click File and select

Save

4. Switch to IE and press

the Refresh button

You will see the following

warning:

In XML only one

top-level element is allowed.

There must be only one root

element in a XML document.

<?xml version=”1.0” standalone=”yes” ?> <root> <full>This is not an element</full> <empty/> </root>

<?xml version=”1.0” standalone=”yes” ?> <root>This is root </root> <full>This is an element</full> <empty/>

An empty element


6

I. Attributes in XML 1. Switch to the Notepad

2. Click on File and select New

3. In the new document

type this


select Save

5. In the Save As

dialog select

c:\user\demo as the

Save in directory

6. Type xml3.xml in the

File name box and

then press Enter

7. Switch to IE and

type

c:\user\demo\xml3

.xml in the

Address box and

then press Enter

You will see the

following:

<?xml version=”1.0” standalone=”yes” ?> <Information> <Person>

<Name FirstName=”Tai Man” LastName=”Chan”/> <Age>20</Age> <Address City=”HK”

Country=”China”>CUHK</Address> </Person> <Person>

<Name FirstName=”Siu Ming” LastName=”Wong”/> <Age>22</Age> <Address City=”HK”

Country=”China”>CUHK</Address> </Person> </Information>

7

J. Internal Data Type Definition (DTD)


2. Click on File and select

New

3. In the new file, type the

following


select Save

5. In the Save As

dialog select

c:\user\demo as

the Save in

directory

Type people.xml in the File

name box and press Enter

<?xml version="1.0" standalone="yes" ?>  <!DOCTYPE people [ <!ELEMENT people (person, person)> <!ELEMENT person (name, address, telephone)> <!ELEMENT name (first_name, last_name)> <!ELEMENT first_name (#PCDATA)> <!ELEMENT last_name (#PCDATA)> <!ELEMENT address (#PCDATA)> <!ELEMENT telephone (#PCDATA)> ]> <people> <person> <name> <first_name>Tai Man</first_name> <last_name>Chan</last_name> </name> <address>No. 28 Cliff Road</address> <telephone>12345678</telephone> </person> <person> <name> <first_name>Siu Man</first_name> <last_name>Wong</last_name> </name> <address>No. 28 Hill Street</address> <telephone>23456789</telephone> </person> </people>

8

K. External DTD



3. In the new file,

type the

following

4. Click on File

and select

Save

5. In the Save

As dialog

select

c:\user\demo

as the Save in

directory

6. Type

computers.xml in the File name box and then press Enter

7. Switch to IE and type c:\user\demo\computers.xml and then press Enter .

The browser cannot locate the computers.dtd file and returns an error.




following


Save

12. In the Save As dialog box

select c:\user\demo as the Save In directory

<?xml version="1.0" standalone="no"?> <!DOCTYPE computers SYSTEM "computers.dtd">  <computers> <computer> <type>Desktop</type> <CPU>P6</CPU> <RAM>64MB</RAM> <price>$5000</price> </computer> <computer> <type>Notebook</type> <CPU>P6</CPU> <RAM>128MB</RAM> <price>$10000</price> </computer> </computers>

<!ELEMENT computers (computer, computer)> <!ELEMENT computer (type, CPU, RAM, price)> <!ELEMENT type (#PCDATA)> <!ELEMENT CPU (#PCDATA)> <!ELEMENT RAM (#PCDATA)> <!ELEMENT price (#PCDATA)>


9

13. Type computers.dtd in

the File name box and

press Save

14. Switch to IE and press

the Refresh button

You will see the following

result. DTD is placed in a

separate file so it is an

external DTD.

L. ATTLIST in DTD



New


following

4.


Save

6. In the Save As dialog

select c:\user\demo as

the Save In directory

7. In the File name box

type students.xml and

then press Save

8. Switch to IE and type

c:\user\demo\students.x

ml and then press Enter

<?xml version="1.0" standalone="yes"?> <!DOCTYPE students [ <!ELEMENT students (student1)> <!ELEMENT student1 (name, department, ID)> <!ELEMENT name EMPTY> <!ATTLIST name first_name CDATA #REQUIRED last_name CDATA #REQUIRED > <!ELEMENT department (#PCDATA)> <!ELEMENT ID (#PCDATA)> ]> <students> <student1> <name first_name="Tai Man" last_name="Chan"/> <department>ECT</department> <ID>99123456</ID> </student1> </students>


10

M. Element Options



New


following


Save


select c:\user\demo as the

Save In directory

6. In the File name box type

fruits.xml and then press

Save


c:\user\demo\fruits.xml

and then press Enter


9. Change the code to the

following


Save

11. Switch to IE and type c:\user\demo\students.xml and then press Enter .

<?xml version="1.0" standalone="yes"?> <!DOCTYPE fruits [ <!ELEMENT fruits (fruit1)> <!ELEMENT fruit1 (apple | orange | banana)> ]> <fruits> <fruit1> <apple>Delicious</apple> </fruit1> </fruits>

<?xml version="1.0" standalone="yes"?> <!DOCTYPE fruits [ <!ELEMENT fruits (fruit1)> <!ELEMENT fruit1 (apple | orange | banana)> <!ELEMENT apple ANY> <!ELEMENT orange ANY> <!ELEMENT banana ANY> ]> <fruits> <fruit1> <apple>Big Apple</apple> <orange>Big Orange</orange> </fruit1> </fruits>


11

12. IE would not validate the documents.

13. You can use an online validators to validate the document. E.g. The Brown University

Schorlarly Technology Group’s XML Validation Form at

http://www.stg.brown.edu/service/xmlvalid/

(apple | orange | banana) allows user to choose only one from them as an element (i.e., the |

operator indicates an element occurs once or not at all )




following


select Save




19. In the File name box type fruits2.xml and then press Save

The ? sign allow the element to occur once or not at all . The * sign allow the element to occur

zero or more times. The + sign allows the element to occur once or more times.

<?xml version="1.0" standalone="yes"?> <!DOCTYPE fruits [ <!ELEMENT fruits (fruit1)> <!ELEMENT fruit1 (apple , orange, banana?)> <!ELEMENT apple ANY> <!ELEMENT orange ANY> <!ELEMENT banana ANY> ]> <fruits> <fruit1> <apple>Delicious</apple> <orange>Good</orange> </fruit1> </fruits>


12



New


following


Save





type fruits.xml and then

press Save

26. Switch to XML Notepad and open c:\user\demo\fruits.xml

ANY allows any combination of character data and elements.

N. Attribute Options



select New


following


select Save





type employees.xml

and then press Save

7. Switch to XML

Notepad and open

c:\user\demo\employe

es.xml

<?xml version="1.0" standalone="yes"?> <!DOCTYPE employees [ <!ELEMENT employees (employee1)> <!ELEMENT employee1 (name, department, ID, birth)> <!ELEMENT name EMPTY> <!ATTLIST name first_name CDATA #REQUIRED last_name CDATA #IMPLIED > <!ELEMENT department (#PCDATA)> <!ELEMENT ID (#PCDATA)> <!ELEMENT birth EMPTY> <!ATTLIST birth PlaceOfBirth (HK | UK | China) "HK" Hospital CDATA #IMPLIED DOB CDATA #REQUIRED Planet CDATA #FIXED "Earth" > ]> <employees> <employee1> <name first_name="Tai Man” last_name="Chan"/> <department>SEEM</department> <ID>99123456</ID> <birth DOB="1-7-1997"/> </employee1> </employees>

<?xml version="1.0" standalone="yes"?> <!DOCTYPE fruits [ <!ELEMENT fruits (fruit1)> <!ELEMENT fruit1 ANY> <!ELEMENT apple ANY> <!ELEMENT orange ANY> <!ELEMENT banana ANY> ]> <fruits> <fruit1> <apple>Delicious</apple> <orange>Good</orange>

<orange>Sweet</orange> <banana>Yellow</banana>

</fruit1> </fruits>


13

Here are some explanations of the code.

• #REQUIRED are used to define attributes that must be entered

• #IMPLIED are for attributes that can be left unspecified if desired

• #FIXED are for attributes that have their values fixed in the DTD

• PlaceOfBirth (HK| UK | China) “HK” means that PlaceOfBirth takes three choices in the

bracket and the default is “HK”

• Therefore you left the attribute PlaceOfBirth unfilled it so that its value will be automatically

taken the default choice “HK” and the Planet attribute is automatically assigned to Earth .

8. Switch to Notepad and delete the attribute

of first_name


10. Validate the document.

You missed the required attribute. Hence there

is an error.

O. XML Schema



3. In the new file, type the following


5. In the Save As dialog select c:\user\demo as the Save In directory

6. In the File name box type xml_sc.xml and then press Save

7. Similarly, create a file called xml_sc.xsd with the following contents:

<employees> <employee1> <name last_name="Chan"/> <department>SEEM</department> <ID>99123456</ID> <birth DOB="1-7-1997"/> </employee1> </employees>

<?xml version="1.0" ?> <fullname xmlns:xsi=” http://www.w3.org/2001/XMLSchema-instance ” xsi:noNamespaceSchemaLoation=”xml_sc.xsd”> <first>Chan</first> <last>Tai Ming</last> </fullname>

<?xml version="1.0" ?> <xs:schema xmlns:xsd=”http://www.w3.org/2001/XMLSch ema”>

<xs:element name=”fullname”> <xs:complexType> <xs:element name=”first” type=”xs:string”/> <xs:element name=”last” type=”xs:string”/> </xs:complexType>

</xs:element> </xs:schema>


14

Built-in simple schema types: boolean, dateTime, integer, string, the attribute types(such as ID,

IDREF, ENTITY), etc.

P. XML with Cascading Style Sheet (CSS)



3. In the new file, type

the following


select Save


6. In the File name box type xml4.xml and then press Save

7. Then click on File and select New

8. In the new document

type the following

9. Then click on File

and select Save


11. In the File name box type xml4.css and then press Save

12. Switch to IE and type c:\user\demo\xml4.xml in the Address box

You will see the following in your

browser

CSS is used to add styles to

the XML document. Actually you can always play with the formatting in your XML file by editing

the Style Sheets. The details on how to use CSS can be found at

http://www.w3.org/TR/REC-CSS1 and CSS level 2 at http://www.w3.org/TR/REC-CSS2.

Q. Another CSS Example



3. In the new file, type the following

<?xml version="1.0" ?> <?xml-stylesheet type=”text/css” href=”xml4.css”?> <Greeting>Hello World</Greeting>

Greeting {display:block; font-size:48pt;font-weight:bold;}

15



6. In the File name box type bookstore.xml and then press Save

7. Switch to IE and type c:\user\demo\xml4.xml in the Address box



<?xml version="1.0"?> <?xml-stylesheet type="text/css" href="bookstore.cs s"?> <Bookstore>  <Book> <Title>The Round Door</Title> <Author>Tom Evans</Author> <Year_Published>1996</Year_Published> <ISBN>0-999-888-7</ISBN> <Price>$75</Price> <In_Stock>Yes</In_Stock> </Book> <Book> <Title>Understanding XML</Title> <Author>Sam Chan</Author> <Year_Published>2000</Year_Published> <ISBN>0-999-789-7</ISBN> <Price>$200</Price> <In_Stock>No</In_Stock> </Book> <Book> <Title>Advanced XML</Title> <Author>John Eaton</Author> <Year_Published>2000</Year_Published> <ISBN>0-999-688-7</ISBN> <Price>$280</Price> <In_Stock>Yes</In_Stock> </Book> </Bookstore>


16

10. In the new

document type

the following

11. Then click on

File and select

Save


select c:\user\demo as the

Save In directory

13. In the File name box type

bookstore.css and then

press Save


c:\user\demo\Bookstore.x

ml in the Address box

Bookstore {font-size:14pt; background-color:white; color:black; display:block} Title {display:block; font-size:32pt; font-weight:bold; text-align:left; text-transform:uppercase} Author {display:block; font-size:12pt; text-align:left;font-style:italic} ISBN {display:block; font-size:12pt; text-align:left} Price {display:block; font-size:12pt; text-align:left} In_Stock {display:block; font-size:12pt; text-align:left}


17

R. XML with XSL



3. In the new document type the following

4. Then click on File and select Save


6. In the File name box type stock_market.xml and then press Save


8. In the new document type the following

<?xml version="1.0"?> <?xml-stylesheet type="text/xsl" href="stock_market.xsl"?> <stock_market> <stock> <stock_code>0001</stock_code> <stock_name>Cheung Kong Holdings.</stock_name> <date>01-Jan-2002</date> <open>70.5</open> <close>72.4</close> <volume>200M</volume> </stock> <stock> <stock_code>0002</stock_code> <stock_name>China Light and Power. </stock_name> <date>01-Jan-2002</date> <open>22.2</open> <close>24.5</close> <volume>100M</volume> </stock> <stock> <stock_code>0003</stock_code> <stock_name>Hong Kong and China Towngas</stock_na me> <date>01-Jan-2002</date> <open>9.5</open> <close>10.5</close> <volume>110M</volume> </stock> </stock_market>


18


10. In the File name box type stock_market.xsl and then press Save

11. Switch to IE and type c:\user\demo\stock_market.xml in the Address box

XSL in Internet Explorer 5 is not compatible with the official W3C XSL Recommendation.

<?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/TR/WD-xsl"> <xsl:template match="/"> <html> <body> <h1>Hong Kong Stock Market Summary</h1> <table border="2" bgcolor="white"> <tr> <th>Stock Code</th> <th>Stock Name</th> <th>Date</th> <th>Open</th> <th>Close</th> <th>Volume</th> </tr>

<xsl:for-each select="stock_market/stock"> <tr> <td><xsl:value-of select="stock_code"/></td > <td><xsl:value-of select="stock_name"/></td > <td><xsl:value-of select="date"/></td> <td>$<xsl:value-of select="open"/></td> <td>$<xsl:value-of select="close"/></td> <td><xsl:value-of select="volume"/></td> </tr> </xsl:for-each> </table> </body> </html> </xsl:template> </xsl:stylesheet>


19

The correct way to declare a stylesheet according to W3C Recommendation is:

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

However, when using Internet Explorer 5, the following outdated declaration should be used

<xsl:stylesheet

xmlns:xsl="http://www.w3.org/TR/WD-xsl">

XSL uses one or more templates to define how to transform XML elements. A match attribute

is used to associate the template with an XML element . The match attribute can also be used to

define a template for a whole branch of the XML document, like when we use match="/" to define the

whole document.

The XSL <xsl:for-each> element can be used to select every XML element into the output stream

of the XSL transformation:

The XSL <xsl:value-of> element can be used to select XML elements into the output stream of

the XSL transformation:

For list of XSL Tools:

http://dmoz.org/Computers/Data_Formats/Markup_Languages/XML/Style_Sheets/XSL/Tools/

introduction to xmlect7010/materials/lecture/xml_parti.pdf · introduction to xml ect7010 –...

Documents