NewtFire logo: a mosaic rendering of a firebelly newt
newtFire {dh}
Creative Commons License Last modified: Monday, 02-Nov-2020 02:37:54 UTC. Maintained by: Elisa E. Beshero-Bondar (eeb4 at psu.edu). Powered by firebellies.

Overview of the Assignment

The Fall 2020 KPop project team has coded Korean pop music group membership information in XML that we will be outputting in HTML using XSLT. This exercise will help orient you to the way we set up XSLT to output HTML, and to write XSLT template rules that follow the source document’s nested hierarchy. The XML file, which profiles the Korean pop group Seventeen, is available here: https://newtfire.org/courses/tutorials/Seventeen_Profile.xml. You should right-click on this link, download the file, and open it in <oXygen/> (or you can pull it in locally from the digitProjectDesign-Hub where it is in Class Examples > XSLT > KPop).

Open the XML file in <oXygen/> and study its structure. Our goal in this assignment is to extract information about the group and its members from XML elements into HTML in a way that shows you how XSLT template rules work over all the elements they match on the source XML tree. Here is a view of the HTML output we want to produce with XSLT. And here is a code view of the page source on GitHub.

Now study our sample output HTML code. We used HTML unordered and ordered lists to output data about the group's discography and about each of the members. Each list is wrapped in either an <ul> (unordered list) or <ol> (ordered list), and the only elements permitted inside are list items or <li> elements. We also used <section> elements together wtih <h1>, <h2>, and <h3> elements for distinct levels of headings and subheadings following the structure of information: <h1> (heading 1) for the group name at the top of the page, <h2> for the sections on the page. And we used <img> elements with their required attributes to pull in image data coded in the source XML. We set a somewhat arbitrary @width attribute value of 200 to prevent the images from overwhelming the page.

Before You Begin: Set up the XSLT Stylesheet to Output HTML

To ensure that the output will be in the XHTML namespace, we need to add a default namespace declaration (in purple below). To output the required DOCTYPE declaration, we also need to set the <xsl:output> element as a child of our root <xsl:stylesheet> element (in blue below), and we needed to include an attribute there to omit the default XML declaration because if the XML line shows up in our XHTML output, it will not produce valid HTML with the w3C and might produce quirky problems with rendering in various web browsers. So, our modified stylesheet template and xsl:output line is this, and you should copy this into your stylesheet:

<?xml version="1.0" encoding="UTF-8"?>
         <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="3.0"
    xmlns="http://www.w3.org/1999/xhtml">
    
    <xsl:output method="xhtml" encoding="utf-8" doctype-system="about:legacy-compat"
        omit-xml-declaration="yes"/>
    
    </xsl:stylesheet>

Guide to writing the XSLT

Our XSLT transformation has four template rules:

  1. We have a template rule for the document node (<xsl:template match="/">), in which we create the basic HTML file structure: the <html> element, <head> and its contents, and <body>—anything that appears just once in the HTML document (in a one-to-one relationship with the root node).
    1. Inside the <body> element that we’re creating, we use <xsl:apply-templates> and use the @select attribute to identify an element on the tree that we want to process at this point. Here we use a literal XPath expression as the value of the @select attribute. We set our wrapper <ul> tags to set up the unordered list of the group’s discography around this xsl:apply-templates code.
    2. We also set up a new <section> to hold process the information coded in the <memberList> element. We actually opted not to process the <memberList> in a list, but rather we will be setting new heading elements and img elements and starting new lists in the template rule we will write later to process the member information. So for now we just indicate with a literal XPath what part of the source XML tree we want to process. (This process of selecting just the part of the tree you need is sometimes called pruning or trimming the tree. If you do not select something, the default template rule will apply to output the whole document’s text nodes.
  2. We wrote a new, separate template rule that matches the <album> elements (holding the album titles), and it will be invoked as a result of the preceding <xsl:apply-templates> instruction which selects the discography portion of the document, and will fire once for each <album> element in the XML file. Inside that template rule we create a new list item (<li>) for the particular <album> being processed and use <xsl:apply-templates> to process whatever it inside (here, just the text nodes of the <album> elements.
  3. We have a separate template rule that matches the <member> elements, and this rule is designed to create a set of HTML elements every time XSLT parsing engine encounters a <member> element in the XML it is processing.
    1. Our code sets a self-closing <img/> element in place as the first element to output inside this template rule, and we used ATVs (attribute value templates) to supply a value for its all-important @src attribute as well as for its @alt attribute.
    2. We created an HTML <h3> element and an unordered list (together with list items) for the Korean name and Stage name of each member.
    3. And we created an HTML <h3> element and set up an ordered list, and selected the <role> element to process. We will write a new template rule to process the elements inside <role> since the number of positions each band member takes varies considerably.
  4. Finally, our last template rule matches on <position> elements and outputs these as list items to populate the ordered list we created of roles for a band member.

Important