Exercise 4: Creating web output for the résumé using XSLT

This exercise continues to build upon the résumé that you created in Exercises 2 and 3. Now that you have an XML instance and DTD, you need a way to present the XML source files to your end users. You can accomplish this by creating an XSLT style sheet to transform the XML source to HTML output.

This process involves mapping a set of XML elements in the source document to the desired set of HTML elements in the output document. Review the following example of the <school> element from a previous XML résumé exercise. 

<resume>
   <!-- complete content goes here -->
   <school type='college'>   
        <name>Austin Community College</name>   
        <degree>Associates of Applied Science</degree>
        <year>2013</year>
        <location>
             <city>Austin</city>   
             <state>Texas</state>
        </location>
   </school>
 </resume>

Step 1: Create the stylesheet file

Begin by creating a stylesheet file in oXygen. In oXygen, select File > New... > New Document > XSLT Stylesheet. 

<?xml version="1.0" encoding="UTF-8"?>
   <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
   </xsl:stylesheet>

Step 2: Add the template rule for the root element

Now, add a template rule for the root element in your résumé, which gives you something like this. 

<?xml version="1.0" encoding="UTF-8"?>
     <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">      
         <xsl:template match="/">      
         </xsl:template>      
     </xsl:stylesheet>

Note that the "/" is the symbol for matching the root of the XML document, not the root element, which is <resume>.

Step 3: Build the basic HTML file framework

Next, add the basic HTML code to set up the webpage. Note that the style sheet now includes HTML elements to the "/" template. 

<?xml version="1.0" encoding="UTF-8"?>
     <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> 
        <xsl:template match="/"> 
           <html> 
              <head> 
                 <title>Resume</title>
              </head> 
              <body> 
                 <xsl:apply-templates/> 
              </body> 
           </html> 
         </xsl:template> 
     </xsl:stylesheet>

At this point, set up a transformation scenario in oXygen, so you can verify you are doing everything right. It also lets you see your result, so you can make changes, repeatedly apply the transformation to check your progress.

Step 4: Configure oXygen to transform your code

To configure oXygen to work with your transform, complete the following steps:

  1. With your style sheet open, select Document > Transformation > Configure Transformation Scenario and click New.
  2. From the list, select XSLT transformation.
  3. In the Name field, name your transformation scenario.
  4. On the XSLT tab, click the folder to the left of the XML URL field and browse to and select your yourName-resume.xml instance file.
  5. On the Output tab, enter /output/${cfn}.html in the Save As field. Doing so will save the html output with the same name as the current file {cfn} with an extension of html in the output folder.
  6. Select the Open in Browser/System Application checkbox.
  7. Click OK to return to the Configure Transformation Scenario(s) window.
  8. Click Save and Close.

Now that you have configured the transformation, when you want to see the result after making changes, you can just select Document > Transformation > Apply Transformation or click the button on the toolbar. If you have your basic page layout, you are transforming the XML properly.

Step 5: Add rules for additional elements

You still don't have HTML, though, except for the basic page. Now you need to add a template rule for the <school> element (or any other element that is a direct child of <resume>). You could simply use a second-level heading (h2) and some paragraphs. Below your template for the root ("/") add the following:

 <xsl:template match="school"> 
    <h2>
        <xsl:value-of select="name"/>
    </h2> 
 </xsl:template>

Click the Apply Transformation button to see the result.

You should have a second-level heading using whatever is in the <name> element.

Add a template rule for each of the XML elements that appears in your XML résumé instance. If you are not familiar with HTML, refer to the W3Schools HTML tutorials (http://www.w3schools.com/html/default.asp).

When you have finished creating your template rules, your XSLT transformation should be well-formed, successfully transform all the elements in your résumé, and include them in the resulting output document (HTML).

Step 6: Saving and submitting your files through Blackboard

Save the XSL file as yourName-resume.xsl, where yourName is your first initial and last name (for example, vmorrow-resume.xsl).

Include the following files in a zipped folder named yourName-resume-xsl.zip:

  • XML résumé instance file (yourName-resume.xml)
  • XML résumé DTD (yourName-resume-DTD.dtd)
  • XSLT style sheet file (yourName-resume.xsl)

Submit the zip file through the Exercises section on Blackboard.

Do not include the HTML. I will transform the document and base the grade on how well it accomplishes the goals as outlined above.