XML and IE5, Part 6

XML and IE5, Part 9

by Richard G. Baldwin
baldwin@austin.cc.tx.us
Baldwin's Home Page

Dateline: 2/26/00

Recap from previous weeks: In my previous articles I have been introducing you to the use of Microsoft IE5, as a viewer for XML files.

Objective: The primary objective of this series of articles is to show you how to create XML files and associated style sheets that can be successfully browsed using IE5.

This article will wrap up the discussion of XML, IE5, and CSS by providing an example that illustrates the richness of display that can be achieved using CSS with XML. Subsequent articles in this series will deal with IE5, XML, and XSL instead of CSS.

Three cases: In previous articles, I explained that when you load an XML file into IE5, the following three cases can exist relative to a particular element in the file:

Case 1 -- There is no style sheet specified. In this case, IE5 renders the entire XML document in a tree format.
Case 2 -- There is a style sheet that doesn’t specify a rendering style for a particular element. In this case, IE5 renders that XML element in a plain black text (assuming that there is no local style specification in the XML file).
Case 3 -- There is a style sheet and it does specify a rendering style for a particular element. In this case, that element is rendered according to the specified style in the style sheet (assuming that there is no local style specification in the XML file).

What about local style specifications? It is possible to specify a style, a class, or an ID locally in the XML element using syntax such as the following:

As you can see, the local style is a miniature CSS provided as an attribute to the element.

Typically, the actual style for a class or ID will be specified in a style sheet and only a reference to that class or ID will appear in the XML element.

First case: For the first case, local styles specified in the XML element are ignored by IE5, and elements having local style specifications are rendered in the tree format along with the other elements.

Second and third cases: For the second and third cases, local styles, classes, and IDs specified in the XML element override conflicting styles specified in the style sheet.

At this point, we are interested primarily in cases 2 and 3. Consider first the plain vanilla situation.

Create a plain vanilla XML file: In an earlier article, I suggested that you use your text editor to create an XML file named aa020400-a.xml containing the following XML text (without the boldface).

The second and third lines specify the file to be used as the style sheet for this XML file.

<?xml version="1.0"?>

<?xml-stylesheet type="text/css"

href="aa020400-a.css"?>

<html>

<body>

<h3>This is a header of the h3

variety</h3>

<p>This is a paragraph.</p>

<h2>This is an h2 header</h2>

<h3>This is another h3 header</h3>

<p>This is another paragraph.</p>

This is an h2 header modified by

the classDemo class

</h2>

This is a paragraph modified by

the idDemo ID.</p>

</body>

</html>

Create a plain vanilla style sheet: In the same article, I also suggested that you use your text editor to create the following style sheet and save it in a file named aa020400-a.css.

h3 { font-family: arial;

font-style: italic;

color: #aa3600 }

P {font: 11pt arial, helvetica, geneva,

sans-serif; line-height: 125%; }

.classDemo { color: green}

#idDemo { color: blue }

The plain vanilla result: The following screen shot from the earlier article shows the XML document as rendered by IE5 using the specified style sheet.

First h2 element not covered: A rendering specification was not provided in the style sheet for the first h2 header, so it was rendered according to the default IE5 rendering format (plain black text).

Covered elements: The rendering specifications for the h3 headers and the paragraphs only included specifications for font family, style, size, and color. No specifications were provided regarding the placement of the elements on the screen, so they simply followed one another on the same line (and wrapped when the line became too long for the browser window). As a result, this is not a very pleasing (or very meaningful) rendering of the material in the XML document.

The bottom line: So, the bottom line is, unlike HTML, when you use style sheets for rendering XML documents in IE5, you must provide complete rendering specifications, including specifications about the position of the elements on the screen, etc.

The chocolate sundae version: Now use your text editor to upgrade the XML document to contain the following text (without the boldface). Name the file aa022600-a.xml. (Or, if you are tired of typing, open a new IE5 browser window on the following link where a copy of this XML file and its associated style sheet is stored.)

<?xml version="1.0"?>

<?xml-stylesheet type="text/css"

href="aa022600-a.css"?>

<html>

<body>

<h3>This is a header of the h3

variety</h3>

<p>This is a paragraph. I am adding

quite a lot of material to this

paragraph for the sole purpose of

illustrating the modified rendering

style. I want to add enough

material to make certain that it will

consume several lines.</p>

<h2>This is an h2 header</h2>

<h3>This is another h3 header</h3>

<p style="margin-left:40;

margin-right:40">

This is another paragraph. It is

modified by local styles that

specify left and right margins.</p>

This is an h2 header modified by

the classDemo class

</h2>

This is a paragraph modified by

the idDemo ID.</p>

</body>

</html>

A local style: I have highlighted the major changes to the XML file in boldface. With one exception, these changes should be self-explanatory. The exception is the use of a local style, which I haven’t used before.

Without going into a lot of detail, suffice it to say that you can define a local style for a specific element in your XML document and it will override any other style that applies to that element. The format is the normal CSS format, but it is provided as an XML attribute to the element.

A chocolate sundae style sheet: Use your text editor to create a file named aa022600-a.css containing the following style-sheet text, or point your IE5 browser to the following link where a copy of this style sheet is stored.

h2 {display: block;

text-align: center;

margin-top: 10;}

h3 {font-family: arial;

font-style: italic;

color: #aa3600;

display: block;

margin-top: 10;

text-align: center}

P {font: 11pt arial,

helvetica,

geneva,

sans-serif;

line-height: 125%;

display: block;

margin-top: 10;

border: 2px solid black;

background-color: #888833;

color: #FFFFDD;}

.classDemo { color: green}

#idDemo { color: blue }

The result: The following screen shot shows the result of loading this new XML file with its associated style sheet into IE5.

Much improved: As you can see, this rendering is much improved over the rendering of the similar XML file shown earlier. In this rendering, I used an upgraded style sheet (and local styles) to cause:

Each element to begin on a new line.
The headers to be centered.
Space to be inserted between each of the elements.
The paragraphs to be placed in a box with a border, an olive green background, and off-white lettering.
Right and left margins to be applied to one paragraph on the basis of local styles built into the XML element.

Note also that in the last paragraph, the local reference to the ID caused the style associated with the ID to override the general paragraph style, which in turn caused the lettering to be rendered in blue instead of off-white.

A milestone for XML: If you point your IE5 browser to the following link and your browser takes on a display format similar to the above screen shot, you will be witnessing an important milestone in XML technology.

In particular, you will be witnessing a commercially viable capability for the distribution of XML documents on the web. Unfortunately, this capability is currently limited to those situations where you know that all of your viewers will be using IE5 (or some other XML-capable browser). The big question is, "when will the other major web-browsers have this capability?"

My purpose: My purpose is not to teach you the many and intricate details of creating a CSS style sheet, but rather is to teach you how to combine style sheets with XML documents for rendering in IE5. For learning about the details of creating style sheets, I will refer you to the following link, where you will find a table explaining the things that you can include in a CSS.

I will also refer you to the About.com HTML page for more information on CSS.

That’s a wrap: Until next week, that’s a wrap.

Coming attractions...

Next week, I plan to begin discussing the use of XSL style sheets with XML and IE5.

The XML octopus

Trying to wrap your brain around XML is sort of like trying to put an octopus in a bottle. Every time you think you have it under control, a new tentacle shows up. XML has many tentacles, reaching out in all directions. But, that's what makes it fun. As your XML host, I will do my best to lead you to the information that you need to keep the XML octopus under control.

Credits

This HTML page was partially produced using the WYSIWYG features of Microsoft Word 2000. The images on this page were used with permission from the Microsoft Word 97 Clipart Gallery.

About the author

Richard Baldwin is a college professor and private consultant whose primary focus is a combination of Java and XML. In addition to the many platform-independent benefits of Java applications, he believes that a combination of Java and XML will become the primary driving force in the delivery of structured information on the Web.

Richard has participated in numerous consulting projects involving Java, XML, or a combination of the two. He frequently provides onsite Java and/or XML training at the high-tech companies located in and around Austin, Texas. He is the author of Baldwin's Java Programming Tutorials, which has gained a worldwide following among experienced and aspiring Java programmers. He has also published articles on Java Programming in Java Pro magazine.

Richard holds an MSEE degree from Southern Methodist University and has many years of experience in the application of computer technology to real-world problems.

baldwin@austin.cc.tx.us
Baldwin's Home Page

-end-

rev0001171636