Internationalization Service

Introducción

Se ha incorporado un nuevo Servicio de Internacionalización que permite gestionar de forma visual desde el Control Panel traducciones en diversos idiomas y acceder a estas desde un API REST.

Este nuevo servicio está además completamente integrado con el Motor de Dashboards, lo que permite internacionalizar todas las cadenas que aparecen en un Dashboard.

Acceso desde el Panel de Control

Para acceder a esta funcionalidad, ve a la opción de menú HERR. DESARROLLO>Mis internacionalizaciones i18n.

Desde allí podrás crear una nueva Internacionalización pulsando el botón Nueva Internacionalización.

Para crear una, añade el identificador y descripción de la internacionalización.

Después, puedes empezar a añadir idiomas con el botón Add Language (Añadir idioma), pudiendo buscar el idioma que quieres añadir.

Tras esto, ya podrás ir completando el JSON para cada uno de los idiomas, además de:

  • Cargar un JSON con el botón Seleccionar fichero a cargar para subirlo.

  • Descargar el JSON generado para poder usarlo en otra internacionalización o tenerlo guardado en local, con el botón Descargar.

  • Colocar los elementos clave-valor del JSON para facilitar la lectura y edición del mismo con el botón Formatear.

Una vez hayas añadido uno o varios idiomas con sus respectivos JSON, puedes seleccionar el idioma por defecto con el que quieres que cargue la página en primera estancia.

Para guardar los cambios será necesario dar al botón Nuevo y crear la internacionalización.

Uso de Servicio de Internacionalización en Dashboards

Para usar el servicio de internacionalizaciones, tienes que configurar o crear un nuevo Dashboard. En la UI de creación del Dashboard, tendrás un selector múltiple para seleccionar una o más internacionalizaciones a usar.

Cuando se seleccionan varias internacionalizaciones, ten en cuenta que el idioma por defecto será el marcado en una de ellas.

NOTA: Para asegurar qué idioma se quiere cargar por defecto, recomendamos poner el mismo en todas las internacionalizaciones usadas para un Dashboard.



Una vez guardados los cambios, ya podrás usar la internacionalización. Para ello, hay que abrir la ventana de edición del Dashboard.

En este Dashboard se han creado dos páginas, y en una de ellas se ha añadido una Plantilla de Gadget y una Tabla.

Los textos se podrían añadir literalmente y aparecerían solo en un idioma, pero si se sustituyen estos textos por las claves del JSON de la internacionalización creada para el Dashboard, se podrán traducir a los idiomas deseados.

También puedes indicar el idioma con el que quieres que se muestre el Dashboard pasando el parámetro ?lang= en la URL.

Traducir elementos en el HTML

Si se quiere traducir texto añadido en el html, simplemente se tendrá que poner {{"JSONKeyValue" | translate}}  en el texto entre las etiquetas deseadas.

Internacionalizar títulos

Para editar el título del Dashboard, habrá que acceder a menú de Configuración, y poner en el título la clave que se ha creado en el JSON para su traducción:

De esta forma, accediendo a los distintos menús de configuración de las páginas y los Gadgets, se podrá editar el título de cada elemento.

Internacionalizar tablas

Para internacionalizar el nombre de los campos de las tablas será necesario acceder a la ventana de edición de las mismas, y sustituir el texto del nombre de los campos, por la clave introducida en el JSON.

Crear botones para cambiar el idioma del Dashboard

Para crear botones que traduzcan dinámicamente todos los elementos internacionalizables, puedes añadir una Plantilla de Gadget y crear distintos botones por traducción, además de la función que cambie el idioma.

Para ello, será necesario añadir a la funcionalidad del botón $translate.use(lang); donde lang es el código del lenguaje al que se quiere cambiar, por ejemplo 'ES'.

De esta forma, con tan solo hacer click en el botón se traducirán los elementos internacionalizables:



API REST de Internacionalización

También puedes operar con las internacionalizaciones a través de su API REST:

Desde aquí, puedes conocer los identificadores de todas las internacionalizaciones disponibles, crear nuevas, y eliminar y modificar aquellas de las que seas propietario.

Crear una internacionalización

Para crear una internacionalización el parámetro que tienes que pasar es un JSON del modelo de internacionalización. Aquí debes tener en cuenta el formato del elemento jsoni18n, en el cual tienes que escapar las comillas para su correcto funcionamiento:

    "jsoni18n": "{\"languages\":{\"ES\":{\"Hi\":\"Hola\"}, \"EN\":{\"Hi\":\"Hello\"}}, \"default\":\"ES\"}"

De esta forma, dentro de idiomas, tendrás los distintos códigos de los idiomas deseados con sus respectivas traducciones clave-valor, y el código de idioma por defecto marcado en defecto.

En el caso de que cometas un error en el formato del elemento jsoni18n, puedes ver un ejemplo de su formato en el mensaje de error que salga. Si por ejemplo pones "jsoni18n":"", el mensaje de error que se muestra es:

Modificar una internacionalización

Para añadir o modificar las traducciones e idiomas, haz uso del método PUT en el cual se pasa, además del identificador de la internacionalización a editar, el JSON que define el elemento jsoni18n del modelo. Aquí debes tener en cuenta el formato del JSON en que, a diferencia de su formato para la creación, no es necesario escapar las comillas:

   {"languages":{"ES":{"Hi":"Hola", "Bye": "Adiós"}, "EN":{"Hi":"Hello", "Bye": "Good Bye"}}, "default":"ES"}

Al igual que en la creación, si insertas un valor no válido para jsoni18n, saldrá en el mensaje de error un ejemplo del formato correcto. Si envías, por ejemplo, {}, el error mostrará lo siguiente:



Ver las traducciones de las claves de una internacionalización

TBA