Joomla!

Nous avons voulu dans ce chapitre vous offrir un aperçu global du processus de conception d’un composant, d’un module et d’un plugin.

Vous pouvez envisager d’autres développements en partant des composants existants. Notre composant n’a par exemple qu’une vue table. Pour y ajouter une vue détaillée (une vue fiche), inspirez-vous d’un composant qui en dispose, par exemple com_contact.

De même au niveau des paramètres des modules, cherchez parmi ceux fournis en standard puis concevez votre propre module.

Ce qui paraissait en début de chapitre assez complexe s’avère, vous en conviendrez, assez simple en fi n de compte.

Je vous souhaite bien du plaisir dans vos développements !

Un module est beaucoup plus simple qu’un composant, tout d’abord parce que les modules n’ont en général pas d’interface d’administration, mais seulement quelques paramètres. Le but du module est de traiter des données pour produire une nouvelle présentation sur le site public. Le module coopère avec le template. En général, les modules viennent enrichir les fonctions d’un composant existant et l’on peut donc supposer que les tables de données avec leur contenu sont déjà disponibles. Pour concevoir un module, il faut deux fichiers : un pour la logique de traitement et l’affichage, puis un fichier XML pour l’installateur de Joomla!. Les deux fichiers doivent avoir un nom commençant
par le préfixe mod_.

15.3.1 Le code source du module

Étudions le code source des différents fichiers. Nous utilisons ici aussi un template spécifique. Il y a quatre fichiers à considérer :

• mod_auto.php ;
• helper.php ;
• tmpl/default.php ;
• mod_auto.xml.

Découvons-les tour à tour.

Le point d’entrée (mod_auto.php)

Le fichier intitulé mod_auto.php sert de point de contrôle du module (voir Listing 15.22).

<?php
defined(‘_JEXEC’) or die(‘Restricted access’);
require_once (dirname(__FILE__).DS.’helper.php’);
$auto = modAutoHelper::getAuto($params);
require(JModuleHelper::getLayoutPath(‘mod_auto’));
?>

Listing 15.22 : mod_auto.php

Vous remarquez que nous ne définissons aucun contrôleur primaire, mais en revanche une classe de soutien Helper.

La classe Helper (helper.php)

Cette classe de soutien combine le contrôleur au modèle (voir Listing 15.23). (En gras est présentée la seule référence au nom d’un champ de la table de données.)

<?php
defined( ‘_JEXEC’ ) or die( ‘Restricted access’ );
class modAutoHelper {
  function getAuto(&$params){
    global $mainframe;
    $db =& JFactory::getDBO();
    $query = "SELECT *"
           . "\n FROM #__auto"
           . "\n WHERE published = 1" 
           . "\n LIMIT 0,5";
    $db->setQuery( $query );
    $rows = $db->loadObjectList();;
    $auto = "<ul>\n";
    if ($rows) {
      foreach ($rows as $row) {
        $auto .= " <li>". $row->type . "</li>\n";
      }
    }
    $auto .= "</ul>\n";
    return $auto;
  }
}
?>

Listing 15.23 : helper.php

Dans cette classe, nous trouvons tout d’abord une opération d’extraction des données puis leur préparation dans une boucle for.

Le template du module (tmpl/default.php)

Ce code source très simple ne fait qu’afficher le contenu de la variable $auto qui appartient à la classe Helper. Vous pourriez tout à fait faire exécuter la boucle itérative for à cet endroit afin de mieux contrôler le code HTML généré en sortie. Cela permettrait à un concepteur de template de redéfinir le code source (voir Listing 15.24).

 defined( ‘_JEXEC’ ) or die( ‘Restricted access’ ); ?>
 <?php echo $auto; ?>

Listing 15.24 : tmpl/default.php

mod_auto.xml

Enfin, pour installer ce module, il faut créer le traditionnel fichier XML de description (voir
Listing 15.25).

<?xml version="1.0" encoding="utf-8"?>
<install type="module" version="1.5.0">
<name>Auto</name>
<author>Hagen Graf</author>
<creationDate>November 2007</creationDate>
<copyright>(C) 2007 cocoate.com All rights reserved.</copyright>
<license>GNU/GPL</license>
<authorEmail>hagen.graf@gmail.com</authorEmail>
<authorUrl>www.cocoate.com</authorUrl>
<version>0.1</version>
<description>Module Auto</description>
<files>
<filename module="mod_auto">mod_auto.php</filename>
<filename>index.html</filename>
<filename>helper.php</filename>
<filename>tmpl/default.php</filename>
<filename>tmpl/index.html</filename>
</files>
</install>

Listing 15.25 : mod_auto.xml

15.3.2 Installation

Réunissez tous les fichiers dans un seul sous-dossier et produisez un paquetage au format .zip en lui donnant le nom mod_auto.zip. Vous pouvez ensuite installer le module depuis Joomla! et le diffuser. Si ce n’est pas votre premier essai, pensez à désinstaller la version antérieure du module auparavant. N’oubliez pas d’activer le module par la commande EXTENSIONS > GESTION DES MODULES.

15.3.3 Aspect sur le site Web

Vous devriez ensuite apprécier l’affichage de votre nouveau module à la position choisie. Il présente les données trouvées dans la table de données jos_auto (voir Figure 15.17).

Figure 15.17 Affichage du module mod_auto sur le site Web.

14.13.1 Allgemeines

• einfach-fuer-alle.de
• wob11.de
• barrierefrei-kommunizieren.de
• webaccessibility.de (umfangreiche Linksammlung von Martin Stehle)
• blog.der-auftritt.de

14.13.2 Assistive Technologien

• Webformator: webformator.com
• IBM Homepagereader: -5.ibm.com/de/accessibility/hpr.html
• Jaws: freedomscientific.com/fs_downloads/jaws.asp
• Windows eyes: gwmicro.com
• VIRGO: baum.at

14.13.3 Checkertools

• Colour Contrast Analyser:
  • juicystudio.com/services/colourcontrast.php
  • visionaustralia.org.au/info.aspx?page=628
  • webforall.info/html/deutsch/col_analy.php
• Vischeck: vischeck.com/
• Cynthia Says: contentquality.com
• Bobby: webxact.watchfire.com
• Validator: validator.w3.org
• Validator: htmlhelp.com
• Wave: wave.webaim.org/wave/index.jsp
• AIS Toolbar: webforall.info/html/deutsch/asistoolbar.php
• Accessibility Toolbar Mozilla/Firefox: cita.disability.uiuc.edu/software/mozilla/

14.13.4 Buchtipp

Angie Radtke u. Michael Charlier. Barrierefreies Webdesign.
Attraktive Websites zugänglich gestalten.
Addison-Wesley 2006.
ISBN 978-3-8273-2379-8.

J’ai fait mon possible pendant la conception pour répondre aux multiples questions relatives à CSS au fur et à mesure qu’elles se faisaient jour. C’est notamment le cas des contenus flottants et celui du positionnement absolu par rapport à des éléments relatifs.

14.11.1 Les fichiers CSS internes de Beez

Vous trouverez toute une série de fichiers CSS dans le sous-dossier nommé CSS. Leurs rôles sont divers.

Le positionnement et l’affichage ont été volontairement distribués dans plusieurs fichiers. Ce qui
permet, par exemple pour modifier les couleurs, de n’intervenir que sur un fichier, tel layout.css. Vous ne risquez pas de modifier par mégarde des positions avec cette approche. C’est une garantie de sécurité.

Liste des fichiers CSS

• position.css ;
• layout.css ;
• print.css ;
• template.css ;
• ie7only.css ;
• ieonly.css ;
• general.css ;
• template_rtl.css.

14.11.2 Positionnement

La position exacte de chaque contenu est régie par les définitions du fichier position.css.
Il contient toutes les instructions CSS pour le document cadre, tel qu’il a été défini dans le fichier
index.php, ainsi que pour la position sur une ou deux colonnes de la zone de contenu et celle de
l’article d’entrée Leading story. N’intervenez sur le contenu de position.css que si vous savez exactement ce que vous voulez faire.

L’exemple suivant ajoute à l’article Leading story une image d’abeille en arrière-plan :

.leading {
  background: #EFDEEA url(../images/biene.gif) no-repeat top left;
  border: solid 1px #CCC;
  color: #000;
  margin: 30px 0px 10px 0px;
  padding: 20px 20px 40px 120px;
  position: relative;
}

14.11.3 La mise en page ou présentation

Vous pouvez en revanche vous en donner à coeur joie en termes de personnalisation dans le fichier layout.css. Il ne définit que les formats et les choix de couleurs. Vous trouverez cependant certaines définitions de position pour les contenus.

L’exemple de style CSS suivant gère l’apparence du titre de l’article Leading story puis place le lien pour la suite dans le coin inférieur droit. Nous utilisons un positionnement absolu à l’intérieur de l’élément à position relative Leading story :

#main .leading h2,#main2 .leading h2 {
  background:#EFDEEA;
  border-bottom:solid 0 #333;
  color:#93246F;
  font-family:trebuchet MS, sans-serif;
  font-size:1.4em;
  font-weight:normal;
  margin:0 0 10px;
  text-transform:uppercase;
} 

#main .leading .readon,#main2 .leading .readon {
  background:url(../images/pfeil.gif) #93246F no-repeat;
  border:solid 0;
  bottom:0;
  color:#FFF !important;
  display:block !important;
  margin-top:20px !important;
  position:absolute;
  right:0;
  text-decoration:none;
  padding:2px 2px 0 30px;
}

14.11.4 Autres considérations

Le fichier template.css est intégré à Joomla! dès que vous demandez l’affichage d’un contenu dans une fenêtre sans composant de navigation. C’est par exemple le cas dans la fenêtre flottante d’envoi d’un courriel ou lorsque vous choisissez ce genre d’affichage pour un article. Dans ces conditions, la mise en page est totalement dépendante des définitions trouvées dans ce fichier.
Les deux fichiers ie7only.css et ieonly.css prennent en charge le bogue de non-conformité des différentes générations du navigateur Internet Explorer. Elles sont activées de façon conditionnelle au tout début du fichier index.php via des commentaires conditionnels.

Rappelons que les commentaires conditionnels ne sont visibles que par le navigateur Internet Explorer de Microsoft à partir de la version 5. Les instructions qu’il délimite ne sont interprétées que par ces navigateurs :

<!--[if lte IE 6]>
<link href="<?php echo $this->baseurl ?>/templates/beez/css/ieonly.css"
     rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE 7]>
<link href="<?php echo $this->baseurl ?>/templates/beez/css/ie7only.
    css" rel="stylesheet" type="text/css" />
<![endif]-->

Le fichier print.css ne réclame pas de commentaires. Il se charge de mettre en forme la page pour une impression et ne sert dans aucun autre domaine. En revanche, vous pourriez vous étonner de voir apparaître en gros caractères le mot Content juste avant le contenu, alors que ce mot n’était pas dans les données d’origine.

Il faut savoir que CSS permet d’injecter du contenu dans un document, comme le montre l’extrait qui suit. Notez que seuls les navigateurs conformes à la norme sont capables d’interpréter cette demande :

#main2:before {
  content: « content « ;
  …
}

Le fichier nommé general.css permet de personnaliser l’aspect des messages d’erreur internes de Joomla! pour qu’ils s’intègrent bien à la présentation choisie.

Enfin, le fichier template_rtl.css se charge de gérer l’affichage des pages avec une écriture de droite à gauche. L’acronyme RTL signifie Right to Left. Vous choisissez le sens d’écriture dans le fichier XML des fichiers de langues en vigueur. Il est disponible sous forme d’une variable dans le fichier index.php du template.

<?php if($this->direction == ‘rtl’) : ?>
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/
  beez/css/template_rtl.css" type="text/css" />
<?php endif; ?>

Cet extrait d’un fichier CSS permet par exemple d’exploiter le template Beez avec des contenus en langue hébraïque ou arabe.

Vous pouvez vous amuser à voir le résultat d’un basculement d’un contenu en anglais ou en français vers une écriture de droite à gauche. Il suffit de faire passer à 1 la variable mentionnée (voir Figure 14.11).

Chemin d’accès : language/en-GB/en-GB.xml

 ...
 <metadata>
 ...
 <rtl>1</rtl>
 ...
 </metadata>

Figure 14.11 Beez avec un affichage en écriture de droite à gauche (RTL).

Le composant com_content dirige la génération en sortie de tous les contenus. Il constitue le noyau de notre code de template.

Les fichiers correspondants sont disponibles dans le sous-dossier templates/beez/html/com_content.

Dans le template standard, Joomla! use et abuse des tableaux pour mettre en page les contenus. Cela ne nécessite aucune définition CSS.

Si vous adoptez Beez, il faut tout revoir. Dans ce template, nous définissons des balises <div> imbriquées et associées à différentes classes CSS afin d’offrir une grande souplesse de mise en page. Il existe des classes pour les lignes et colonnes individuelles, ce qui permet d’adapter l’aspect à quasiment tous les besoins de présentation. Ceux qui considèrent cette variété de classes comme trop riche peuvent supprimer le code approprié avec la fonction de recherche et de remplacement.

Voici comme exemple un extrait du fichier beez/html/com_content/frontpage/default.php :

<div 
 class="article_row<?php echo $this->params>get(‘pageclass_sfx’); ?>"> 
 <?php for ($z = 0; $z < $colcount && $ii < $introcount 
         && $i < $this->total; $z++, $i++, $ii++) : ?>
 <div class="article_column column<?php echo $z + 1; ?> 
   cols<?php echo $colcount; ?>" >
   <?php $this->item =& $this->getItem($i, $this->params);
    echo $this->loadTemplate(‘item’); ?>
 </div>
 <span class="article_separator">&nbsp;</span>
 <?php endfor; ?>
 <span class="row_separator<?php 
 echo $this->params->get(‘pageclass_sfx’); ?>">&nbsp;</span>
</div>