Displaying XML | HTML & XHTML: The Complete Reference (Osborne Complete Reference Series)

< Day Day Up >

Notice that inherently XML documents have no predefined presentation; thus, we must define one. While this may seem like a hassle, it actually is a blessing as it forces the separation of content structure from presentation. Already, many Web developers have embraced the idea of storing Web content in XML format and then transforming it into an appropriate output format such as HTML or XHTML and CSS using eXtensible Style Sheet Transformations (XSLT) or some form of server-side programming. It is also possible to render XML natively in most browsers by binding CSS directly to user -defined elements.

Using XSL to Transform XML to HTML

With XSL, you can easily transform and then format an XML document. Various elements and attributes can be matched using XSL, and other markup languages such as HTML or XHTML and then can be output. Let's demonstrate this idea using client-side processed XSL found in most modern browsers. Consider the following simple well- formed XML document called demo.xml:

 <?xml version="1.0" ?> <?xml-stylesheet type="text/xsl" href="test.xsl"?> <example>   <demo>Look </demo>   <demo>formatting  </demo>   <demo> XML </demo>   <demo>as HTML</demo> </example>

Notice that the second line applies an XSL file called test.xsl to the document. That file will create a simple HTML document and convert each occurrence of the <demo> tag to an <h1> tag. The XSL template called test.xsl is shown here:

 <?xml version="1.0"?> <xsl:stylesheet version="1.0"                  xmlns:xsl="http://www.w3.org/1999/XSL/Transform">    <xsl:template match="/">  <html>   <head>   <title>  XSL Test  </title>   </head>   <body>  <xsl:for-each select="example/demo">  <h1>  <xsl:value-of select="."/>  </h1>  </xsl:for-each>  </body>   </html>  </xsl:template> </xsl:stylesheet>

Note	In order to make the examples in this section work under Internet Explorer 5 or 5.5, use the statement <xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl"> to define the XSL version in place of the second line of each XSL document.

Given the previous example, you could load the main XML document through an XML- and XSL-aware browser such as Internet Explorer. You would then end up with the following markup once the XSL transformation was applied:

  <html>   <head>   <title>  XSL Test  </title>   </head>   <body>   <h1>  Look  </h1>   <h1>  formatting  </h1>   <h1>  XML  </h1>   <h1>  as HTML  </h1>   </body>   </html>

The example transformation under Internet Explorer is shown in Figure 18-4.

Figure 18-4: Internet Explorer supports basic XSL

Whereas the preceding example is rather contrived, it is possible to create a much more sophisticated example. For example, given the following XML document representing an employee directory, you might wish to convert it into a traditional HTML table-based layout:

 <?xml version="1.0" encoding="UTF-8" standalone="yes" ?> <directory> <employee>      <name>Fred Brown</name>      <title>Widget Washer</title>      <phone>(543) 555-1212</phone>      <email>fbrown@democompany.com</email> </employee>     <employee>      <name>Cory Richards</name>      <title>Toxic Waste Manager</title>      <phone>(543) 555-1213</phone>      <email>richards@democompany.com</email> </employee>     <employee>      <name>Tim Powell</name>      <title>Big Boss</title>      <phone>(543) 555-2222</phone>      <email>tpowell@democompany.com</email> </employee>     <employee>      <name>Samantha Jones</name>      <title>Sales Executive</title>      <phone>(543) 555-5672</phone>      <email>jones@democompany.com</email> </employee>         <employee>      <name>Eric Roberts</name>      <title>Director of Technology</title>      <phone>(543) 567-3456</phone>      <email>eric@democompany.com</email> </employee>         <employee>      <name>Frank Li</name>      <title>Marketing Manager</title>      <phone>(123) 456-2222</phone>      <email>fli@democompany.com</email> </employee> </directory>

You might consider creating an XHTML table containing each of the individual employee records. For example, an employee represented by

 <employee>      <name>Employee's name</name>      <title>Employee's title</title>      <phone>Phone number</phone>      <email>Email address</email> </employee>

might be converted into a table row ( <tr> ), as in the following:

  <tr>   <td>  Employee's name  </td>   <td>  Employee's title  </td>   <td>  Phone number  </td>   <td>  Email address  </td>   </tr>

You can use an XSL style sheet to perform such a transformation. The following is an example XSL style sheet (staff.xsl):

 <?xml version="1.0"?> <xsl:stylesheet version="1.0"                  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/">  <html>   <head>   <title>  Employee Directory  </title>   </head>   <body>   <h1 align="center">  DemoCompany Directory  </h1>   <hr/>   <table width="100%">   <tr>   <th>  Name  </th>   <th>  Title  </th>   <th>  Phone  </th>   <th>  Email  </th>   </tr>  <xsl:for-each select="directory/employee">  <tr>   <td>  <xsl:value-of select="name"/>  </td>   <td>  <xsl:value-of select="title"/>  </td>   <td>  <xsl:value-of select="phone"/>  </td>   <td>  <xsl:value-of select="email"/>  </td>   </tr>  </xsl:for-each>  </table>   </body>   </html>  </xsl:template>     </xsl:stylesheet>

You can reference the style sheet from the original XML document, adding this line in the original staff.xml file,

 <?xml-stylesheet href="staff.xsl" type="text/xsl"?>

just below the initial <?xml?> declaration. The output of this previous example together with the generated markup created by the browser client-side is shown in Figure 18-5. If you are worried about browser compatibility, given that not all browsers are aware of XSL, you can just as easily transform this into HTML on the server-side. This is probably a safer way to go for any publicly accessible Web page.

Figure 18-5: XML document transformed to HTML tables using XSL

Note	XSL transformation can create all sorts of more complex documents complete with embedded JavaScript or style sheets.

The previous discussion only begins to touch on the richness of XSL, which provides complex pattern matching and basic programming facilities. Readers interested in the latest developments in XSL are directed to the W3C Web site (http://www.w3.org/Style/XSL/) as well as Microsoft's XML site (http://msdn.microsoft.com/xml).

Displaying XML Documents Using CSS

The conversion from XML to HTML seems awkward ; it would be preferable to deliver a native XML file and display it. As it turns out, it is also possible in most modern browsers to directly render XML by applying CSS rules immediately to tags. For example, given the following simple XML file, you might apply a set of CSS rules by relating the style sheet using <?xml-stylesheet href=" URL to style sheet " type="text/css"?>, as shown here:

 <?xml version="1.0" encoding="UTF-8" standalone="yes" ?> <?xml-stylesheet href="staff.css" type="text/css"?>     <directory>   <employee>   <name>Fred Brown</name>   <title>Widget Washer</title>   <phone>(543) 555-1212</phone>   <email>fbrown@democompany.com</email> </employee> </directory>

The CSS rules for XML elements are effectively the same as for HTML or XHTML documents, although they do require knowledge of less commonly used properties such as display to create meaningful renderings . The CSS rule for the previously presented XML document is shown here and its output under Internet Explorer is shown in Figure 18-6.

Figure 18-6: Direct display of XML documents with CSS

 directory {display: block;} employee  {display: block; border: solid;} name      {display: inline; font-weight: bold; width: 200px;} title     {display: inline; font-style: italic; width: 200px;} phone     {display: inline; color: red; width: 150px;} email     {display: inline; color: blue; width: 100px;}

The lack of flow objects in CSS makes properly displaying this XML document very difficult. To format anything meaningful, you may have to go and invent your own line breaks, headings, or other structures. In some sense, CSS relies heavily on XHTML for basic document structure. However, it may be possible instead to simply include such structures from XHTML into your document. The next section explores how you can put XHTML into your XML and vice versa.

< Day Day Up >