FLEXIcontent en est maintenant à sa beta 5. Cette version est très proche de sa version finale. Depuis la la béta 4, le système de template a bien évolué, même si ce dernier reste assez simple, j’ai décidé de réaliser un tutoriel afin de vous aider dans vos premiers pas de ce composant CCK indispensable à Joomla.

Afin de rendre concret cet exemple je vais partir du principe que l’on veut créer plusieurs contenus afin de référencer des stades de foot – et oui fan de foot oblige – j’ai pour objectif d’afficher les différents types de champs suivants :
– Text & Textarea :  les coordonnées du stade
– Date : la date de construction
– Image : une photo du stade
– File : Le plan des tribunes
– Select : l’hymne officiel lors de l’entrée des joueurs dans le stade
– Select multiple : liste des partenaires
– Text + plugin : une google map pour le localiser
– Checkbox images : un champ pour afficher les prestations du stade
– Weblink : un lien vers le site officiel du club
– Email : une adresse email vers le contact officiel …

Vous pourrez bien sûr adapter cet exemple à votre besoin.

Ce tutoriel est décomposé en 5 parties :

• Part1 : La nouvelle structure des templates
• Part2 : Les types de champs disponibles pour créer son template
• Part3 : La saisie d’un contenu
  
• Part4 : Le template d’un contenu
• Part5 : Le template d’une liste de contenus
• Part6 : Trucs et astuces supplémentaires

Ce tutoriel a été réalisé sous Joomla 1.5.15 et FLEXIcontent beta 5.

La nouvelle structure des templates

Paramétrages initiaux

Avant de rentrer dans les détails de la création du template, il faut d’abord s’assurer de paramétrer correctement FLEXIcontent. J’ajoute une catégorie  racine avec les paramètres par défaut que je nomme « Stades ». J’ajoute ensuite mon type avec les paramètres par défaut que je nomme « Stade »

Création du template

Depuis la beta 4 de FLEXIcontent, le chemin pour accéder aux templates est le suivant : /components/com_flexicontent/templates/ Je vais donc créer à cet endroit un nouveau répertoire que j’appelle « stade ». Puis je vais créer des fichiers vierges de manière à créer la même arborescence ci contre, que l’on renseignera au fur et à mesure.

item.xml

C’est ce fichier qui va déterminer les zones et les paramètres du template d’un contenu. J’ajoute dans un premier temps les informations afin de décrire mon template :

1
2
3
4
5
6
7
8
9

<?xml version="1.0" encoding="utf-8"?>
<metadata>
  <author>Maxime DANJOU</author>
  <website>www.netassopro.com</website>
  <email>maxime.danjou@netassopro.com</email>
  <license>GPLv2</license>
  <version>1.0</version>
  <release>18 janvier 2009</release>
  <description>Template pour afficher les informations sur un stade</description>

Puis il est possible de déterminer différents paramètres que l’on pourra changer facilement par la suite grâce aux paramètres des templates accessibles dans le back office de FLEXIcontent. Dans mon cas je vais laisser la possibilité à l’utilisateur d’afficher ou non la GoogleMap associée au stade. (pour bien faire j’aurais dû utiliser le fichier langue fr-FR.com_flexicontent.ini, mais bon j’ai pas prévu de faire du multilangue dans ce tutoriel, une prochaine fois…)

10
11
12
13
14
15

  <params addpath="/administrator/components/com_flexicontent/elements">
    <param name="aff_gmap" type="list" default="2" label="Afficher la GoogleMap " description="Affiche ou non la GoogleMap sur la fiche du stade">
      <option value="0">No</option>
      <option value="1">Yes</option>
    </param>
  </params>

Je détermine ensuite mes zones dans lesquelles je pourrais rajouter mes différents champs.

16
17
18
19
20
21
22
23
24
25

  <fieldgroups>
    <group>entete</group>
    <group>adresse</group>
    <group>contact</group>
    <group>image</group>
    <group>gmap</group>
    <group>description</group>
    <group>informations</group>
    <group>bas</group>
  </fieldgroups>

Dans la dernière partie de mon fichier, j’indique le chemin du fichier css qui sera utilisé dans mon template. Si j’en avais besoin, j’aurai également pu charger des fichiers Javascript…

26
27
28
29
30
31

  <cssitem>
    <file>css/item.css</file>
  </cssitem>
  <jsitem>
  </jsitem>
</metadata>

category.xml

C’est ce fichier qui va déterminer les zones et les paramètres du template d’affichage d’une liste de contenu.  Je choisis d’afficher les stades en liste dans un tableau  (je ferais un autre tuto pour montrer l’affichage en blog). Le début du fichier est identique à item.xml et pour le reste ce n’est pas bien compliqué car l’ensemble des champs seront dans un tableau, il n’y a donc qu’une seule zone. De plus je n’ai pas de paramètres à ajouter :

10
11
12
13
14
15
16
17
18
19
20

 <params addpath="/administrator/components/com_flexicontent/elements">
 </params>
 <fieldgroups>
 <group>tableau</group>
 </fieldgroups>
 <csscategory>
 <file>css/category.css</file>
 </csscategory>
 <jscategory>
 </jscategory>
</metadata>

category.png et item.png

Ces deux fichiers ont juste pour but de montrer à l’utilisateur comment sont positionnés les zones dans le template. Je me fais donc deux images de 250×280 afin de bien présenter mon template.

item.php

Ce fichier correspond au template qui va afficher le contenu, dans une première partie nous n’allons renseigner uniquement que le code html afin de déterminer nos zones.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
// on définit ici le nom du template
$tmpl = $this->tmpl;
?>
<div id="stade_contenu">
 <div id="stade_entete">
 </div>
 <div id="stade_adresse">
 </div>
 <div id="stade_contact">
 </div>
 <div id="stade_image">
 </div>
 <div id="stade_description">
 </div>
 <div id="stade_informations">
 </div>
 <div id="stade_gmap">
 </div>
 <div id="stade_bas">
 </div>
</div>

category.php, category_alpha.php, category_category.php, category_items.php, category_subcategory.php

Je vais utiliser l’ensemble de ses fichiers pour afficher mes stades sous forme de liste, voici l’utilité de chacun d’entre eux.

catetegory.php : fichier principal du template qui est appelé par flexicontent, il n’affiche que le titre principal, la barre d’icone (imprimer, pdf, mail)  et charge les autres fichiers du template
category_alpha.php : il permet d’afficher un index alphanumérique qui permet de retrouver facilement un contenu dans une liste en fonction de son premier caractère
category_category.php : ce fichier affiche les informations concernant la catégorie qui est affichée (image et description)
category_items.php : affiche la liste des contenus sous forme de tableau ou blog (dans mon cas ca sera tableau)
category_subcategory.php : affiche la liste des sous catégories de la catégorie en cours d’affichage avec possibilité de montrer le nombre de contenu

Je vais me contenter de faire une simple copie des fichiers originaux contenus dans le template « default », je les détaillerai dans la partie 4 de mon tutoriel.

css/category.css , css/item.css

Lors du chargement d’un template son fichier css personnalisé est également automatiquement chargé, category.css pour l’affichage en mode category et item.css pour l’affichage d’un seul contenu. Je laisse le fichier category.css vide et je remplis le fichier item.css très simplement de la manière suivante :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

div.stade_contenu{
 width:740px;
 overflow:hidden;
}
div.stade_entete{
 width:100%;
 height:30px;
 overflow:hidden;
}
div.stade_adresse{
 width:50%;
 height:100px;
 overflow:hidden;
}
div.stade_contact{
 width:50%;
 height:100px;
 overflow:hidden;
}
div.stade_image{
 float:left;
 width:50%;
 height:200px;
 overflow:hidden;
}
div.stade_description{
 width:50%;
 height:100px;
 overflow:hidden;
}
div.stade_informations{
 width:50%;
 height:100px;
 overflow:hidden;
}
div.stade_gmap{
 float:left;
 width:50%;
 height:200px;
 overflow:hidden;
}
div.stade_bas{
 clear:both;
 width:100%;
 height:30px;
 overflow:hidden;
}

Mise en place du template

Afin d’installer mon nouveau template, il me suffit de copier le répertoire « stade » et l’ensemble de son contenu, que j’ai créé précedement, sur mon site à dans le répertoire suivant : components/com_flexicontent/templates
Une fois les fichiers copiés, je peux aller dans le back office de FLEXIcontent dans la section templates afin de vérifier que mon template est bien installé.

Configuration supplémentaire

Afin de finaliser l’installation et la configuration de nouveau template, je vais maintenant l’affecter à ma catégorie et à mon type.

Je vais donc dans le back office de FLEXIcontent, je clique sur « type », puis sur « stade ». On va maintenant affecter un template par défaut pour chaque contenu qui sera créé avec le type « stade », je modifie ensuite la valeur de template de contenu en choisissant dans la liste « stade ». Je constate au passage que j’ai l’option « Paramètres de templates, Paramètres : stade » qui s’active et j’y retrouve l’option d’affichage de la GoogleMap qui s’affiche, sa valeur est à non, je la bascule en oui.

Maintenant il faut que j’affecte mon template pour l’affichage en vue category, toujours dans le back office, je me dirige dans « catégories » puis je rentre en édition de ma catégorie stade. Dans les « Paramètres standards », je sélectionne « stade » dans l’option « template de catégorie », puis je sauvegarde. Dans ma configuration, il n’y a pas d’options affecter à ce template.

Afin d’enrichir un peu ce tutoriel, je vais également ajouter des sous catégories que je nomme « Est », »Nord et Centre », »Ouest », »Sud ». Lors de la création de chacune de ses catégories, je sélectionne l’option « Copier tous les paramètres : stades » et dans « Catégorie parente : stages  » également.

Voilà c’est tout pour la première partie… le reste à suivre très prochainement.