<Brief introduction to XSLT and Table Accessibility ⁄ >

5807

2008-06-22

mySnippets xml

Download

Bookmark This

" ...Extensible Stylesheet Language Transformations (XSLT) is an XML-based language used for the transformation of XML documents into other XML or "human-readable" documents. The original document is not changed; rather, a new document is created based on the content of an existing one ..." in Wikipedia.

Talking simpler, this is just a way to format our xml file, giving it a different layout. We use xml as our datasource, making our website dynamic and build a "normal" webpage to our viewer, without having to make use of a server-side language, such as PHP, ASP.NET, only because the browser itself will render the xslt formats, giving it a presentational layer.

The same way we can use a database to turn our webpage content dynamic, we can still do the same, but only with a XML file.

One last note before digging into code. In this snippet I'll give some focus on Table Accessibility (you can get much more useful information in this link), I won't fully support it, but I'll give some examples of thead, tfoot, tbody, headers. I hope that at least will call your attention to this.

Let's suppose we have the following XML file:

martial_arts.xml:

<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet type="text/xsl" href="format_xml.xsl"?>
 
<pedrocorreia.net>
 
  <martial_arts description="This is a short Martial Arts List" title_col1="Country" title_col2="Name">
 
    <country name="japan" description="Japan">
      <martial_art name="aikido"  description="Aikido" />
      <martial_art name="kendo"  description="Kendo" />
      <martial_art name="sumo"  description="Sumo" />
      <martial_art name="shurikenjutsu"  description="Shurikenjutsu" />
    </country>
 
    <country name="china" description="China">
      <martial_art name="taichichuan"  description="Tai Chi Chuan" />
      <martial_art name="shaolinkungfu"  description="Shaolin kung fu" />
      <martial_art name="shuaijiao"  description="Shuai Jiao" />
      <martial_art name="wingchun"  description="Wing Chun" />
    </country>
 
    <country name="korea" description="Korea">
      <martial_art name="taekwondo"  description="Taekwondo" />
      <martial_art name="hapkido"  description="Hapkido" />
      <martial_art name="taekyon"  description="Taekyon" />
      <martial_art name="soobak"  description="Soobak" />
    </country>
 
  </martial_arts>
 
</pedrocorreia.net>

XML by itself is a human-readable format, this means you can easily read its data/ contents without having to get a parser, for example.

The XML above it's a regular one, I'd just point out the 2nd code line

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

This line of code's responsible to tell the browser that we want to "transform" our data layer.

The client will see just a normal webpage, normal html presentation, so let's give our xml a nice presentation layer by using a CSS file. Besides that, if we're going to change our xml appearance, and the output will just be an html page, it wouldn't make sense if we couldn't use CSS :)

style.css:

body{
  font-family: Tahoma, Verdana, Arial;
  font-size: 62.5%;
  color: #000;
  background: #6E726C;
}
 
div{
  margin: 0 auto;
  width: 40em;
  background-color: #fff;
  border: .1em solid #1A6B85;
  padding: .4em;
}
 
table{
  border: solid .1em #FF5604;
  width: 100%;
  text-align: center;
}
 
th{
  background-color: #1A6B85;
  color: #fff;
  font-weight: bold;
  font-size: 1.2em;
}
th.description{
  background-color: #FFCC66;
  font-weight: bold;
  color: #000;
}
 
td{font-size: 1.1em;}
td.cell{background-color: #C3C3C3;}
td.alternate{background-color: #E1E1E1;}

So we already have our CSS defined, let's inform our parser to use it. Please note that we could also used inline styles

style.xsl, just remember this name "MartialArtsList_StyleSheet", we'll use it later ...

<?xml version='1.0' encoding='utf-8' ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
	<xsl:template name="MartialArtsList_StyleSheet">
		<link href="style.css" rel="stylesheet" type="text/css" />
	</xsl:template>
</xsl:stylesheet>

Finally the XSLT file, you can notice that besides some xml notations and some other strange things :), this looks just like a regular xhtml file. In this snippet I'll just try to output the content to a tabular data, however it can be used to much more things than a simple table.

format_xml.xsl, please see the comments throughout the code

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html"/>
  <xsl:include href="style.xsl"/> <!-- include xsl file that contains css file definition-->
  <xsl:template match="/pedrocorreia.net/martial_arts"> <!-- startup position -->
    <xsl:call-template name="MartialArtsList_StyleSheet"/> <!-- template name defined in style.xsl -->
 
    <head>
      <!--
      The expression @description points to the following node:
      <martial_arts description="This is a short Martial Art List" title_col1="Country" title_col2="Name">
      This is just because we defined that our templates starts at "/pedrocorreia.net/martial_arts", it's like
      making a pointer to a specific position in our xml
 
      In here we're just accessing the tag @description and get its value.
      Later we'll user the other 2 tags as well: "title_col1" and "title_col2",
      but for now let's just give the page a title.
      -->
      <title><xsl:value-of select="@description"/></title>
    </head>
    <body>
 
      <div>
        <table>
 
          <thead>
            <tr>
              <th colspan="2" id="MartialArtsList"><xsl:value-of select="@description"/></th>
            </tr>
            <tr>
              <th class="description" headers="MartialArtsList" id="Country">
                <xsl:value-of select="@title_col1" />
              </th>
              <th class="description" headers="MartialArtsList" id="Value">
                <xsl:value-of select="@title_col2" />
              </th>
             </tr>
          </thead>
 
          <tfoot>
            <tr>
              <th colspan="2" id="MartialArtsListFooter"><xsl:value-of select="@description"/></th>
            </tr>
          </tfoot>
 
          <tbody>
            <!-- 
            In XSLT, for loops we use xsl:for-each
            In this loop we'll iterate all the Country sub-nodes, such as:
            <country name="japan" description="Japan">
            ...
           -->
            <xsl:for-each select="country"> <!-- init foreach country -->
              <xsl:variable name="id" select="@name" />
              <tr>
                <th headers="MartialArtsList Country" id="Description_{$id}">
                  <xsl:value-of select="@description"/>
                </th>
                <th headers="MartialArtsList Value" id="Name_{$id}">
                  <xsl:value-of select="@name"/>
                </th>
              </tr>
 
              <!-- 
                The following loop will iterate over the sub-nodes in Country, or in other words
                all the martial_art items inside a Country, such as:
                <martial_art name="aikido"  description="Aikido" />
          
                ....
              -->
              <xsl:for-each select="martial_art"> <!-- init foreach martial_art -->
 
                  <!--
                  we'll use an auxiliary variable to specify the cell class,
                  so that we can use alternate colors.
 
                  This is basically an If ... Else
                   -->
                  <xsl:variable name="cell_class">
                    <xsl:choose><!-- init condition -->
                      <!-- condition - we use "position()-1" so we can start at 0, however, no special reason -->
                      <xsl:when test="(position()-1) mod 2 = 0">
                        <xsl:value-of select=" 'cell' "/> <!-- set td class -->
                      </xsl:when>
                      <xsl:otherwise>
                        <xsl:value-of select=" 'alternate' "/> <!-- set td alternate class -->
                      </xsl:otherwise>
                    </xsl:choose><!-- end condition -->
                  </xsl:variable>
 
                  <!--
                  Build row
                  note: "xls:variable" must be accessed by using curly brackets {}
                  -->
                  <tr>
                    <td class="{$cell_class}" headers="MartialArtsList Country Description_{$id}">
                      <xsl:value-of select="@description"/>
                    </td>
                    <td class="{$cell_class}" headers="MartialArtsList Value Name_{$id}">
                      <xsl:value-of select="@name"/>
                    </td>
                  </tr>
 
              </xsl:for-each> <!-- end foreach martial_art -->
            </xsl:for-each> <!-- end foreach country -->
          </tbody>
 
        </table>
      </div>
    </body>
  </xsl:template>
</xsl:stylesheet>

We won't have any html file, we can run directly (xml file) in the browser, in this snippet we only have to open "martial_arts.xml", the parser (browser) will take care of the transformations.

After opening the xml file in the browser, if you view the source code, you'll realize that source's just our xml file, no more, no less.

Here it goes a screenshot:

This is a sample of a xhtml that could be generated to reach the same thing, in other words, all this "xml transformations" would possibly generate the following code:

ï»¿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>This is a short Martial Arts List</title>
  <link rel="Stylesheet" href="style.css" />
</head>
<body>
  <div>
    <table>
 
      <thead>
        <tr><th id="MartialArtsList" colspan="2">This is a short Martial Arts List</th></tr>
        <tr>
          <th id="Country" headers="MartialArtsList" class="description">Country</th>
          <th id="Value" headers="MartialArtsList" class="description">Name</th>
        </tr>
      </thead>
 
      <tfoot>
        <tr><th id="MartialArtsListFooter" colspan="2">This is a short Martial Arts List</th></tr>
      </tfoot>
 
      <tbody>
 
        <tr>
          <th id="Description_japan" headers="MartialArtsList Country">Japan</th>
          <th id="Name_japan" headers="MartialArtsList Value">japan</th>
        </tr>
        <tr>
          <td headers="MartialArtsList Country Description_japan" class="cell">Aikido</td>
          <td headers="MartialArtsList Value Name_japan" class="cell">aikido</td>
        </tr>
        <tr>
          <td headers="MartialArtsList Country Description_japan" class="alternate">Kendo</td>
          <td headers="MartialArtsList Value Name_japan" class="alternate">kendo</td>
        </tr>
        <tr>
          <td headers="MartialArtsList Country Description_japan" class="cell">Sumo</td>
          <td headers="MartialArtsList Value Name_japan" class="cell">sumo</td>
        </tr>
        <tr>
          <td headers="MartialArtsList Country Description_japan" class="alternate">Shurikenjutsu</td>
          <td headers="MartialArtsList Value Name_japan" class="alternate">shurikenjutsu</td>
        </tr>
 
        <tr>
          <th id="Description_china" headers="MartialArtsList Country">China</th>
          <th id="Name_china" headers="MartialArtsList Value">china</th>
        </tr>
        <tr>
          <td headers="MartialArtsList Country Description_china" class="cell">Tai Chi Chuan</td>
          <td headers="MartialArtsList Value Name_china" class="cell">taichichuan</td>
        </tr>
        <tr>
          <td headers="MartialArtsList Country Description_china" class="alternate">Shaolin kung fu</td>
          <td headers="MartialArtsList Value Name_china" class="alternate">shaolinkungfu</td>
        </tr>
        <tr>
          <td headers="MartialArtsList Country Description_china" class="cell">Shuai Jiao</td>
          <td headers="MartialArtsList Value Name_china" class="cell">shuaijiao</td>
        </tr>
        <tr>
          <td headers="MartialArtsList Country Description_china" class="alternate">Wing Chun</td>
          <td headers="MartialArtsList Value Name_china" class="alternate">wingchun</td>
        </tr>
 
        <tr>
          <th id="Description_korea" headers="MartialArtsList Country">Korea</th>
          <th id="Name_korea" headers="MartialArtsList Value">korea</th>
        </tr>
        <tr>
          <td headers="MartialArtsList Country Description_korea" class="cell">Taekwondo</td>
          <td headers="MartialArtsList Value Name_korea" class="cell">taekwondo</td>
        </tr>
        <tr>
          <td headers="MartialArtsList Country Description_korea" class="alternate">Hapkido</td>
          <td headers="MartialArtsList Value Name_korea" class="alternate">hapkido</td>
        </tr>
        <tr>
          <td headers="MartialArtsList Country Description_korea" class="cell">Taekyon</td>
          <td headers="MartialArtsList Value Name_korea" class="cell">taekyon</td>
        </tr>
        <tr>
          <td headers="MartialArtsList Country Description_korea" class="alternate">Soobak</td>
          <td headers="MartialArtsList Value Name_korea" class="alternate">soobak</td>
        </tr>
 
      </tbody>
 
    </table>
  </div>
</body>
</html>

If you have any doubt or found any error, please drop me an email

5807

2008-06-22

mySnippets xml

Download

Bookmark This