Getting into Placeholders

Can't wait to get your hands on some of those cool Placeholders can you? Well you will see them soon enough, but first I want to structure our Template so it's easy maintainable. How? I will tell you. ASP.NET usercontrols. Every part of our Template which we for sure know are going to used on all our other Templates, we put in usercontrols. This way we edit one file only no matter what.

The "standard" HTML template

We are going to create six usercontrols from the Template:

• Header
• Topmenu
• Breadcrumb trails
• Quick navigation
• Treemenu
• Footer

-the Placeholders for Schema elements which we have done already, is not going in a usercontrol. Why? Simply because this combo with Headline and Content is only used in the "standard" Template.But Header, Topmenu and the other four are part of the website layout, and will be included always.

Before getting into the actual code, consider the image below which displays the sections we are about to split out.

Okay lets split out and register the usercontrols we just talked about. Again we register the controls in the top of our aspx document, but since usercontrols does not have assemblies, we must define a path:

<%@ Register TagPrefix="wuc" TagName="header" Src="/usercontrols/header.ascx" %>
<%@ Register TagPrefix="wuc" TagName="topmenu" Src="/usercontrols/topmenu.ascx" %>
<%@ Register TagPrefix="wuc" TagName="breadcrumb" Src="/usercontrols/breadcrumb.ascx" %>
<%@ Register TagPrefix="wuc" TagName="quicknav" Src="/usercontrols/quicknav.ascx" %>
<%@ Register TagPrefix="wuc" TagName="treemenu" Src="/usercontrols/treemenu.ascx" %>
<%@ Register TagPrefix="wuc" TagName="footer" Src="/usercontrols/footer.ascx" %>

We are now ready to write in our usercontrols to the HTML layout.
We are going to go through them one by one. Some of them contains static HTML, others PowerNodes Placeholders.

Header

In standard.aspx Template file:

<wuc:header runat="server" />

In header.ascx usercontrol file:

<%@ Control Language="c#" %>
<%@ OutputCache Duration="30" VaryByParam="none" %>
<table cellspacing="0" cellpadding="0" id="header">
  <tr>
    <td>&nbsp;</td>
    <td width="219">
<a href="/cms.ashx">
<img src="/gfx/gui_logotop.jpg" alt="PowerNodes CMS" width="219" height="90" /></a></td>
    <td width="541">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

Topmenu

In standard.aspx Template file:

<wuc:topmenu runat="server" />

In topmenu.ascx usercontrol file:

<%@ Control Language="c#" %>
<%@ Register TagPrefix="cms" Namespace="PowerNodes.Cms.Web" Assembly="PowerNodes.Cms" %>
<cms:MenuPlaceholder 
id="MenuPlaceholder1" 
runat="server"
ExpandMode="ParentTree"
StartLevel="0" 
Levels="0" 
ItemStatusOpen="_o" 
ItemStatusClosed="" 
ExpandAllOwnSubEntries="False"
>
  <MenuTemplate>
    <td>
<a href="<%# Container.Url %>" 
onmouseout="changeImagesBack();" 
onmouseover="changeImages('_<%# Container.Title %>','gui_menu_<%# Container.Title %>_o.jpg');">
<img 
src="/gfx/gui_menu_<%# Container.Title %><%# Container.ItemStatusString%>.jpg" 
alt="<%# Container.Title %>" 
id="_<%# Container.Title %>" /></a></td>
  </MenuTemplate>
</cms:MenuPlaceholder>

Now I bet you think that was more interessting than our header fine containing simple HTML.
What happens here is we inside the <MenuTemplate> define our HTML with the properties we want. The <MenuTemplate> section then gets repeated on render so all our items (menu items) appears. For further information please refer to the documentation.

Breadcrumb

In standard.aspx Template file:

<wuc:breadcrumb id="breadcrumb1" runat="server" />

In breadcrumb.ascx usercontrol file:

<%@ Control Language="c#" %>
<%@ Register TagPrefix="cms" Namespace="PowerNodes.Cms.Web" Assembly="PowerNodes.Cms" %>
<div id="breadcrumb">
<cms:breadcrumb 
id="Breadcrumb1" 
displaymode="content" 
runat="server" 
HomeName="Home" 
Separator="/" 
/>
</div>

Quicknav

In standard.aspx Template file:

<wuc:quicknav runat="server" />

In quicknavn.ascx usercontrol file:

<%@ Control Language="c#" %>
<%@ OutputCache Duration="30" VaryByParam="none" %>
<div id="quicknav">
<a href="#">Partner login</a> | 
<a href="/cms.ashx/Contact.aspx">Contact us</a> | 
<a href="/cms.ashx">Home</a> 
</div>

Treemenu

In standard.aspx Template file:

<wuc:treemenu runat="server" />

In treemenu.ascx usercontrol file:

<%@ Control Language="c#" %>
<%@ Register TagPrefix="cms" Namespace="PowerNodes.Cms.Web" Assembly="PowerNodes.Cms" %>
<cms:MenuPlaceholder 
  id="MenuPlaceholder1" 
  IsCurrentPageFalse="" 
  IsCurrentPageTrue=' class="treemenuDown"' 
  runat="server" 
  ExpandMode="OwnTree" 
  ItemStatusOpen='<img src="/gfx/icon_minus.gif" width="8" height="8" />' 
  ItemStatusClosed='<img src="/gfx/icon_plus.gif" width="8" height="8" />' 
  ItemStatusNoSubs='<img src="/gfx/icon_none.gif" width="8" height="8" />'
>
  <MenuTemplate>
    <table cellspacing="0" cellpadding="0">
      <tr>
        <td>
          <img 
src="/gfx/box_header_<%# Container.Title %>.gif" 
alt="" 
width="212" 
height="34" /></td>
      </tr>
      <tr>
        <td class="boxarea">
          <table border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td><img src="/gfx/gui_trans.gif" width="1" height="3" /></td>
            </tr>
          </MenuTemplate>
          <MenuTemplateLevel1>
<tr>
  <td<%# Container.IsCurrentPageString %>>
    <%# Container.ItemStatusString %>&nbsp;&nbsp;
    <a href="<%# Container.Url %>"><%# Container.Title %></a>/td>
</tr>
          </MenuTemplateLevel1>
          <MenuTemplateLevel2>
            <tr>
              <td style="padding-left:30px;"<%# Container.IsCurrentPageString %>>
    <%# Container.ItemStatusString %>&nbsp;&nbsp;
    <a href="<%# Container.Url %>"><%# Container.Title %></a></td>
            </tr>
          </MenuTemplateLevel2>
          <MenuTemplateLevel3>
            <tr>
              <td style="padding-left:45px;"<%# Container.IsCurrentPageString %>>
    <%# Container.ItemStatusString %>&nbsp;&nbsp;
    <a href="<%# Container.Url %>"><%# Container.Title %></a></td>
            </tr>
          </MenuTemplateLevel3>
        </cms:MenuPlaceholder>
      <tr>
        <td><img src="/gfx/gui_trans.gif" width="1" height="3" alt="" /></td>
      </tr>
    </table></td>
  </tr>
</table>

Footer

In standard.aspx Template file:

<wuc:footer runat="server" />

In footer.ascx usercontrol file:

<%@ Control Language="c#" %>
<%@ OutputCache Duration="30" VaryByParam="none" %>
<table cellspacing="5" cellpadding="0" id="footer">
  <tr>
    <td>&nbsp;</td>
    <td width="760">&copy;2004-2005 PowerNodes ApS. All rights reserved - 
<a href="/cms.ashx/Company.aspx">Company</a> | 
<a href="/cms.ashx/Sitemap.aspx">Site Map</a> | 
<a href="/cms.ashx/Disclaimers/Privacy%20Statement.aspx">Privacy &amp; Security</a> | 
<a href="/cms.ashx/Company/Contact%20Us.aspx">Contact Us</a><br />
      Use of this website signifies your agreement to the 
<a href="/cms.ashx/Disclaimers/Legal%20Notice.aspx">Terms of Use</a>.</td>
    <td>&nbsp;</td>
  </tr>
</table>

Also notice the OutputCache defined in some of the usercontrols. For more info go to the Microsoft MSDN http://msdn.microsoft.com/library/default.asp?url=/library/en-us/cpgenref/html/cpconOutputCache.asp

FULL standard.aspx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<%@ Page language="c#" %>
<%@ Register TagPrefix="cms" Namespace="PowerNodes.Cms.Web" Assembly="PowerNodes.Cms" %>
<%@ Register TagPrefix="wuc" TagName="header" Src="/usercontrols/header.ascx" %>
<%@ Register TagPrefix="wuc" TagName="topmenu" Src="/usercontrols/topmenu.ascx" %>
<%@ Register TagPrefix="wuc" TagName="breadcrumb" Src="/usercontrols/breadcrumb.ascx" %>
<%@ Register TagPrefix="wuc" TagName="quicknav" Src="/usercontrols/quicknav.ascx" %>
<%@ Register TagPrefix="wuc" TagName="treemenu" Src="/usercontrols/treemenu.ascx" %>
<%@ Register TagPrefix="wuc" TagName="footer" Src="/usercontrols/footer.ascx" %>
<html>
  <cms:head runat="server">
    <meta content="text/html; charset=iso-8859-1" HttpEquiv="Content-Type" />
    <link rel="stylesheet" type="text/css" href="/pn.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="/pn_print.css" media="print" />
    <script type="text/javascript" src="/pn.js"></script>
  </cms:head>
  <body>
    <wuc:header id="header1" runat="server" />
    <table cellspacing="0" cellpadding="0" id="menutop">
      <tr>
        <td>&nbsp;</td>
        <td width="760">
          <table cellspacing="0" cellpadding="0">
          <tr>
            <wuc:topmenu id="topmenu1" runat="server" />
          </tr>	  
        </table></td>
      <td>&nbsp;</td>
    </tr>
  </table>
  <table cellspacing="0" cellpadding="0" id="main">
    <tr>
      <td class="noprint">&nbsp;</td>
      <td width="520" valign="top" class="maintext">
        <wuc:breadcrumb id="breadcrumb1" runat="server" />
        <h1><cms:TextPlaceholder id="TextPlaceholder1" runat="server" ElementKey="Headline" /></h1>
        <cms:HtmlPlaceholder id="HtmlPlaceholder1" runat="server" ElementKey="Content" /></td>
        <td width="28" class="noprint">
          <img src="/gfx/gui_trans.gif" alt="" width="28" height="1" /></td>
        <td width="212" valign="top" class="noprint">
          <wuc:quicknav id="quicknav1" runat="server" />
          <wuc:treemenu id="treemenu1" runat="server" /></td>
        <td class="noprint">&nbsp;</td>
      </tr>
    </table>
    <wuc:footer id="footer1" runat="server" />
  </body>
</html>

< Back | Contents