Connexion S'inscrire

Connectez-vous

Login *
Mot de passe *
Se souvenir de moi

Créer un compte

Les champs marqués d'un astérisque (*) sont requis.
Nom *
Login *
Mot de passe *
Vérification mot de passe *
Email *
Vérification email *
Captcha *

Création d'un composant Joomla (partie 32) Plugin pour editeur (editor)


Dans cette partie, nous allons créer un plugin pour éditeur (editor). Nous verrons donc comment ajouter un bouton personnalisé à l'éditeur pour faciliter l'ajout d'un guitariste (venant du composant notre composant com_djguitariste ) dans un article Joomla. Ce tutoriel fait suite à la série de tutoriels sur la création de composant Joomla, mais il peut être appliqué à n'importe quel autre composant. Cliquer ici pour commencer depuis le début.

1 - Introduction

Nous avons créé un plugin de contenu dans le tutoriel de la partie 30 de cette série qui consistait à ajouter des guitaristes dans un article Joomla. Bien que celui-ci fonctionne bien, il demande quand même à l'administrateur de retenir l'ID du guitariste avant de pouvoir l'ajouter dans un article. Ici nous allons mettre en place un bouton qui va apparaître dans l'éditeur et permettre d'ajouter des guitariste plus facilement.

 

2 - Structure et cheminement

Nous allons créer un dossier nommé guitariste dans le dossier plugins/editor-xtd pour notre plugin. Editor-xtd est donc le dossier de plugins pour l'éditeur Wysiwyg. Dans notre dossier guitariste, nous allons créer deux fichiers guitariste.xml et guitariste.php. Le fichier XML sert de descripteur pour l'installation de notre plugin. Le fichier PHP contiendra la classe qui s'occupera d'afficher le bouton et d'ajouter un code Javascript pour créer la syntaxe ({afficherguitariste X}) en utilisant l'ID qui lui sera passé en paramètre. Nous ajouterons un nouveau calque de vue nommé modal.php dans le dossier tmpl de la vue liste (guitaristes) du composant com_djguitariste en administration. Ce calque de vue va permettre d'ouvrir la liste de guitaristes dans une fenêtre popup et permettre de sélectionner automatiquement un guitariste en cliquant sur son nom. Nous ajouterons pour finir deux fichiers de langue (fr-FR.plg_editor-xtd_guitariste.ini et fr-FR.plg_editor-xtd_guitariste.sys.ini) dans le dossier de langue en administration.

 

3 - Le fichier guitariste.xml

Comme toujours, ce fichier sert à donner des informations à Joomla sur le plugin, son nom, son type, l'auteur, la date, etc. C'est dans ce fichier que sont listés les différents fichiers à importer lors de l'installation.

Voici le contenu du fichier guitariste.xml

<?xml version="1.0" encoding="utf-8"?>
<extension version="3.0" type="plugin" group="editors-xtd">
  <name>plg_editors-xtd_guitariste</name>
  <author>Docteur Joomla</author>
  <creationDate>mars 2018</creationDate>
  <authorEmail>Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser.</authorEmail>
  <authorUrl>www.docteurjoomla.com</authorUrl>
  <version>1.0</version>
  <description>PLG_GUITARISTE_XML_DESCRIPTION</description>
  <files>
    <filename plugin="guitariste">guitariste.php</filename>
  </files>
  <languages>
    <language tag="fr-FR">fr-FR.plg_editors-xtd_guitariste.ini</language>
    <language tag="fr-FR">fr-FR.plg_editors-xtd_guitariste.sys.ini</language>
  </languages>
</extension> 

4 - Le fichier guitariste.php

Ce fichier est une classe qui étend JPlugin.  Nous aurons juste besoin d'une méthode onDisplay() pour créer notre bouton et ajouter le code javascript qui sera appelé pour créer la syntaxe ({afficherguitariste X}) à partir de l'ID du guitariste venant de la fenêtre popup.

Voici le contenu du fichier guitariste.php

<?php
defined('_JEXEC') or die;

class plgButtonGuitariste extends JPlugin
{
  
  protected $autoloadLanguage = true;
  
  public function onDisplay($name){
    $js = "function djguitaristeSelectGuitariste(id, name, catid){
    var tag = '{afficherguitariste ' + id + '}';
    jInsertEditorText(tag, '". $name ."');
    SqueezeBox.close();
    }";
    
    $css = ".button2-left .testButton {
                    background: transparent url(/plugins/editors-xtd/test.png) no-repeat 100% 0px;
                }";
    
    $doc = JFactory::getDocument();
    $doc->addScriptDeclaration($js);
    $doc->addStyleDeclaration($css);
     
    JHtml::_('behavior.modal');
    $link = 'index.php?option=com_djguitariste&view=guitaristes&layout=modal&tmpl=component&'.JSession::getFormToken().'=1&editor=' . $name;
    
    $button = new JObject();
    $button->modal = true;
    $button->class = 'btn guitariste-add';
    $button->link = $link;
    $button->text = JText::_('PLG_GUITARISTE_BUTTON_GUITARISTE');
    $button->name = 'guitariste-add';
    $button->options = "{handler: 'iframe', size: {x: 800, y: 500}}";
    
    return $button;
  }  
   
}

 

5 - Le nouveau calque de vue modal.php

Nous allons nous rendre dans le dossier du composant en administration pour ajouter ce layout dans le dossier de vue liste. Dans views/guitaristes/tmpl/, nous ajoutons un fichier nommé modal.php. On peut utiliser une copie du fichier default.php qui est dans ce dossier pour faciliter la tâche. Au final, nous voulons avoir une vue semblable à cette image dans notre popup.

Comme on peut le voir sur l'image, l'affichage ressemble beaucoup à celui de default.php mais ici on ne garde que ce qui est nécessaire.

Voici le contenu du fichier modal.php

<?php
defined('_JEXEC') or die;

$app = JFactory::getApplication();

if ($app->isClient('site'))
{
  JSession::checkToken('get') or die(JText::_('JINVALID_TOKEN'));
}

JHtml::_('behavior.core');
JHtml::_('behavior.polyfill', array('event'), 'lt IE 9');
JHtml::_('bootstrap.tooltip');
JHtml::_('formbehavior.chosen', '.multipleCategories', null, array('placeholder_text_multiple' => JText::_('JOPTION_SELECT_CATEGORY')));
JHtml::_('formbehavior.chosen', 'select');


$user      = JFactory::getUser();
$userId    = $user->get('id');
$listOrder = $this->state->get('list.ordering');
$listDirn  = $this->state->get('list.direction');
$canOrder  = $user->authorise('core.edit.state', 'com_djguitariste');
$saveOrder = $listOrder == 'a.ordering';

if ($saveOrder)
{
  $saveOrderingUrl = 'index.php?option=com_djguitariste&task=guitaristes.saveOrderAjax&tmpl=component';
  JHtml::_('sortablelist.sortable', 'guitaristes', 'adminForm', strtolower($listDirn), $saveOrderingUrl);
}

$function  = $app->input->getCmd('function', 'djguitaristeSelectGuitariste');
$editor    = $app->input->getCmd('editor', '');
$onclick   = $this->escape($function);

if (!empty($editor))
{
  // This view is used also in com_menus. Load the xtd script only if the editor is set!
  JFactory::getDocument()->addScriptOptions('xtd-articles', array('editor' => $editor));
  $onclick = "djguitaristeSelectGuitariste";
}

?>

<form action="<?php echo JRoute::_('index.php?option=com_djguitariste&view=guitaristes&layout=modal&tmpl=component&' . JSession::getFormToken() . '=1'); ?>" method="post" name="adminForm" id="adminForm">

    <div id="j-admin-container">
    <?php echo JLayoutHelper::render('joomla.searchtools.default', array('view' => $this));  ?>
    
    <table class="table table-striped" id="guitaristes">
      <thead>
        <tr>
          <!--th width="1%" class="nowrap center hidden-phone">
            <?php echo JHtml::_('searchtools.sort', '', 'a.ordering', $listDirn, $listOrder, null, 'asc', 'JGRID_HEADING_ORDERING', 'icon-menu-2'); ?>
          </th>
          <th width="1%">
            <input type="checkbox" name="checkall-toggle" value="" title="<?php echo JText::_('JGLOBAL_CHECK_ALL'); ?>" onclick="Joomla.checkAll(this)" />
          </th-->
          <th width="1%" style="min-width:55px;" class="nowrap center">
            <?php echo JHtml::_('searchtools.sort', 'JSTATUS', 'a.state', $listDirn, $listOrder); ?>
          </th>
          <th class="title">
            <?php echo JHtml::_('searchtools.sort', 'COM_DJGUITARISTE_NAME', 'a.name', $listDirn, $listOrder); ?>            
          </th>
          <th width="15%" class="nowrap hidden-phone">
            <?php echo JHtml::_('searchtools.sort', 'COM_DJGUITARISTE_CREATED', 'a.created', $listDirn, $listOrder); ?>
          </th>
          <th width="1%" class="nowrap center">
            <?php echo JHtml::_('searchtools.sort', 'JGRID_HEADING_ID', 'a.id', $listDirn, $listOrder); ?>
          </th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td colspan="6">
            <?php echo $this->pagination->getListFooter(); ?>
          </td>
        </tr>
      </tfoot>
      <tbody>
      <?php foreach($this->items as $i => $item){
        $canEdit    = $user->authorise('core.edit',       'com_djguitariste.category.' . $item->catid);
        $canCreate  = $user->authorise('core.create',     'com_djguitariste');   
        $canCheckin = $user->authorise('core.manage',     'com_checkin') || $item->checked_out == $userId || $item->checked_out == 0;
        $canEditOwn = $user->authorise('core.edit.own',   'com_djguitariste.category.' . $item->catid) && $item->created_by == $userId;
        $canChange  = $user->authorise('core.edit.state', 'com_djguitariste.category.' . $item->catid) && $canCheckin;
        ?>
        <tr class="row<?php echo $i % 2; ?>">
          <td class="center">
            <?php echo JHtml::_('jgrid.published', $item->state, $i, 'guitaristes.', false, 'cb', $item->publish_up, $item->publish_down); ?>
          </td>
          <td class="nowrap">
            <?php $attribs = 'data-function="' . $this->escape($onclick) . '"'
                . ' data-id="' . $item->id . '"'
                . ' data-name="' . $this->escape(addslashes($item->name)) . '"'
                . ' data-cat-id="' . $this->escape($item->catid) . '"';
              ?> 
              
              <a style="cursor:pointer;"  onclick="if (window.parent) window.parent.<?php echo $this->escape($function); ?>('<?php echo $this->escape($item->id); ?>', '<?php echo $this->escape(addslashes($item->name)); ?>', '<?php echo $this->escape($item->catid) ?>');" >
                <?php echo $item->name; ?>
              </a>
            <p class="small">
              <?php echo $this->escape($item->category); ?>
            </p>
          </td>
          <td class="nowrap"><?php echo JHtml::_('date', $this->escape($item->created), JText::_('DATE_FORMAT_LC4')); ?></td>
          <td class="center">
            <?php echo $item->id; ?>
          </td>
        </tr>
      <?php } ?>
      </tbody>
    </table>
    <input type="hidden" name="task" value="" />
    <input type="hidden" name="boxchecked" value="0" />
    <?php echo JHtml::_('form.token'); ?>    
  </div>

</form> 

 

6 - Les fichiers de langue

Nous allons ajouter 2 fichiers de langue (fr-FR.plg_editors-xtd_guitariste.ini et fr-FR.plg_editors-xtd_guitariste.sys.ini) dans le dossier administrator/language/fr-FR/ .

fr-FR.plg_editors-xtd_guitariste.sys.ini va contenir :

; @date        2018-01-29
; @author      Docteur Joomla!

; @date        2018-02-12
; @author      Docteur Joomla

PLG_EDITORS-XTD_GUITARISTE="Bouton - AJOUTER GUITARISTE..."
PLG_GUITARISTE_XML_DESCRIPTION="Affiche un bouton sous l'éditeur permettant d'insérer un guitariste dans un article."
PLG_GUITARISTE_BUTTON_GUITARISTE="Guitariste"

 

Et fr-FR.plg_editors-xtd_guitariste.ini aura comme contenu :

; @date        2018-02-12
; @author      Docteur Joomla
PLG_EDITORS-XTD_GUITARISTE="Bouton - Ajouter Guitariste..."
PLG_GUITARISTE_BUTTON_GUITARISTE="Guitariste"
PLG_GUITARISTE_XML_DESCRIPTION="Affiche un bouton sous l'éditeur permettant d'insérer un guitariste dans un article."

 

7 - Fichier d'installation

Nous créons un dossier nommé plg_editors-xtd_guitariste.1.0 à un emplacement de notre choix. Nous y copions tous les fichiers de notre plugin. Nous devons avoir les fichiers suivants:

- guitariste.php

- guitariste.xml

- fr-FR.plg_editors-xtd_guitariste.ini

- fr-FR.plg_editors-xtd_guitariste.sys.ini

Nous faisons un clic droit sur ce dossier puis Envoyer vers->Dossier compressé pour que le dossier soit compressé en plg_content_afficherguitariste.1.0.zip

Et voilà, notre fichier d'installation peut être installé dans l'administration de site Joomla. Il faut bien s'assurer que le composant com_djguitariste soit installé sur le site de préférence avant l'installation de ce plugin. Le layout modal.php doit aussi être présent dans le dossier de vue guitaristes (vue liste).

N'oubliez pas d'activer votre plugin après l'installation. Vous pouvez télécharger le plugin un peu plus bas sur cette page.

Si vous avez des questions, veuillez utiliser le formulaire de contact ou notre page Facebook.

A bientôt pour la suite.

 


  • Dernière modification le mercredi, 13 juin 2018 16:25
  • 211
Docteur Joomla

Après plus de 10 ans d'expérience en Joomla, je lance ce Blog pour partager mes connaissances avec les autres développeurs Joomla.