Aggie Template Help Page

Here is the basic information on how templates work in Aggie. When you use aggie all the news is presented in the HTML file Aggie.html. This file is generated from the XML file Aggregated.xml which represents all the news items merged into a single file, for example here is an example piece of aggregated.xml:

Now aggie uses a XSLT stylesheet to transform aggregated.xml into aggie.html. Stylesheets are very flexible and powerful and Aggie supports installing different stylesheets to control the look and feel of aggie.html. [Well the output doesn't have to be an HTML file. You could write an XSLT file that transformed aggregated.xml into any format you wanted. This could be very useful when applied with the command line version of Aggie: AggieCmd.exe]

The above shows two templates: "Default" and "pixel". In each directory there are two mandatory files:

The are the only two mandatory files. You can put as many other sundry files as you need into the directory. For example:

The skin.xsl is the XSLT file that does all the work of translating 'aggregate.xml' into 'aggie.html'. The about.xml file is a description of the stylesheet including user configurable options. Here is an example file below. [Note that the real Default template doesn't have the link color editbox, it is here for illustration.]

<template>
    <name>Default</name>
    <internal_name>Default</internal_name>
    <version>1.0</version>
    <description>Default Template for Aggie</description>
    <helpUrl>http://bitworking.org/AggieDefaultTemplateHelp.html</helpUrl>
    <author>
       <name>by Joe Gregorio</name>
       <address>http://bitworking.org/Aggie.html</address>
    </author>
    <options>
       <option type="editbox">
          <name>Link Color</name>
          <internal_name>link_color</internal_name>
          <description>Specify the link color to use.</description>
          <default>#ff0000</default>
       </option> 
       <option type="select">
          <name>Dyna-Skin</name>
          <internal_name>dynaskin</internal_name>
          <description>Should the news items be presented in a compressed font that expands when clicked?</description>
          <default>yes</default>
	  <item value="true">True</item>
	  <item value="false">False</item>
       </option>
    </options>
</template>

Some notes on about.xml

There is a new "Config..." button next to the skin selection combobox. When that button is pressed a dialog box is dynamically constructed based on the contents of the about.xml file. Once the user makes their selections and presses ok the values of the controls are written into Aggie.xfg.

Note that the values for the Default stylesheet are stored in /AggieConfig/templates/Default/. Now to make use of these values you have to be able to get to Aggie.xfg from your stylesheet. Here is the skin.xsl from the Default template:

<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
  <xsl:output method="html" indent="yes" />

  <!-- THIS IS WHERE THE AGGIE.XFG FILE IS LOADED -->
  <xsl:variable name="aggieConfig" select="document('../../aggie.xfg')/AggieConfig/templates/Default" />
  <xsl:template match="aggregate">
      <xsl:text disable-output-escaping="yes"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></xsl:text>
      <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      <head><title>Aggie</title>
      <link rel="stylesheet" type="text/css" href="Aggie.css"/>
      <script type="text/javascript">
		  // This works because 'condensed' is not a working attribute, so the first
		  // time we look it is actually nil, which doesn't equal '0' so we
		  // jump to the else clause and set its value to '0'.
		  function toggleCondense(element) {
			  if ('0' ==  element.condensed) {
				  element.style.fontSize = '0.3em'; 
				  element.condensed = '1'; 
			  } else {
				  element.style.fontSize = '1em'; 
				  element.condensed = '0'; 
			  }
			  return true;  
		  }
      </script>
	<style type="text/css">
		  .body {
			  margin: 1em;
			  border: solid black 1px;
		  }
		  
		  a {
		          display: inline;
		  }
        <!-- HERE IS WHERE THE VALUES IN AGGIE.XFG FILE ARE USED -->
	<xsl:if test="$aggieConfig/dynaskin='true'"><xsl:text>
          .item:first-line { 
          		  font-size:  12pt; 
          }
          .item>*:first-child:first-line { 
          	font-size:  12pt; 
          }
          
          .item>A:first-child + *:first-line { 
          	font-size:  12pt; 
          }
          
          .item_nocondense {
          	border:	  solid black 1px;
          	padding:	  0.5em 1em;
          }
          
          .item { 
          	font-size:  0.3em; 
          }
          </xsl:text>
	</xsl:if>
          .item { 
          	border:	  solid black 1px;
          	padding:	  0.5em 1em;
          }
          
          .title {
          	color:              	black;
          	background-color:   	orange;
          	padding: 		1em;
          	margin: 	    	0em;
          	border:	  		dashed black 3px;
          }
          
          .product_title, .product_subtitle {
          	padding-left: 		0em;
          	font-size:	    	2.5em; 
          }
          
          .product_subtitle {
          	padding-left: 		0.2em;
          	font-size:	    	1.2em; 
          }
          
          .product_credit {
          	display: 		block;
          	font-size:	    	1em; 
          	clear: 			left;
          }
          
          .channelHeader {
            color:              black;
          	background-color:   orange;
          	padding:	    0.5em;
          	font-size:	    12pt; 
          	border:		    solid black 1px;
          	padding:	    0.5em 1em;
          }
	</style>
    </head>
    <body>
	<div class="title">
	<span class="product_title">Aggie</span><xsl:text> </xsl:text>
	<span class="product_subtitle"></span><xsl:text> </xsl:text>
	<span class="product_credit">A product of <a href="http://bitworking.org">bitworking.org</a></span>
	</div>
        <div class="body">
	     <xsl:apply-templates select="site"/>
	</div>
      </body>
    </html>       
  </xsl:template>

  <xsl:template match="site">       
       <div class="site">
	     <xsl:apply-templates select="channel"/>
	    	<div class="items">
		       <xsl:apply-templates select="item"/>
		</div>
       </div>
  </xsl:template>

  <xsl:template match="channel">       
       <div class="channelHeader">
           <a href="{link}"><xsl:value-of select = "title" /></a>
           <xsl:text> </xsl:text><xsl:value-of disable-output-escaping="yes" select="description" />
       </div>
  </xsl:template>

  <xsl:template match="item">       
       <div class="item" onclick="toggleCondense(this)">
              <a href="{link}"><xsl:value-of select = "title" /></a>
	      <xsl:text> </xsl:text><xsl:value-of disable-output-escaping="yes" select="description" />
       </div>
  </xsl:template>
</xsl:stylesheet>