Displaying XML Code in Mozilla

It isn't really my intention to compare IE5 with Mozilla. As you have already seen on Day 12 (when you learned to use data source objects to map XML elements onto HTML elements) and Day 10, "Creating XML Links," (when you learned about XML linking and Mozilla's support for transclusions), the two packages have different approaches and support different features. Nevertheless, it still makes sense to follow the same route to display XML in Mozilla as we did with IE5; we will start with an HTML file that has a styled appearance and try to re-create it in Mozilla.

The first step is to take an HTML file and a CSS style sheet and load them into Mozilla. The resulting display will be our baseline (it would be a bit unreasonable to expect better from the XML code than the HTML code). I used the same code that I did for the IE5 exercise (Listing 18.1 and 18.2). The end result is shown in Figure 18.5.
Figure 18.5 The HTML target file displayed in Mozilla.

As you can see, the same HTML and CSS code looks different in Mozilla compared to IE5, but because neither of them is 100% "correct" we'll settle for what we see.

The next step is to convert the HTML code into XML code by changing the names of the elements, just as we did before. We'll then load this XML code into Mozilla, as shown in Figure 18.6.
Figure 18.6 The raw XML target file in Mozilla.

The next step is to couple some styling to the XML code. With Mozilla, you don't have to go to nearly as much effort you did with IE5. As far as Mozilla is concerned (other than the parsing that the file goes through when it's loaded), an element is an element and you can add the format specifications for the XML elements in exactly the same way as you would if they were HTML elements. Let's look again at the input XML, shown in Listing 18.6.

Listing 18.6 The Raw XML File

1:  <PAGE>
2:  <TITLE>SAMPLE WEB PAGE</TITLE>
3:  <PARA>Welcome to one of the world's first WWW Home pages
4:  written entirely in XML. This web page has been
5:  constructed using:</PARA>
6:  <LIST>
7:  <ITEM>basic XML code (derived from HTML)</ITEM>
8:  <ITEM>a CSS stylesheet to get the page to display in
9:  Microsoft Internet Explorer</ITEM>
10: <ITEM>a separate CSS stylesheet to get the page to display
11: in Netscape Communicator</ITEM>
12: <ITEM>another CSS stylesheet to get the page to display
13: in Netscape Mozilla (a September 1998 build)</ITEM>
14: <ITEM>variations of the XML code embedded as pseudo-HTML
15: code inside a standard HTML web page</ITEM>
16: </LIST>
17: <PARA>Explore to your heart's content.</PARA>
18: <WARNING>Note that all of this code is experimental so
19: don't be disappointed if something doesn't quite work the
20: way you think it should.</WARNING>
21: <UPDATE>This page last updated: 21 August 1998</UPDATE>
22: </PAGE>

You probably didn't even notice there was something missing from the raw XML file (a round of applause if you did!). There is no XML declaration. This isn't a problem when you're wrapping the XML code inside HTML code, and the chances are that Mozilla won't even mind if you omit it. Strictly speaking it isn't compulsory, and you don't really need it unless you aren't using the default character set, but it's a good idea to include it. In an HTML context, the XML declaration would be treated as if it were a standard SGML processing instruction and would be ignored. Keeping one in can't do any harm.

So let's add the XML declaration and another processing instruction to link the CSS style sheet to the XML code. Note that the syntax for doing this is quite different from the way you do it in HTML, as shown in Listing 18.7.

Listing 18.7 The Completed XML File

1:  <?xml version="1.0"?>
2:  <?xml:stylesheet type="text/css2" href="xmlmoz.css"?>
3:  <PAGE>
4:  <TITLE>SAMPLE WEB PAGE</TITLE>
5:  <PARA>Welcome to one of the world's first WWW Home
6:  pages written entirely in XML. This web page has been
7:  constructed using:</PARA>
8:  <ITEMST>
9:  <ITEM>basic XML code (derived from HTML)</ITEM>
10: <ITEM>a CSS stylesheet to get the page to display in
11: Microsoft Internet Explorer</ITEM>
12: <ITEM>a separate CSS stylesheet to get the page to
13: display in Netscape Communicator</ITEM>
14: <ITEM>another CSS stylesheet to get the page to
15: display in Netscape Mozilla (a September 1998 build)</ITEM>
16: <ITEM>variations of the XML code embedded as
17: pseudo-HTML code inside a standard HTML web page</ITEM>
18: </LIST>
19: <PARA>Explore to your heart's content.</PARA>
20: <WARNING>Note that all of this code is experimental so
21: don't be disappointed if something doesn't quite work the way you
22: think it should.</WARNING>
23: <UPDATE>This page last updated: 21 August 1998</UPDATE>
24: </PAGE>

When this code is loaded into Mozilla, the result should be similar to that shown in Figure 18.7.
Figure 18.7 The final XML file in Mozilla.

As you can see, Mozilla's support for CSS is somewhat poorer than IE5's. However, I think that there is a very good chance that Mozilla will fully support CSS in due time (there's every reason to believe so, because Netscape Communicator supports CSS). Considering the few changes that have to be made to the XML code (and all of them perfectly legal XML), it would seem that by using CSS we could be just a small step away from displaying XML in a Netscape browser almost as if it were HTML.

[Previous] [Contents] [Next]