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>
Introduction to XML ECT7010 – Fundamentals of E-Commerce Technologies
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>
Introduction to XML ECT7010 – Fundamentals of E-Commerce Technologies
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>
Introduction to XML ECT7010 – Fundamentals of E-Commerce Technologies
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
3. Click on File and
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
1. Switch to the Notepad
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” ?> <!-- This is an XML Greeting --> <Greeting>Hello XML </Greeting>
Introduction to XML ECT7010 – Fundamentals of E-Commerce Technologies
5
G. Insert Empty Element
1. Switch to Notepad
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
1. Switch to the Notepad
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
Introduction to XML ECT7010 – Fundamentals of E-Commerce Technologies
6
I. Attributes in XML 1. Switch to the Notepad
2. Click on File and select New
3. In the new document
type this
4. Click on File and
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>
Introduction to XML ECT7010 – Fundamentals of E-Commerce Technologies
7
J. Internal Data Type Definition (DTD)
1. Switch to Notepad
2. Click on File and select
New
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
Type people.xml in the File
name box and press Enter
<?xml version="1.0" standalone="yes" ?> <!-- This is an internal DTD --> <!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>
Introduction to XML ECT7010 – Fundamentals of E-Commerce Technologies
8
K. External DTD
1. Switch to Notepad
2. Click on File and select New
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.
8. Switch to Notepad
9. Click on File and select New
10. In the new file, type the
following
11. Click on File and select
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"> <!-- This allow sharing of DTD among doucments --> <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)>
Introduction to XML ECT7010 – Fundamentals of E-Commerce Technologies
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
1. Switch to Notepad
2. Click on File and select
New
3. In the new file, type the
following
4.
5. Click on File and select
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>
Introduction to XML ECT7010 – Fundamentals of E-Commerce Technologies
10
M. Element Options
1. Switch to Notepad
2. Click on File and select
New
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. In the File name box type
fruits.xml and then press
Save
7. Switch to IE and type
c:\user\demo\fruits.xml
and then press Enter
8. Switch to Notepad
9. Change the code to the
following
10. Click on File and select
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>
Introduction to XML ECT7010 – Fundamentals of E-Commerce Technologies
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 )
14. Switch to Notepad
15. Click on File and select New
16. In the new file, type the
following
17. Click on File and
select Save
18. In the Save As dialog
select c:\user\demo as
the Save In directory
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>
Introduction to XML ECT7010 – Fundamentals of E-Commerce Technologies
12
20. Switch to Notepad
21. Click on File and select
New
22. In the new file, type the
following
23. Click on File and select
Save
24. In the Save As dialog
select c:\user\demo as
the Save In directory
25. In the File name box
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
1. Switch to Notepad
2. Click on File and
select New
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. In the File name box
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>
Introduction to XML ECT7010 – Fundamentals of E-Commerce Technologies
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
9. Click on File and select Save
10. Validate the document.
You missed the required attribute. Hence there
is an error.
O. XML Schema
1. Switch to Notepad
2. Click on File and select New
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. 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>
Introduction to XML ECT7010 – Fundamentals of E-Commerce Technologies
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)
1. Switch to Notepad
2. Click on File and select New
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. 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
10. In the Save As dialog select c:\user\demo as the Save In directory
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
1. Switch to Notepad
2. Click on File and select New
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;}
Introduction to XML ECT7010 – Fundamentals of E-Commerce Technologies
15
4. Click on File and select Save
5. In the Save As dialog select c:\user\demo as the Save In directory
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
8. Switch to Notepad
9. Then click on File and select New
<?xml version="1.0"?> <?xml-stylesheet type="text/css" href="bookstore.cs s"?> <Bookstore> <!-- CUHK Booksellers Database --> <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>
Introduction to XML ECT7010 – Fundamentals of E-Commerce Technologies
16
10. In the new
document type
the following
11. Then click on
File and select
Save
12. In the Save As dialog
select c:\user\demo as the
Save In directory
13. In the File name box type
bookstore.css and then
press Save
14. Switch to IE and type
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}
Introduction to XML ECT7010 – Fundamentals of E-Commerce Technologies
17
R. XML with XSL
1. Switch to Notepad
2. Then click on File and select New
3. In the new document type the following
4. Then click on File and select Save
5. In the Save As dialog select c:\user\demo as the Save In directory
6. In the File name box type stock_market.xml and then press Save
7. Then click on File and select New
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>
Introduction to XML ECT7010 – Fundamentals of E-Commerce Technologies
18
9. In the Save As dialog select c:\user\demo as the Save In directory
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>
Introduction to XML ECT7010 – Fundamentals of E-Commerce Technologies
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/