Date de publication: le jeudi 3 mai 2007 Ă  18h45
Dernière modification: par Pascal BOYER le samedi 25 avril 2009 à 12h04
« Article précédent: eZ publish: le fichier site.ini.append.php
» Article suivant: Créer une surcharge de template

Quelle que soit la page affichée de notre site, c'est toujours le contenu du template pagelayout.tpl (ou de l'une de ses surcharges) qui est affiché. En cela il est le plus important template d'un système eZ publish et mérite toute notre attention.

Il est vraiment recommandé de lire la traduction de la documentation officielle pour se faire une idée de l'importance de ce template et de la somme des informations qu'il condense.

Dans cet article, je présente les parties qui constituent ce template tel qu'il est mis à notre disposition à la fin de l'installation d'une version 3.9.1 de eZ publish . Mon but est, comme toujours, de permettre aux personnes qui découvrent eZ publish , de comprendre plus rapidement le fonctionnement de leur nouveau système en tâchant de mettre en évidence les articulations des différentes parties qui le composent.

Je n'ai pas encore pris le temps de regarder le fonctionnement du nouveau type website . Aussi, pour éviter toute déconvenue, je précise que je considère que le type plain est installé (comme indiqué dans l'installation d'une version 3.9.1 de eZ publish ).

Par défaut

A la fin de l'installation de eZ publish , si nous activons, grâce à l'outil de débugage, l'affichage des noms des templates utilisés par le système, nous voyons que le template pagelayout utilisé par défaut est:

design/base/templates/pagelayout.tpl

C'est donc le contenu de ce template que nous allons examiner de plus près.

Pré-requis

Les variables accessibles

En lisant la doc sur le template pagelayout.tpl mentionnée ci-dessus, nous apprenons qu'il permet d'accéder au contenu des variables suivantes:

• $access_type ( array )
• $anonymous_user_id ( integer )
• $current_user (object)
• $ezinfo ( array )
• $module_result ( array )
• $navigation_part ( array )
• $requested_uri_string ( string )
• $site ( array )
• $ui_component ( string )
• $ui_context ( string )
• $uri_string ( string )
• $warning_list ( array )

Les types de variables

Ces variables sont:

• soit de type array , c'est Ă  dire de type tableau et auquel cas elles contiennent plusieurs valeurs,
• soit de type string , c'est Ă  dire de type chaĂ®ne de caractères et auquel cas la valeur unique de la variable est du texte,
• soit de type integer , c'est Ă  dire de type entier et auquel cas la valeur unique de la variable est un nombre,
• soit de type object , c'est Ă  dire de type objet et auquel cas elles contiennent plusieurs valeurs.

Accéder aux valeurs des attributs des variables de type array ou object

Suivant le type de la variable, la façon d'accéder à son contenu diffère.

Les variables de type object et array contiennent une liste plus ou moins longue d'attributs qui eux-mêmes ont une valeur. C'est aux valeurs de ces attributs que l'on cherche à accéder. La plupart du temps, ce sera pour afficher la valeur en question. Cependant, cela peut aussi être pour créer une condition dans l'exécution d'une boucle.

Avant même d'accéder à une des valeurs disponibles, encore faut-il connaître la liste de ces valeurs. Pour cela, nous disposons d'une syntaxe aussi simple qu'exhaustive et que nous pouvons placer à peu près n'importe où dans le template:

{$nom_de_la_variable|attribute(show)}

Cette syntaxe produit l'affichage de tous les attributs (et de leur valeur) contenus dans la variable. La figure ci-dessous illustre la sortie produite par l'affichage du contenu du tableau $site :

Fig. 1: Liste des valeurs contenues par la variable $site qui est de type array

En clair, pour obtenir l'affichage sur le site public du tableau présenté par la figure 1, nous écrivons quelque part dans le template design/base/templates/ pagelayout.tpl la ligne suivante:

{$site|attribute(show)}

puis nous rechargeons n'importe quelle page du site pour que s'affiche le tableau.

Retenons que le tableau affiché est composé de trois colonnes:

• Attribute dans laquelle on trouve les noms des attributs prĂ©sents dans la variable,
• Type qui nous indique le type des attributs,
• Value qui indique la valeur de l'attribut. C'est cette valeur que l'on cherche Ă  atteindre/rĂ©cupĂ©rer.

Extraire une valeur

La démarche est un peu plus complexe que ce que nous avons vu jusqu'à présent. Cependant, comme elle est toujours la même, une fois acquise, elle devient vite un automatisme.

Quelle que soit la valeur à laquelle on souhaite accéder, la syntaxe utilisée commence toujours par préciser le nom de la variable. Donc, la syntaxe commence toujours par:

{$nom_de_la_variable.

• une accolade: {
• un dollar: $
• le nom de la variable
• un point: .

Pour plus de clarté, nous allons prendre pour exemple la variable $site . La syntaxe commencera donc par:

{$site.

Ensuite, tout dépend de la valeur que l'on souhaite atteindre. Et c'est là que le tableau de la figure 1 est d'une aide précieuse.

Lorsqu'on regarde les trois premières lignes du tableau, on voit qu'au troisième attribut ( http_equiv ) est associé le type array et surtout la valeur array(2) . Par contre les deux premiers attributs title et design sont de type string et ont pour valeur respectives:

• Lux Populi
• plain_site

Le fait que l'attribut http_equiv soit de type array indique que cet attribut est un tableau contenant à son tour d'autres attributs. On est donc en présence d'un tableau ( http_equiv ) contenu dans un tableau ( $site ). Une imbrication de tableaux, en somme.

Par ailleurs, la valeur array(2) de cet attribut nous enseigne qu'il contient 2 autres attributs. Ces deux attributs sont ceux présentés par les deux lignes suivantes:

• >Content-Type
• >Content-language

Plus bas dans le tableau, l'attribut meta est aussi de type array mais sa valeur est array(4) . Et on constate que cette fois-ci l'attribut meta est suivi de 4 lignes commençant par le symbole supérieur à (">").

Ces 4 lignes présentent les 4 attributs du tableau meta lui aussi contenu dans le tableau principal $site .

Pour afficher les valeurs des deux premiers attributs du tableau $site on va compléter ainsi la syntaxe:

{$site.title}

ou

{$site.design}

Il en va de même, bien sûr, pour les deux derniers attributs version et page_title .

Par contre, pour accéder aux valeurs des attributs des deux tableaux http_equiv et meta , on doit commencer par indiquer le nom du tableau. Par exemple:

{$site.meta.

Et ensuite seulement le nom de l'attribut dont on souhaite afficher la valeur. Par exemple:

{$site.meta.author}

Voilà. La syntaxe ci-dessus placée dans le template pagelayout.tpl affichera sur toutes les pages de notre site: eZ systems

Accéder aux valeurs des variables de type integer ou string

Pour les variables de type string ou integer on accède directement à l'unique valeur qu'elles contiennent avec la simple syntaxe suivante:

{$nom_de_la_variable}

Contenu du template

Nous allons maintenant passer en revue toutes les parties constituant l'intégralité du template pagelayout.tpl en suivant l'ordre dans lequel elles apparaissent dans le template. Pour plus de clareté j'ai volontairement reporté les numéros des lignes.

Type du document

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$site.http_equiv.Content-language|wash}"
               lang="{$site.http_equiv.Content-language|wash}">
4

• Lignes 1 et 2: dĂ©claration du type de document

• Ligne 3: Ă©crit cette ligne:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-FR" lang="fr-FR">

A propos de code HTML, on notera au passage l'emploi de l'opérateur de template wash dont la fonction est de nettoyer le texte passé en paramètre.

Les feuilles de styles

5 <head>
6
7 <style type="text/css">
8     @import url({"stylesheets/core.css"|ezdesign});
9 {*    @import url({ezini('StylesheetSettings','MainCSS','design.ini')|ezdesign}); *}
10     @import url({"stylesheets/site.css"|ezdesign});
11 {*    @import url({"stylesheets/t1/site-colors.css"|ezdesign});   todo -> read from design settings *}
12     @import url({ezini('StylesheetSettings','SiteCSS','design.ini')|ezroot});
13     @import url({"stylesheets/classes.css"|ezdesign});
14  {*    @import url({"stylesheets/t1/classes-colors.css"|ezdesign}); todo -> read from design settings  *}
15     @import url({ezini('StylesheetSettings','ClassesCSS','design.ini')|ezroot});
16     @import url({"stylesheets/debug.css"|ezdesign});
17     {section var=css_file loop=ezini( 'StylesheetSettings', 'CSSFileList', 'design.ini' )}
18         @import url({concat( 'stylesheets/', $css_file )|ezdesign});
19     {/section}
20 </style>
21

• Ligne 5: balise d'ouverture de la section <head> (en-tĂŞte) de la page HTML affichĂ©e.

• Ligne 7: balise d'ouverture de la section dĂ©diĂ©e Ă  l'importation des feuilles de style CSS.

• Lignes 8 Ă  19: ces lignes ont pour fonction d'importer les feuilles de style CSS .

On remarque qu'il y a plusieurs syntaxes:

8       @import url({"stylesheets/core.css"|ezdesign});

ou bien:

12     @import url({ezini('StylesheetSettings','SiteCSS','design.ini')|ezroot});

ou encore:

17     {section var=css_file loop=ezini( 'StylesheetSettings', 'CSSFileList', 'design.ini' )}
18         @import url({concat( 'stylesheets/', $css_file )|ezdesign});
19     {/section}

et enfin:

9 {*    @import url({ezini('StylesheetSettings','MainCSS','design.ini')|ezdesign}); *}

• Ligne 9: la syntaxe de cette ligne, très proche de celle de la ligne 12, est un exemple de commentaire dans le langage eZ publish .

Toutes ces syntaxes reposent sur la directive @import dont la forme générale est:

@import url(xxxxx);

• Ligne 8: cette synatxe ne pose guère de difficultĂ© une fois que l'on connaĂ®t le rĂ´le de l'opĂ©rateur de template ezdesign .

• Ligne 12: plus complexe, cette syntaxe utilise deux opĂ©rateurs de template:
  • ezroot
  • ezini

Comme ne l'indique pas la doc sur ezini , cet opérateur va rechercher dans le fichier de surcharge design.ini.append.php puis, s'il ne trouve pas le fichier de surcharge, dans le fichier par défaut design.ini , la valeur du paramètre (on parle aussi de directive) SiteCSS dans la section StylesheetSettings .

Le code source produit par la ligne 12 est:

@import url("/stylesheets/t02/site-colors.css");

Ce code est inopérant puisqu'il n'existe aucun répertoire stylesheets/ à la racine du répertoire d'installation de eZ publish .

• Lignes 17 Ă  19: cette syntaxe est intĂ©ressante car, bien qu'obsolète , nous la rencontrerons dans de nombreux templates. Cette syntaxe est celle d'une boucle et est Ă©quivalence Ă  une boucle construite autour de la structure de contrĂ´le foreach .

La syntaxe de la ligne 17 indique au système:

Pour chacune des valeurs du paramètre CSSFileList de la section StylesheetSettins du fichier de surcharge design.ini.append.php (ou du fichier par défaut design.ini ) on définit la variable css_file . En clair, la variable css_file va prendre à tour de rôle chacune des valeurs du paramètre CSSFileList .

• Ligne 18: assemble, grâce Ă  l'opĂ©rateur de template concat , la chaĂ®ne de caractères stylesheets/ et la valeur de la variable $css_file . Puis la chaĂ®ne de caractère ainsi obtenue est prĂ©fixĂ©e, grâce Ă  l'opĂ©rateur ezdesign , par le chemin du rĂ©pertoire du design courant.

• Ligne 19: ferme la boucle.

Le fichier de surcharge design.ini.append.php existe par défaut. Mais il est vide. Donc cette boucle ne renvoie strictement aucun code.

Supposons maintenant que ce fichier de surcharge contienne ceci:

[StylesheetSettings]
CSSFileList[]
CSSFileList[]=pascal/fichier_css_1.css
CSSFileList[]=pascal/fichier_css_2.css
CSSFileList[]=pascal/fichier_css_3.css

Si on recharge la page d'accueil du site, on pourrait obtenir le code source suivant:

@import url("/design/plain_site/stylesheets/pascal/fichier_css_1.css");
@import url("/design/base/stylesheets/pascal/fichier_css_2.css");
@import url("stylesheets/pascal/fichier_css_3.css");

Pour ĂŞtre complet, il est important de noter que la syntaxe suivante:

<link rel="stylesheet" href="/css/jd.slideshow.css" type="text/css" media="screen" />

...peut bien sûr également être employée (cette fois-ci en dehors des balises <style type="text/css"> et </style>) pour charger une feuille de style.

Les javascripts

22 {section name=JavaScript loop=ezini( 'JavaScriptSettings', 'JavaScriptList', 'design.ini' ) }
23     <script language="JavaScript" type="text/javascript" src={concat( 'javascript/',$:item )|ezdesign}></script>
24 {/section}
25

Ici on retrouve la syntaxe d'une boucle qui va permettre d'importer l'ensemble des fichiers javascript définis par le paramètre JavaScriptList de la section JavaScriptSettings du fichier de surcharge design.ini.append.php (ou du fichier par défaut design.ini ).

A la différence de la première boucle étudiée précédemment, celle-ci utilise l'espace de nom (le paramètre name ) et non le paramètre var . Chacune des valeurs successives du paramètre JavaScriptList sera alors extraite par la syntaxe $:item où $ vaut la chaîne de caractère JavaScriptList et item la valeur du paramètre JavaScriptList actuellement traitée par la boucle.

Hack IE 5.5 - Inclusion conditionnelle

26 {literal}
27 <!--[if lt IE 6.0]>
28 <style>
29 div#maincontent-design { width: 100%; } /* This is needed to avoid width bug in IE 5.5 */
30 </style>
31 <![endif]-->
32 {/literal}
33

• Lignes 26 et 32: indiquent au système, grâce Ă  la fonction de template literal , que tout ce qui se trouve entre ces deux balises doit ĂŞtre lu et traitĂ© exactement comme cela est Ă©crit.

• Lignes 27 Ă  31: correspondent Ă  un hack (une astuce) conditionnel dĂ©diĂ© aux navigateurs IE dont la version est infĂ©rieure Ă  6.0

La sélection de la version du navigateur repose sur une astuce de syntaxe présente dans la ligne 27 et à laquelle seuls les navigateurs IE sont sensibles.

En effet, la chaîne de caractères:

<!--

signifie en HTML le début d'un commentaire. Et la chaîne de caractères:

-->

signifie la fin de ce commentaire.

Donc, tous les navigateurs vont ignorer tout ce qui se trouve entre ces deux chaînes de caractères. Tous, sauf les navigateurs IE car, eux, attendent un espace juste après <!-- et juste avant --> . Or là, comme on peut le voir, <!-- est immédiatement suivi par du code que seuls les navigateurs IE vont prendre en compte.

• Ligne 27: ce code est une condition: si tu est infĂ©rieur Ă  IE 6.0 (tu = toi, le navigateur du visiteur) alors ce qui suit te concerne.
• Ligne 28: balise d'ouverture indiquant au navigateur que les lignes qui suivent sont des règles CSS.
• Ligne 29: dĂ©finition de la règle CSS suivie d'un commentaire (/* xxxx */)
• Ligne 30: fin de la zone rĂ©servĂ©e Ă  la dĂ©finition des règles CSS.C'est grâce aux balises <style> et </style> qu'il est possible de dĂ©finir des règles CSS directement dans l'en-tĂŞte d'une page HTML.
• Ligne 30: balise de fermeture de la structure if et fermeture du commentaire.

Inclusion de template

34 {include uri="design:page_head.tpl"}
35
36 </head>
37 <body>
38

• Ligne 34: syntaxe permettant d'appeler ou d'inclure un template.

Pour cela on utilise la fonction de template include puis on indique le chemin relatif du template ( page_head.tpl ) ainsi que "l'espace" ( design ) dans lequel il se trouve (ici c'est dans un des designs du système). Le chemin relatif du template inclus est implicitement exprimé par rapport au répertoire templates d'un design, ce qui signifie qu'en toutes circonstances le template inclus doit se situé dans un sous-répertoire du répertoire templates/ d'un design.

L'outil de debugage nous indique que, par défaut, le template inclus est:

design/standard/templates/page_head.tpl

Le logo du site

39 <div id="allcontent">
40
41 {cache-block keys=$uri_string}
42     <div id="topcontent">
43
44         {let pagedesign=fetch_alias(by_identifier,hash(attr_id,sitestyle_identifier))}
45         <div id="header">
46             <div id="header-design">
47                 {*<img src={"/images/t1/t1-logo-placeholder.gif"|ezdesign} height="70" width="211" alt="Company logo" />*}
48                 {section show=$pagedesign.data_map.image.content.is_valid|not()}
49                     <h1><a href={"/"|ezurl}>{ezini('SiteSettings','SiteName')}</a></h1>
50                 {section-else}
51                     <a href={"/"|ezurl}><img src={$pagedesign.data_map.image.content[logo].full_path|ezroot}
                          alt="{$pagedesign.data_map.image.content[logo].text}" /></a>
52                 {/section}
53             </div>{* id="header-design" *}
54         </div>{* id="header" *}
55         {/let}
56
57 {/cache-block}
58

• Ligne 39: tout les contenus de notre site seront inclus dans le div allcontent dĂ©fini dans la feuille de style design/base/stylesheets/site.css

• Ligne 41 et 57: balise d'ouverture et de fermeture d'un block de cache en langage spĂ©cifique eZ publish . Il est important de lire la documentation sur la fonction de template cache-block . En rĂ©sumĂ©, tout ce qui est compris entre ces balises sera mis en cache est rĂ©utilisĂ© par le système plutĂ´t que d'ĂŞtre systĂ©matiquement "calculĂ©" chaque fois que le contenu du template pagelayout.tpl sera affichĂ©.

Bien sûr, ce qui est placé dans un bloc de cache correspond le plus souvent à des informations qui ne varient que peu ou pas. Dans l'exemple ci-dessus, le code compris entre ces deux balise a pour fonction d'afficher le logo du site, ce dernier étant un élément, dans les pages d'un site, dont le contenu évolue peu dans le temps.

• Ligne 44: La fonction de template let , qui est une syntaxe obsolète remplacĂ©e par la fonction def , sert Ă  dĂ©finir une variable. En l'occurrence, la variable pagedesign est ici dĂ©finie Ă  partir d'une fonction fetch_alias elle-mĂŞme prĂ©dĂ©finie dans le fichier fetchalias.ini (ou dans l'une de ses surcharges).

[by_identifier]
Module=content
FunctionName=object_by_attribute
Parameter[identifier]=attr_id

Pour afficher sur le site public l'ensemble des attributs de cette variable, il nous suffit d'utiliser dans pagelayout.tpl la syntaxe vue en début d'article:

{$pagedesign|attribute(show)}

Par défaut, il existe effectivement un objet dont un des attributs a pour valeur sitestyle_identifier . Cet objet est accessible à partir de l'onglet Design de l'interface d'administration. Cliquer ensuite sur le bouton Assigner du cadre Gestion des menus en ayant préalablement pris soin de sélectionner le siteaccess public:

Fig. 3: Le cadre Gestion des menus de l'onglet Design de l'interface d'administration permet de sélectionner le siteaccess

Ensuite, en cliquant sur le lien Apparence dans le menu gauche, on obtient ceci:

Cet objet est créé lors de la phase d'installation de eZ publish et est une instance de la classe d'objet Template look . Cette classe d'objet est accessible à partir de l'onglet Administrateur puis en cliquant sur le lien Classes dans le menu gauche puis sur le lien Setup dans le cadre Groupes de classes .

• Ligne 45 et 46: les règles CSS header et header-design sont toutes deux dĂ©finies dans la feuille de style design/base/stylesheets/site.css

• Ligne 47: c'est un commentaire puisqu'elle commence par {* et finit par *}

• Ligne 48 Ă  52: il s'agit ici d'une structure Ă©quivalente Ă  un if/else (rappel: l'emploi de section est obsolète). La ligne 48 contient donc la condition qui doit ĂŞtre remplie pour que la ligne 49 s'affiche. Si la condition n'est pas remplie alors ce sera la ligne 51 qui sera affichĂ©e.

La ligne 48 demande au système de regarder s'il y a (is_valid ) un contenu ( content ) dans l'attribut image de l'objet traité, c'est à dire Lux Populi . S'il y a bien une image dans l'attribut image , alors le système renvoie une valeur 1 (true) et normalement la ligne 49 devrait être exécutée. Mais la ligne 48 se termine avec l'opérateur de template not() qui a pour fonction d'inverser la valeur renvoyée par le système. Donc au final, s'il y a un contenu dans l'attribut image, alors le système renvoie FALSE (FAUX). Et donc, on n'affiche pas la ligne 49.

En clair, is_valid|not() est la syntaxe permettant d'obtenir le même résultat que si on disposait d'une fonction is_not_valid .

• Ligne 49: elle est donc affichĂ©e si l'attribut image ne contient aucune image.

L'opérateur de template ezini va rechercher la valeur du paramètre SiteName de la section SiteSettings dans le fichier de surcharge site.ini.append.php (c'est ce fichier qui est recherché par défaut lorsqu'il n'y en a pas de spécifié).

La syntaxe {"/"| ezurl } permet de définir l'URI qui renvoie à la racine du site.

On obtient ainsi un logo constitué du nom du site tout en étant un lien vers la racine du site.

• Ligne 51: cette ligne est affichĂ©e dans tous les cas oĂą la ligne 49 ne l'est pas.

La finalité de cette ligne est d'afficher en lieu et place du nom du site, une image qui fera office de logo du site. Bien sûr, et comme on peut le remarquer, on retrouve l'usage de l'opérateur de template ezurl qui fera de l'image un lien vers la racine du site.

Dans la syntaxe:

{$pagedesign.data_map.image.content[logo].full_path|ezroot}

on voit que l'attribut content doit recevoir un paramètre indiquant la taille de l'image que l'on souhaite. Les valeurs possibles de ce paramètre sont définis dans le fichier de configuration image.ini (ou dans l'une de ses surcharges) par le paramètre suivant:

[AliasSettings]
AliasList[]
AliasList[]=reference
AliasList[]=small
AliasList[]=medium
AliasList[]=large
AliasList[]=rss

Plus bas dans le fichier, et toujours dans la même rubrique, on voit que chaque alias de taille est défini:

[reference]
Filters[]
Filters[]=geometry/scaledownonly=600;600

[small]
Reference=reference
Filters[]=geometry/scaledownonly=100;100

[medium]
Reference=reference
Filters[]=geometry/scaledownonly=200;200

[large]
Reference=reference
Filters[]=geometry/scaledownonly=300;300

[rss]
Reference=reference
Filters[]=geometry/scale=88;31

Surtout, on remarque que par défaut, la taille logo n'existe pas. Donc la ligne 51 ne pourra jamais renvoyer d'image tant que cet alias de taille ne sera pas défini.

On pourrait le faire en créant le fichier de surcharge:

settings/siteaccess/site_public/image.ini.append.php

et en y plaçant ceci:

<?php /* #?ini charset="iso-8859-1"?

[AliasSettings]
AliasList[]=logo


[logo]
Reference=reference
Filters[]=geometry/scaledownonly=480;540

*/ ?>

Puis en vidant les caches pour que le contenu de ce nouveau fichier de surcharge soit pris en compte par le système.

• Ligne 51: full_path permet d'obtenir le chemin complet vers l'image: /var/plain_site/storage/images/design/lux_populi/172-4-fre-FR/lux_populi_reference.jpg et l'opĂ©rateur de template ezroot
• de supprimer index.php et le nom du siteaccess de ce chemin vers l'emplacement de l'image.

Enfin, dans la syntaxe:

alt="{$pagedesign.data_map.image.content[logo].text}"

text permet de récupérer le texte alternatif de l'image que l'on a éventuellement indiqué dans le champ Texte alternatif de l'image lorsqu'on a uploadé l'image.

Les toolbars supérieurs

59     {section show=ezini('Toolbar_top','Tool','toolbar.ini')|count}
60         <div id="toolbar-top">
61             <div class="toolbar-design">
62                 {tool_bar name=top view=line}
63             </div>{* id="toolbar-design" *}
64              <div class="break"></div>
65         </div>{* id="toolbar-top" *}
66     {/section}
67

• Ligne 59: elle compte ( count ) le nombre de valeurs comprises dans le tableau Tool de la section Toolbar_top du fichier toolbar.ini .
  • Si la valeur de count est strictement positive, c'est Ă  dire s'il y a des outils qui ont Ă©tĂ© dĂ©finis comme devant s'afficher dans la partie supĂ©rieurs de la page, alors la ligne 62 sera exĂ©cutĂ©e.
  • Si la valeur de count est nulle, alors tout le bloc allant de la ligne 59 Ă  la ligne 66 ne sera pas pris en compte par le système.

• Ligne 62: la fonction de visualisation tool_bar recherche dans le fichier toolbar.ini (ou dans l'une de ses surcharges) la liste des outils qui sont programmĂ©s (par dĂ©faut ou par l'administrateur du site) pour s'afficher dans la partie supĂ©rieure ( top ) de la page. Ces outils sont listĂ©s dans le tableau Tool de la section Toolbar_top du fichier toolbar.ini . Donc name=top indique au système de rechercher la section Toolbar_top et d'afficher les outils de cette section avec le mode de vue dĂ©fini par le paramètre view (ici le mode de vue sera line )

Le mode de vue fait référence à un répertoire situé par défaut dans design/standard/templates/toolbar/ Ce répertoire auquel il est fait référence peut se nommer:

Chacun de ces deux répertoires contient des templates portant le nom des outils. Mais suivant que ces templates se trouvent dans l'un ou l'autre des répertoires, l'affichage produit ne sera pas le même.

Lorsqu'il est placé dans la partie supérieure de la page, il est évident que l'outil login , par exemple, doit être le plus petit possible pour ne pas casser la mise en page. Par contre, si on l'affiche sur la droite, alors là, sa présentation peut être plus imposante, comporter des options, plusieurs champs, etc...

Vous trouverez beaucoup d'informations sur le fonctionnement des outils et leur gestion dans cet article: (Ă  venir !)

Le menu

68     {default current_user=fetch('user','current_user')}
69     {cache-block keys=array($uri_string, $current_user.role_id_list|implode( ',' ),
                $current_user.limited_assignment_value_list|implode( ',' ))}
70         <div class="break"></div>
71     </div>{* id="topcontent" *}
72
73     <hr class="hide" />
74
75     {menu name=TopMenu}
76
77     <hr class="hide" />
78     {/cache-block}
79

• Ligne 68: la fonction de template default , qui est obsolète, dĂ©finie la variable current_user . Grâce Ă  la fonction de template fetch cette ligne rĂ©cupère le nom de l'utilisateur qui vient de demander l'affichage de la page et l'affecte Ă  la variable current_user . La plupart du temps il s'agit de l'utilisateur anonymous .Cette balise est fermĂ©e ligne 95.

La fonction default est une fonction obsolète qui assigne la valeur à la variable uniquement si celle-ci n'a pas déjà une valeur assignée.

• Ligne 69: elle est assez barbare ! Je sais seulement que cette ligne dĂ©finit le temps pendant lequel le menu (le top menu exactement) du site doit ĂŞtre mis en cache et indique au système s'il doit afficher le menu prĂ©sent dans le cache ou bien s'il convient de le recalculer. La syntaxe de cette ligne fait usage de l'opĂ©rateur de template implode .

• Ligne 75: La fonction menu recherche dans le fichier de surcharge menu.ini.append.php la valeur du paramètre TopMenu de la section SelectedMenu

Ce paramètre contient le nom du menu sélectionné par défaut ou par l'administrateur et destiné à être affiché en partie supérieure de la page. Placé sous le logo et en position horizontale, c'est la plupart du temps le menu principal du site.

Le choix du menu ce fait en allant dans l'onglet Design de l'interface d'administration, puis en sélectionnant dans le cadre Gestion des menus le siteaccess public (valider avec le bouton Assigner ). Ne reste plus qu'à sélectionner dans le cadre Positionnement des menus le type de menu que l'on souhaite ainsi que son positionnement. Penser à valider avec le bouton Appliquer les changements . Recharger la page d'accueil du site.

Parmi les quatres choix de menus disponibles par défaut, l'un d'eux propose de ne pas afficher de menu horizontal. Il n'est pas possible par défaut d'afficher de menu à droite. Mais bien sûr, avec un peu d'expérience cela est tout à fait réalisable.

• Ligne 78: balise de fermeture de la ligne 69.

Le path

80     <div id="path">
81         <div id="path-design">
82             {include uri="design:parts/path.tpl"}
83         </div>{* id="path-design" *}
84     </div>{* id="path" *}
85

Le path ( chemin en français) s'affiche par défaut sous le menu horizontal et affiche en permanence le chemin du document affiché. Cele permet au visiteur de savoir exactement où il se situe dans le site.

• Ligne 82: on retrouve la fonction d'inclusion de template dĂ©crite ligne 34. Le template inclus par dĂ©faut est:

design/base/templates/parts/path.tpl

Menu gauche

86     {cache-block keys=array($uri_string, $current_user.role_id_list|implode( ',' ),
           $current_user.limited_assignment_value_list|implode( ',' ))}
87     <hr class="hide" />
88
89     <div id="columns">
90
91         {menu name=LeftMenu}
92
93         <hr class="hide" />
94     {/cache-block}
95     {/default}
96

• Lignes 86 et 94: Ă  nouveau est dĂ©fini un bloc de code, celui prĂ©sent entre ces lignes, qui sera soumis Ă  une règle de mise en cache dĂ©finie par la ligne 86. Comprenne qui pourra !

• Ligne 91: le principe de fonctionnement du code de cette ligne est en tout point identique Ă  celui dĂ©crit pour la ligne 75.La fonction menu recherche dans le fichier de surcharge menu.ini.append.php la valeur du paramètre LeftMenu de la section [SelectedMenu]

Ce paramètre contient le nom du menu sélectionné par défaut ou par l'administrateur et destiné à être affiché en partie gauche de la page.

Le choix du menu ce fait en allant dans l'onglet Design de l'interface d'administration, puis en sélectionnant dans le cadre Gestion des menus le siteaccess public (valider avec le bouton Assigner ). Ne reste plus qu'à sélectionner dans le cadre Positionnement des menus le type de menu que l'on souhaite ainsi que son positionnement. Penser à valider avec le bouton Appliquer les changements . Recharger la page d'accueil du site.

• Ligne 95: balise de fermeture de la ligne 68.

Les toolbars Ă  droite

97         {section show=ezini( 'Toolbar_right', 'Tool', 'toolbar.ini' )|count}
98             <div id="rightmenu">
99                 <div id="rightmenu-design">
100                     <h3 class="hide">Right menu</h3>
101                     <div id="toolbar-right">
102                         <div class="toolbar-design">
103                             {tool_bar name=right view=full}
104                         </div>{* id="toolbar-design" *}
105                     </div>{* id="toolbar-right" *}
106                 </div>{* id="rightmenu-design" *}
107             </div>{* id="rightmenu" *}
108         {/section}
109
110         <hr class="hide" />
111

Le principe de fonctionnement du bloc de code compris entre les lignes 97 et 108 est en tout point similaire à celui décrit par le chapitre Les toolbars supérieurs .

• Ligne 97: elle compte ( count ) le nombre de valeurs comprises dans le tableau Tool de la section Toolbar_right du fichier toolbar.ini
  • Si la valeur de count est strictement positive, c'est Ă  dire s'il y a des outils qui ont Ă©tĂ© dĂ©finis comme devant s'afficher dans la partie droite de la page, alors la ligne 100 est affichĂ©e et la ligne 103 est exĂ©cutĂ©e.
  • Si la valeur de count est nulle, alors tout le bloc allant de la ligne 97 Ă  la ligne 108 ne sera pas pris en compte par le système.

• Ligne 103: la fonction de visualisation tool_bar recherche dans le fichier toolbar.ini (ou dans l'une de ses surcharges) la liste des outils qui sont programmĂ©s (par dĂ©faut ou par l'administrateur du site) pour s'afficher dans la partie droite ( right ) de la page. Ces outils sont listĂ©s dans le tableau Tool de la section Toolbar_right du fichier toolbar.ini . Donc name=right indique au système de rechercher la section Toolbar_right et d'afficher les outils de cette section avec le mode de vue dĂ©fini par le paramètre view (ici le mode de vue sera full )

Le mode de vue fait référence à un répertoire situé par défaut dans design/standard/templates/toolbar/ Ce répertoire auquel il est fait référence peut se nommer:

Chacun de ces deux répertoires contient des templates portant le nom des outils. Mais suivant que ces templates se trouvent dans l'un ou l'autre des répertoires, l'affichage produit ne sera pas le même.

Par défaut, aucun outil n'est configuré pour s'afficher à droite.

DĂ©termination de la mise en page

112         {cache-block}
113             {let maincontentstyle='maincontent-bothmenus'}
114
115             {section show=eq(ezini('SelectedMenu','LeftMenu','menu.ini'),'')}
116                 {set maincontentstyle='maincontent-noleftmenu'}
117             {/section}
118
119             {section show=ezini('Toolbar_right','Tool','toolbar.ini')|count|eq(0)}
120                 {section show=$maincontentstyle|eq('maincontent-noleftmenu')}
121                     {set maincontentstyle='maincontent-nomenus'}
122                 {section-else}
123                     {set maincontentstyle='maincontent-norightmenu'}
124                 {/section}
125             {/section}
126
127             <div id="maincontent" class="{$maincontentstyle}">
128                 <div id="fix">
129                     <div id="maincontent-design">
130             {/let}
131
132         {/cache-block}
133

• Ligne 112: mise en place d'un bloc de cache.

• Ligne 113: On retrouve la fonction obsolète let permettant de dĂ©finir une variable. Ici, la variable maincontentstyle vaut par dĂ©faut maincontent-bothmenus .

• Ligne 115: La syntaxe de cette ligne fait appel Ă  l'opĂ©rateur logique eq qui contrĂ´le ici que le paramètre LeftMenu de la section SelectedMenu du fichier menu.ini (ou de l'une de ses surcharges), extrait par l'opĂ©rateur ezini , soit vide ( ),'') ). Si c'est le cas alors la ligne 116 est exĂ©cutĂ©e.

• Ligne 116: la fonction set permet de redĂ©finir la valeur d'une variable prĂ©alablement dĂ©finie. Donc, si la condition de la ligne 115 est vraie alors la variable maincontentstyle vaudra maintenant maincontent-noleftmenu .

• Ligne 119: La condition repose ici sur l'opĂ©rateur count et sur l'opĂ©rateur logique eq . La condition est la suivante:

Si le nombre d'outils référencés par le paramètre Tool de la section Toolbar_right du fichier toolbar.ini (ou de l'une de ses surcharges) vaut zéro alors on passe à la ligne 120.

• Ligne 120: si la variable $maincontentstyle est Ă©gale Ă  (vaut) la chaĂ®ne de caractères maincontent-noleftmenu alors on passe Ă  la ligne 121.

• Ligne 121: on fixe la valeur de la variable $maincontentstyle Ă  maincontent-nomenus .

• Ligne 122: cette syntaxe est Ă©quivalente Ă  un else d'une structure if et permet donc de passer Ă  la ligne 123 si la condition de la ligne 121 n'est pas satisfaite.

• Ligne 123: on fixe la valeur de la variable $maincontentstyle Ă  maincontent-norightmenu .

• Ligne 127: Cette ligne est très importante car elle dĂ©finie une classe CSS dont le nom sera celui de la variable $maincontentstyle . En fonction de la valeur de cette variable, la classe CSS appliquĂ©e sera diffĂ©rente et le rĂ©sultat sera une mise en page diffĂ©rente du site.

Les noms des 4 classes CSS possibles parlent d'eux-mĂŞme:

On comprend donc que ce bloc de code a pour objet de déterminer s'il y a, dans la mise en page générale du site, un menu à gauche de défini ou non et s'il est prévu ou non des outils sur la droite. Le système détermine cela afin de réserver ou non des colonnes latérales réservées à l'affichage de ces menus et/ou de ces outils.

• Ligne 130: libère (remet Ă  zĂ©ro) la variable $maincontentstyle

• Ligne 132: Fin du bloc de cache.

$module_result.content

134                         {$module_result.content}
135
136                     </div>{* id="maincontent-design" *}
137                     <div class="break"></div>
138                 </div>{* id="fix" *}
139             </div>{* id="maincontent" *}
140
141             <div class="break"></div>
142     </div>{* id="columns" *}
143
144     <hr class="hide" />
145

• Ligne 134: la ligne la plus importante du template: cette ligne affiche le contenu de la variable $module_result . En clair le contenu demandĂ© par le visiteur du site est dans cette variable. On peut considĂ©rer, aux problèmes de mise en page près, que tant que le template pagelayout.tpl contient cette ligne alors il est en mesure d'afficher le contenu du site.

Les toolbars inférieurs

146     {section show=ezini('Toolbar_bottom','Tool','toolbar.ini')|count}
147         <div id="toolbar-bottom">
148             <div class="toolbar-design">
149                 {tool_bar name=bottom view=line}
150             </div>{* id="toolbar-design" *}
151             <div class="break"></div>
152         </div>{* id="toolbar-bottom" *}
153     {/section}
154

Le comportement de ces lignes de code est en tout point identique à celles décritent au paragraphe Les toolbar supérieurs . Par contre, ici, l'affichage des outils sera produit en bas de page juste au dessus du pied de page du site.

Le pied de page

155     <div id="footer">
156         <div id="footer-design">
157
158             <address>{"Powered by %linkStartTag eZ publish&reg; open source content management system %linkEndTag 
and development framework."|i18n("design/base",,hash('%linkS tartTag',"<a href='http://ez.no'>",'%linkEndTag',"</a>" ))}
<br />{ezini('SiteSettings','MetaDataArray','site.ini').copyright}
159             </address>
160
161         </div>{* id="footer-design" *}
162     </div>{* id="footer" *}
163
164     <div class="break"></div>
165 </div>{* id="allcontent" *}
166
167 <!--DEBUG_REPORT-->
168
169 </body>
170 </html>

• Ligne 155 Ă  162: insertion du pied de page du site avec utilisation de l'opĂ©rateur de template d'internationalisation i18n .

Conclusion

Voilà présenté suffisamment dans le détail, je l'espère, le contenu de ce template tellement important de eZ publish .

Cette présentation a été l'occasion d'aborder de très nombreuses notions importantes dans le fonctionnement de eZ publish et de faire un tout petit tour de la syntaxe propre au langage de eZ publish .

Commentaires