perfectxml.com
 Basic Search  Advanced Search   
Topics Resources Free Library Software XML News About Us
  You are here: home ĽĽ Free Library ĽĽ The Coriolis Group XML Books » Chapter 15 from XHTML Black Book Wednesday, 24 October 2007
 

Chapter 15

XML and Extending XHTML

Page 2 of 5. Goto Page 1 | 3 | 4 | 5


XML in Internet Explorer 5

The support for XML in Internet Explorer 5 is fairly substantial. Hereís an
overview:

ē Direct viewing of XMLóThe Microsoft XML implementation lets users view XML directly. You can also view XML using XSL or CSS in Internet Explorer.

ē Extensible Stylesheet Language (XSL) supportóThe Microsoft XSL processor, which is based on the latest W3C Working Draft, allows developers to apply style sheets to XML data and to display the data in a dynamic and flexible way that can be customized.

ē High-performance, validating XML engineóThe Internet Explorerís XML engine has been enhanced. It fully supports W3C XML 1 and XML name≠spaces, which let you qualify element names uniquely on the Web and thus avoid conflicts between elements with the same name.

ē XML Document Object Model (DOM)óThe XML DOM is a standard object application programming interface that gives developers control of XML document content, structure, and formats. The Microsoft XML implementation includes support for the W3C XML DOM recommendation and is accessible from Web page scripts, Visual Basic, C++, and other languages.

ē XML schemasóSchemas define the rules of an XML document, including element names and data types, which elements can appear in combination, and which attributes are available for each element.

At last, itís time to start working with the actual data in an XML document.

Loading XML Documents

To work with an XML document in Internet Explorer 5, you can load it in two ways. To show both ways in action, Iíll use the XML document, school.xml, which records a school class on XML, including the names of students in the class:

 

<?xml version="1.0"?>

<SCHOOL>

†† <CLASS type="seminar">

†††††† <CLASS_TITLE>XML In Theory And Practice</CLASS_TITLE>

†††††† <CLASS_NUMBER>10.306</CLASS_NUMBER>

†††††† <SUBJECT>XML</SUBJECT>

†††††† <START_DATE>1/1/2001</START_DATE>

†††††† <STUDENTS>

†††††††††† <STUDENT status="attending">

†††††††††††††† <FIRST_NAME>Mark</FIRST_NAME>

†††††††††††††† <LAST_NAME>Swansburg</LAST_NAME>

†††††††††† </STUDENT>

†††††††††† <STUDENT status="withdrawn">

†††††††††††††† <FIRST_NAME>Thomas</FIRST_NAME>

†††††††††††††† <LAST_NAME>Preston</LAST_NAME>

†††††††††† </STUDENT>

†††††† </STUDENTS>

†† </CLASS>

</SCHOOL>

 

The first way of working with school.xml is to load it in with the Microsoft.
XMLDOM
object, creating a new ActiveX object. To see how this works, Iíll read in school.xml and retrieve the name of the second student. After creating a new ActiveX object, I use the load method to load in school.xml with JavaScript:

 

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

††† <head>

††††††† <title>

†††††††††††† Finding Element Values in an XML Document

†††††††† </title>

 

†††††††† <script type="text/javascript" language="javascript">

†††††††††††† function getStudentData()

††††††††††††† {

††††††††††††††††† var xmldoc;

††††††††††††††††† xmldoc = new ActiveXObject("Microsoft.XMLDOM");

††††††††††††††††† xmldoc.load("school.xml");

††††††††††††††††† .

††††††††††††††††† .

††††††††††††††††† .

††††††††††††† }

††† </head>

</html>

 

Now I get the root element of the XML document (which contains all the other elements), using the documentElement property of this new object. Iím now free to navigate around the XML document by using the firstChild, nextChild, previousChild, and lastChild methods, which let you access the child elements of an element, and the firstSibling, nextSibling, previousSibling, and lastSibling methods, which let you access elements on the same level. To get the root element of the XML document, you start with the documentElement method; then navigate to the second student element and create objects corresponding to the studentís first and last names:

 

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

††† <head>

††††††† <title>

†††††††††††† Finding Element Values in an XML Document

†††††††† </title>

 

†††††††† <script type="text/javascript" language="javascript">

††††††††††††† function getStudentData()

††††††††††††† {

††††††††††††††††† var xmldoc;

††††††††††††††††† xmldoc = new ActiveXObject("Microsoft.XMLDOM");

††††††††††††††††† xmldoc.load("school.xml");

†††††††††††† †††††nodeSchool = xmldoc.documentElement;

††††††††††††††††† nodeClass = nodeSchool.firstChild;

††††††††††††††††† nodeStudents = nodeClass.lastChild;

††††††††††††††††† nodeStudent = nodeStudents.lastChild;

††††††††††††††††† nodeFirstName = nodeStudent.firstChild;

††††††††††††††††† nodeLastName = nodeFirstName.nextSibling;

††††††††††††††††† .

††††††††††††††††† .

††††††††††††††††† .

††† </head>

</html>

 

To recover the data from the XML documentóthat is, the content of an elementóyou use the nodeValue property. Hereís how I retrieve the name of the second student in school.xml and display it in a <DIV> element in the documentís body:

 

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

††† <head>

††††††† <title>

†††††††††††† Finding Element Values in an XML Document

†††††††† </title>

 

†††††††† <script type="text/javascript" language="javascript">

††††† ††††††††function getStudentData()

††††††††††††† {

††††††††††††††††† var xmldoc;

††††††††††††††††† xmldoc = new ActiveXObject("Microsoft.XMLDOM");

††††††††††††††††† xmldoc.load("school.xml");

††††††††††††††††† nodeSchool = xmldoc.documentElement;

††††††† ††††††††††nodeClass = nodeSchool.firstChild;

††††††††††††††††† nodeStudents = nodeClass.lastChild;

††††††††††††††††† nodeStudent = nodeStudents.lastChild;

††††††††††††††††† nodeFirstName = nodeStudent.firstChild;

††††††††††††††††† nodeLastName = nodeFirstName.nextSibling;

 

††††††††††††††††† outputMessage = "Name: " +

††††††††††††††††††††††† nodeFirstName.firstChild.nodeValue + ' '

††††††††††††††††††††† + nodeLastName.firstChild.nodeValue;

††††††††††††††††† message.innerHTML=outputMessage;

†††††††††††† }

†††††††† </script>

††† </head>

 

††† <body>

††††††† <center>

††††††††††† <h1>

††††††††††††††† Finding Element Values in an XML Document

††††††††††† </h1>

 

††††††††††† <div id="message"></div>

††††††††††† <p>

††††††††††† <input type="button" value="Get Second Student's Name"

††††††††††††††† onclick="getStudentData()" />

††††††††††† </p>

††††††† </center>

††† </body>

</html>

 

Note also that Iím adding a button to the Web page to run the JavaScript that will read the second name. You can see the results in Figure 15.2. When the user clicks the button, the browser reads in school.xml and displays the name of the second student. Weíve made some progress.

 

Figure 15.2  Accessing data in an XML document in Internet Explorer.

 

Using Data Islands

Starting with Internet Explorer 5, you can also use data islands to handle XML. Data islands enclose XML inside a standard HTML (or XHTML) document. You create a data island with the <xml> element, enclosing the XML you want to use in the <xml> element:

 

<xml id="xmlid">

†† <xmldata>

††††††† <data>Here's some data!</data>

††† </xmldata>

</xml>

 

The <xmldata> and <data> elements are XML elements, so I could have named them anything. Using the <xml> elementís ID, you can access the XML in the element. By using the <xml> elementís src attribute, you can also use a data island to handle an external XML document. To get the root element of the XML document, you use the XMLDocument property. Hereís how I convert the previous example to use a data island instead of the Microsoft.XMLDOM object (note that since the <xml> element is specific to Internet Explorer, this document is not strictly conforming XHTML):

 

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

††† <head>

†††††††† <title>

†††††††††††† Finding Element Values in an XML Document Using Data Islands

†††††††† </title>

 

†††††††† <xml id="schoolXML" src="school.xml"></xml>

 

†††††††† <script type="text/javascript" language="javascript">

†††††††††††† function getStudentData()

†††††††††††† {

††††††††††††††††† xmldoc= document.all("schoolXML").XMLDocument;

 

††††††††††††††††† nodeSchool = xmldoc.documentElement;

†††††††† †††††††††nodeClass = nodeSchool.firstChild;

††††††††††††††††† nodeStudents = nodeClass.lastChild;

††††††††††††††††† nodeStudent = nodeStudents.lastChild;

††††††††††††††††† nodeFirstName = nodeStudent.firstChild;

††††††††††††††††† nodeLastName = nodeFirstName.nextSibling;

 

††††††††††††††††† outputMessage = "Name: " +

††††††††††††††††††††††† nodeFirstName.firstChild.nodeValue + ' '

††††††††††††††††††††† + nodeLastName.firstChild.nodeValue;

††††††††††††††††† message.innerHTML=outputMessage;

†††††††††††† }

†††††††† </script>

††† </head>

 

††† <body>

††††††† <center>

††††††††††† <h1>

††††††††††††††† Finding Element Values in an XML Document Using

††††††††††††††† Data Islands

††††††††††† </h1>

 

††††††††††† <div id="message"></div>

††††††††††† <p>

††††††††††† <input type="button" value="Get Second Student's Name"

††††††††††††††† onclick="getStudentData()" />

††††††††††† </p>

††††††† </center>

††† </body>

</html>

 

This example works as the previous example did, as you see in Figure 15.3. Now weíve seen two ways of working with an XML document in Internet Exploreróby loading the document in explicitly and by using a data island. Iíll use both approaches in this chapter but will use data islands the most because itís the most common technique.

 

Figure 15.3  Accessing data with data islands in an XML document in Internet Explorer.

 

Extending XHTML

One of the attractive aspects of XHTML is that because itís based on XML, you can extend it with your own elements and attributes. Iíll take a look at an example here, and elaborate the process in this chapter.

NOTE: Note that the material on extending XHTML is only in the working draft stage, and will probably change. You can find more information at www.w3.org/TR/xhtml-building/.

For example, standard XHTML documents have a <head> and <body>; Iíll add a new element, <foot>, to hold a footer for the document. To add this element, Iíll create a new DTD named extend.dtd, which defines this new element. Iíll also give this new element an attribute, footattribute, to show how that works. To create an attribute, you use the <!ATTLIST> element (see the Immediate Solutions section ďSpecifying Attributes in DTDsĒ). Hereís another important point; W3C says that new XHTML elements should have their own namespace, and Iíll give them the namespace doc here, like this:

 

<!ELEMENT doc:foot (#PCDATA) >

<!ATTLIST doc:foot

†††† footattribute††† CDATA†† #IMPLIED

>

††† .

††† .

††† .

 

You also have to specify how the new element fits in with the other elements in XHTML to make sure the documents you create are valid. The <doc:foot> element is a child element of the <html> element, so you have to indicate that. In the XHTML 1.0 Transitional DTD, the <html> element is defined this way:

 

<!ELEMENT html (head, body)>

 

Iíll augment the <html> elementís content model to include the <doc:foot> element this way:

 

<!ELEMENT doc:foot (#PCDATA) >

<!ATTLIST doc:foot

†††† footattribute††† CDATA†† #IMPLIED

>

 

<!ELEMENT html (head, body, doc:foot)>

††† .

††† .

††† .

 

When you redefine an element like this, the new definition takes precedence over the old one (although browsers like Internet Explorer are not yet up to redefining elements this way). Having redefined the <html> element to contain the <doc:foot> element, I can include the rest of the XHTML 1.0 Transitional DTD with a parameter entity. You use parameter entities in DTDs to include resources in exactly this way, and Iíll define a parameter entity named xhtml10T.dtd to stand for the entire XHTML 1.0 Transitional DTD. I can then include that DTD with the parameter entity reference %xhtml10T.dtd; this way:

 

<!ELEMENT doc:foot (#PCDATA) >

<!ATTLIST doc:foot

†††† footattribute††† CDATA†† #IMPLIED

>

 

<!ELEMENT html (head, body, doc:foot)>

 

<!ENTITY % xhtml10T.dtd PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

†††††† "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

%xhtml10T.dtd;

 

That completes the new DTD, extend.dtd. You can indicate how you want text in the new element displayed in a style sheet, which Iíll call extend.css; here are the contents of that style sheet:

 

doc:foot {font-size: 8pt; color: #FF0000}

p (color: #FF0000}

 

The following code shows how you can use the new DTD in a new XHTML page using the <doc:foot> element, along with the style sheet extend.css. Note that Iím now declaring the doc namespace and making the XHTML namespace the default namespace:

 

<!DOCTYPE html PUBLIC "-//Extender//DTD XHTML-Extensions 1.0//EN"

"http://www.starpowder.com/steve/extend.dtd" >

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:doc="http://www.starpowder.com/steve/extend.dtd">

††† <head>

††††††† <title>

††††††††††† Extending XHTML

††††††† </title>

 

††††††† <link rel="stylesheet" href="extend.css" />

††† </head>

 

††† <body>

††††††† <p>

††††††††††† Here is some text.

††††††† </p>

††† </body>

 

††† <doc:foot>

††††††††††† This is the page's foot.

††† </doc:foot>

</html>

 

Thatís just one way to extend XHTMLóweíll see others as well. For example, now that weíre into the details of XML and extending XHTML, Iíll also discuss how XHTML 1.1 modules work, so you can see how to get into the heart of those modules and incorporate entirely new elements into existing XHTML 1.1 elements.



Page 2 of 5. Goto Page 1 | 3 | 4 | 5



  Contact Us |  | Site Guide | About PerfectXML | Advertise ©2004 perfectxml.com. All rights reserved. | Privacy