Clientspaces

It's in the espaces client that the contributor will be able to add conten rows In the properties of a template, an admin can then choose the default rows to embed. You can also define rows groups to limit their use on some templates or to some users. During the template creation, you just have to define the areas that will display the content rows.

It's very simple, just add an <atm-clientspace /> element. This tag has two mandatory attributes : module et id. The first one will tell to wich module the area is relatedand the second one will identify each clientspace. These are important, clientspaces ID are then used for the templates compatibility.

Automne main module is the pages modules, also called standard module. For instance, to declare an editable area for the main content, we write :

1.<atm-clientspace module="standard" id="main-content" />

We recommend to choose semantic ID in order to know what kinf of information is in the container. This will be very useful for the templates compatibility.

In our template, there are two different content areas : an area for the main content and another for the aside content, so I will add another clientspace :

1.<atm-clientspace module="standard" id="aside" />

Now we insert both clientspaces in our template :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title><atm-title /> - <atm-constant name="APPLICATION_LABEL" /></title>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <atm-meta-tags/>
        <atm-css-tags files="/css/reset.css,/css/base.css,/css/fonts.css" media="all" />
        <!--[if IE 7]>
        <link rel="stylesheet" href="/css/ie7.css" type="text/css" media="all" />
        <![endif]-->
        <atm-css-tags files="/css/print.css" media="print" />
        <atm-css-tags files="/css/mobile.css" media="handeld" />
        <atm-js-tags files="/js/jquery-1.4.2.js,/js/myscript.js" />
    </head>
    <body>
        <div id="header">
            <atm-linx type="recursivelinks">
                <selection>
                    <!-- Start from root website -->
                    <start>
                        <nodespec type="relative" value="root"></nodespec>
                    </start>
                    <!-- Display the first two levels -->
                    <condition property="lvl" operator="&lt;=">
                        <value type="data">2</value>
                    </condition>
                </selection>
                <!-- Menu closed by default and hide root page -->
                <display mode="close" root="0"><htmltemplate>
                <!-- HTML template with variables -->
                <li><a href="{{href}}">{{title}}</a></li></htmltemplate>{{sublevel}}
                <!-- Recursivity template -->
                <subleveltemplate><ul>{{sublevel}}</ul></subleveltemplate></display>
            </atm-linx>
        </div>
        <div id="main-content">
            <div id="breadcrumbs">You are here : 
            <!-- Descendant link type -->
            <atm-linx type="desclinks">
                <selection>
                    <!-- Start from root page -->
                    <start>
                        <nodespec type="relative" value="root"/>
                    </start>
                    <!-- Stop at the current page -->
                    <stop>
                        <nodespec type="relative" value="self"/>
                    </stop>
                </selection>
                <display>
                    <!-- Display links -->
                    <htmltemplate>
                        <a href="{{href}}">{{title}}</a>
                    </htmltemplate>
                </display>
            </atm-linx>  
        </div>
            <atm-clientspace module="standard" id="main-content" />
      </div>
        <div class="aside">
            <atm-clientspace module="standard" id="aside" />
      </div>
        <div id="footer">
            <atm-linx type="sublinks">
                <selection>
                    <!-- Select the page with an ID of 10 -->
                    <start>
                        <nodespec type="node" value="10" />
                    </start>
                </selection>
                <display>
                    <!-- Display an HTML unordered list  -->
                    <htmltemplate>
                        <li>
                            <a href="{{href}}">{{title}}</a>
                        </li>
                    </htmltemplate>
                    <subleveltemplate>
                        <ul class="links">{{sublevel}}</ul>
                    </subleveltemplate>
                </display>
            </atm-linx>
        </div>    
        <address> 
            <!-- Display last modification time and editor -->
            <atm-last-update format="d/m/Y H:i:s"><small>Dernière mise à jour : {{date}} par {{firstname}} {{lastname}}</small></atm-last-update>
        </address>
    </body>
</html>

You have other XML tags like <atm-last-update> inserted here in the footer that will offer you other possibilites in the templates.

Nous now have a generic template page. The next step is to write your own content rows or adapt the existing ones to customize your website pages.

I hope this tutorial helped you understand how to develop you own Automne templates.

If you need help, go and ask your questions on the forums.

Previous page
« Navigation links

Add a contribution

Top