1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
|
---
title: Traducir una extensión
slug: Traducir_una_extensión
tags:
- Complementos
- Localización
- Todas_las_Categorías
- extensiones
---
<p>{{PreviousNext("Añadir preferencias a una extensión", "Actualizar una extensión para que soporte múltiples aplicaciones de Mozilla")}}</p>
<p>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.</p>
<p>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:</p>
<ul>
<li><a href="/es/Crear_una_extensi%C3%B3n_en_la_barra_de_estado" title="es/Crear_una_extensión_en_la_barra_de_estado">Crear una extensión en la barra de estado</a></li>
<li><a href="/es/Crear_una_extensi%C3%B3n_din%C3%A1mica_en_la_barra_de_estado" title="es/Crear_una_extensión_dinámica_en_la_barra_de_estado">Crear una extensión dinámica en la barra de estado</a></li>
<li><a href="/es/A%C3%B1adir_preferencias_a_una_extensi%C3%B3n" title="es/Añadir_preferencias_a_una_extensión">Añadir preferencias a una extensión</a></li>
</ul>
<h2 id="Descargar_el_ejemplo" name="Descargar_el_ejemplo">Descargar el ejemplo</h2>
<p>Puedes descargar el código de ejemplo de este artículo para poder compararlo o para usarlo como base para tu propia extensión.</p>
<p>http://developer.mozilla.org/samples/extension-samples/localizedstockwatcher.zip</p>
<h2 id="Traducir_cadenas_en_los_ficheros_XUL" name="Traducir_cadenas_en_los_ficheros_XUL">Traducir cadenas en los ficheros XUL</h2>
<h3 id="Crear_los_ficheros_de_configuraci.C3.B3n_regional_necesarios" name="Crear_los_ficheros_de_configuraci.C3.B3n_regional_necesarios">Crear los ficheros de configuración regional necesarios</h3>
<p>Cada fichero XUL que comprende la interfaz de usuario de tu extensión debería tener un fichero local en su directorio locale.</p>
<p>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 <code>options.xul</code>, tiene un fichero <code>options.dtd</code> correspondiente con este aspecto:</p>
<pre class="eval"> <!ENTITY options_window_title "StockWatcher 2 Preferences">
<!ENTITY options_symbol.label "Stock to watch: ">
</pre>
<p>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.</p>
<p>El fichero <code>stockwatcher2.dtd</code> contiene el mapa para el fichero <code>stockwatcher2.xul</code>:</p>
<pre class="eval"> <!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)">
</pre>
<h3 id="Actualizar_los_ficheros_XUL" name="Actualizar_los_ficheros_XUL">Actualizar los ficheros XUL</h3>
<p>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.</p>
<p>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 <code>options.xul</code> añadimos esta línea:</p>
<pre class="eval"> <!DOCTYPE window SYSTEM "<a class="external" rel="freelink">chrome://stockwatcher2/locale/options.dtd</a>">
</pre>
<p>Añadimos una línea similar al fichero <code>stockwatcher.xul</code>:</p>
<pre class="eval"> <!DOCTYPE overlay SYSTEM "<a class="external" rel="freelink">chrome://stockwatcher2/locale/stockwatcher2.dtd</a>">
</pre>
<p>En aplicaciones mayores podrías necesitar utilizar entidades de diversos ficheros de configuración regional en un único fichero XUL. <a href="/es/Utilizar_m%C3%BAltiples_DTDs" title="es/Utilizar_múltiples_DTDs">Utilizar múltiples DTDs</a> explica cómo hacer esto.</p>
<p>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 <a href="#actualizar_el_manifiesto_chrome">manifiesto chrome</a>.</p>
<p>Luego simplemente reemplazaremos cada cadena de texto en nuestros ficheros XUL con la correspondiente entidad. Por ejemplo, en <code>stockwatcher2.xul</code> cambiamos la línea:</p>
<pre class="eval"> <menuitem label="Refresh Now" oncommand="StockWatcher.refreshInformation()"/>
</pre>
<p>por</p>
<pre class="eval"> <menuitem label="&menu_refresh_now.label;" oncommand="StockWatcher.refreshInformation()"/>
</pre>
<p>Haremos esto para cada cadena utilizada en cada fichero XUL.</p>
<h2 id="Actualizar_el_manifiesto_chrome" name="Actualizar_el_manifiesto_chrome">Actualizar el manifiesto chrome</h2>
<p>Para que Firefox conozca los ficheros de configuración regional necesitamos revisar nuestro fichero <code><a href="/es/Registro_chrome" title="es/Registro_chrome">|chrome.manifest</a></code>, añadiendo una línea por cada idioma.</p>
<pre class="eval"> locale stockwatcher2 en-US chrome/locale/en-US/
</pre>
<p>Esto le dice a Firefox que el idioma en-US está ubicado en el directorio <code>chrome/locale/en-US</code>.</p>
<h2 id="Traducir_cadenas_en_el_c.C3.B3digo_JavaScript" name="Traducir_cadenas_en_el_c.C3.B3digo_JavaScript">Traducir cadenas en el código JavaScript</h2>
<p>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 <a href="/es/Tutorial_XUL/Ficheros_de_propiedades" title="es/Tutorial_XUL/Ficheros_de_propiedades">Tutorial XUL:Ficheros de propiedades</a>.</p>
<h3 id="Crear_un_fichero_de_propiedades" name="Crear_un_fichero_de_propiedades">Crear un fichero de propiedades</h3>
<p>Lo primero que hacemos es crear un fichero de propiedades para los literales usados por el código JavaScript en <code>stockwatcher2.js</code>:</p>
<pre class="eval">changeString=Chg:
openString=Open:
lowString=Low:
highString=High:
volumeString=Vol:
</pre>
<p>El fichero <code>stockwatcher2.properties</code> mostrado anteriormente mapea cinco claves (<code>changeString</code>, <code>openString</code>, <code>lowString</code>, <code>highString</code>, y <code>volumeString</code>) a su correspondiente texto en inglés.</p>
<h3 id="Crear_un_conjunto_de_cadenas" name="Crear_un_conjunto_de_cadenas">Crear un conjunto de cadenas</h3>
<p>El siguiente paso es modificar el fichero <code>stockwatcher2.xul</code> para referenciar este fichero de propiedades. Haremos esto creando un conjunto de cadenas utilizando el siguiente código:</p>
<pre class="eval"> <stringbundleset id="stringbundleset">
<stringbundle id="string-bundle" src="<a class="external" rel="freelink">chrome://stockwatcher2/locale/stockw...er2.properties</a>"/>
</stringbundleset>
</pre>
<p>Esto establece un nuevo conjunto de cadenas, referenciados por el ID "string-bundle", cuyas claves y valores han de ser cargados desde el fichero <code>stockwatcher2.properties</code> que ya habíamos creado.</p>
<h3 id="Actualizando_el_c.C3.B3digo_JavaScript" name="Actualizando_el_c.C3.B3digo_JavaScript">Actualizando el código JavaScript</h3>
<p>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 <code>refreshInformation()</code> para cargar las cadenas y su función interna <code>infoReceived()</code> para utilizar las cadenas cargadas y traducidas en lugar de literales.</p>
<p>Añadimos a <code>refreshInformation()</code> el siguiente código:</p>
<pre class="eval"> 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') + " ";
</pre>
<p>Este código obtiene una referencia al elemento conjunto de cadenas que hemos añadido a <code>stockwatcher2.xul</code> llamando a <code>document.getElementById()</code>, 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 <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_stringbundle.html#prop_getString">getString()</a></code>, pasando la clave apropiada para cada cadena.</p>
<p>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.</p>
<p>Luego reemplazamos toda ocurrencia de las cadenas literales con las variables apropiadas:</p>
<pre class="eval"> samplePanel.tooltipText = changeString + fieldArray[4] + " | " +
openString + fieldArray[5] + " | " +
lowString + fieldArray[6] + " | " +
highString + fieldArray[7] + " | " +
volumeString + fieldArray[8];
</pre>
<h2 id="Traducir_la_descripci.C3.B3n_en_install.rdf" name="Traducir_la_descripci.C3.B3n_en_install.rdf">Traducir la descripción en install.rdf</h2>
<p>Mira <a href="/es/Traducir_descripciones_de_extensiones" title="es/Traducir_descripciones_de_extensiones">Traducir descripciones de extensiones</a>.</p>
<h2 id="A.C3.B1adir_m.C3.A1s_traducciones" name="A.C3.B1adir_m.C3.A1s_traducciones">Añadir más traducciones</h2>
<p>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:</p>
<pre class="eval"> locale stockwatcher2 es-ES chrome/locale/es-ES/
</pre>
<p>Luego sólo hay que crear un subdirectorio <code>chrome/locale/es-ES</code> y añadir los ficheros DTD necesarios; en este caso <code>options.dtd</code> y <code>stockwatcher2.dtd</code>. Dichos ficheros deberían mapear las mismas etiquetas para la traducción al español de las cadenas utilizadas por la extensión.</p>
<p>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 <code>chrome/locale/es-ES</code>. Sólo las cadenas deberían ser traducidas; las claves deberían ser las mismas para cada traducción.</p>
<p>{{PreviousNext("Añadir preferencias a una extensión", "Actualizar una extensión para que soporte múltiples aplicaciones de Mozilla")}}</p>
|
