// you’re reading...

Best practice

The One True Container – Part III


The Return of the King – Include Container

What is the solution? Taking the process that led us from “copy and paste” to “header and footer” to its logical conclusion – “one include container” to contain all common code. How do we do that? One step at a time. If you are starting out on a new project, this should save you a lot of pain in the future. But where it shines is how easily it can be added to an existing project – without interfering with the existing structure and therefore allowing you to refactor the above pain spots on your terms, as and when you need or want to.

Step 1: Add your “include container” to each base template.
Create a container placeholder at the very end of each template, after the closing HTML tag. I call mine “con_include” as I liken it to the concept of using include files. I’ve previously used “con_library” and “con_prexecute” because it will all be pre-executed. The name is unimportant – choose something that has meaning to you. Surround the container with RedDot Pre-executing script block tags. A container with nothing in it won’t render as anything – so far, perfectly safe.

Handy Hint
We place our ¨con_include¨ placeholder at the end of the template because we plan to move the DOCTYPE declaration into this common code and we don´t want to risk spaces or new lines appearing before it in the final output (as it may then not be recognised). We can use ASP functions, subroutines and classes that are defined later in the file.

Step 2: Create content classes to be included, and create and connect instances to the ¨con_include¨ placeholder.
You could do this with one single content class, but I find it easier break them up into logical groupings – again, think include files.

A ¨Utility¨ content class to hold general functions used across the site:

<%
Public Function IIf(bCond, vTrue, vFalse)
    If bCond Then
        IIf = vTrue
    Else
        IIf = vFalse
    End If
End Function

Public Function IsString(v)
    IsString = IIf(VarType(v) = vbString, True, False)
End Function
%>
<script language="jscript" runat="server">
function GetVar(sId) {
    var re = //*(.*)*//m;
    return re.exec(eval(sId + ".toString()"))[1];
}

function GetTime() {
    var d = new Date();
    return d.getTime()
}
</script>

A ¨Page¨ content class defining a Page class to hold the contents of placeholders that are to be used in the shared output but differ from page to page:

<%
Class cPage
    Private m_hdl_headline
    Private m_inf_pageUrl
    Private m_stf_summary
    Private m_stf_meta_description
    Private m_stf_meta_keywords

    Public Property Get hdl_headline
        hdl_headline = m_hdl_headline
    End Property

    Public Property Let hdl_headline(str)
        m_hdl_headline = str
    End Property

    Public Property Get inf_pageUrl
        inf_pageUrl = m_inf_pageUrl
    End Property

    Public Property Let inf_pageUrl(str)
        m_inf_pageUrl = str
    End Property

    Public Property Get stf_summary
        stf_summary = m_stf_summary
    End Property

    Public Property Let stf_summary(str)
        m_stf_summary = str
    End Property

    Public Property Get stf_meta_description
        stf_meta_description = m_stf_meta_description
    End Property

    Public Property Let stf_meta_description(str)
        m_stf_meta_description = str
    End Property

    Public Property Get stf_meta_keywords
        stf_meta_keywords = m_stf_meta_keywords
    End Property

    Public Property Let stf_meta_keywords(str)
        m_stf_meta_keywords = str
    End Property
End Class
%>

Handy Hint
I use ASP classes as a way to package variables, functions and subroutines to avoid polluting the global namespace and the associated issues this may lead to.

A ¨HTML¨ content class defining an HTML class to hold subroutines that will output the shared HTML:

<%
Class cHTML
    Public Sub header(oPage)
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
    <title><%= oPage.hdl_headline %> | Unofficial RedDot CMS blog</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="content-style-type" content="text/css">
    <meta http-equiv="imagetoolbar" content="no">
    <meta name="robots" content="index, nofollow, noodp">
    <meta http-equiv="expires" content="43200">
    <meta name="audience" content="all">
    <meta name="language" content="en">
    <meta http-equiv="content-language" content="en">

    <!-- all in one seo pack 1.4.7.4 [245,327] -->
    <meta name="description" content="<%= oPage.stf_meta_description %>">
    <meta name="keywords" content="<%= oPage.stf_meta_keywords %>">
    <!-- /all in one seo pack -->

    <link rel="stylesheet" href="<%anc_css_style2%>" type="text/css" media="screen, projection">
    <!--[if lt IE 7]>
        <link rel="stylesheet" href="<%anc_css_ie%>" type="text/css" media="screen, projection">
    <![endif]-->

    <link rel="alternate" type="application/rss+xml" title="Unofficial RedDot CMS blog RSS Feed" href="<%anc_xml_rss%>">
    <link rel="alternate" type="application/atom+xml" title="Unofficial RedDot CMS blog Atom Feed" href="<%anc_xml_atom%>">
    <link rel="pingback" href="<%anc_pingback%>">
    <link rel="shortcut icon" href="<%img_favicon%>">
    <link rel="EditURI" type="application/rsd+xml" title="RSD" href="<%anc_xml_rsd%>">
    <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="<%anc_xml_wlwmanifest%>">
    <!-- Added By Democracy Plugin. Version 2.0.1 -->
    <script type="text/javascript" src="<%anc_js_democracy%>"></script>
    <link rel="stylesheet" href="<%anc_css_basic%>" type="text/css">
    <link rel="stylesheet" href="<%anc_css_style1%>" type="text/css">
    <link href="<%anc_css_syntax_highlighter%>" type="text/css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" media="screen" href="<%anc_css_sociable%>">
    <!-- Protected by WP-SpamFree v2.0.0.1 :: JS BEGIN -->
    <script type="text/javascript" src="<%anc_js_wp_spamfree%>"></script>
    <!-- Protected by WP-SpamFree v2.0.0.1 :: JS END -->
</head>
<bo<% ' %>dy>   <!--start body-->
    <div class="container">   <!--start container-->

        <div id="header" class="column span-14">

            <div id="logo" class="column first">

                <div class="title">
                    <div><a href="<%anc_home%>">Unofficial RedDot CMS blog</a></div>
                    <div class="desc">RedDot hints from developers, freelancers and fellow customers</div>
                </div>

            <!--<a href="<%anc_home%>" title="RedDot hints from developers, freelancers and fellow customers: Home" class="sitelogo"></a>-->

            </div>

            <div id="search_menu" class="column span-6 border_left last push-0">

                <div id="search" class="column first">
                    <h3 class="mast4">Search</h3>

                    <div id="search-form">
                        <form method="get" id="searchform" action="<%anc_search%>">

                        <div><label for="s" class="none">Search for:</label>
                        <input name="s" id="s" class="search_input" value="" type="text">

                        <label for="searchsubmit" class="none">Go</label>
                        <input id="searchsubmit" class="submit_input" value="Search" type="submit"></div>

                        </form>
                    </div>
                </div>
                <ul id="menu">
                    <li><span class="home"><a href="<%anc_home%>">Home</a></span></li>
<!--                    <li><span class="about"><a href="<%anc_about%>">About</a></span></li> -->
                    <li><span class="archives"><a href="<%anc_archives%>">Archives</a></span></li>
                    <li><span class="subscribe"><a href="<%anc_subscribe%>">Subscribe</a></span></li>
<!--                    <li><span class="contact"><a href="<%anc_contact%>">Contact</a></span></li> -->
                </ul>
            </div>

        </div>   <!--end header-->

        <div id="topbanner_single" class="column span-14">   <!-- start top banner -->
            <div class="pagetitle">
                // you’re reading...
            </div>
        </div>   <!-- end top banner -->
<%
    End Sub

    Public Sub footer
%>
<div id="comment-form">
<h2 id="respond" class="post_comm2">Post a comment</h2>
<form action="<%anc_comments%>" method="post" id="commentform">
<fieldset>
    <p>
        <label for="author" class="com">Name *</label>
        <input class="comtext" name="author" id="author" value="" size="22" tabindex="1" type="text">
    </p>
    <p>
        <label for="email" class="com">E-mail *</label>
        <input class="comtext" name="email" id="email" value="" size="22" tabindex="2" type="text">
    </p>
    <p>
        <label for="url" class="com">Web site</label>
        <input class="comtext" name="url" id="url" value="" size="22" tabindex="3" type="text">
    </p>
<!--<p><small><strong>XHTML:</strong> You can use these tags: &lt;a href=&quot;&quot; title=&quot;&quot;&gt; &lt;abbr title=&quot;&quot;&gt; &lt;acronym title=&quot;&quot;&gt; &lt;b&gt; &lt;blockquote cite=&quot;&quot;&gt; &lt;cite&gt; &lt;code&gt; &lt;del datetime=&quot;&quot;&gt; &lt;em&gt; &lt;i&gt; &lt;q cite=&quot;&quot;&gt; &lt;strike&gt; &lt;strong&gt; </small></p>-->
    <p>
        <label for="comment" class="com">Comment</label>
        <textarea class="comtext" name="comment" id="comment" cols="100" rows="10" tabindex="4"></textarea>
    </p>

</fieldset>
<fieldset>
    <p>
        <input name="submit" id="submit" tabindex="5" class="comsubmit" value="Submit Comment" type="submit">
        <input name="comment_post_ID" value="74" type="hidden">
    </p>
<noscript><p><strong>Currently you have JavaScript disabled. In order
to post comments, please make sure JavaScript and Cookies are enabled,
and reload the page.</strong> <a
href="http://www.google.com/support/bin/answer.py?answer=23852"
rel="nofollow external" >Click here for instructions</a> on how to
enable JavaScript in your browser.</p></noscript>
</fieldset>
</form>
</div>

                </div>   <!-- end comments -->

            </div>

                            <div class="column span-3 last">

                    <div id="side_categories">

                        <h3 class="mast">Categories</h3>

                        <ul class="cat">
                                <%con_categories%>
                        </ul>
                    </div>

                    <div id="side_recent_comments">

                        <h3 class="mast">Recent Comments</h3>

                        <ul class="reccom">
                            <!IoRangeList><li><%inf_originalAuthorFullName%> on <a href="<%lst_recentComments%>" title="View all comments for <%hdl_headline%>"><%hdl_headline%></a></li><!/IoRangeList>
                        </ul>

                    </div>

                </div>

        </div>   <!-- start home_content -->

        <div id="footer" class="column span-14">

            <div class="column span-7 first">
                © 2009 Unofficial RedDot CMS blog. <a href="<%anc_subscribe%>"><img src="<%img_subscribe%>" alt="Entries (RSS)" style="margin: 2px 0pt 0pt 7px; vertical-align: top;"></a>
            </div>

            <div class="column span-7 last">
                <div class="push-0">
                    <a href="http://wordpress.org/" title="Powered by WordPress"><img src="<%img_wordPress%>" alt="Powered by WordPress"></a>
                    <a href="http://code.google.com/p/the-morning-after/" title="Design: The Masterplan"><img src="<%img_masterplan%>" alt="Theme by The Masterplan"></a>
                </div>
            </div>

        </div>

    </div>   <!--end container-->

    <!-- WordPress theme by Arun Kale / www.themasterplan.in | Download it at http://code.google.com/p/the-morning-after/ -->

    <!-- Google Analytics for WordPress | http://yoast.com/wordpress/google-analytics/ -->
    <script type="text/javascript">
        var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
        document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
    </script><script src="<%anc_js_googleAnalytics%>" type="text/javascript"></script>
    <script type="text/javascript">
        var pageTracker = _gat._getTracker("UA-5132063-1");
    </script>
    <script type="text/javascript">

        pageTracker._trackPageview();
    </script>
    <!-- End of Google Analytics code -->
    <script type="text/javascript" src="<%anc_js_syntaxHighlighterCore%>"></script>
<script type="text/javascript" src="<%anc_js_syntaxHighlighterCSharp%>"></script>
<script type="text/javascript" src="<%anc_js_syntaxHighlighterPhp%>"></script>
<script type="text/javascript" src="<%anc_js_syntaxHighlighterJScript%>"></script>
<script type="text/javascript" src="<%anc_js_syntaxHighlighterVB%>"></script>
<script type="text/javascript" src="<%anc_js_syntaxHighlighterSQL%>"></script>
<script type="text/javascript" src="<%anc_js_syntaxHighlighterXML%>"></script>
<script type="text/javascript" src="<%anc_js_syntaxHighlighterCSS%>"></script>
<script type="text/javascript">
dp.SyntaxHighlighter.ClipboardSwf = '<%swf_clipboard%>';
dp.SyntaxHighlighter.HighlightAll('code');
</script>
                <!-- Piwik code inserted by Piwik Analytics Wordpress plugin by Jules Stuifbergen http://blog.jongbelegen/piwik -->
                <script language="javascript" src="<%anc_js_piwik%>" type="text/javascript"></script>
                <script type="text/javascript">
                <!--
                piwik_action_name = document.title;
                            piwik_idsite = 1;
                piwik_url = '<%anc_piwik%>';
                piwik_log(piwik_action_name, piwik_idsite, piwik_url);
                //-->
                </script><img src="<%img_piwik%>" alt="Piwik" style="border: 0pt none ;">
<object>
                <noscript><p>Web analytics <img src="<%anc_piwik%>?idsite=1" style="border:0" alt="piwik"/></p>
                </noscript></object>
                <!-- /Piwik -->

<!--end body-->
</bo<% ' %>dy></html>
<%
    End Sub

    Public Sub tags
%><img src="<%img_tags%>" class="posttag" alt="Print This Post" title="Print This Post" style="border: 0px none ;">Tags: <%
    End Sub

    Public Sub sociable(oPage)
%>
<div class="sociable">
<div class="sociable_tagline">
<h5>Share and Enjoy:</h5>
</div>
<ul>
    <li><a rel="nofollow" href="javascript:window.print();" title="Print this article!"><img src="<%img_printer%>" onclick="" title="Print this article!" alt="Print this article!" class="sociable-hovers"></a></li>
    <li><a rel="nofollow" target="_blank" href="mailto:?subject=<%= oPage.hdl_headline %>&body=<%= oPage.inf_pageUrl %>" title="E-mail this story to a friend!"><img src="<%img_emailLink%>" onclick="" title="E-mail this story to a friend!" alt="E-mail this story to a friend!" class="sociable-hovers"></a></li>
    <li><a rel="nofollow" target="_blank" href="http://digg.com/submit?phase=2&url=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://digg.com/submit?phase=2&url=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>');" title="Digg"><img src="<%img_digg%>" title="Digg" alt="Digg" class="sociable-hovers"></a></li>
    <li><a rel="nofollow" target="_blank" href="http://reddit.com/submit?url=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://reddit.com/submit?url=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>');" title="Reddit"><img src="<%img_reddit%>" title="Reddit" alt="Reddit" class="sociable-hovers"></a></li>
    <li><a rel="nofollow" target="_blank" href="http://www.stumbleupon.com/submit?url=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.stumbleupon.com/submit?url=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>');" title="StumbleUpon"><img src="<%img_stumbleupon%>" title="StumbleUpon" alt="StumbleUpon" class="sociable-hovers"></a></li>
    <li><a rel="nofollow" target="_blank" href="http://www.google.com/bookmarks/mark?op=edit&bkmk=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.google.com/bookmarks/mark?op=edit&bkmk=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>');" title="Google"><img src="<%img_googleBookmark%>" title="Google" alt="Google" class="sociable-hovers"></a></li>
    <li><a rel="nofollow" target="_blank" href="http://del.icio.us/post?url=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://del.icio.us/post?url=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>');" title="del.icio.us"><img src="<%img_delicious%>" title="del.icio.us" alt="del.icio.us" class="sociable-hovers"></a></li>
    <li><a rel="nofollow" target="_blank" href="http://www.mister-wong.com/addurl/?bm_url=<%= oPage.inf_pageUrl %>&bm_description=<%= oPage.hdl_headline %>&plugin=soc" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.mister-wong.com/addurl/?bm_url=<%= oPage.inf_pageUrl %>&bm_description=<%= oPage.hdl_headline %>&plugin=soc');" title="MisterWong"><img src="<%img_misterWong%>" title="MisterWong" alt="MisterWong" class="sociable-hovers"></a></li>
    <li><a rel="nofollow" target="_blank" href="http://www.facebook.com/share.php?u=<%= oPage.inf_pageUrl %>&t=<%= oPage.hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.facebook.com/share.php?u=<%= oPage.inf_pageUrl %>&t=<%= oPage.hdl_headline %>');" title="Facebook"><img src="<%img_facebook%>" title="Facebook" alt="Facebook" class="sociable-hovers"></a></li>
    <li><a rel="nofollow" target="_blank" href="http://www.mixx.com/submit?page_url=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.mixx.com/submit?page_url=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>');" title="Mixx"><img src="<%img_mixx%>" title="Mixx" alt="Mixx" class="sociable-hovers"></a></li>
    <li><a rel="nofollow" target="_blank" href="http://www.furl.net/storeIt.jsp?u=<%= oPage.inf_pageUrl %>&t=<%= oPage.hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.furl.net/storeIt.jsp?u=<%= oPage.inf_pageUrl %>&t=<%= oPage.hdl_headline %>');" title="Furl"><img src="<%img_furl%>" title="Furl" alt="Furl" class="sociable-hovers"></a></li>
    <li><a rel="nofollow" target="_blank" href="http://www.linkedin.com/shareArticle?mini=true&url=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>&source=Unofficial+RedDot+CMS+blog+RedDot+hints+from+developers%2C+freelancers+and+fellow+customers&summary=<%= oPage.stf_summary %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.linkedin.com/shareArticle?mini=true&url=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>&source=Unofficial+RedDot+CMS+blog+RedDot+hints+from+developers%2C+freelancers+and+fellow+customers&summary=<%= oPage.stf_summary %>');" title="LinkedIn"><img src="<%img_linkedIn%>" title="LinkedIn" alt="LinkedIn" class="sociable-hovers"></a></li>
    <li><a rel="nofollow" target="_blank" href="https://favorites.live.com/quickadd.aspx?marklet=1&url=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/https://favorites.live.com/quickadd.aspx?marklet=1&url=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>');" title="Live"><img src="<%img_live%>" title="Live" alt="Live" class="sociable-hovers"></a></li>
    <li><a rel="nofollow" target="_blank" href="http://ma.gnolia.com/bookmarklet/add?url=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://ma.gnolia.com/bookmarklet/add?url=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>');" title="Ma.gnolia"><img src="<%img_magnolia%>" title="Ma.gnolia" alt="Ma.gnolia" class="sociable-hovers"></a></li>
    <li><a rel="nofollow" target="_blank" href="http://twitter.com/home?status=<%= oPage.inf_pageUrl %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://twitter.com/home?status=<%= oPage.inf_pageUrl %>');" title="TwitThis"><img src="<%img_twitter%>" title="TwitThis" alt="TwitThis" class="sociable-hovers"></a></li>
    <li><a rel="nofollow" target="_blank" href="http://technorati.com/faves?add=<%= oPage.inf_pageUrl %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://technorati.com/faves?add=<%= oPage.inf_pageUrl %>');" title="Technorati"><img src="<%img_technorati%>" title="Technorati" alt="Technorati" class="sociable-hovers"></a></li>
    <li><a rel="nofollow" target="_blank" href="http://www.newsvine.com/_tools/seed&save?u=<%= oPage.inf_pageUrl %>&h=<%= oPage.hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.newsvine.com/_tools/seed&save?u=<%= oPage.inf_pageUrl %>&h=<%= oPage.hdl_headline %>');" title="NewsVine"><img src="<%img_newsVine%>" title="NewsVine" alt="NewsVine" class="sociable-hovers"></a></li>
    <li><a rel="nofollow" target="_blank" href="http://www.tumblr.com/share?v=3&u=<%= oPage.inf_pageUrl %>&t=<%= oPage.hdl_headline %>&s=" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.tumblr.com/share?v=3&u=<%= oPage.inf_pageUrl %>&t=<%= oPage.hdl_headline %>&s=');" title="Tumblr"><img src="<%img_tumblr%>" title="Tumblr" alt="Tumblr" class="sociable-hovers"></a></li>
    <li><a rel="nofollow" target="_blank" href="http://buzz.yahoo.com/submit/?submitUrl=<%= oPage.inf_pageUrl %>&submitHeadline=<%= oPage.hdl_headline %>&submitSummary=<%= oPage.stf_summary %>&submitCategory=science&submitAssetType=text" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://buzz.yahoo.com/submit/?submitUrl=<%= oPage.inf_pageUrl %>&submitHeadline=<%= oPage.hdl_headline %>&submitSummary=<%= oPage.stf_summary %>&submitCategory=science&submitAssetType=text');" title="Yahoo! Buzz"><img src="<%img_yahooBuzz%>" title="Yahoo! Buzz" alt="Yahoo! Buzz" class="sociable-hovers"></a></li>
    <li><a rel="nofollow" target="_blank" href="http://yigg.de/neu?exturl=<%= oPage.inf_pageUrl %>&exttitle=<%= oPage.hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://yigg.de/neu?exturl=<%= oPage.inf_pageUrl %>&exttitle=<%= oPage.hdl_headline %>');" title="Yigg"><img src="<%img_yigg%>" title="Yigg" alt="Yigg" class="sociable-hovers"></a></li>
</ul>
</div>
<%
    End Sub
End Class
%>

Handy Hint
RedDot treats the ¨body¨ HTML tag in a ¨special¨ way that will cause you no end of grief when used in a container page. Make sure you hide it (and its closing tag) from RedDot using the above technique (inserting an ASP comment in the middle – ie <bo<% ‘ %>dy> and </bo<% ‘ %>dy>) or another similiar technique.

A ¨RedDot¨ content class defining a RedDot class which acts a single point of initialisation and cleanup:

<%
Class cRedDot
    Private m_iStart ' start time in milliseconds

    Public Property Get iElapsedTime ' time elapsed from start in milliseconds
        iElapsedTime = GetTime() - m_iStart
    End Property

    Private Sub Class_Initialize
        m_iStart = GetTime()
        Set oHTML = New cHTML
        Set oPage = New cPage
    End Sub

    Private Sub Class_Terminate
        Set oPage = Nothing
        Set oHTML = Nothing
    End Sub
End Class

Dim oHTML, oPage
%>

Handy Hint
Keeping track of the elapsed time of the execution of our scripts for the entire page is good peace of mind when it comes to hunting down performance issues.

Step 3: Add your ¨con_include¨ container to the clipboard and ¨Reference Link for All Content Classes¨ for all base templates.
None of the above changes should have had any effect yet on your existing templates – we have simply added common code, but without actually executing any of it.

Step 4: Update our base template.
We can now update our base template to make use of our new functionality, and remove the duplicated HTML and those extra unnecessary placeholders:

<!IoRangePreExecute><%
Set oRedDot = New cRedDot ' performs all initialisation
oPage.hdl_headline = "<%hdl_headline%>"
oPage.inf_pageUrl = "<%inf_pageUrl%>"
oPage.stf_summary = "<%stf_summary%>"
oPage.stf_meta_description = "<%stf_meta_description%>"
oPage.stf_meta_keywords = "<%stf_meta_keywords%>"
oHTML.header oPage
%><!/IoRangePreExecute>

        <div id="post_content" class="column span-14">   <!-- start home_content -->

            <div class="column span-11 first">
                <h2 class="post_cat"><%stf_category%></h2>

                <h2 class="post_name" id="post-<%inf_pageId%>"><%hdl_headline%></h2>

                <div class="post_meta">
                    By <a href="<%anc_author%>" title="Posts by <%inf_originalAuthorFullName%>"><%inf_originalAuthorFullName%></a> <span class="dot">⋅</span> March 11, 2009<%inf_pageReleaseDate%> <span class="dot">⋅</span>   <a href="#comments">Post a comment</a>
                </div>

                <%txt_content%>

                <!IoRangePreExecute><% oHTML.sociable oPage %><!/IoRangePreExecute>

<h5>Related posts:</h5><ol><!IoRangeDynLink><li><a href="<%anc_related%>r" rel="bookmark" title="Permanent Link: <%hdl_headline%>"><%hdl_headline%></a></li><!/IoRangeDynLink></ol>
<h2 class="post_comm2">About the author:</h2>
<div id="authorinfo">
    <!IoRangeConditional><img src="<%img_author%>" alt="<%inf_originalAuthorFullName%>" title="<%inf_originalAuthorFullName%>"><!/IoRangeConditional>
    <%txt_aboutAuthor%>
</div>

                <div class="post_meta">
                    <!IoRangePreExecute><% oHTML.tags %><!/IoRangePreExecute><!IoRangeDynLink><a href="<%anc_tag%>" rel="tag"><%hdl_headline%></a>, <!/IoRangeDynLink></div>

                <div id="comments">   <!-- start comments -->

                    <div id="commenthead">

                        <h2 class="post_comm">Discussion</h2>

                            <h3 class="mast5">? comments for “<%hdl_headline%>”</h3>    

                    </div>

<!-- You can start editing here. -->

    <ol id="commentlist">
        <%con_comments%>
    </ol>

<!IoRangePreExecute><%
oHTML.footer
%><!-- <%= oRedDot.iElapsedTime %>ms --><%
Set oRedDot = Nothing ' performs all cleanup
%><%con_include%><!/IoRangePreExecute>

Our SmartTree now looks like this:

SmartTree

SmartTree

Epilogue

So, what do we have at the end of our journey?

  • A simplified SmartTree – we now only have one placeholder representing everything shared between base templates. The rest are specific to the page (as they should be).
  • A simplified template – we have eliminated most if not all of the HTML repetition from the template.
  • A single place to add shared content and functions – we should no longer need to use the ¨Reference Link/Page for All Content Classes¨ plugin, and therefore can breath a bit easier as our instances head over the 2000 mark.

Are we done? For this article, yes. But here are some things to think about for the future (feel free to add more!):

  • Reducing the number of anchor placeholders by using dynamic anchors or lists for CSS and Javascript.
  • Performance optimisations – specifically bringing the CSS and Javascript inline for SmartEdit and collapsing into single files for Publish.
  • Red dots! And for more fun – red dots in shared content!
  • Escaping of placeholders for use in shared content, especially text fields.
  • Handling of categories, tags, authors and social links.

Which methods of base page template construction have you seen and/or used? Do you have any hints or tips regarding base page template construction or even a completely different method that you want to share?

Catchya,
Adrian

Share and Enjoy:
  • Print
  • email
  • Twitter
  • Digg
  • Reddit
  • StumbleUpon
  • Google Bookmarks
  • del.icio.us
  • MisterWong
  • Facebook
  • LinkedIn

No related posts.

About the author:

Adrian Mateljan Adrian Mateljan lives in Reading, United Kingdom but is actually an Australian hailing from Perth, Western Australia. Currently contracting in London specialising in RedDot CMS.

Discussion

9 comments for “The One True Container – Part III”

  1. Good stuff Adrian. I’m fairly new to all this and I can already see the logic and advantages to your method. I’m really glad that this site exists and has such useful resources. Keep up the great work everyone!

    Posted by Jason | April 18, 2009, 5:56 am
  2. Hey Adrian, great Stuff!
    We will try this out. Sound’s really good. Keep on writing on!

    Posted by Bastian | April 20, 2009, 8:22 am
  3. Hi, awesome article.

    The OpenText Support wasn’t really that supportive when i asked for the “Reference Link in Clipboard for All Content Class Instances” Plugin – can someone please tell me where to get it? – i hate reinventing the wheel all the time…

    thanks a lot!

    Posted by Thomas Petautschnig | May 11, 2009, 3:38 pm
  4. Go to the community site (the UK one is http://www.reddotcommunity.co.uk – the US one http://www.reddotcommunity.com/ seems to have expired on the 6th May 2009?) In the UK community site it is under Knowledge Base – Plugins – CMS – Content Classes, Pages and Elements – or http://www.reddotcommunity.co.uk/kb_241.htm for short. I am surprised that OpenText Support wouldn’t simply send it to you. Let me know how you get on – I can send it to you direct if all else fails.

    Posted by Adrian Mateljan | May 12, 2009, 11:43 pm
  5. Updated the regular expression in the GetVar function to correctly work with content across multiple lines. (Was missing the “m’ flag)

    Posted by Adrian Mateljan | May 15, 2009, 3:03 pm
  6. One tiny modificaiton to your example template. In the footer you’ll need to make pageTracker editable :)

    Posted by Paul | June 22, 2009, 6:12 pm
  7. Hey Adrian, really good Post!

    We love your three parts of “The One True Container”, because we’re setting up our first project.

    But there are some points we are unsure about:

    Can you show us, how you connected all classes into the con_include container? We instanced all 3 templates (cHTML, cPage, cRedDot) and “included” them via container into the instance of the con_include template. Then we created the masterpage template and included the instance of “con_include” into the con_include container of the masterpage. Was that the intendet way? A picture of your smart-tree with all templates, instances and connections would say more than a thousand words :)

    Secondly, your things for the future: “Red dots! And for more fun – red dots in shared content!” hit us right away. How is this done? Is it possible to set a IoRedDot_* marker in a template, when the object which should be edited, is in another template? For example the creation of content in the “content” container of the masterpage and the navigation editing (adding sites to lst_navigation). Our only way to do this is setting the IoRedDot in the masterpage template, which is ridiculous, because then it would make no sense to split up the masterpage in multiple templates, when every reddot has to be in the masterpage template along with the objects.

    That leads me to our last question. Is it possible to inherite objects from the templates inside of con_include and access them in the masterpage?

    Your expertise would be much appreciated.

    Greetings from Germany,
    Florian Berger

    Posted by Florian Berger | August 21, 2009, 10:46 am
  8. Glad you liked it! I really do need to do a follow up post (currently finishing a RQL 101 post) – but in the meantime:

    I don’t create a con_include template as such (another unnecessary template?) – just connect your 3 template instances (cHTML, cPage and cRedDot) directly to the con_include of your first master page instance (usually the home page). The con_include of the master page template (and consequently all new instances) should just reference the con_include of that instance. I’ll endeavour to get a picture up that explains that better.

    You *can* set a red dot in one template to modify a placeholder in another (and tidy up the red dot HTML while you are at it) – you have to think in terms of pre-executing script and suitable escaping – but I’m not going to even try to describe that in a comment – I’ll make that my next article (well, maybe after I finish the 4th European RedDot User Conference review – which showed off an example of this, and also as there is a new conference coming up in November…)

    You should be able to inherit objects from the templates inside the con_include and access them in the master page – it is sort of the point – but I may have misunderstood what you are getting at. Remember that, in the end, the output is just one large file.

    I hope that helps / tides you over for now…

    Adrian

    Posted by Adrian Mateljan | August 22, 2009, 9:04 am
  9. I attempted to do this in v10 with a new project. I copied and pasted the code that you posted in this article (assigning the proper placeholders after the paste of course). I then created a dummy page.

    Unfortunately I get a 404 error (which who knows if it truly is a 404 or some other error).

    Anyone have any ideas on where to look?

    Posted by Joel | October 27, 2010, 4:19 pm

Post a comment



Stay up to date! - Get notified about followup comments

If you don't feel the urge to comment but wish to stay in the loop:
Just enter your email and subscribe to new comments.

Subscribe without commenting

Recent Tweets

  • RT @AirKraft: Transport Canada breakout: they manage 80K pages and 300K assets with WSM(RedDot). Wow! #OTCW 2010-11-11
  • The RedDot usergroup session 'Future of WCM' is in National Harbor 7, now. See you there! #otcw 2010-11-11
  • RT @yttergren: @AirKraft: Calling all WSM(RedDot) devs: share your solutions on http://bit.ly/bgPIof EVERY solution can win an iPad #OTCW 2010-11-10
  • Come to the Solution Exchange session. Enhance your (#reddot) CMS project! Chesapeake 12, 3:20pm #otcw Looking forward to see you there! 2010-11-10
  • More updates...