| Table of Contents | Previous Next |
5.4 Using CSS and parser on XML documents5.4.1 Using CSS on XML pagesCSS is considered to be an integral part of all HTML/XHTML documents and used on almost every serious page on the Web. By separating the formatting properties such as color, font, size, background, and border from the markup contents, CSS provides a structural base for all HTML/XHTML documents. One of the interesting features of CSS is that it can be used to redefine the formatting properties of an HTML/XHTML tag. Consider the following example: Example: ex05-18.htm - Redefine Formatting Properties Using CSS 1: <?xml version="1.0" encoding="UTF-8"?> 2: <!DOCTYPE html 3: PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 4: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 5: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 6: <head><title>ex05-18.htm </title> 7: <link rel="stylesheet" type="text/css" href="ex05-18.css"> 8: </head> 9: <body> 10: Body Text Defined By External CSS 11: <div> 12: This is a paragraph with formatting properties 13: margin-left :30px; margin-right:30px and margin-top:15px 14: </div> 15: <div style="margin-left:80px;margin-right:180px;color:#880088"> 16: This is another paragraph defined by the CSS properties 17: of the previous paragraph with another margin and color. 18: </div> 19: </body> 20: </html> This is an XHTML page calling an external CSS style file. The statement in line 7 <link rel="stylesheet" type="text/css" href="ex05-18.css"> specifies an external CSS file used to provide the formatting properties of this page. This CSS file is ex05-18.css and is used to redefine the formatting properties of the <body> and <div> elements. Note that the <div> element in line 15 cascades a new definition with the inline style. The detail of the CSS file is listed below:
Example: ex05-18.css - External CSS File For ex05-18.htm
1: body {
2: color:#000088; font-family:arial;
3: font-size:18pt; font-weight:bold;
4: text-align:center; margin-top:20px;
5: }
6:
7: div {
8: text-align:left; font-size:14pt;
9: color:#880000; margin-left:50px;
10: margin-right:30px; margin-top:15pt
11: }
This CSS file contains the definition of two predefined elements, <body> and <div>, in all HTML/XHTML documents. The browser will use these definitions to format the contents related to <body> and <div> until the definition is overridden or cascaded by the new definition as illustrated in line 15 of ex05-18.htm. A screen shot of this example is shown in Fig. 5.15. Figure 5.15. ex05-18.htm
To use the CSS feature on XML is easy. You can define the CSS properties of XML elements and use the following statement to include the CSS file in the XML document: <?xml-stylesheet type="text/css" href="ex05-19.css" ?> When this statement is executed, the browser knows that the incoming file is an xml-stylesheet with content type text/css. This content type specifies an external CSS file and the attribute href provides the location of the file. A capable browser will read this CSS file and format the XML document for display. Consider the following example: Example: ex05-19.xml - Display XML Page Using CSS I 1: <?xml version="1.0"?> 2: <?xml-stylesheet type="text/css" href="ex05-19.css" ?> 3: <body> 4: XML Body Text Defined By External CSS 5: <div01> 6: This is a paragraph with formatting properties 7: margin-left :30px; margin-right:30px and margin-top:15px 8: </div01> 9: <div02> 10: This is another paragraph defined by the CSS properties 11: of the previous paragraph with another margin and color. 12: </div02> 13: </body> This simple XML document is a modification of ex05-18.htm. Since the XML element is not predefined, we have used an element called <body> here. This <body> has nothing to do with the body element in HTML/XHTML and contains no predefined property. To generate the same output as in ex05-18.htm, an external CSS file ex05-19.css is used as illustrated in line 2. Note that the statements in lines 1 and 2 are not XML elements and they don't need the end tag. The listing of the CSS file ex05-19.css is provided below:
Example: ex05-19.css - External CSS File For ex05-19.xml
1: body {
2: display:block;
3: color:#000088; font-family:arial;
4: font-size:18pt; font-weight:bold;
5: text-align:center; margin-top:20px;
6: }
7:
8: div01 {
9: display:block;
10: text-align:left; font-size:14pt;
11: color:#880000; margin-left:50px;
12: margin-right:30px; margin-top:15pt
13: }
14:
15: div02 {
16: display:block;
17: text-align:left; font-size:14pt;
18: color:#880088; margin-left:80px;
19: margin-right:180px; margin-top:15pt
20: }
This CSS file provides all definitions for elements used in the XML document ex05-19.xml. In this example, you don't need to cascade the formatting definition as in ex05-18.htm. You just redefine the definition for the second paragraph as a new element <div02> with properties of its own. The browser will read this CSS file and use it to format the XML document ex05-19.xml and display it on the browser screen. This displaying method is supported by the latest IE (IE6.+) and NS (NS6.+) browsers. Some screen shots of this example are shown in Figs 5.16 and 5.17. Figure 5.16. ex05-19.xml on IE
Figure 5.17. ex05-19.xml on NS
Note that the "display:block" properties are used to control the display as a paragraph. Otherwise, the next paragraph will join up to the previous one. As you have learned from previous sections, one of the important applications of XML documents is to display and handle data information such as catalogs, menus, listings, and database output. It will be easier for an application to generate XML documents than HTML/XHTML pages. For example, suppose you have an XML output from a database containing the staff information of an insurance company. The information is organized as "name," "birth," "sex," "location," and "salary" in XML format. The XML page is listed below: Example: ex05-20.xml - Display XML Page Using CSS II 1: <?xml version="1.0" encoding="ISO-8859-1"?> 2: 3: <?xml-stylesheet type="text/css" href="ex05-20.css"?> 4: <admin> 5: <title> Staff Of ABC Insurance</title> 6: <person> 7: <name>Michael</name> 8: <birth>1950-12-18</birth> 9: <sex>M</sex> 10: <location>London</location> 11: <salary>30,000</salary> 12: </person> 13: <person> 14: <name>Mary</name> 15: <birth>1980-6-22</birth> 16: <sex>F</sex> 17: <location>Paris</location> 18: <salary>23,000</salary> 19: </person> 20: <person> 21: <name>Peter</name> 22: <birth>1975-10-11</birth> 23: <sex>M</sex> 24: <location>New York</location> 25: <salary>28,000</salary> 26: </person> 27: <person> 28: <name>Sue</name> 29: <birth>1969-1-19</birth> 30: <sex>F</sex> 31: <location>Paris</location> 32: <salary>30,000</salary> 33: </person> 34: </admin> There are a number of techniques that can be used to display this XML document. Although not as sophisticated as XSLT, this XML page can be displayed using the following CSS file technique. Consider the CSS file ex05-20.css:
Example: ex05-20.css - External CSS File For ex0520.xml
1: admin {
2: background-color: #000088;
3: font-family:arial; font-weight:bold;
4: width: 100%; height:100%
5: }
6:
7: title {
8: display: block;
9: font-size:30pt; color:#ffff00;
10: margin-top:20pt; margin-bottom: 30pt;
11: text-align:center
12: }
13:
14: person {
15: display: block;
16: margin-bottom: 10pt; margin-left: 70pt;
17: }
18:
19: name {
20: color: #ffff00;
21: font-size: 20pt;
22: }
23:
24: birth {
25: color: #00ff00;
26: font-size: 20pt;
27: }
28:
29: sex,location {
30: color: #ffff00;
31: margin-left: 20pt;
32: font-size: 20pt;
33: }
34:
35: salary {
36: color: #ffffff;
37: margin-left: 20pt;
38: font-size: 20pt;
39:}
The element <admin> is the root element of the XML page containing all other elements. For this element, we define the background color as #000088 (deep blue). The 100% width and height attribute settings guarantee that the background color covers the whole page. The remaining elements are self-explanatory. In many cases, you can use one definition to define two elements as illustrated in lines 2933. This is a simple example to display a database result using XML pages. The database fields are displayed in different colors. A proper chapter on databases and the MySQL database package will be introduced in Part IV of this book. Some screen shots of this example on IE and NS are shown in Figs 5.18 and 5.19. Figure 5.18. ex05-20.xml on IE
Figure 5.19. ex05-20.xml on NS
Using CSS to display XML documents is not an ideal approach to XML. The examples here show that this can be done when a simple XML page is involved. For a quick solution, the CSS approach may be handy. However, for a sophisticated solution, the use of XSLT is highly recommended. 5.4.2 Handling XML documents with parserSince IE5.0, Microsoft has bundled the browser with an XML parser which can be used to embed and handle XML documents in an HTML/XHTML page. This means that if you are using IE 5.0 or later, you already have this XML parser installed. At a minimum level, the parser can be employed to display an XML page with XSLT. Consider the following XML page containing information on office equipment data and insurance: Example: ex05-21.xml - An XML Page On Office Equipment Data 1: <?xml version="1.0" encoding="ISO-8859-1"?> 2: 3: <inventory> 4: <item> 5: <name>Computer</name> 6: <price>$1100</price> 7: <des>PC From ABC Equip. Corp.</des> 8: <id>Insurance Id:iv8002</id> 9: </item> 10: <item> 11: <name>Camcorder</name> 12: <price>$400</price> 13: <des>Camcorder From ABC Equip. Corp.</des> 14: <id>Insurance Id:iv8003</id> 15: </item> 16: <item> 17: <name>Photocopier</name> 18: <price>$2100</price> 19: <des>Photocopier From ABC Equip. Corp.</des> 20: <id>Insurance Id:iv8004</id> 21: </item> 22: <item> 23: <name>Notebook computer</name> 24: <price>$1600</price> 25: <des>Notebook Computer From ABC Equip. Cor.</des> 26: <id>Insurance Id:iv8005</id> 27: </item> 28: <item> 29: <name>Mobile PDA and Phone</name> 30: <price>$500</price> 31: <des>Mobile PDA with Phone From ABC Equip. Corp.</des> 32: <id>Insurance Id:iv8006</id> 33: </item> 34: </inventory> 32 This page is a general XML document containing the data of inventory and insurance information. This means that this page contains no specific display or transformation methods. As you learned from section 5.2.2, if you insert the following statement in line 2 <?xml-stylesheet type="text/xsl" href="ex05-21.xsl" ?> this page is handled by the XML-style sheet ex05-21.xsl and therefore can be displayed by the browser. The listing of ex05-21.xsl is shown as follows: Example: ex05-21.xsl - XSLT Transformation For ex05-21.xml 1: <?xml version="1.0" encoding="iso-8859-1"?> 2: <xsl:stylesheet version="1.0" 3: xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 4: 5: <xsl:template match="/"> 6: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 7: <head><title> ex05-21.xsl </title></head> 8: <body style="font-family:Arial, helvetica, sans-serif; font-size:12pt; 9: background-color:#ffffff"> 10: <div style="font-size:20pt;font-weight:bold;text-align:center"> 11: Office Inventory and Insurance</div> <br /><br /> 12: 13: <xsl:for-each select="inventory/item"> 14: <div style="background-color:#8888ff; color:white;font-size:14pt"> 15: <span style="font-weight:bold; color:white"> 16 <xsl:value-of select="name" />- <xsl:value-of select="price" /></span> 17: </div> 18: <div style="margin-bottom:15px;font-weight:bold"> 19: <xsl:value-of select="des" /> 20: <span style="font-style:italic;font-weight:bold;color:#880000"> 21: -- <xsl:value-of select="id"/> Fully Covered 22: </span> 23: </div> 24: </xsl:for-each> 25: </body> 26: </html> 27: </xsl:template> 28: </xsl:stylesheet> Alternatively, if you are using IE5.0 or later, you can develop an XHTML page to embed both ex05-21.xml and the transform file ex05-21.xsl into the XHTML page. Consider the following XHTML page:
Example: ex05-21.htm - Microsoft XML Parser
1: <?xml version="1.0" encoding="UTF-8"?>
2: <!DOCTYPE html
3: PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
4: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
5: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
6: <head><title>ex05-21.htm </title>
7: <body>
8: <script>
9: var xml = new ActiveXObject("Microsoft.XMLDOM")
10: xml.async = false
11: xml.load ("ex05-21.xml")
12:
13: var xsl = new ActiveXObject("Microsoft.XMLDOM")
14: xsl.async = false
15: xsl.load("ex05-21.xsl")
16: document.write(xml.transformNode(xsl))
17: </script>
18: </body><html>
This is an XHTML page to call the XML parser to display an XML page. After the usual XHTML header in lines 17, a script block of JavaScript or ECMAScript is declared to define the XML parser. To display an XML page with XSLT, two procedures are needed. The first step is to define and load the XML page into the parser. This is the job of lines 911. Line 9 creates an instance of the XML parser. Line 10 turns off the asynchronization setting. Therefore the parser will not continue before the document is fully loaded successfully. Line 11 instructs the parser to load the XML document which in this case is ex05-21.xml. The next step is to load the XSLT file which is defined in lines 13-15. When both XML and XSL files are loaded, the following statement in line 16 is used to display the XML document on the browser window: document.write(xml.transformNode(xsl)) A screen shot of this example on IE6.x is shown in Fig. 5.20. Figure 5.20. XML parser on IE
The real strength of the XML parser (Microsoft.XMLDOM) is that all elements and values of an XML page can be accessed through the Document Object Model (DOM). The DOM will be discussed in more detail in Chapters 10 and 11. 5.4.3 Accessing XML elements with parserOne of the important features of the XML parser is that elements of an XML page can be located and accessed via the DOM. The DOM is an important achievement of W3C. It provides a structure for markup languages including HTML/XHTML and XML. To see how the parser and DOM work, let's consider the following XML page: Example: ex05-22.xml - Accessing XML Elements with Parser 1: <?xml version="1.0" encoding="ISO-8859-1"?> 2: <?xml-stylesheet type="text/css" href="ex05-20.css"?> 3: <admin> 4: <person> 5: <name>Michael</name> 6: <birth>1950-12-18</birth> 7: <sex>M</sex> 8: <location>London</location> 9: <salary>30000</salary> 10: </person> 11: <person> 12: <name>Mary</name> 13: <birth>1980-6-22</birth> 14: <sex>F</sex> 15: <location>Paris</location> 16: <salary>23000</salary> 17: </person> 18: </admin> This page contains one main element <admin>. Inside this <admin>, there are two child elements called <person>. Each <person> element also contains five child elements, namely, <name>, <birth>, <sex>, <location>, and <salary>. Using the parser and DOM terms, the <admin> element can be accessed by the statement xmlDoc.documentElement.firstChild The object xmlDoc.documentElement represents the entire structure of the page and the first child of this page is, therefore, the <admin> element. Since there is only one child in this outermost level, the statement xmlDoc.documentElement.lastChild represents the same <admin> element in this case. A collection of all children of this outermost level is represented by the following statement: prinodes = xmlDoc.documentElement.childNodes Now, all the child nodes of the outermost level are assigned to the object prinodes (primary nodes). This object has two elements:
The prinodes.item(0) object represents the first <person> element. Data and information on this person can be collected by the statement nodes = prinodes.item(0).childNodes Now, all child nodes of the first <person> element are assigned to an object called nodes. Therefore, the data of the first person in ex05-22.xml are nodes.item(0).text -- Michael nodes.item(1).text -- 1950-12-18 nodes.item(2).text -- M nodes.item(3).text -- London nodes.item(4).text -- 30000 With these in mind, we can develop an XHTML page to gain access to all elements of an XML page. Consider the following XHTML page:
Example: ex05-22.htm - Accessing XML Element With Parser
1: <?xml version="1.0" encoding="UTF-8"?>
2: <!DOCTYPE html
3: PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
4: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
5: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
6: <head><title>Example: ex05-22.htm </title>
7: <script>
8: function xml_dom()
9: {
10: var xmlDoc=new ActiveXObject("Microsoft.XMLDOM")
11: xmlDoc.async="false"
12: xmlDoc.load("ex05-22.xml")
13:
14: prinodes=xmlDoc.documentElement.childNodes
15: for (jj=0;jj< prinodes.length;jj++)
16: {
17: nodes = prinodes.item(jj).childNodes
18: for (ii=0;ii< nodes.length -1 ;ii++)
19: {
20: document.write( nodes.item(ii).text + ", ")
21: }
22: document.write( nodes.item(ii).text)
23: document.write("<br />")
24: }
25: }
26: </script>
27: <body style="background:#000088;color:#ffff00;text-align:center;
28: font-family:arial;font-size:18pt;font-weight:bold">
29: <br />Access XML Elements With Parser<br /><br />
30:
31: <script>xml_dom()</script>
32: </body>
33: </html>
This is an XHTML page containing one Javascript (or ECMAScript) function called xml_dom(). After the usual body definition (lines 2729), the Javascript function is called by the statement <script>xml_dom()</script> The detailed definition of this function is defined in lines 825. The first three lines of this function (lines 1012) are to load the XML parser. After that, a collection of child nodes of the outermost level is assigned to the object prinodes (line 14). The number of elements inside prinodes is stored in the property prinodes.length This is a number and in this case is 2. A simple for-loop on variable jj to prinodes.length is used to gain access to all the <person> elements (lines 1524). For each <person> element, all child nodes are assigned to the object nodes by nodes = prinodes.item(jj).childNodes A simple for-loop on variable ii to value nodes.length -1 (lines 1824) provides all data and information on the associated person in ex05-22.xml. The output statement in line 20 document.write( nodes.item(ii).text + ", ") is to print out individual data such as name, birthday, sex, and location, depending on the item number ii. All the data are separated by a comma. When the last item is reached, the statement in line 22 is used to output the data without a comma. A screen shot of this example is shown in Fig. 5.21. Figure 5.21. XML and parser II
When dealing with large amount of data or a large XML file, displaying all records at the same time may not be a convenient approach. For these applications, the ability to navigate data or XML elements is essential. 5.4.4 Navigating XML data using parserIn this section, we consider an example that can navigate the data in an XML file. For obvious reasons, we cannot employ a big file. For our demonstration, we consider the following XML document: Example: ex05-23.xml - Navigating XML Data 1: <?xml version="1.0" encoding="ISO-8859-1"?> 2: <?xml-stylesheet type="text/css" href="ex05-20.css"?> 3: <admin> 4: <person> 5: <name>Michael</name> 6: <birth>1950-12-18</birth> 7: <sex>M</sex> 8: <location>London</location> 9: <salary>30,000</salary> 10: </person> 11: <person> 12: <name>Mary</name> 13: <birth>1980-6-22</birth> 14: <sex>F</sex> 15: <location>Paris</location> 16: <salary>23,000</salary> 17: </person> 18: <person> 19: <name>Peter</name> 20: <birth>1975-10-11</birth> 21: <sex>M</sex> 22: <location>New York</location> 23: <salary>28,000</salary> 24: </person> 25: <person> 26: <name>Sue</name> 27: <birth>1969-1-19</birth> 28: <sex>F</sex> 29: <location>Paris</location> 30: <salary>30,000</salary> 31: </person> 32: </admin> This XML file is the same as ex05-22.xml with two more pieces of data. They represent the sales team of an insurance company. For simplicity, our navigating example contains four buttons. They are:
Basically, the DOM structure of this XML document is read by the parser. By using the DOM information, a JavaScript function is developed to display the information of a particular <person> element. For this example, the function is xml_dom_parser(item_no) We can manipulate the value of the variable item_no to achieve the performance of the buttons. For example, when the First button is pressed, all we need to do is to call xml_dom_parser(0). This will display all the information of the first <person> element in the XML page. When the Next button is pressed, the item_no is incremented by 1 and then xml_dom_parser(item_no) is called. The first part of this example is listed below:
Example: ex05-23.htm - Navigating XML Data With Parser (Part One)
1: <?xml version="1.0" encoding="UTF-8"?>
2: <!DOCTYPE html
3: PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
4: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
5: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
6: <head><title>Example: ex05-23.htm </title>
7:
8: <style>
9: .txtSt{background:#000088;color:#ffff00;
10: font-family:arial;font-size:20pt;font-weight:bold}
11: .buSt{background:#aaffaa;font-family:arial;font-weight:bold;
12: font-size:14pt;color:#aa0000;width:150px;height:35px}
13: </style>
14:
15: <script>
16: var xmlDoc=new ActiveXObject("Microsoft.XMLDOM")
17: xmlDoc.async="false"
18: xmlDoc.load("ex05-23.xml")
19:
20: var prinodes=xmlDoc.documentElement.childNodes
21: var last_no = prinodes.length -1
22: var item_no =0
23:
24: function xml_dom_parser(var_no)
25: {
26: nodes = prinodes.item(var_no).childNodes
27: document.getElementById("name").innerText = nodes.item(0).text
28: document.getElementById("birth").innerText = nodes.item(1).text
29: document.getElementById("sex").innerText = nodes.item(2).text
30: document.getElementById("location").innerText = nodes.item(3).text
31: document.getElementById("salary").innerText = nodes.item(4).text
32: }
33:
34: function next() {
35: if (item_no < prinodes.length -1) {
36: item_no ++
37: xml_dom_parser(item_no)
38: }
39: }
40:
41: function previous() {
42: if (item_no > 0) {
43: item_no --
44: xml_dom_parser(item_no)
45: }
46: }
47:
48: function first_item() {
49: item_no = 0
50: xml_dom_parser(item_no)
51: }
52:
53: function last_item() {
54: item_no = last_no
55: xml_dom_parser(item_no)
56: }
57: </script>
58:
After the XHTML header and some style definitions, this page contains a script block to define JavaScript or ECMAScript statements and functions. Lines 1618 are used to defined the XMLDOM parser and load the XML page ex05-23.xml as data. The next three statements declare three variables. The prinodes is an object containing the collection of all <person> elements. The variable last_no in line 21 is the last item of the <person> element. The item_no variable represents the current <person> element and is initially set to 0. Putting a variable outside any function is to declare it as a global variable and available anywhere in the page. The first JavaScript function in this page is function xml_dom_parser(var_no) This function will display all information inside the <person> element associated with the var_no. For example, when var_no is 2, the statement in line 26 turns out to be nodes = prinodes.item(2).childNodes Since the counting starts from 0, the object nodes contain a collection of all information associated with the third <person> element in ex05-23.xml. The remaining statements in lines 2732 are used to extract the name, birthday, sex, location, and salary information for display. For example, consider the statement in line 27
document.getElementById("name").innerText = nodes.item(0).text
The keyword nodes.item(0).text contains the name of the person. This name is going to be displayed at the XHTML element location with an id attribute equal to "name." For example, if you have an XHTML element such as <span id="name"></span> the name will be displayed inside this element. The next() function declared in lines 3439 is simple. When this function is called, the item_no is incremented by 1 and then the xml_dom_parser(item_no) function is called. The remaining JavaScript functions previous(), first_item(), and last_item() are easy to understand. The second part of this example is an XHTML document to display the result and is listed below: Listing: Continuation Of The Example ex05-23.htm (Part Two) 59: <body class="txtSt" style="text-align:center"> 60: <div style="text-algin:center"> 61: Staff Information Of ABC Insurance<br /><br /></div> 62: 63: <table cellspacing="10" class="txtSt" style="font-size:16pt"> 64: <tr><td width="150">Name </td> 65: <td width="150"><span id="name"></span></td></tr> 66: <tr><td>Birthday </td><td><span id="birth"></span></td></tr> 67: <tr><td>Sex </td><td><span id="sex"></span></td></tr> 68: <tr><td>Location </td><td><span id="location"></span></td></tr> 69: <tr><td>Salary </td><td><span id="salary"></span></td></tr> 70: </table><br /> 71: 72: <input type="button" class="buSt" value="next" onclick="next()" /> 73: <input type="button" class="buSt" value="previous" onclick="previous()" /> 74: <br /> 75: <input type="button" class="buSt" value="first" onclick="first_item()" /> 76: <input type="button" class="buSt" value="last" onclick="last_item()" /> 77: 78: <script>xml_dom_parser(item_no)</script> 79: </body> 80: </html> The first part of this listing is a table to display the result. The first row of the table is (see lines 6465)
<tr><td width="150">Name </td>
<td width="150"><span id="name"></span></td></tr>
The item of this row is a text name. The second item of this row contains an XHTML element: <span id="name"></span> This element has an id equal to "name" and therefore is ready to display anything instructed by the statement
document.getElementById("name").innertext = xxxxx
as illustrated in line 27 of this example. The remaining table elements are defined in a similar manner. The last part of this page (see lines 7278) contains four buttons. The first button is <input type="button" class="buSt" value="next" onclick="next()" /> This button has a value (or label) as "next." When this button is clicked, the function next() is called and moves the record to the next one. All other buttons are declared in a similar fashion. In order to kick off the page, the statement in line 78 is used. This statement starts the page with a function called xml_dom_parser(item_no). Since the item_no is initially set to 0, the page will start by displaying the information of the first <person> element. Some screen shots are shown in Figs 5.225.25. Figure 5.22. The first <person>
Figure 5.25. Previous button pressed
Figure 5.23. Next button pressed
Figure 5.24. Last button pressed
|
| Table of Contents | Previous Next |
