Après lecture des 2 articles précédents concernant la présentation des layouts, puis une description plus en détail, il est temps désormais de passer à la création de blocs pour afficher notre « Hello World! ».
Reprenons notre fichier de layout helloworld.xml, et donnons lui le contenu suivant:
<?xml version="1.0"?>
<layout version="0.1.0">
<helloworld_index_index>
<reference name="content">
<block type="core/template" name="content.helloworld" template="helloworld/contenu.phtml"/>
</reference>
</helloworld_index_index>
</layout>
Il s’agit ici de créer, pour la page par défaut de notre module Helloworld (handle helloworld_index_index), dans le bloc de contenu (<reference name= »content »), un bloc:
- de type core/template
- de nom « content.helloworld«
- dont le template est contenu dans le fichier helloworld/contenu.phtml
Le nommage de votre bloc est obligatoire.
Chaque bloc que vous ajoutez doit posséder un type. Il s’agit en fait d’un nom de classe PHP que Magento va instancier lorsqu’il interprète votre layout. Mais nous verrons cela un peu plus tard.
Pour l’instant, créez un répertoire helloworld dans le dossier template du thème courant (normalement, /app/design/frontend/default/nosymena/template) et ajoutez un fichier vide nommé contenu.phtml. Donnez lui le contenu suivant:
<?php ?> <H1>HELLO WORLD!</H1>
Et c’est tout…
Rechargez votre page /helloworld pour observer le résultat: le message HELLO WORLD! s’affiche maintenant en respectant le thème de Magento.
Magento va rechercher le fichier helloworld/contenu.phtml dans le dossier template du thème courant (et dans les autres dossiers template par le principe du fallback tant qu’il ne le trouve pas), et utiliser ce fichier pour effectuer le rendu HTML de votre bloc.
Comprendre les Blocks Magento
Association paramètre « type » <=> classe de Block
Comme indiqué plus haut, chaque bloc possède un type. Il s’agit d’une classe que Magento instancie lorsqu’il interprète le layout.
Pour notre exemple, lorsque Magento va charger notre layout, il va créer une instance Mage_Core_Block_Template. Le rapprochement entre le paramètre type (« core/template« ) et le nom de la classe s’effectue de la façon suivante:
- Magento récupère la première partie du paramètre type (avant le caractère « / ») => « core«
- Il recherche ensuite dans l’arbre XML de configuration le noeud correspondant dans le chemin config/global/blocks => « config/global/blocks/core«
- Cet élément XML lui donne alors le préfixe de classe à utiliser => <class>Mage_Core_Block</class>
- Il ajoute ensuite à ce préfixe la deuxième partie du paramètre type (après le caractère « / ») en notation Camel => « Template«
- Pour aboutir au nom de classe => Mage_Core_Block_Template
Cela signifie que chaque type de bloc (chaque classe de Block), y compris les vôtres, utilisable par Magento doit être enregistré dans le fichier de configuration.
Classes de Block définit par Magento
Voici quelques classes de Block que Magento définit et utilise, mais que vous pouvez aussi utiliser :
| core/template | Mage_Core_Block_Template | Bloc possédant un template définit par le paramètre « template » |
| page/html | Mage_Page_Block_Html | Le bloc « root » est de ce type |
| page/html_head | Mage_Page_Block_Html_Head | Le bloc « head » est de ce type. Il permet d’ajouter des appels Javascript et CSS |
| page/template_links | Mage_Page_Block_Template_Links | Utilisé pour réaliser des listes de liens. Magento l’utilise pour créer les listes de liens présents dans le footer |
| core/messages | Mage_Core_Block_Messages | Utilisé pour afficher des messages d’erreurs/réussite/warning |
Toutes ses classes sont des descendantes de Mage_Core_Block_Abstract.
Utilisation des Blocks dans le Layout
Mais qu’est ce que cela change d’avoir un type de Block plutôt qu’un autre, et comment interagir avec?
C’est là qu’il reste à voir la dernière instruction utilisable dans un layout : <action>
Avec cette instruction, placée à l’intérieur d’un noeud <block> ou <reference>, vous indiquez à Magento le nom de la méthode (et ses paramètres) qu’il doit appeler après avoir instancié la classe:
- le paramètre « method » indique la méthode à appeler
- tous les éléments enfants du noeud « action » sont considérés comme des paramètres de la méthode.
Rien ne vaut un exemple. Dans notre fichier de layout helloworld.xml, remplacez:
<block type="core/template" name="content.helloworld" template="helloworld/contenu.phtml"/>
Par:
<block type="core/template" name="content.helloworld">
<action method="setTemplate"><template>helloworld/contenu.phtml</template></action>
</block>
Puis rechargez la page /helloworld. Rien n’a changé…
Plutôt que d’utiliser le paramètre « template » du mot-clé <block>, nous avons fait appel à la méthode setTemplate de la classe Mage_Core_Block_Template. En paramètre, nous lui transmettons le chemin du template.
Prenons un autre exemple, qui vous sera peut-être plus utile:
<reference name="head">
<action method="setTitle"><title>MAGENTO TEST</title></action>
</reference>
Vous l’aurez compris, il s’agit de remplacer la balise TITRE de votre page.
Je voulais vous montrer comment ajouter en une ligne un lien Javascript vers le framework Dojo (<action method= »addJs »><script>http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js</script></action>) mais ceci ne fonctionne pas. Cette méthode (« addJs« ) n’accepte que des scripts locaux à votre site et non des scripts externes… Vous pouvez cependant corriger ce « bug » en surchargeant le Block Mage_Page_Block_Html_Head (la classe utilisée par le bloc « head »). Mais nous verrons plus tard comment surcharger un Block…
Pour connaître les méthodes que vous pouvez appeler avec l’instruction <action>, il vous suffit de lister toutes les méthodes public de la classe du Block concerné. Exemples:
- Pour la classe Mage_Core_Block_Template:
- setTemplate
- setScriptPath
- Pour la classe Mage_Page_Block_Html_Head:
- addCss
- addJs
- addCssIe
- addJsIe
- addLinkRel
- addItem
- removeItem
- setTitle
Je vous invite aussi à vous rendre sur la documentation de l’API Magento pour avoir le détail de ces fonctions.
Dans cet article, nous avons vu comment créer des blocs avec un template et interagir avec des blocs existants via l’instruction <action>. Dans le prochain article, nous verrons comment créer notre propre classe de Block, son rôle, et rendre notre Template plus dynamique.
Revenir au Tutoriel sur les Layouts, Blocs et Templates