XML to HTML Conversion

Converting XML code to HTML code looks pretty scary at first. Fortunately, you don't need to understand a lot of the more complicated code-all you really need to do is copy it as it stands and paste it into your own style sheet. Listing 19.5 shows the XML file we're going to convert.

Listing 19.5 XML File for Conversion to HTML

1:  <?xml version="1.0">
2:  <!DOCTYPE DOC [
3:  <!ELEMENT DOC  (TITLE | NOTE | PARA)*>
4:  <!ELEMENT TITLE (#PCDATA)>
5:  <!ELEMENT NOTE (#PCDATA)>
6:  <!ELEMENT PARA (#PCDATA)>
7:  ]>
8:  <DOC>
9:  <TITLE>Simple XML to HTML Conversion</TITLE>
10: <PARA>This sample documents demonstrates not only
11: how you can map XML elements onto HTML elements, but
12: also how you can set attributes as well.</PARA>
13: <NOTE>Note that this paragraph will be set in a
14: different color.</NOTE>
15: <PARA>This second paragraph proves that we have restricted
16: the color change to just the one note paragraph.</PARA>
17: </DOC>

Basically, what we have to do is map each of the XML elements onto an appropriate HTML element. Some of the mappings are pretty obvious; TITLE to H1 and PARA to P, but the NOTE element gives us a chance to do something more adventurous. Take a look at the DSSSL style sheet shown in Listing 19.6.

Listing 19.6 A DSSSL Style Sheet for XML to HTML Conversion

1:  <!DOCTYPE style-sheet PUBLIC
2:     "-//James Clark//DTD DSSSL Style Sheet//EN"[
3:  <!ENTITY lt "&#38;#60;">
4:  <!ENTITY gt "&#62;">
5:  ]>
6:
7:  (declare-flow-object-class element
8:    "UNREGISTERED::James Clark//Flow Object Class::element")
9:  (declare-flow-object-class document-type
10:    "UNREGISTERED::James Clark//Flow Object Class::document-type")
11: (declare-flow-object-class empty-element
12:   "UNREGISTERED::James Clark//Flow Object Class::empty-element")
13: (declare-flow-object-class formatting-instruction
14: "UNREGISTERED::James Clark//Flow Object
15:             Class::formatting-instruction")
16:
17: (element DOC
18:   (sosofo-append
19:    (make document-type
20:      name:  "HTML"
21:      public-id: "-//W3C//DTD HTML 3.2//EN")
22:        (make element
23:          gi:  "HTML"
24:            (sosofo-append
25:              (make element
26:                gi:  "HEAD"
27:                  (make element
28:                    gi:  "TITLE"
29:                      (sosofo-append
30:                         (literal "Simple XML-to-HTML Conversion")
31:                      )))
32:              (make element
33:                gi:  "BODY"
34:                (process-children))))))
35:
36: (element TITLE
37:   (make element gi: "H1"))
38:
39: (element NOTE (make element gi: "P"
40:     (sosofo-append (literal "Note: "))
41:     (make element
42:       gi: "font"
43:       attributes: '(("COLOR" "RED")))))
44:
45: (element PARA  (make element gi: "P" ))

You can ignore the four flow object declarations; these are non-standard DSSSL extensions incorporated into jade to allow us to do things like SGML-SGML and XML-HTML conversions. You also can more or less ignore the specification for the DOC element-this part simply writes out the DTD declaration, the HEAD and TITLE elements, and wraps the rest of the document inside an HTML and a BODY element. The most important declaration you need to remember is this one (Web browsers are so tolerant of bad HTML you could probably get acceptable results by adding one of the statements for each of the XML elements and ignoring the rest of the style sheet):

(element xml.element (make element gi: "html.element"))

where xml.element is the XML element you want to convert and html.element is the HTML element you want it to become. Conversion from XML to HTML really can be as easy as that! Listing 19.7 shows the HTML code resulting from the conversion.

Listing 19.7 The Converted XML File

1:  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
2:  <HTML
3:  ><HEAD
4:  ><TITLE
5:  >Simple XML-to-HTML Conversion</TITLE
6:  ></HEAD
7:  ><BODY
8:  ><H1
9:  >Simple XML to HTML Conversion</H1
10: ><P
11: >This sample documents demonstrates not only
12: how you can map XML elements onto HTML elements, but
13: also how you can set attributes as well.</P
14: ><P
15: >Note: <font
16: COLOR="RED"
17: >Note that this paragraph will be set in a different color.</font
18: ></P
19: ><P
20: >This second paragraph proves that we have restricted
21: the color change to just the one note paragraph.</P
22: ></BODY
23: ></HTML
24: >

The Web browser's display is shown in Figure 19.5.
Figure 19.5 The converted XML file loaded in Netscape Communicator.

It's an odd quirk of jade's to break the HTML tags over separate lines, but this has absolutely no effect on the way a Web browser treats the file. Note how the NOTE element from the XML file has been converted into an HTML P element, complete with a prefix text and a color change.

[Previous] [Contents] [Next]