nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Soporte multilingüe para su Widget

RiccardoKlinger2

<\/HEAD>

Como he presentado una forma de crear tu propio widget<\/A> para el Web Appbuilder en mi última publicación, me gustaría explicar las opciones para soporte multilingüe en tu widget.<\/P>

NLS<\/H4>Las cadenas para nuestros últimos widgets están más o menos codificadas directamente en los archivos Setting.html y Widget.html en este momento. Si deseas reemplazar estas cadenas con el idioma configurado dentro del navegador o portal, necesitas etiquetar las cadenas y crear una biblioteca de cadenas. Esto se hace para Setting.html y para Widget.html en diferentes lugares dentro de la estructura del widget.<\/P>Setting.html<\/H4>La carpeta setting contiene una carpeta llamada nls. Dentro creas una carpeta para cada idioma que te gustaría soportar y un archivo inicial strings.js con las cadenas que deberían usarse en la configuración del widget por defecto. El archivo strings.js consiste en las cadenas predeterminadas actuales y un indicador, si se soporta o no un solo idioma (solo soportamos "de" en nuestro ejemplo):<\/P>define<\/SPAN>(<\/SPAN>{<\/SPAN>   root:<\/SPAN> (<\/SPAN>{<\/SPAN>     ZoomSetCheckboxText:<\/SPAN> "Mostrar nivel de zoom"<\/SPAN>,<\/SPAN>     ScaleSetCheckboxText:<\/SPAN> "Mostrar escala"<\/SPAN>,<\/SPAN>        configText:<\/SPAN> "Configurar:"<\/SPAN>   }<\/SPAN>)<\/SPAN>,<\/SPAN>   "de"<\/SPAN>:<\/SPAN> 1<\/SPAN>,<\/SPAN>   "es"<\/SPAN>:<\/SPAN> 0<\/SPAN> }<\/SPAN>)<\/SPAN>;<\/SPAN>‍‍‍‍‍‍‍‍‍‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN><\/span><\/CODE><\/PRE>Puedes haber notado que usamos una variable llamada "ZoomSetCheckboxText" y "ScaleSetCheckboxText" y definimos el contenido de la variable con algunas cadenas básicas. Estas cadenas deberían usarse dondequiera que se usen las variables. Colocamos las variables dentro del archivo Setting.html. Esto ahora se ve un poco diferente ya que la nomenclatura parece un poco extraña:<\/P><PRE class="lia-code-sample line-numbers language-none"><CODE>  <<\/span>div<\/span>><\/span><\/span>     <<\/span>div<\/span> class<\/span>=<\/span>"<\/ class="punctuation token">, });‍‍‍‍‍‍‍‍‍‍Por favor, note el uso diferente de indicadores de cadena en comparación con el archivo default strings.js en la carpeta padre.The Widget.html

El widget en sí funciona de manera similar. Dentro de la carpeta Widget creas una carpeta nls con subcarpetas respecto a los idiomas deseados que te gustaría soportar. Una lista de idiomas que son soportados, puede verse aquí:

Native Language Support

Una vez más sustituimos las cadenas usadas en el archivo original con el esquema "${nls.xyz}":

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">class</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>ZoomLeveLInfo<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">data-dojo-attach-point</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>zoomInfoDiv<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>${nls.label1} <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPA N>p</SPA N><SPA N class="style-attr language-css token"><SPA N class="attr-name token"> <SPA N class="attr-name token">style</SPA N></SPA N><SPA N class="punctuation token">=</SPA N><SPA N class="attr-value token"><SPA N class="property token">display</SPA N><SPA N class="punctuation token">:</SPA N> inline<SPA N class="punctuation token">;</SPA N></SPA N><SPA N class="punctuation token">"</SPA N></SPA N> <SPA N class="attr-name token">data-dojo-attach-point</SPA N><SPA N class="attr-value token"><SPA N class="punctuation token">=</SPA N><SPA N class="punctuation token">"</SPA N>MapZoomInfo<SPA N class="punctuation token">"</SPA N></SPA N><SPA N class="punctuation token">></SPA N></SPA N><SPA N class="token tag"><SPA N class="token tag"><SPA N class="punctuation token"></</SPA N>p</SPA N><SPA N class="punctuation token">></SPA N></SPA N><SPA N class="token tag"><SPA N class="token tag"><SPA N class="punctuation token"></</SPA N>div</SPA N><SPA N class="punctuation token">></SPA N></SPA N>
&nbsp;&nbsp;&nbsp;&nbsp; <span class='token tag'><span><div </span>data-dojo-attach-point<span>=</span>"scaleInfoDiv"></span>${nls.label2} <span><p style="display: inline;" data-dojo-attach-point="scaleInfo"></span><span></p></span><span></div></span>
<span></div></span>‍‍‍‍<span class='line-numbers-rows'><span><<EMOJI_7>></span><span><<EMOJI_8>></span><span><<EMOJI_9>></span><span><<EMOJI_10>></span></span>

En nuestro archivo strings.js establecemos las cadenas por defecto:

define({
  root: ({
    _widgetLabel: "Zoom Level Info",
    label1: "Nivel de Zoom:",
      label2: "Escala Aproximada:"
  }),
  "de": 1
});‍‍‍‍‍‍‍‍<span class='line-numbers-rows'><span><<EMOJI_12>></span><span><<EMOJI_13>></span><span><<EMOJI_14>></span><span><<EMOJI_15>></span><span><<EMOJI_16>></span><span><<EMOJI_17>></span><span><<EMOJI_18>></span><span><<EMOJI_19>></span></span>

En la subcarpeta "de" uso un patrón similar al descrito en el capítulo anterior:

define({
  "_widgetLabel": "Zoomstufeninfo",
  "label1": "Nivel de Zoom:",
  "label2": "Escala aprox.:"
});‍‍‍‍‍<span class='line-numbers-rows'><span><<EMOJI_21>></span><span><<EMOJI_22>></span><span><<EMOJI_23>></span><span><<EMOJI_24>></span><span><<EMOJI_25>></span></span>

El Resultado

El widget ahora puede iniciarse tanto en inglés como en alemán dependiendo de la configuración en el Portal:

English language support German language support

Encuentra más publicaciones etiquetadas con

Knowhow

Technologie

Comentarios

There are no comments yet

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate para una cuenta gratuita.

Enlaces Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.