XML and IE5, Part 8

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

Dateline: 2/18/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.

 

CSS:  I have written several articles discussing Cascading Style Sheets (CSS).  I have also introduced you to the use of CSS with XML and IE5. 

 

XML and CSS:  In an earlier article, I provided an XML file and used IE5 to render the XML file using a simple style sheet.

 

Three cases:  Last week I explained that when you load an HTML or XML file into IE5, the following three cases can exist relative to a particular element in the file:

 

 

I showed that the behavior of IE5 is considerably different for these three cases, depending on whether the file is an HTML file or an XML file.  At this point, we are interested primarily in the cases 2 and 3 for XML.

 

Case 2 with XML:  If there is a style sheet, but that style sheet doesn’t specify a rendering style for a particular element, unlike with HTML, the element is not rendered exactly as in Case 1.  In other words, that element is not rendered in the tree format that you would see if there were no style sheet.

 

Case 3 with XML:  If there is a style sheet and it specifies a rendering style for that particular element, it will be rendered according to the specified rendering style.

 

Back to Case 2 for XML:  Now let’s take a look at the case where there is a style sheet, but it doesn’t specify a rendering for a particular type of element. 

 

Create a style sheet file:  Last week I suggested that you begin by using your text editor to create a file named aa021100-a.css containing the style sheet text shown below.

 

.classDemo { color: green}

#idDemo { color: blue }

 

Create an XML file:  Then I suggested that you use your text editor to create an XML file named aa021100-a.xml containing the following XML text (without the boldface). 

 

The second and third lines specify the file that you created above as the style sheet for this XML file.

 

<?xml version="1.0"?>

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

href="aa021100-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>

 

<h2 class="classDemo">

This is an h2 header modified by

the classDemo class

</h2>

 

<p id="idDemo">

This is a paragraph modified by

the idDemo ID.</p>

 

</body>

</html>

 

Only two elements are covered:  I pointed out that only two of the elements in this XML file match the rendering specifications in the associated style sheet.

 

Here is a screen shot showing what this XML file looks like when rendered in IE5 using the style sheet shown earlier.

Not a tree:  As you can see, this is definitely not a tree format, so it doesn’t match the IE5 default formatting that is used when no style sheet is specified. 

 

Elements with rendering specifications:  If you look carefully, you will note that the last sentence was rendered in blue in accordance with the following specification in the style sheet:

 

#idDemo { color: blue }

 

combined with the following attribute in the last paragraph element in the XML file:

 

<p id="idDemo">

This is a paragraph modified by

the idDemo ID.</p>

 

If you look even more closely, you will note that the sentence before that one was rendered in green in accordance with the following specification in the style sheet

 

.classDemo { color: green}

 

combined with the corresponding h2 element in the XML file:

 

<h2 class="classDemo">

This is an h2 header modified by

the classDemo class

</h2>

 

The default rendering:  All of the remaining material in the XML file was rendered by IE5 in a rather plain black font with each element simply following the previous element on the same line.  (When the line is too long to fit on the browser screen, it is automatically wrapped to the next line.)

 

Separation of content and presentation:  As you learned in several previous articles, one of the main purposes of XML is to separate content from presentation.  Therefore, unlike HTML, there is no presentation information inherent in the elements of an XML document. 

 

With HTML: You can use a style sheet to provide rendering specifications for some elements and simply accept the default rendering for other elements. 

 

With IE5 and XML:  If you include a style sheet, the default rendering for all elements is a plain black font with each element following the previous element on the same line. 

 

This is probably not how you want your XML document to be rendered. 

 

The bottom line:  You must provide a rendering specification for every different element that appears in the XML document (unless the default rendering is adequate, which it probably won’t be).

 

The following screen shot from an earlier article shows the same XML document rendered using a style sheet that specifies a rendering style for every element except one.

This screen shot was rendered using the following style sheet:

 

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 }

 

First h2 element not covered:  A rendering specification was not provided for the first h2 header, so it was rendered according to the default IE5 rendering format.  

 

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 still simply followed each other on the same line (and wrapped when the line became too long for the browser window). 

 

The real bottom line:  So, the real bottom line is that 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.

 

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

  

Coming attractions...

 

Next week, I plan to discuss positioning specifications in an XML style sheet.

 

In subsequent lessons, I will discuss the use of XSL style sheets with XML.

 

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.

Copyright 2000, Richard G. Baldwin

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-
 
 
 

 

rev0001170959