Elaborate

This example uses the same XML file used in the previous examples, but a great deal has been added to the main XSL file to include other files in creating the final Web page. Here it begins to show the power of XSL in managing a Web site. The three-part example below explains the XML document, how it's transformed by XSL, and the resulting HTML produced. Keep in mind this is an example, not an in-depth tutorial on XML/XSL. Please refer to the Tips section of this Web site for links to more comprehensive tutorials.

>> Download zipped files of examples used on this page


Part 1. A Simple XML Document

The XML sample shown below adheres to the DocBook standard. Notice how the elements (<book>, <chapter>, <title>, <para>) describe the structure of the content. This XML file contains text that would typically be displayed in an "About Us" section of a Web site. In this XML file, those sections are broken down into DocBook "chapter" elements (Mission, At a Glance, Partners, Directions). The XSL file that transforms this XML file will also bring in other XSL and XML files to add to the content and display of the final Web page.

				
 <?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="moderate_xml.xsl"?>
<book label="CTG">
 <title>About Us</title>
<!-- **************** MISSION ******************************************-->
  <chapter label="mission">
   <title>Mission</title>
   <para>
     The <emphasis>Center for</emphasis> Technology in Government works with government to develop 
      information strategies that foster innovation and enhance the quality and coordination of public 
     services.
    </para>
    <para>
     We carry out this mission through applied research and partnership projects that address the 
     policy, management, and technology dimensions of information use in the public sector.
    </para>
    <para>
     The results generated by each project add to a growing knowledge base designed to 
      support the work of both government professionals and academic researchers. Our guides, reports, 
      and tools are freely available on our <ulink url="/publications">Publications</ulink> page.
   </para>
  </chapter>
<!-- **************** AT-A-GLANCE ******************************************-->
 <chapter label="glance">
	<title>At-A-Glance</title>
	<para>
     The Center for Technology in Government (CTG) is an applied research center devoted 
	  to improving government and public services through policy, management, and 
	  technology innovation.
	 </para>
	 <para>
	  Through its program of partnership, research, and innovation, the Center provides 
	  government organizations and individuals with an array of tools and resources designed to 
	  support the development of a digital government. 
	 </para>
 </chapter>
<!-- **************** PARTNERS ******************************************-->
 <chapter label="partners">
	<title>Partners</title>
	<para>
	 CTG projects depend on active and ongoing partnerships with government agencies, technology 
	 companies, and academic scholars. Each sector makes a unique and critical contribution 
	 and each gains distinct benefits from participation in the Center and its research program.
	</para>
	<para>
	 Our government partnerships</ulink> are laboratories for learning, experimentation, and 
	 problem-solving. Each project is supported by the involvement of experienced public managers 
	 working cooperatively on projects of concern to government organizations around the country. 
	</para>
 </chapter>
<!-- **************** DIRECTIONS ******************************************-->
 <chapter label="directions">
	 <title>Directions</title>
	<para>
	 Located in Albany, the Center for Technology in Government is within minutes of the New York 
	 State Capitol, the State Legislature, and state agency headquarters.
	</para>
	<para>
     We are centrally-located in the Northeast: 150 miles from New York City, 165 miles from Boston, 
     and 242 miles from Montreal, Canada. Our offices are located near the intersection of the New 
     York State Thruway, the Adirondack Northway, and Interstate 90. We are within five miles of an 
     AMTRAK rail station and the Albany International Airport, which is served by several 
     major airlines. 
	</para>
 </chapter>
</book>

			

As in the moderate example, this XML file contains several chapter elements each with a "label" attribute (mission, glance, partners, directions). This label attribute will be used by the XSL file to select a specific chapter within the XML file and display each chapter as an individual Web page. Notice here that the example displays the "directions" chapter instead of the "mission" chapter used in the moderate example.


Part 2. An Elaborate XSL File to Transform the XML

The XSL file used to transform the XML file does more than just select elements from the XML and surround them with HTML tags. It calls in an external CSS stylesheet that holds the centralized styling information for the Web site. It also calls in an external XSL file that holds the common template patterns used throughout the Web site. It includes the top banner via another external XSL file. And it even pulls in an additional XML file to include information on this Web page that is not part of the main XML file. This example demonstrates how XSL provides great versatility in managing a Web site.

				
 <?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <!-- This brings in the external XSL file that holds the top banner -->
<xsl:include href="elaborate_top.xsl"/>
<!-- Declare parameters that identifies which chapter to select from xml file -->
<xsl:param name="sub">directions</xsl:param>
<!--COMMENT This pulls in an external XML file that contains additional content for this Web page -->
<xsl:variable name="otherxml" select="document('elaborate_import.xml')"/>
<!-- Main Template: 
  Match moderate_xml.xml file document root node, called "book" into html page tags -->
<xsl:template match="book">
<!-- Print DOCTYPE declaration at top of HTML document  -->
<xsl:text disable-output-escaping="yes">
	<![CDATA[
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  ]]>
</xsl:text>
<html lang="en-US">
<!-- Set the Browser title, get exernal css stylesheet  -->
 <head>
  <title><xsl:value-of select="@label"/>: <xsl:value-of select="$sub"/></title>
 <!-- Bring in external CSS stylesheet -->
   <link title="Style" href="elaborate.css" type="text/css" rel="stylesheet"/>
 </head>
<!-- Create the Main Body of the HTML page  -->
 <body>
 <!-- This calls the template to display the banner in the included XSL file from above -->
<xsl:call-template name="banner"/>
<!-- Create left navigation bar from chapter titles in moderate_xml.xml file 
 using cascading style sheet and xsl -->
 <div id="left_themes">
  <h1 class="menu">
   <xsl:value-of select="title"/>
  </h1>
  <!-- xsl:for-each reads through each chapter in xml file and selects the title for a menu item-->
   <xsl:for-each select="chapter">
    <xsl:variable name="label"><xsl:value-of select="@label"/></xsl:variable>
  <!-- compares chapter label attribute to sub parameter to determine if link should be inserted -->
    <xsl:choose>
    </xsl:choose>
     <xsl:when test="@label=$sub">
      <span class="lftmenublack">
       <xsl:value-of select="title"/>
      </span>
     </xsl:when>
     <xsl:otherwise>
      <span class="lftmenublack">
       <a href="about?sub={$label}">
        <xsl:value-of select="title"/>
       </a>
      </span>
     </xsl:otherwise>
    </xsl:choose>
    <br /><br />
   </xsl:for-each>
 </div>
<!-- START Main Content Section -->
 <div class="main">
 <!-- Selects only chapter that matches the sub parameters, in this case "mission" -->
  <xsl:for-each select="chapter[@label=$sub]">
     <xsl:apply-templates select="title"/>
     <xsl:apply-templates select="para"/>
   </xsl:for-each>
<!-- This calls in the external XML file defined in the variable at the top of the file --> 
<xsl:for-each select="$otherxml//book">
<hr/>
     <xsl:apply-templates select="title"/>
     <xsl:apply-templates select="para"/>
   </xsl:for-each>
 </div>
<!-- END Main Content Section -->
 </body>
</html>
</xsl:template>
<!-- END Main Template -->
<!-- Bring in external XSL stylesheet with common templates -->
<xsl:include href="generic.xsl"/>
</xsl:stylesheet>

			

Be sure to download the zipped files for this page to see the individual elements that this XSL file above uses in building the Web page.


Step 3. The Resulting HTML

As shown in the example below, the XML/XSL combination above produces an HTML file, but now it looks more like a "typical" Web page.

				
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title>CTG: directions</title>
 <link rel="stylesheet" type="text/css" href="elaborate.css" title="Style">
</head>
<body>
 <div id="banner">
   <a tabindex="0" accesskey="" href="http://www.ctg.albany.edu">
     <img style="border: medium none ; margin-bottom: 0pt;" alt="" src="./img/common/ctg_logo.gif">
    </a>
   <h1>Elaborate Example </h1>
  </div>
  <div id="left_themes">
   <h1 class="menu">About Us</h1>
   <span class="lftmenublack"><a href="about?sub=mission">Mission</a></span>
   <br><br>
   <span class="lftmenublack"><a href="about?sub=glance">At-A-Glance</a></span>
   <br><br>
   <span class="lftmenublack"><a href="about?sub=partners">Partners</a></span>
   <br><br>
   <span class="lftmenublack">Directions</span>
   <br><br>
  </div>
  <div class="main">
   <h1>Directions</h1>
   <p>
	 Located in Albany, the Center for Technology in Government is within minutes of the 
	 New York State Capitol, the State Legislature, and state agency headquarters.
	</p>
	<p>
     We are centrally-located in the Northeast: 150 miles from New York City, 165 miles from Boston, 
     and 242 miles from Montreal, Canada. Our offices are located near the intersection of the 
     New York State Thruway, the Adirondack Northway, and Interstate 90. We are within five miles 
     of an AMTRAK rail station and the Albany International Airport, which is served by several 
     major airlines. 
    </p>
	<hr>
	<h1>University at Albany</h1>
	<p>
	 Located in the state capital, UAlbany is within minutes of the State Legislature, the courts, 
	 and headquarters for all service agencies of the largest state government in the nation. 
	 The city itself  is a vibrant center for culture and entertainment. Its centerpiece is the 
	 Nelson A. Rockefeller Empire State Plaza, a governmental center that includes the New 
	 York State Museum and Library and major performing arts and convention facilities. 
	 Albany is also home to the Pepsi Arena, a 15,000-seat venue for major entertainment 
	 and sporting events.
	</p>
	<p>
     The Capital Region (Albany, Schenectady, and Troy), with a population of 750,000, is 
     near Saratoga, the Berkshires, the Catskills, and the Adirondack Mountains, areas famed 
     for recreational and cultural opportunities.
    </p>
    <p>
     The University is 150 miles from New York City, 165 miles from Boston, and 242 miles 
     from Montreal. The main campus is located near the intersection of the New York State 
     Thruway, the Adirondack Northway, and Interstate 90. Within five miles of the campus 
     are an AMTRAK rail station, the Greyhound and Trailways bus depots, and Albany 
     International Airport, served by several major airlines.
    </p>
   </div>
  </body>
</html>
		
			

A Sample Elaborate Web Page

The elaborate Web page formatted and processed by the XML/XSL files above would appear like the sample shown below.

Elaborate HTML Web Page created by XML/XSL