Include - common html code

Inserting common blocks of html code from one place makes it easy to change the layout of all your pages at once. Most of the *.html files on this site were created by *.dxp pages that wrote their output to *.html files.

<dxp:DxpPage xmlns:dxp="dxp.neolectric.com" contentType="text/html" 
 staticFile="dxp/sample/basic.html"/>
 <dxp:Rp value="Basic HTML Page" store="title"/>
 <dxp:Include target="/dxp/common.dxp" node="header"/>
 ...blah...blah...
 <dxp:Include target="/dxp/common.dxp" node="footer"/>
</dxp:DxpPage>

Here are the header and footer sections from common.dxp. We use a dynamic page so we can insert the title and mark the current directory

<dxp:Section id="header">
<![CDATA[<!doctype html public "-//w3c//dtd html 4.01 transitional//en">
<html>]]>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <link rel="stylesheet" href="http://neolectric.com/neo.css" />
<title>${title}</title>
</head>
<![CDATA[<body bgcolor="#FFFFFF">]]>
<dxp:DirPath>
 <dxp:Cp name="pathvalue">
  <![CDATA[<img src="/images/left.png" width="12" height="12" border="0" align="middle"/>]]>
 </dxp:Cp>
</dxp:DirPath>
<table width="130" border="0" align="left" cellspacing="0" cellpadding="4"> <!-- dxp menu -->
 <tbody>
 <tr>
  <td colspan="2" width="126" align="left">
   <a href="http://neolectric.com/dxp/index.html">
   <img src="http://neolectric.com/images/neo-dxp-100x80.png" border="0" width="100" height="80" /></a>
  </td>
 </tr>
 <tr>
  <td width="22"> </td>
  <td width="100" align="left" valign="top" >
   <a href="http://neolectric.com/dxp/sample/index.html">Samples</a> ${/dxp/sample/}<br /><br />
   <a href="http://neolectric.com/dxp/samplexml/index.xml">SamplesXml</a> ${/dxp/samplexml/}<br /><br />
   <a href="http://neolectric.com/dxp/code/index.html">Code</a> ${/dxp/code/}<br /><br />
   <a href="http://neolectric.com/dxp/config/index.html">Config</a> ${/dxp/config/}<br /><br />
   <a href="http://neolectric.com/dxp/api/index.html">API Docs</a> ${/dxp/api/}<br /><br />
   <a href="http://neolectric.com/dxp/dld/index.html">Download</a> ${/dxp/dld/}<br /><br />
   <a href="http://neolectric.com/index.html">Neolectric</a><br /><br />
  </td>
  </tr>
 </tbody>
</table>
<![CDATA[
<div align="center">
<table width="650" cellpadding="4">
<tr>
<td align="left">]]>
<h3>${title}</h3>
</dxp:Section>

<dxp:Section id="footer">
<![CDATA[
</td>
</tr>
</table>
</div>
</body>
</html>]]>
</dxp:Section>

A dxp:Section tag is a convenient way to refer to a block of code on a target page that you want to include in your calling page. It's only function is to pass the request on to the children it enclosed. Each Section must have a unique id attribute on the target page. Use a non-numeric value that won't be confused with default ids created by the node linker. Other dxp tags can be used in place of Section in many cases.

When html tags begin inside a Section tag but are not closed before the end of the same Section you need tell the parser to treat them as plain text, not malformed tags that never closed. You do this by surrounding them with <![CDATA[ ... ]]>. We do this for the <html> and <body> tags in header Section above. The same goes for tags that are closed inside a Section but not opened, so we also use <![CDATA[ ... ]]> in the footer Section.

At the top of the header Section you will notice a ${title} marker and a <dxp:DirPath> tag. The DirPath finds the directory your calling page belongs to and stores a value (in this case an img tag) using the path as the key. On the current page, we insert next to the Sample link using a ${/dxp/sample/}.

Footnotes

A small side effect: & chars inside <![CDATA .. ]]> will be converted to & by the dxp framework. It's easy to work around this by closing CDATA before using &.


	Samples SamplesXml Code Config API Docs Download Neolectric