Le besoin

Aujourd'hui nous allons voir comment ajouter un masque de saisie spécifique dans la console d'administration sur un champ personnalisé de type texte, que nous avons déjà créé dans joomla content.

Pour mettre en place ce champ préformaté, je m'appuie sur la bibliothèque jQuery de base, laquelle contient tout ce qu'il faut pour pouvoir spécifier un format de saisie à un champ de type input type = "text".

Principe de fonctionnement,  mise en œuvre

Avant toute chose, il faut connaître le principe de fonctionnement de la bibliothèque maskedit de jQuery pour comprendre mon raisonnement.

Avec la bibliothèque de Jquery, le principe est d'appliquer un masque de saisie à un champ texte, défini au moyen des champs personnalisés de Joomla, qui lui-même contient un id. Le plugin de base contenu dans la bibliothèque jQuery fonctionne de la manière suivante :

1. on récupère id du champ texte en inspectant le code :
   
2. on rajoute un petit bout de code jQuery qui va demander d'ajouter un masque de saisie à ce champ texte.

Mise en œuvre

Désormais que nous savons maintenant comment cela fonctionne, voilà la mise en œuvre que j'ai appliqué pour obtenir mon résultat.

Le premier point est un point de vérification et ne s'inscrit pas tellement dans ma mise en oeuvre. Bien entendu si vous savez que votre joomla intègre déjà la bibliothèque jQuery vous pouvez tout de suite passer au point 2.

1. Rendez-vous sur la page de votre console d'administration sur laquelle vous souhaiteriez que votre champs de type maskedit soit présent,
2. Afficher le code et regarder si la bibliothèque jQuery est présente ou non. La copie d'écran ci-dessous a été faite après le rajout de la bibliothèque JQuery.
   
   Dans mon cas elle l'était car dans Joomla 3 elle est fournie avec. A partir de Joomla 4, et à cause de l'arivée de Javascript 1.5 qui intègre en natif ce que JQuery apporte, JQuery n'est plus jointe à Joomla
3. Pour pouvoir intégrer des masques de saisie, nous utiliserons un plugin de JQuery (attention, ce n'est pas un plugin Joomla mais bien un plugin de la librairie JQuery !). Nous pourrions fabriquer un plugin Joomla spécifique pour charger ce plugin, mais pour gagner du temps, j'ai préféré l'intégrer directement dans ma template isis (attention, on travaille bien sur la template de la console d'administration !
     Bien entendu vous pouvez faire une substitution du fichier si vous le désirez, ceci est fortement conseillé, moi je ne l'ai pas fait.
4. Ajouter la ligne (35 sur la cope d'écran ci-dessus) qui fait un lien vers la bibliothèque du plugin jQuery utilisé. Dans mon cas, cette bibliothèque est télécharger "en local" sur mon serveur, ce dernier n'étant pas relié à Internet. Toutefois, vous pouvez pointer sur la bibliothèque distante. Personnellement, je suis pas fan car si un soucis arrive sur le fichier distant, votre masque ne fonctionne plus
   Quant à la librairie JQuery, il me semble qu'elle est absente dans joomla 4.
5. Ajouter la ligne suivante qui permet de faire un lien sur le plugin jQuery de type masque input.
   
   Bien entendu, cette bibliothèque, je lui ai au préalable téléchargée car je ne travaille pas sur un réseau connecté. Vous pouvez bien entendu faire un lien direct sur le serveur qui stocke cette librairie. Pour la charger, j'utilise :
   

   JHtml::_('script', 'jquery.maskinput.js', array('version' => 'auto','relative'=>true)); 

   Pour que cette ligne fonctionne, puisque nous ne spécifions pas de lien absolu, vous devez placer votre fichier js mentionné ci-dessus dans le répertoire Joomla administrateur template Isis JS :
   
6. Comme nous avons récupéré au point numéro 1 l'ID du champ que nous souhaitons formater, j'ai simplement rajouter le code dans la template d'administration Isis dans le fichier index.php Comme ce plugin doit être lancé à un moment donné, il faut bien lui dire de lancer. Pour faire ce lancement, dans mon fichier index.php dema template, j'ai rajouté le petit code de lancement suivant :
   
7. Dans le code précédent, vous aurez remarqué, j'ai bien spécifié le nom de mon champ ou plutôt son ID auquel je souhaite appliquer le masque de saisie dans le premier paramètre de la fonction jquery (pour mémoire, la fonction JQuery s'appelle $) auquel on adjoint la fonction mask (en JQuery, les fonctions s'enchainent, il faut le savoir) dans laquelle on passe en paramètre le format du masque.

Que faut il en retenir ?

1. La première des choses, c'est qu'une fois qu'on a compris le cheminement, ce qui m'a pris du temps je le reconnais, bah finalement ce n'est pas très compliqué
2. J'aurais pu pour garder "intacte" ma template et procéder au chargement de toutes ces bibliothèque au moyen d'un plugin. Ici j'ai fait "vite" mais pas très propre quand il faut maintenir du code. Tout ca, ça se discute je suis d'accord...
3. j'aurais aussi pu faire un fork/héritage/substitution du fichier d'index. D'un autre coté, corriger ce fichier permettra de le forker avec déjà l'intégration de la bibliothèque. Je dois dire que je reste perplexe entre le bien faire et les faire bien....