From AlfrescoWiki

DRAFT/WIP

Contents 1 File Structure 2 Template Authoring 2.1 Freemarker Template Assets 2.1.1 Standard Alfresco Template Include 2.1.2 sample-template.ftl 2.2 Client-Side Assets 2.2.1 sample.js

[edit] File Structure

Templates consist of at least one Freemarker template, plus optional client-side stylesheet(s) and JavaScript files. They may also reference assets such as images, Adobe Flash movies and sounds.

TODO Sample file structure

[edit] Template Authoring

TODO Model available to template

[edit] Freemarker Template Assets

[edit] Standard Alfresco Template Include

The standard Alfresco template should not be edited and all custom template should include the standard template to ensure a consistent user experience across the site.

The standard template is imported via the Freemarker #import directive and should be assigned to the template namespace.

[edit] sample-template.ftl

<#import "global/alfresco-template.ftl" as template />
<@template.header>
   <link rel="stylesheet" type="text/css" href="${url.context}/templates/alfresco/sample.css" />
   <script type="text/javascript" src="${url.context}/templates/alfresco/sample.js"></script>
</@>
<@template.body>
<div id="doc3">
   <div id="hd">
      <@region id="header" scope="global" protected=true />
      <@region id="title" scope="page" protected=true />
      <@region id="navigation" scope="page" protected=true />
   </div>
   <div id="bd">
      Hello sample template
   </div>
   <div id="ft">
      <@region id="footer" scope="global" protected=true />
   </div>
</div>
</@>

[edit] Client-Side Assets

[edit] sample.js

/*
 * Copyright (C) 2005-2008 Alfresco Software Limited.
 *
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU General Public License
 * as published by the Free Software Foundation; either version 2
 * of the License, or (at your option) any later version.

 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.

 * You should have received a copy of the GNU General Public License
 * along with this program; if not, write to the Free Software
 * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.

 * As a special exception to the terms and conditions of version 2.0 of 
 * the GPL, you may redistribute this Program in connection with Free/Libre 
 * and Open Source Software ("FLOSS") applications as described in Alfresco's 
 * FLOSS exception.  You should have recieved a copy of the text describing 
 * the FLOSS exception, and it is also available here: 
 * http://www.alfresco.com/legal/licensing
 */

 /*
 * Alfresco.SampleTemplate template logic.
 * @namespace Alfresco
 * @class Alfresco.SampleTemplate
 */
(function()
{
   /*
    * sample constant value
    * @property MY_CONSTANT
    * @type int
    * @private
    */
   var MY_CONSTANT = 101;

   /**
    * Alfresco.SampleTemplate constructor.
    * @return {Alfresco.SampleTemplate} the new instance
    */
   Alfresco.SampleTemplate = function SampleTemplate_constructor()
   {
      /*
       * Request YUI Components
       * TODO: Update component list for specific requirements.
       * Note: If no YUI dependency, replace component list with empty array [].
      */
      Alfresco.util.YUILoaderHelper.require(["button"], this.onComponentsLoaded, this);

      return this;
   };

   Alfresco.SampleTemplate.prototype =
   {
      /**
       * Fired by YUILoaderHelper when required component script files have
       * been loaded into the browser.
       * @method  onComponentsLoaded
       */
      onComponentsLoaded: function SampleTemplate_onComponentsLoaded()
      {
         /* Register the onReady callback when the DOM has been loaded */
         YAHOO.util.Event.onDOMReady(this.onReady, this, true);
      },

      /**
       * Fired by YUI when template's DOM has been constructed and ready for use.
       * @method  onReady
       */
      onReady: function SampleTemplate_onReady()
      {
         /* TODO: Initialisation code, e.g. create YUI components. */
      }
   };
})();

/* Instantiate the template object as soon as it has been declared */
new Alfresco.SampleTemplate();