FLEXIcontent vous permet de créer des champs personnalisés pour chacun des types de contenu que vous souhaitez exploiter. Cela permet de contraindre l’utilisateur à saisir différentes informations dans des zones bien spécifiques que je vais pouvoir afficher par la suite comme bon me semble. Je peux également transformer ces champs en critère de recherche ou de filtre… Bref avec un peu d’imagination, on peut rapidement réaliser tous les gabarits que l’on souhaite et une fois de plus ouvrir des portes que Joomla a laissé fermer.

Les types de champs disponibles sont les suivants : checkbox, checkbox image,date, email, file, image, radio buttons, radio image buttons, select, select multiple, text, textarea et weblink. Autant dire qu’il ne manque pas grand chose pour faire votre bonheur.

En plus des champs personnalisés, FLEXIcontent vous offre également l’accès à des fonctionnalités supplémentaires pour chaque contenu :
– la gestion des versions
– un système intégré de vote
– pouvoir mémorisé ses favoris
– un compteur de hit
– la gestion de mots clés
– affectation de plusieurs catégorie pour un seul contenu

Toutes ses fonctionnalités , qui s’affichent sous forme de champs, sont automatiquement affectés à un type de contenu lors de sa création ainsi que les champs de bases (titre, description, auteur, date de création, date de modification, état de publication)

Je vais donc continuer la création de mon template en configurant certains champs types et en rajoutant des champs personnalisés. Cet exemple a bien entendu rien de concret, il a juste pour but d’illustrer les différentes fonctionnalités.

Sommaire du tutoriel :

• Généralités sur les champs de FLEXIcontent
• Les champs types
• Les champs personnalisés et l’utilisation des plugins
• Créer son propre type de champ
  
• Positionner les champs dans le template

Généralités sur les champs de FLEXIcontent

Dans FLEXIcontent, vous pouvez associer un champ à un ou plusieurs type de contenus. Chaque champs personnalisés possède ses propres options. En fait les types de champs (textarea,checkbox,list…) sont tous générés à travers un plugin spécifique, donc si vous le souhaitez rien ne vous empéche de créer votre propre type de champ.
Pour chaque types de champs , il y a certaines options qui sont communes :

• Etiquette : c’est le nom qui apparaitra (ou non) devant votre champs dans le template. Attention si vous souhaitez modifier l’étiquette du champs description et que vous souhaitez la différencier en fonction du type de contenu, il est à ce moment préférable modifier cette valeur directement dans les paramètres du type où une option est prévu à cet effet.
• Nom : le nom utilisé afin d’identifier votre champs, il est important d’utiliser uniquement les caractères A-Z, a-z et 0-9 sans espaces, car c’est le nom qui nous permettra de référencer notre champ dans le template. Par défaut lorsque vous allez créer un champ, FLEXIcontent le nomme « fieldxx », je vous conseille vivement de le changer afin de trouver vos repères par la suite.
• Publié : permet d’activer ou non un champs. Certains champs (title, description,created, created by, last modified, revised by) ne peuvent pas être dépubliés car ils sont nécessaires au bon fonctionnement du versioning. Cependant il existe une astuce si vous ne souhaitez pas les faire apparaitre lors de la création d’un nouveau contenu, il suffit de ne pas affecter le champs au type de contenu en question et notre problème est résolu.
• Recherche : Indique si le contenu du champs sera indexé ou non pour une recherche.
• Recherche avancée : Cette fonction sera utilisée à partir de la version 1.7 de FLEXIcontent qui est prévue à la fin du mois de mars.
• Filtre : Indique si le champs sera affiché en tant que filtre dans l’affichage des contenus en mode category. Si vous souhaitez utiliser cette fonctionnalité il faut dans un premier temps mettre la valeur à oui sur les champs qui vous serviront de filtre. Attention ! seulement les champs avec des valeurs prédéfinies (Checkbox, Checkbox image, Select, Select multiple, Radio, Radio Image) peuvent être utilisés en tant que filtre. N’oubliez pas ensuite d’activer les filtres dans les paramètres de la catégorie et de sélectionner dans la liste les champs adéquats.
• Niveau d’accès : Les niveaux d’accès aux champs, niveaux basiques liés à l’ACL de Joomla.
• Ordre : Détermine l’ordre d’affichage du champs lors de la saisie des contenus.
• Description : Permet d’indiquer à l’utilisateur les instructions de saisie pour le champs. De la même manière que pour l’étiquette, si vous souhaitez renseigner différentes descriptions pour le champ « description », il vous faudra le renseigner dans les paramètres du type.
• Types : Sélectionner ici les types que vous souhaitez associés à votre champ (appuyez sur ctrl pour sélectionner plusieurs types)
• Afficher l’étiquette : Permet de renseigner un paramètre que l’on pourra utiliser dans le template afin de savoir si l’on affiche ou non l’étiquette du champ.
• Préfixe et suffixe : Accessible dans la majorité des champs (mais pas tous). Ces deux paramètres vous laissent la possibilité d’ajouter une valeur devant et après le contenu de votre champs. Vous pouvez ajouter par exemple le symbole € en suffixe si vous souhaitez afficher un champ monétaire. On peut les utiliser également pour rajouter du code html ou bien encore les utiliser pour appliquer un plugin (à voir dans la dernière partie de ce tutoriel)
• Plugins spécifiques : Cette liste affiche tous les plugins de contenu installés sur votre site Joomla, vous pouvez choisir des plugins spécifiques dans cette liste ou la laisser vide afin de rendre le contenu compatible avec n’importe quel plugin. Cette fonctionnalité est utile dans certains cas pour éviter des conflits, des affichages multiples ou de réduire la charge. Gardez à l’esprit que lorsque le plugin qui est utilisé sur un champ, sera automatiquement exécuté sur tous les champs suivants dans la boucle.

Les champs types

Certains champs sont automatiquement associés lors de la création d’un nouveau type, ce sont les champs types de FLEXIcontent.

Certains sont directement liés au noyau de Joomla :

• Title : Le titre de votre contenu
• Description : Ce qui correspond au contenu de votre article dans Joomla. Si vous souhaitez rendre la compatibilité avec les plugins content de Joomla, il ne vous faudra pas oublier de cocher dans les paramètres de ce champs l’option « Exécuter les plugins de contenu ».
• Created * : Date de création du contenu.
• Created by : Auteur du contenu.
• Last modified * : Date de la dernière modification du contenu.
• Revised by : Nom du dernier utilisateur ayant modifié le contenu.
• Hits : Nombre de fois où le contenu a été affiché. (par défaut il a un suffixe de renseigner : »vues »)
• Document type : Le type du contenu.
• Version : La version du contenu.
• State : L’état de publication du contenu.

* Pour tout les champs de type date, il est possible de modifier le format d’affichage dans les paramètres du champ à travers une liste avec des valeurs prédéterminées ou de créer son format d’affichage personnalisé en utilisant les paramètres PHP de strftime (http://php.net/manual/fr/function.strftime.php).

D’autres champs correspondent à des fonctionnalités bien précises de FLEXIcontent :

• Voting : Une fonctionnalité permettant d’évaluer de 1 à 5 un contenu. Le vote est symbolisé par une image 25×75 (com_flexicontent/assets/images/star.gif) décomposée en trois sous images représentant les actions : no selected, selected et hover. Vous pouvez créer votre propre image, puis modifier le chemin d’accès dans les paramètres du champs afin de faire pointer le chemin vers votre fichier. Je réalise donc ma petite image avec des ballons, c’est plus sympa pour évaluer des stades. Vous pouvez également modifier la taille d’affichage de l’image qui est par défaut de 16 pixels.
• Favourites : Permet à un utilisateur enregistré de classer cette page dans ses favoris.
• Categories : Stocke les catégories dans lesquelles le contenu est classé. Une option permet de sélectionner le séparateur qui sera affiché par la suite en frontend (barre verticale, saut de ligne, virgule, espace)
• Tags : Stocke les tags dans lesquels le contenu est classé. Une option permet de sélectionner le séparateur qui sera affiché par la suite en frontend (barre verticale, saut de ligne, virgule, espace)

Les champs personnalisés

Comme je l’ai précisé précédemment FLEXIcontent nous offre de nombreuses possibilités afin de personnaliser la saisie des contenus mais également leur affichage à travers les champs personnalisés. Je vais maintenant, tout en reprenant mon exemple de création d’un template pour présenter les stades de football français, vous présentez les différents types de champs personnalisés. Je n’utiliserais pas pour chaque champs l’ensemble des paramètres disponibles mais à travers l’ensemble du tutoriel je vais couvrir l’ensemble des fonctionnalités disponibles.
Ne pas oublier pour chacun des champs de sélectionner dans les types affectés notre type « Stade ».

• Text :

Je vais commencer par ajouter mon premier champ personnalisé, je souhaite afficher l’adresse du stade. Mais ce n’est pas tout je vais en profiter d’utiliser l’adresse saisie pour afficher la localisation de mon stade du GoogleMap.
Avant tout j’ai installé et activé la dernière version du plugin GoogleMap (http://www.kksou.com/php-gtk2/Joomla-Gadgets/googleMaps-plugin.php#download).
J’ajoute mon champs avec les valeurs suivantes :

Je nomme l’étiquette et le nom du champ « adresse », puis je sélectionne mon type de champ : « Text ». Je complète ma description en indiquant à l’utilisateur la manière dont il devra renseigner le contenu « Saisir l’adresse du stade avec le format suivant : ‘numéro de rue’ ‘nom de la rue’, ‘ville’ ».
Je veux exécuter le plugin GoogleMap sur ce champ, je change donc la valeur de « Exécuter les plugins de contenu » en indiquant la valeur « oui ».
Dans mon préfixe je saisis le début de la balise de mon plugin GoogleMap : {googleMaps addr=“
Puis dans le sufixe je ferme ma balise et j’ajoute quelques paramètres propres au plugin : ” width=100% height=190 lang=fr maptype=G_HYBRID_MAP}
L’adresse que je vais pouvoir saisir par la suite sera donc directement intégré en tant que paramètre pour mon plugin.
Important ! A ce jour il n’est pas possible d’utiliser un plugin qui utilise le caractère pipe « | » dans ses paramètres car ce dernier génère un bug.

• Textarea

Je vais maintenant rajouter une zone qui me permettra de saisir un complément d’adresse avec les valeurs suivantes :

Je décide de ne pas activer l’éditeur HTML et je réduis la zone à 5 lignes afin de ne pas surcharger ma page de saisie. (La zone « Hauteur de l’éditeur » correspond uniquement à la hauteur en pixels de l’éditeur HTML)

• Date

Je vais maintenant rajouter le champ pour enregistrer la date d’inauguration du stade. Ce champs me permettra de choisir une date à travers un calendrier qui s’affichera à côtés de mon champs de manière dynamique.

Je souhaite un format d’affichage qui n’existe pas dans la liste, je sélectionne donc « Format spécial » et je saisis mon format : « %d/%m/%Y » pour afficher une date qui va ressembler à ca ‘ 14/07/1979 ‘. Je désactive également les valeurs multiples.

• Email

Je vais rajouter une zome email qui me permettra de saisir les différentes adresses de contact.
Je nomme mon champ « contact », j’indique les consignes de saisies dans la description. Je vais autoriser les valeurs multiples avec un nombre maximum de 5 contacts. Je décide également d’afficher les valeurs dans mon template en séparant par une simple virgule.
Attention, il n’y a pas de contrôle de format lors de la saisie des valeurs, l’utilisateur pourra saisir ce qu’il souhaite (c’est à dire autre chose qu’une adresse mail). Dans le template, FLEXIcontent se contentera de rajouter un « mailto: ».

• Weblink

Je souhaite afficher pour chacun de mes stades le nom et le site internet du club officiel jouant sur la pelouse.

Je nomme mon champ « site_stade » et je précise dans la description qu’il ne faut pas saisir le « http:// » dans mon adresse. (même si on verra par la suite que FLEXIcontent le gère automatiquement) J’agrandis un peu la taille de mon champ car une adresse internet prendra un peu plus de place.
J’utilise aussi le titre de mon lien, plutôt que d’afficher l’adresse du site. Cela me permettra de montrer le nom du club plutôt que le nom de son site.
Enfin je ne souhaite pas que l’utilisateur quitte mon site s’il clique sur lien, je l’envoi donc dans une nouvelle fenêtre.

• Image

Je vais maintenant ajouter un champ image afin de pouvoir afficher une photo de mon stage. Je saisis les paramètres suivants :

Je nomme mon champ « image_stade » puis je renseigne la description en indiquant que je n’autorise que les fichiers jpg et png. Je décide de ne pas afficher l’étiquette du champ, car pour une image qui est sensé illustré ma page je n’en vois pas l’intérêt.
J’indique les types extensions autorisés, attention il est important de saisir l’extension en minuscule et en majuscule. Je limite ma taille maximum de fichier à 500ko (500 000 octets).
La qualité des miniatures correspond au taux de compression, ne travaillant pas sur une quantité importante d’image je préfère conserver une bonne qualité (valeur possible 1->100)
Je modifie le chemin d’accès aux répertoires des miniatures afin de centraliser toutes mes images par la suite dans un même répertoire pour FLEXIcontent, j’indique : images/flexicontent/miniatures
Nous avons la possibilité de gérer une watermark (image incrustée dans l’image originale afin de garantir les droits d’utilisations), je vais donc l’exploiter. Je laisse l’opacité à 100% car je vais gérer directement la transparence dans mon fichier image. Je positionne ma watermark en bas à droite.
FLEXIcontent va générer automatiquement 3 types de miniatures lors de l’upload de notre image. Nous pourrons ainsi exploiter par la suite dans nos templates différentes tailles d’images et optimiser par conséquent les temps de chargement.
Pour chacune des tailles je définis mes hauteurs et largeur maximum. Pour la grande et moyenne miniature, je laisse l’image à l’échelle et je décide d’incruster ma propre watermark que je stocke à l’endroit suivant : images/flexicontent/core/watermark.png .
Pour ma petite miniature je n’utiliserais pas de watermark en vue de la petite taille de mon image.
Enfin il est également possible de lier automatiquement ma miniature avec mon image originale par le biais d’une popup qui s’affichera automatiquement dans mon template. Vous avez le choix entre l’effet rockbox ou multibox.

• File

Je veux maintenant ajouter une zone où je pourrais mettre à disposition différentes ressources concernant le stade : plan des tribunes, services disponibles, brochures… Je rajoute donc ma zone de type « file » que je nomme « ressources ».

Cette zone me permettra automatiquement d’ajouter plusieurs fichiers. Choisissez le type de séparateur entre les différents fichiers.
« Utiliser l’icône MIME » vous permettra d’afficher sur le frontend une petite icône devant le nom du fichier qui dépendra directement du type MIME de votre fichier.
« Utiliser un bouton télécharger », cela vous permet d’afficher un bouton « Download » plutôt qu’un lien vers le fichier. Le souci c’est que si j’active cette fonction, je ne pourrais gérer qu’un fichier et donc cela ne m’intéresse pas.

• Select

Pour chaque stade je veux y associer la musique qui est jouée lors de l’entrée des joueurs sur la pelouse. Je vais donc utiliser une liste qui va directement dépendre des fichiers de FLEXIcontent. Au préalable, je fais quelques modifications dans les paramètres généraux de FLEXIcontent, j’autorise l’upload des fichiers mp3 puis je modifie le chemin d’upload : « images/flexicontent/fichiers/ » . Puis j’installe le plugin JosDewPlayer qui me permettra de lire les fichiers mp3 correctement.
Je nomme mon champ « hymne ». J’active l’exécution des plugins sur le contenu et je sélectionne uniquement josdewplayer afin d’optimiser le fonctionnement.
J’active également la suppression des espaces dans les noms pour éviter toute erreur dans l’adresse du fichier.
Pour paramétrer la lecture de mon fichier, je renseigne en préfixe :  {play}images/flexicontent/fichiers/   ,puis en sufixe : {/play}
Je souhaite utiliser le SQL afin de renseigner ma liste directement à partir des fichiers de FLEXIcontent. Je renseigne ma requête sql :

1
2
3

SELECT filename AS value, filename AS text
FROM #__flexicontent_files AS fi
WHERE fi.ext="mp3" AND fi.published=1

Il faut effectuer une requête avec deux champs à afficher auquel il faut obligatoirement associer l’alias « value » et « text » qui correspond bien entendu à la valeur et au texte de la liste. Il faut savoir que la valeur par défaut qui sera renvoyée lors de l’affichage du template sera « text ».  Je filtre les fichiers en ne sélectionnant que les mp3 qui sont publiés.

• Select multiple

Je souhaite associer et afficher les différents partenaires du club. Je met en place un « select multiple » qui sera associé au composant des bannières sous Joomla afin de pouvoir sélectionner plusieurs partenaires. Je nomme mon champ « partenaires »
Je vais utiliser un plugin afin d’afficher mes bannières, je n’oublie pas d’éxecuter les plugins de contenu et je sélectionne mon plugin « Mos Banner 0.4 » préalablement installé. Je supprime les espaces. Je saisis les balises de mon préfixe « {mosbanner:id= » puis de mon suffixe « } ».
Je vais lier la liste à la liste des bannières publiées de Joomla, j’active donc le SQL et je rentre ma requête :

1
2
3
4

SELECT bid AS value, name AS text
FROM #__banner AS ba
WHERE ba.showBanner=1
ORDER BY ba.name

Enfin je sélectionne la virgule comme séparateur de valeurs car c’est le caractère qu’utilise mon plugin.
On verra par la suite que le résultat obtenu n’est pas vraiment celui souhaité, et qu’il me faudra créer mon propre type de champ (voir chapitre suivant)

• Checkbox, Checkbox image, Radio buttons et Radio image buttons
  

Ces champs sont gérés de la même manière en dehors du fait que dans certains on peut y ajouter des images.
Je vais sélectionner le type « Checkbox image » et renseigner les éléments en respectant le format
« valeur::etiquette::image%% », mes valeurs : « boissons::Boissons::boissons.gif%% wc::Toilettes::wc.gif%% resto::Restaurants::resto.gif%% parking::Parking::parking.gif%% fumer::Interdiction de fumer::fumer.gif »
Il ne faut pas mettre le double pourcentage à la fin de la liste.
Je modifie ensuite le chemin d’accès à mes images « images/flexicontent/core/ ». Il est également possible de cocher par défaut certaines valeurs, en utilisant la valeur par défaut. Il suffit alors de saisir les « values » séparées par des virgules.

Mes champs personnalisés sont maintenant terminés.

Créer son propre type de champ

FLEXIcontent vous offre la possibilité de créer vos propres types de champs, on peut donc imaginer faire par exemple un champ avec un compteur incrémentiel (+,-) ou bien encore un scroll afin de déterminer les valeurs. Je vais juste présenter les possibilités car pour ma part je vais juste faire une copie de « select multiple » pour transformer le rendu qui est pour le moment sous cette forme : [prefixe_plugin][etiquette1][suffixe_plugin][separateur][prefixe_plugin][etiquette2][suffixe_plugin][separateur] … dans ce nouveau format que je souhaite : [prefixe_plugin][valeur1][separateur][valeur2][separateur]…[suffixe_plugin]

Un type de champ dans FLEXIcontent est en fait un plugin, les plugins sont automatiquement installés dans le répertoire plugins/flexicontent_fields/ et sont constitués de deux fichiers [nom_plugin].xml et [nom_plugin].php ainsi que les fichiers de langues associés.

Le fichier XML

Je fait donc une copie de l’original selectmultiple.xml que je renomme en selectmultiple.php .C’est un fichier standard d’installation de Joomla, on y trouve en premier lieu les mentions légales et la description, Je modifie donc juste le nom de mon plugin pour le distinguer du plugin original, je me rajoute au niveau de l’auteur puis je met à jour la version :

1
2
3
4
5
6
7
8
9
10
11

<?xml version="1.0" encoding="utf-8"?>
<install version="1.5" type="plugin" group="flexicontent_fields" method="upgrade">
 <name>Select Multiple Advanced</name>
 <author>Emmanuel Danan, update Maxime Danjou(NetAssoPro)</author>
 <creationDate>March 2009</creationDate>
 <copyright>Copyright (C) 2009 Emmanuel Danan</copyright>
 <license>GNU/GPL v2</license>
 <authorEmail>emmanuel@vistamedia.fr</authorEmail>
 <authorUrl>www.vistamedia.fr</authorUrl>
 <version>1.1</version>
 <description>FLEXI_FIELD_SELECTMULTIPLE</description>

J’indique le nom de fichier de mon plugin :

12
13
14

<files>
 <filename plugin="selectmultiplead">selectmultiplead.php</filename>
</files>

On retrouve ensuite les paramètres du plugin. Je rajoute deux paramètres, le premier que je nomme « postext_mode » qui me permettra de dire si on utilise le préfixe et suffixe sur chaque valeur, ou bien seulement en début et fin de la totalité des valeurs. Mon second paramètre « value_mode » permet de déterminer si je vais afficher mes valeurs ou mes étiquettes.

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
48
49
50
51
52
53
54
55
56
57

<params group="standard">
 <param name="display_label" type="radio" default="1" label="FLEXI_FIELD_DISPLAY_LABEL" description="FLEXI_FIELD_DISPLAY_LABEL_DESC">
 <option value="0">No</option>
 <option value="1">Yes</option>
 </param>
 </params>
 <params group="group-selectmultiplead" addpath="/administrator/components/com_flexicontent/elements">
 <param name="trigger_onprepare_content" type="radio" default="0" label="FLEXI_ENABLE_TRIGGER_ONPREPARECONTENT_EVENT" description="FLEXI_ENABLE_TRIGGER_ONPREPARECONTENT_EVENT_DESC">
 <option value="0">FLEXI_NO</option>
 <option value="1">FLEXI_YES</option>
 </param>
 <param name="plugins" type="pluginlist" label="FLEXI_FIELD_CHOOSE_SPECIFIC_PLUGINS" description="FLEXI_FIELD_CHOOSE_SPECIFIC_PLUGINS_DESC" />
 <param name="remove_space" type="radio" default="0" label="FLEXI_REMOVE_SPACE" description="FLEXI_REMOVE_SPACE_DESC">
 <option value="0">FLEXI_NO</option>
 <option value="1">FLEXI_YES</option>
 </param>
 <param name="pretext" type="text" default="" label="FLEXI_FIELD_PREFIX_TEXT" description="FLEXI_FIELD_PREFIX_TEXT_DESC" />
 <param name="posttext" type="text" default="" label="FLEXI_FIELD_SUFFIX_TEXT" description="FLEXI_FIELD_SUFFIX_TEXT_DESC" />
 <param name="postext_mode" type="radio" default="0" label="FLEXI_FIELD_POSTEXT_MODE" description="FLEXI_FIELD_POSTEXT_MODE_DESC">
 <option value="0">FLEXI_NO</option>
 <option value="1">FLEXI_YES</option>
 </param>
 <param name="sql_mode" type="radio" default="0" label="FLEXI_FIELD_SQL_MODE" description="FLEXI_FIELD_SQL_MODE_DESC">
 <option value="0">FLEXI_NO</option>
 <option value="1">FLEXI_YES</option>
 </param>
 <param name="field_elements" type="textarea" default="" rows="5" cols="25" label="FLEXI_FIELD_ELEMENTS" description="FLEXI_FIELD_ELEMENTS_DESC" />
 <param name="default_values" type="text" default="" label="FLEXI_FIELD_DEFAULT_VALUES" description="FLEXI_FIELD_DEFAULT_VALUES_DESC" />
 <param name="size" type="text" default="6" size="2" label="FLEXI_FIELD_SIZE" description="FLEXI_FIELD_SIZE_DESC" />
 <param name="value_mode" type="radio" default="0" label="FLEXI_FIELD_VALUE_MODE" description="FLEXI_FIELD_VALUE_MODE_DESC">
 <option value="0">FLEXI_FIELD_LABEL</option>
 <option value="1">FLEXI_FIELD_VALUE</option>
 </param>
 <param name="separatorf" type="list" default="1" label="FLEXI_FIELD_SEPARATOR_FRONTEND" description="FLEXI_FIELD_SEPARATOR_FRONTEND_DESC">
 <option value="0">FLEXI_SPACE</option>
 <option value="1">FLEXI_LINE_BREAK</option>
 <option value="2">FLEXI_PIPE</option>
 <option value="3">FLEXI_COMMA</option>
 <option value="4">FLEXI_FIELD_TAG_CUSTOM</option>
 </param>
 <param name="opentag" type="text" default="" label="FLEXI_FIELD_TAG_OPEN" description="FLEXI_FIELD_TAG_OPEN_DESC" />
 <param name="closetag" type="text" default="" label="FLEXI_FIELD_TAG_CLOSE" description="FLEXI_FIELD_TAG_CLOSE_DESC" />
 </params>

Dans la dernière partie du fichier xml, je charge mes fichiers langues (qui ne sont également qu’une copie des originaux), je rajoute dans chacun de mes fichiers les variables suivantes : FLEXI_FIELD_VALUE_MODE, FLEXI_FIELD_VALUE_MODE_DESC, FLEXI_FIELD_VALUE, FLEXI_FIELD_POSTEXT_MODE, FLEXI_FIELD_POSTEXT_MODE_DESC.

58
59
60
61
62

<languages>
 <language tag="en-GB">en-GB.plg_flexicontent_fields_selectmultiplead.ini</language>
 <language tag="fr-FR">fr-FR.plg_flexicontent_fields_selectmultiplead.ini</language>
 </languages>
</install>

Le fichier PHP

Le fichier est une classe composé de 5 événements :

• onDisplayField : Affichage du champ dans la saisie du contenu
• onDisplayFieldValue : Affichage du champ formaté pour le frontend
• onBeforeSaveField : Formate la valeur du champ avant qu’elle soit enregistré
• onAfterSaveField : N’est pas encore utilisé pour le moment, mais dans un futur proche il permettra d’effectuer des interactions avec les autres composants.
• onDisplayFilter : Affiche les filtres dans la vue du template catégorie. Par défaut c’est des listes.

Je vais pour ma part uniquement modifier l’événement onDisplayFieldValue pour rajouter les conditions qui dépendent de mes 2 nouveaux paramètres.
Je commence par modifier le nom de ma classe et mon constructeur que je nomme : plgFlexicontent_fieldsSelectmultiplead.
Puis ensuite dans la première ligne de chaque événement, je modifie le code de la manière suivante :

1

if ($field->field_type != 'selectmultiplead') return;

Je rajoute donc les conditions dans mon code et j’enlève également les   dans mes séparateurs afin de ne pas créer de bug avec mon plugin.

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110

function onDisplayFieldValue(&$field, $item, $values = null, $prop = 'display')
 {
  // execute the code only if the field type match the plugin type
  if ($field->field_type != 'selectmultiplead') return;
  $values = $values ? $values : $field->value ;
  // some parameter shortcuts
  $remove_space = $field->parameters->get('remove_space', 0) ;
  $pretext = $field->parameters->get('pretext', '') ;
  $posttext = $field->parameters->get('posttext', '') ;
  $field_elements = $field->parameters->get('field_elements', '') ;
  $sql_mode = $field->parameters->get('sql_mode', 0) ;
  $separatorf = $field->parameters->get('separatorf') ;
  $opentag = $field->parameters->get('opentag', '') ;
  $closetag = $field->parameters->get('closetag', '') ;
 
  // j'ajoute mes deux nouveaux paramètres
  $value_mode = $field->parameters->get('value_mode', '') ;
  $postext_mode = $field->parameters->get('postext_mode', '') ;
 
  // je retire dans les séparateurs le  
  switch ($separatorf) {
   case 0:
    $separatorf = ' ';
    break;
   case 1:
    $separatorf = '<br />';
    break;
   case 2:
    $separatorf = '|';
    break;
   case 3:
    $separatorf = ',';
    break;
   case 4:
    $separatorf = $closetag . $opentag;
    break;
  default:
   $separatorf = '&nbsp;';
   break;
  }
  if ($pretext) {
   $pretext = $remove_space ? $pretext : $pretext . ' ';
  }
  if ($posttext) {
   $posttext = $remove_space ? $posttext : ' ' . $posttext;
  }
  if ($sql_mode) { // SQL mode
   $db = &JFactory::getDBO();
 
   $query = preg_match('#^select#i', $field_elements) ? $field_elements : '';
   $db->setQuery($query);
   $results = $db->loadObjectList();
 
   if (!$results) {
    $field-> {$prop} = '';
   } else {
    $display = array();
    foreach($results as $result) {
     for($n = 0, $c = count($values); $n < $c; $n++) {
      if ($result->value == $values[$n]) {
       // selon qu'on décide d'afficher la valeur ou l'étiquette
       if ($value_mode == 0) {
        $thevalue = $result->text ;
       } else {
        $thevalue = $result->value ;
       }
       // selon qu'on décide d'utiliser le plugin pour toutes les valeurs ou pour l'ensemble des valeurs
       if ($postext_mode == 0) {
        $display[] = $pretext . $thevalue . $posttext;
       } else {
        $display[] = $thevalue ;
       }
      }
     }
    }
   }
  } else { // Elements mode
   // initialise property
   $listelements = explode("%% ", $field_elements);
   $listarrays = array();
   foreach ($listelements as $listelement) {
    $listarrays[] = explode("::", $listelement);
   }
   $display = array();
   foreach ($listarrays as $listarray) {
    for($n = 0, $c = count($values); $n < $c; $n++) {
     if ($values[$n] == $listarray[0]) {
      // selon qu'on décide d'afficher la valeur ou l'étiquette
      if ($value_mode == 0) {
       $thevalue = $listarray[1];
      } else {
       $thevalue = $listarray[0];
      }
      // selon qu'on décide d'utiliser le plugin pour toutes les valeurs ou pour l'ensemble des valeurs
      if ($postext_mode == 0) {
       $display[] = $pretext . $thevalue . $posttext;
      } else {
       $display[] = $thevalue ;
      }
     }
    }
   }
  }
  $field-> {$prop} = implode($separatorf, $display);
  // selon qu'on décide d'utiliser le plugin pour toutes les valeurs ou pour l'ensemble des valeurs
  if ($postext_mode == 1) {
   $field-> {$prop} = $pretext . $field-> {$prop} . $posttext;
  }
  $field-> {$prop} = $opentag . $field-> {$prop} . $closetag;
 }

Une fois toutes mes modifications effectuées je n’ai plus qu’à créer mon fichier zip afin de réaliser le package de mon plugin que je pourrais installer via Joomla.
Vous pouvez télécharger l’exemple que j’ai réalisé ici : plg_flexicontent_selectmultiplead.

Je vais donc changer maintenant mon type de champ pour mon champ « partenaires » afin de lui affecter mon nouveau type : « Select Multiple Advanced ». Au niveau des options pour « Type d’information à afficher (frontend) », je sélectionne « valeur », puis pour « Multi Suffixe, préfixe » je le laisse sur « non ».

Positionner les champs dans le template

Dans ce dernier chapitre de la 2ème partie du tutoriel de la créations de template sous FLEXIcontent, je vais vous montrer comment positionner ses champs dans son propre template via l’interface du back office.

Je me rends dans la section Template de FLEXIcontent puis au niveau de la ligne de mon template « Stade » je clique sur l’icône associé à la Vie Item.

Le positionnement des champs se fait alors par un simple glisser/déposer. Je met en place mes champs de la manière suivante :

Dans une prochaine version de FLEXIcontent il sera également possible de créer ses propres zones directement via l’interface graphique… plutôt intéressant.

Je vous montrerez également dans la quatrième partie de ce tutoriel comment insérer des champs fixes directement dans le template.

Voilà c’est tout pour cette fois-ci, dans la prochaine partie j’aborderais la partie de la saisie d’un contenu à travers notre type personnalisé. Cela vous permettra d’avoir un aperçu de l’agencement des différents champs et de leur mode de saisie.