Example_ Anatomy of a Header Template

Anatomy of the “default” header Template

In this section, we’ll dissect the default header template that is included in the Repository Module package. This will demonstrate how a template is constructed and used to control the formatting of your module’s output.

The default header template uses the header.html and header.xml files. It contains upload and moderation buttons (when applicable), a search box, a category selection dropdown list, a sort dropdown list and a page navigation control that allows users to browse your Repository.

Fig 1. The header from the "metro" template 

The layout of the header.html file is 2 tables. The top table contains the Upload and Moderation button and the Search box. (NOTE: The Upload button and Moderate button will only show if the current user is able to Upload or Moderate files), and the second table contains the Category filter dropdown list, the Sort Order dropdown list and the page navigation controls. Here are the contents of the header.html file …

Fig 2. Contents of header.html

<link rel="stylesheet" type="text/css" href="[TEMPLATEIMAGEFOLDER]Metro.css" />
<div class='rtHeaderFooter'>
<table class="rtHeader" cellspacing="0" cellpadding="0" style="width: 100%; padding: 3px;">
	<tr width="100%">
		<td class="normal" align="left" width="50%">
			[UPLOADBUTTON]MODERATEBUTTON]
		</td>
		<td class="normal" style="width: 50%; text-align: right;">
			[SEARCH]
		</td>
	</tr>
</table>
<table class="rtHeader" cellspacing="0" cellpadding="0" style="width: 100%; padding: 3px; margin-bottom: 6px;">
	<tr width="100%">
		<td class="normal" style="text-align: left; vertical-align: top; width: 1px; padding-right: 6px;">
			[LABEL:Categories]<br />
			[CATEGORIES]
		</td>
		<td class="breadcrumb" style="text-align: left; vertical-align: top; width: 1px;">
			[LABEL:Sort]<br />
			[SORT]
		</td>
		<td class="breadcrumb" style="text-align: right; vertical-align: bottom;">
			[PREVIOUSPAGE]&nbsp;[CURRENTPAGE]&nbsp;[LABEL:of]&nbsp;[PAGECOUNT]&nbsp;[NEXTPAGE]
		</td>
	</tr>
</table>
</div>

The header.xml file is used to apply custom settings to each tag as it’s rendered. In the source code snippet below from the header.xml file, you’ll see that the width of the Categories dropdown lists is being set to 150 pixels wide. You can use the header.xml file to override the default rendering options for any of the template tokens.

Fig 3. Snippet from header.xml

<Object>
	<Token>[CATEGORIES]</Token>
	<Settings>
		<Setting>
			<Name>CssClass</Name>
			<Value>normal</Value>
		</Setting>
		<Setting>
			<Name>Width</Name>
			<Value>150</Value>
		</Setting>
	</Settings>
</Object>