initial commit

1 files changed, 152 insertions, 0 deletions

diff --git a/files/fr/localisation_d'une_extension/index.html b/files/fr/localisation_d'une_extension/index.html
new file mode 100644
index 0000000000..c651722da7
--- /dev/null
+++ b/files/fr/localisation_d'une_extension/index.html
@@ -0,0 +1,152 @@
+---
+title: Localisation d'une extension
+slug: Localisation_d'une_extension
+tags:
+  - Extensions
+  - Localisation
+translation_of: Archive/Localizing_an_extension
+---
+<p>{{Previous("Ajout de préférences à une extension")}}</p>
+
+<h2 id="Introduction" name="Introduction">Introduction</h2>
+
+<p>Cet article reprend et développe les précédents exemples de création d'extension en ajoutant le support de localisation à notre extension stock watcher. En quelques étapes faciles vous rendrez votre extension facile à localiser en diverses langues sans qu'il soit nécessaire d'éditer de fichiers XUL ou JavaScript.</p>
+
+<p>Si vous n'avez pas encore créé d'extension, ou si vous souhaitez vous rafraîchir la mémoire, jetez un coup d'œil aux articles précédents de la même série :</p>
+
+<ul>
+ <li><a href="fr/Cr%c3%a9ation_d'une_extension_de_la_Barre_d'%c3%a9tat">Création d'une extension de la Barre d'état</a></li>
+ <li><a href="fr/Cr%c3%a9ation_d'une_extension_dynamique_de_la_Barre_d'%c3%a9tat">Création d'une extension dynamique de la Barre d'état</a></li>
+ <li><a href="fr/Ajout_de_pr%c3%a9f%c3%a9rences_%c3%a0_une_extension">Ajout de préférences à une extension</a></li>
+</ul>
+
+<h2 id="T.C3.A9l.C3.A9charger_l.27exemple" name="T.C3.A9l.C3.A9charger_l.27exemple">Télécharger l'exemple</h2>
+
+<p>Vous pouvez télécharger le code de l'exemple utilisé dans cet article, de manière à l'avoir sous les yeux pendant la lecture, ou bien pour l'utiliser comme point de départ pour votre propre extension.</p>
+
+<p><a class="external" href="http://developer.mozilla.org/samples/extension-samples/localizedstockwatcher.zip" rel="freelink">http://developer.mozilla.org/samples...ockwatcher.zip</a></p>
+
+<h2 id="Cr.C3.A9er_les_fichiers_de_localisation_n.C3.A9cessaires" name="Cr.C3.A9er_les_fichiers_de_localisation_n.C3.A9cessaires">Créer les fichiers de localisation nécessaires</h2>
+
+<p>Chaque fichier XUL qui inclut une interface utilisateur de votre extension devrait avoir un fichier de locale correspondant dans le répertoire<em>locale</em></p>
+
+<p>Chaque fichier de locale dresse la liste des entités correspondant aux chaînes ellles-mêmes. Le dialogue d'options, par exemple, dont le fichier XUL est <code>options.xul</code>, a un fichier correspondant <code>options.dtd</code> qui ressemble à ceci :</p>
+
+<pre class="eval"> &lt;!ENTITY options_window_title "StockWatcher 2 Preferences"&gt;
+ &lt;!ENTITY options_symbol.label "Stock to watch: "&gt;
+</pre>
+
+<p>Le nom d'entité "options_window_title" fait référence à la chaîne "StockWatcher 2 Preferences", qui est utilisée comme titre de la fenêtre des options.</p>
+
+<p>Le fichier <code>stockwatcher2.dtd</code> contient de même les entités correspondant au fichier <code>stockwatcher2.xul</code> file:</p>
+
+<pre class="eval"> &lt;!ENTITY panel_loading "Loading..."&gt;
+ &lt;!ENTITY menu_refresh_now.label "Refresh Now"&gt;
+ &lt;!ENTITY menu_apple.label "Apple (AAPL)"&gt;
+ &lt;!ENTITY menu_google.label "Google (GOOG)"&gt;
+ &lt;!ENTITY menu_microsoft.label "Microsoft (MSFT)"&gt;
+ &lt;!ENTITY menu_yahoo.label "Yahoo (YHOO)"&gt;
+</pre>
+
+<h2 id="Mettre_.C3.A0_jour_les_fichiers_XUL" name="Mettre_.C3.A0_jour_les_fichiers_XUL">Mettre à jour les fichiers XUL</h2>
+
+<p>Chaque fichier XUL doit faire référence à son fichier de locale correspondant. Nous devons aussi mettre à jour le code pour utiliser les entités et non les chaînes de caractères, afin que les substitutions s'opèrent en utilisant la locale active.</p>
+
+<p>Pour faire référence au fichier de locale correspondant à un fichier XUL donné, nous devons ajouter une ligne au fichier XUL. Dans <code>options.xul</code>, nous ajoutons cette ligne :</p>
+
+<pre class="eval"> &lt;!DOCTYPE window SYSTEM "<a class="external" rel="freelink">chrome://stockwatcher2/locale/options.dtd</a>"&gt;
+</pre>
+
+<p>Nous ajoutons une ligne du même type au fichier <code>stockwatcher.xul</code> :</p>
+
+<pre class="eval"> &lt;!DOCTYPE overlay SYSTEM "<a class="external" rel="freelink">chrome://stockwatcher2/locale/stockwatcher2.dtd</a>"&gt;
+</pre>
+
+<p>Notez que les URLs des fichiers DTD ne mentionnnent pas le nom de la localisation à utiliser. Le mot "locale" qui apparaît dans ces URLs permet de diriger automatiquement vers le répertoire adéquat, en fonction du choix de locale de l'utilisateur.</p>
+
+<p>Ensuite nous remplaçons simplement chaque chaîne de texte de nos fichiers XUL par l'entité correspondante. Par exemple, dans <code>stockwatcher2.xul</code>, nous transformons cette ligne :</p>
+
+<pre class="eval"> &lt;menuitem label="Refresh Now" oncommand="StockWatcher.refreshInformation()"/&gt;
+</pre>
+
+<p>en</p>
+
+<pre class="eval"> &lt;menuitem label="&amp;menu_refresh_now.label;" oncommand="StockWatcher.refreshInformation()"/&gt;
+</pre>
+
+<p>Reproduire cette substitution pour toutes les chaînes utilisées dans tous les fichiers XUL.</p>
+
+<h2 id="Mettre_.C3.A0_jour_le_fichier_chrome_manifest" name="Mettre_.C3.A0_jour_le_fichier_chrome_manifest">Mettre à jour le fichier chrome manifest</h2>
+
+<p>Pour indiquer à Firefox l'existence de fichiers de locale, nous devons réviser notre fichier <code>chrome.manifest</code> file, en ajoutant une ligne comme celle-là pour chaque localisation :</p>
+
+<pre class="eval"> locale stockwatcher2 en-US chrome/locale/en-US/
+</pre>
+
+<p>Elle indique à Firefox que la locale en-US est située dans le répertoire <code>chrome/locale/en-US</code>.</p>
+
+<h2 id="Localiser_les_cha.C3.AEnes_du_code_JavaScript" name="Localiser_les_cha.C3.AEnes_du_code_JavaScript">Localiser les chaînes du code JavaScript</h2>
+
+<p>Si notre code JavaScript contient des chaînes de caractères qui doivent être localisées, comme c'est le cas dans notre exemple avec stock watcher, nous devons également les rendre localisables. C'est possible en transférant ces chaînes dans un<em>string bundle</em> . Les<em>string bundles</em> sont créés grâce à un fichier properties qui liste les variables renvoyant aux chaînes de caractères. Pour une explication détaillée de ce processus, voir <a class="external" href="http://xulfr.org/xulplanet/xultu/locprops.html">Tutoriel XUL : fichiers de propriétés</a>.</p>
+
+<h3 id="Cr.C3.A9er_un_fichier_properties" name="Cr.C3.A9er_un_fichier_properties">Créer un fichier properties</h3>
+
+<p>La première chose à faire est de créer un fichier properties pour les chaînes utilisées dans le code JavaScript de <code>stockwatcher2.js</code> :</p>
+
+<pre class="eval">changeString=Chg:
+openString=Open:
+lowString=Low:
+highString=High:
+volumeString=Vol:
+</pre>
+
+<p>Le fichier <code>stockwatcher2.properties</code> ci-dessus attribue à 5 variables (<code>changeString</code>, <code>openString</code>, <code>lowString</code>, <code>highString</code>, et <code>volumeString</code>) les textes en anglais correspondants.</p>
+
+<h3 id="Cr.C3.A9er_le_string_bundle" name="Cr.C3.A9er_le_string_bundle">Créer le<em>string bundle</em></h3>
+
+<p>L'étape suivante consiste à modifier le fichier <code>stockwatcher2.xul</code> pour faire référence à ce fichier properties. Nous créons pour cela un<em>string bundle</em> , en utilisant le code XML suivant :</p>
+
+<pre class="eval"> &lt;stringbundleset id="stringbundleset"&gt;
+   &lt;stringbundle id="string-bundle" src="<a class="external" rel="freelink">chrome://stockwatcher2/locale/stockw...er2.properties</a>"/&gt;
+ &lt;/stringbundleset&gt;
+</pre>
+
+<p>Un nouveau string bundle est ainsi créé avec son identifiant (ID) ; ses variables et leur valeur (= les chaînes de caractères correspondantes) seront récupérées dans le fichier <code>stockwatcher2.properties</code> que nous avons déjà créé.</p>
+
+<h3 id="Mettre_.C3.A0_jour_le_code_JavaScript" name="Mettre_.C3.A0_jour_le_code_JavaScript">Mettre à jour le code JavaScript</h3>
+
+<p>Nous voilà prêts pour réviser le code JavaScript afin qu'il charge les chaînes depuis le<em>string bundle</em> au lieu d'utiliser directement les chaînes d'origine. Ceci implique la réécriture de la fonction <code>refreshInformation()</code> pour charger les chaînes, ainsi que la fonction incluse <code>infoReceived()</code> pour que soient utilisées les chaînes localisées et chargées et non les chaînes de départ.</p>
+
+<p>Nous ajoutons à la fonction <code>refreshInformation()</code> le code suivant :</p>
+
+<pre class="eval"> stringsBundle = document.getElementById("string-bundle");
+ var changeString = stringsBundle.getString('changeString') + " ";
+ var openString = stringsBundle.getString('openString') + " ";
+ var lowString = stringsBundle.getString('lowString') + " ";
+ var highString = stringsBundle.getString('highString') + " ";
+ var volumeString = stringsBundle.getString('volumeString') + " ";
+</pre>
+
+<p>Ce code fait référence au<em>string bundle</em> en appelant <code>document.getElementById()</code>, et en précisant l'ID "string-bundle". Puis il va chercher toutes les chaînes dont nous avons besoin dans le bundle, une à une, en faisant appel à la méthode <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_stringbundle.html#prop_getString">getString()</a></code> pour demander la variable correspondant à chaque chaîne.</p>
+
+<p>Dans notre cas, nous ajoutons également un espace à la fin de chaque chaîne. Il en va seulement ainsi pour l'extension que nous prenons pour exemple, il ne s'agit pas d'une nécessité pour vous.</p>
+
+<p>Ensuite nous replaçons chaque occurrence de la chaîne initiale par la variable appropriée :</p>
+
+<pre class="eval"> samplePanel.tooltipText = changeString + fieldArray[4] + " | " +
+     openString + fieldArray[5] + " | " +
+ lowString + fieldArray[6] + " | " +
+     highString + fieldArray[7] + " | " +
+     volumeString + fieldArray[8];
+</pre>
+
+<h2 id="Ajouter_d.27autres_localisations" name="Ajouter_d.27autres_localisations">Ajouter d'autres localisations</h2>
+
+<p>Pour ajouter une autre localisation (=une autre langue), il suffit d'écrire une nouvelle ligne au chrome manifest avec la référence de la nouvelle langue. Par exemple, pour ajouter une localisation française, vous écrirez :</p>
+
+<pre class="eval"> locale stockwatcher2 fr chrome/locale/fr/
+</pre>
+
+<p>Puis créez un sous-répertoire <code>chrome/locale/fr</code> et ajoutez tous les fichiers DTD nécessaires; dans notre exemple, <code>options.dtd</code> et <code>stockwatcher2.dtd</code>. Ces fichiers doivent inclure les entités correspondant aux chaînes utilisées dans l'extension, avec leur traduction française bien entendu.</p>
+
+<p>De même, si nous avons des fichiers properties contenant des chaînes localisées du code JavaScript, nous devons créer des versions françaises de ces fichiers properties dans le répertoire <code>chrome/locale/fr</code>. Seules les chaînes de caractères doivent être localisées ; les noms d'entités doivent être strictement les mêmes pour toutes les localisations.</p>