{{PreviousNext("Añadir preferencias a una extensión", "Actualizar una extensión para que soporte múltiples aplicaciones de Mozilla")}}
Este artículo está construido sobre los anteriores ejemplos de programación de extensiones añadiendo soporte para traducción a nuestra extensión. Realizando unos pocos y simples pasos se conseguirá hacer la extensión mucho más fácil de traducir en varios idiomas sin tener que editar los ficheros XUL o JavaScript.
Si aún no has creado ninguna extensión o te gustaría refrescar la memoria, echa un vistazo a los anteriores artículos de la serie:
Puedes descargar el código de ejemplo de este artículo para poder compararlo o para usarlo como base para tu propia extensión.
http://developer.mozilla.org/samples/extension-samples/localizedstockwatcher.zip
Cada fichero XUL que comprende la interfaz de usuario de tu extensión debería tener un fichero local en su directorio locale.
Cada fichero locale mapea los nombres de las entidades referenciadas en los ficheros XUL a las mismas cadenas. El diálogo de preferencias, cuyo fichero XUL es options.xul, tiene un fichero options.dtd correspondiente con este aspecto:
<!ENTITY options_window_title "StockWatcher 2 Preferences"> <!ENTITY options_symbol.label "Stock to watch: ">
La entidad "options_window_title" está mapeada a la cadena "StockWatcher 2 Preferences", la cual es usada como título de la ventana de preferencias.
El fichero stockwatcher2.dtd contiene el mapa para el fichero stockwatcher2.xul:
<!ENTITY panel_loading "Loading..."> <!ENTITY menu_refresh_now.label "Refresh Now"> <!ENTITY menu_apple.label "Apple (AAPL)"> <!ENTITY menu_google.label "Google (GOOG)"> <!ENTITY menu_microsoft.label "Microsoft (MSFT)"> <!ENTITY menu_yahoo.label "Yahoo (YHOO)">
Cada fichero XUL necesita referenciar su correspondiente fichero de configuración regional. Además necesitamos actualizar el código para utilizar entidades en lugar de cadenas, por lo que las sustituciones tomarán lugar basándose en la configuración regional actualmente activa.
Para añadir una referencia al fichero de configuración regional correcto dado un fichero XUL necesitamos añadir una línea al fichero XUL. Para options.xul añadimos esta línea:
<!DOCTYPE window SYSTEM "chrome://stockwatcher2/locale/options.dtd">
Añadimos una línea similar al fichero stockwatcher.xul:
<!DOCTYPE overlay SYSTEM "chrome://stockwatcher2/locale/stockwatcher2.dtd">
En aplicaciones mayores podrías necesitar utilizar entidades de diversos ficheros de configuración regional en un único fichero XUL. Utilizar múltiples DTDs explica cómo hacer esto.
Date cuenta de que las URLs de los ficheros DTD no incluyen realmente el nombre del idioma a utilizar. el registro chrome resuelve los URIs basándose en la configuración regional actual y los datos que proporcionas en tu manifiesto chrome.
Luego simplemente reemplazaremos cada cadena de texto en nuestros ficheros XUL con la correspondiente entidad. Por ejemplo, en stockwatcher2.xul cambiamos la línea:
<menuitem label="Refresh Now" oncommand="StockWatcher.refreshInformation()"/>
por
<menuitem label="&menu_refresh_now.label;" oncommand="StockWatcher.refreshInformation()"/>
Haremos esto para cada cadena utilizada en cada fichero XUL.
Para que Firefox conozca los ficheros de configuración regional necesitamos revisar nuestro fichero |chrome.manifest, añadiendo una línea por cada idioma.
locale stockwatcher2 en-US chrome/locale/en-US/
Esto le dice a Firefox que el idioma en-US está ubicado en el directorio chrome/locale/en-US.
Si tu código JavaScript contiene cadenas literales que necesitan ser traducidas, como hace nuestro ejemplo visualizador de stocks, también necesitaremos hacerlo traducible. Podemos hacer esto moviendo las cadenas a un conjunto. Los conjuntos de cadenas son creados mediante el establecimiento de un fichero de propiedades que mapea claves a valores de cadena. Para una explicación detallada de cómo funciona esto, lee Tutorial XUL:Ficheros de propiedades.
Lo primero que hacemos es crear un fichero de propiedades para los literales usados por el código JavaScript en stockwatcher2.js:
changeString=Chg: openString=Open: lowString=Low: highString=High: volumeString=Vol:
El fichero stockwatcher2.properties mostrado anteriormente mapea cinco claves (changeString, openString, lowString, highString, y volumeString) a su correspondiente texto en inglés.
El siguiente paso es modificar el fichero stockwatcher2.xul para referenciar este fichero de propiedades. Haremos esto creando un conjunto de cadenas utilizando el siguiente código:
<stringbundleset id="stringbundleset"> <stringbundle id="string-bundle" src="chrome://stockwatcher2/locale/stockw...er2.properties"/> </stringbundleset>
Esto establece un nuevo conjunto de cadenas, referenciados por el ID "string-bundle", cuyas claves y valores han de ser cargados desde el fichero stockwatcher2.properties que ya habíamos creado.
Ahora estamos listos para revisar el código JavaScript para cargar las cadenas desde el conjunto de cadenas en lugar de utilizar literales. Esto implica la reescritura de la función refreshInformation() para cargar las cadenas y su función interna infoReceived() para utilizar las cadenas cargadas y traducidas en lugar de literales.
Añadimos a refreshInformation() el siguiente código:
var 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') + " ";
Este código obtiene una referencia al elemento conjunto de cadenas que hemos añadido a stockwatcher2.xul llamando a document.getElementById(), especificando el ID "string-bundle". Luego recupera todas las cadenas que necesitamos desde el conjunto, una a una, llamando al método del conjunto de cadenas getString(), pasando la clave apropiada para cada cadena.
En este caso, también añadimos un espacio al final de cada cadena. Hacemos esto porque este programa funciona así en particular y no tienes porqué hacerlo siempre.
Luego reemplazamos toda ocurrencia de las cadenas literales con las variables apropiadas:
samplePanel.tooltipText = changeString + fieldArray[4] + " | " +
openString + fieldArray[5] + " | " +
lowString + fieldArray[6] + " | " +
highString + fieldArray[7] + " | " +
volumeString + fieldArray[8];
Mira Traducir descripciones de extensiones.
Para añadir otra traducción a un nuevo idioma, todo lo que necesitas hacer es añadir otra línea al manifiesto chrome referenciando la nueva configuración regional. Por ejemplo, para añadir una traducción al español deberías añadir:
locale stockwatcher2 es-ES chrome/locale/es-ES/
Luego sólo hay que crear un subdirectorio chrome/locale/es-ES y añadir los ficheros DTD necesarios; en este caso options.dtd y stockwatcher2.dtd. Dichos ficheros deberían mapear las mismas etiquetas para la traducción al español de las cadenas utilizadas por la extensión.
Del mismo modo, si tenemos algún fichero de propiedades que contenga cadenas traducidas para nuestro código JavaScript también necesitaremos crear versiones de configuración regional para aquellos ficheros de propiedades en el directorio chrome/locale/es-ES. Sólo las cadenas deberían ser traducidas; las claves deberían ser las mismas para cada traducción.
{{PreviousNext("Añadir preferencias a una extensión", "Actualizar una extensión para que soporte múltiples aplicaciones de Mozilla")}}