TUTORIEL CLIENTS WEB 
Les extensions Firefox (3e partie)
Nous ajoutons une icône et rendons localisable notre extension Firefox affichant une fenêtre d'avertissement. (16/11/2005)
Dans les deux premières parties de ce tutoriel (lire les articles du 19/09/05 et du 18/10/05), nous avons créé une extension simple (elle affiche une fenêtre d'avertissement), et lui avons permis de vérifier ses mises à jour ainsi que de disposer d'une fenêtre "À propos".

Aujourd'hui, nous allons exploiter plus complètement les capacités de présentation d'extension de Firefox, pour donner une touche plus professionnelle à la nôtre : ajouter un icône (ce qui est trivial) et surtout préparer la traduction de l'extension, ce qui demande déjà plus de travail...

Ajouter une icône

Dans la fenêtre regroupant les extensions disponibles, chacune dispose de son icône (originale, ou l'icône standard représentant une pièce de puzzle verte). Pour désigner le fichier à utiliser pour l'icône de votre extension, il suffit d'ajouter la ligne suivante au fichier install.rdf :

<em:homepageURL>http://example.com</em:homepageURL>
<em:iconURL>chrome://hello/skin/helloworld.png</em:iconURL>
<em:aboutURL>chrome://hello/content/apropos.xul</em:aboutURL>


Le fichier en question doit contenir une image tenant dans un carré de 32 pixels de côté.

Prévoir l'internationalisation
En tant que développeur francophone, votre extension sera probablement en français, voire en anglais si vous préférez disposer d'un public plus large. Pour toucher un nombre encore plus grand d'utilisateurs Firefox, il sera bon de rendre votre extension facile à traduire, au travers de l'internationalisation.

Ce terme, résumé par "i18n", désigne le processus de préparation d'une application à la localisation ("l10n") : chaque chaîne de texte de l'application est marquée pour pouvoir être substituée au besoin par sa traduction. Les traducteurs n'ont ensuite qu'à modifier un fichier externe pour traduire l'application entière, sans devoir chercher dans le code source les lignes concernées...

En ce qui concerne les extensions Firefox, ces chaînes sont réparties dans deux types de fichier : les fichiers d'interface XUL, et les fichiers JavaScript. A chacun correspond une méthode : utiliser les DTDs pour XUL, et les propriétés pour JavaScript.

Pour les fichiers XUL
Seules les entités sont utilisées parmi toutes les fonctionnalités des DTDs (lire l'article du 19/12/03 sur les DTD). L'idée est de disposer pour chaque langue d'un fichier DTD dans lequel est définie la valeur d'une entité utilisée au sein de notre fichier XUL. Ainsi, plutôt que d'avoir l'étiquette suivante pour un bouton :

<button label="Fermer" />

...nous remplaçons la valeur par une entité personnalisée, et nous définissons la valeur de ce contenu en assignant la chaîne traduite dans la DTD de la langue :

(dans le fichier hello.xul)
<button label="&btnClose;" />

(dans le fichier /locale/fr-FR/hello.dtd)
<!ENTITY btnClose "Fermer">

(dans le fichier /locale/en-UK/hello.dtd)
<!ENTITY btnClose "Close">

La DTD de chaque langue sera donc composée de toutes les traductions ligne à ligne :
<!ENTITY btnClose "Fermer">
<!ENTITY Ident.name "Nom">
<!ENTITY Ident.pass "Mot de passe">
...


Pour les scripts
Pour les scripts, qui ne peuvent pas utiliser d'entités, il est recommandé de faire appel aux propriétés. Simplement, un fichier .properties, stocké au même niveau que le fichier .dtd, traduira les différentes chaînes contenues au sein du script, de cette manière :

fileNotFound=Fichier introuvable.
userNotExists=Cet utilisateur n'existe pas.
badPassword=Vous n'avez pas entré le bon mot de passe.


L'association aux chaînes du script se fait via l'élément stringbundle de XUL, qui s'occupe de charge le fichier hello.properties (par exemple) et de construire la liste des chaînes. Voici comment charger les propriétés depuis le fichier hello.xul :

(dans hello.xul)
<stringbundle id="strings" src="chrome://hello/locale/strings.properties"/>

L'association se fait ensuite au sein du script :

(dans helloOverlay.js)
// déclaration de l'objet strbundle
var strbundle=document.getElementById("strings");

// utilisation de sa méthode getString
// pour récupérer une chaîne précise
var usernotexists=strbundle.getString("userNotExist");

// utilisation de la traduction
alert(usernotexists);


Il faut ensuite stocker et déclarer ces localisations. Les traductions sont stockées dans un dossier /locale, qui se trouve au même niveau que le dossier /content de l'extension. Ce dossier contient donc tous les sous-dossiers de traduction (fr-FR, fr-QC, en-US...).

La déclaration depuis XUL utilise la ligne suivante, vers le début du fichier (avant les éléments d'interface XUL) :

<!DOCTYPE window SYSTEM "chrome://hello/locale/hello.dtd">

Les URL déclarées via le protocole chrome:// sont automatiquement adaptées par Firefox : chrome://hello/locale/strings.properties deviendra par exemple chrome://hello/locale/fr-FR/strings.properties .

Enfin, chaque dossier de localisation contient de son côté un nouveau fichier contents.rdf, qui prend cette forme :

<?xml version="1.0"?>

<RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#">

  <RDF:Seq about="urn:mozilla:locale:root">
    <RDF:li resource="urn:mozilla:locale:fr-FR"/>
  </RDF:Seq>

  <RDF:Description about="urn:mozilla:locale:fr-FR"
        chrome:displayName="Traduction française de hello.xul"
        chrome:author="par Quelqu'un"
        chrome:name="fr-FR">
    <chrome:packages>
      <RDF:Seq about="urn:mozilla:locale:fr-FR:packages">
        <rdf:li resource="urn:mozilla:locale:fr-FR:hello" />
      </RDF:Seq>
    </chrome:packages>
  </RDF:Description>
</RDF:RDF>


  Forum

Réagissez dans les forums de JDN Développeurs

Par la suite, selon la langue définie par l'utilisateur pour son Firefox, ce dernier affichera la traduction idoine, ou celle par défaut (en-US). La traduction se fera donc de manière totalement transparente.
 
Xavier Borderie, JDN Développeurs
 
Accueil | Haut de page
 
 





Quand achetez-vous le plus en ligne ?
Du lundi au vendredi
Le samedi
Le dimanche

Tous les sondages