|
|
|
|
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. |
|
|
|
|
|
Quand achetez-vous le plus en ligne ? |
|
|
|
|
|
|
|
|