Internacionalizar una aplicación creada con Ember

0
11324

Internacionalizar una aplicación creada con Ember.

0. Índice de contenidos.

1. Entorno

Este tutorial está escrito usando el siguiente entorno:

  • Hardware: Portátil Intel Core 2 CPU T7200 @ 2.00GHz x 2
  • Sistema Operativo: Ubuntu 12.04 LTS x32
  • Sublime Text 2
  • Google Chrome
  • GitHub

2. Introducción

Después de haber explicado cómo modularizar nuestra aplicación con Require.js (Ver tutorial),

voy a enseñaros como internacionalizar nuestra aplicación.

Código de ejemplo: Enlace a github

Para traducir nuestra aplicación podemos apoyarnos en alguna librería de internacionalización,

Ember nos provee una: enlace.

La descargaremos, y la incluiremos como dependencia.

Ver cómo

3. Crear nuestros ficheros de textos

Para internacionalizar nuestra app tendremos que crear unos ficheros de texto:

  • Vamos a aprovechar la modularización que teníamos con Require:

  • arbol-modularizacion-app-ember

  • Por lo tanto para internacionalizar crearemos un fichero para cada lenguaje, en nuestro ejemplo la internacionalización va a ser con Español e Inglés, ver siguiente paso.

  • Vamos a tener definidas unas variables comunes para cada lenguaje, pero con un valor concreto, es decir, si definimos un título de bienvenida tendríamos:

  • Estas variables las utilizaremos después en nuestro template, y funcionarán acorde al lenguaje seleccionado.

  • Así quedarían nuestros ficheros de texto con todo el contenido de la aplicación traducido, para nuestro ejemplo son ficheros cortos, pero el hecho de estar separados es para evitar si fueran más largos llenar la memoria al cargar un fichero grandísimo con ambos lenguajes.

  • 4. Declarar nuestras dependencias y aplicar las traducciones a la aplicación

    A la hora de crear nuestra app tenemos que declarar las dependencias a estos ficheros para poder utilizarlos más adelante:

    – locHelpers contendrá una serie de funciones que nos ayudarán en el manejo de selección de lenguaje, así como cargar por defecto las opciones.
    Como podéis ver definimos jquery y cookies, y es por que ese será nuestro método de persistir los datos, más adelante entenderéis porqué utilizamos cookies.

    Cookies es un plugin de jquery, que nos permite crear, modificar, y leer cookies para nuestro navegador.
    Si quieres más informacion de este plugin de jquery visitar:
    Enlace información plugin jQuery para Cookies.

    Acorde a la anterior aplicación debemos incluir en nuestro fichero config.js los siguientes paths:

    Ahora vamos a ver como definimos nuestra app:

    Si queremos que el plugin de cookies de jQuery admita recibir objetos en formato JSON es necesario incluir esta línea en nuestro código:

    El resto:

    • Línea 1 : inicializamos una variable loc, que luego utilizaremos para las traducciones, línea 7

    • Cargamos una serie de opciones que le ponemos a nuestra App, linea x.

    • Si no tenemos creada una cookie cargara una serie de opciones por efecto.

    • Linea x, definimos el valor de la variable loc, como esta establecido en las opciones.

    • Si no esta establecido en la cookie, la funcion tratará de cargar un loc en funcion del lenguaje del navegador, más tarde le daremos al usuario la opción de cambiar el lenguaje manualmente.

    • En la linea x vemos como crear cookie con el plugin de jQuery, funciona como un método establecedor(setter).

    • En ella guardamos las opciones con el loc cargado.

    • Es importante establecer el lenguaje con Em.I18n.transaltions antes de crear la App. (linea x)

    • Y después creamos la App con el contenido que le asignabamos en app/app.js

    • Enlace para ver app.js en github

    5. Funciones establecedoras y calculadoras del lenguaje acorde al lenguaje del navegador

    Ahora voy a mostraros las funciones de nuestro locHelpers, están autoexplicadas en los comentarios:

    De esta manera lo definimos como un módulo.

    6. Cargar nuestros textos en un template

    A la hora de cargar estos textos lo haremos mediante los templates:
    Handlebars nos provee de un helper, al utilizar i18n, para internacionalizar nuestra app.
    Se trata de {{t nombre.variable}}, esto cargará el valor de «nombre.variable» acorde al loc que le hemos establecido anteriormente.

    Ejemplo de traducción en el login:

    Línea 1 a 11, forma parte de un control de login que tenemos establecido, simplemente cargará un mensaje de error si el login es incorrecto.

    Para ver como cargar un template ver este tutorial:

    Enlace al tutorial

    7. Añadir opción de cambiar lenguaje por el usuario

    Ahora vamos a crear una serie de botones para que el usuario pueda seleccionar entre los lenguajes que dispone nuestra aplicación.

  • Vamos a crear un ArrayController que nos provee Ember,
    para tener una lista de lenguajes en nuestra aplicación.

    Este tendrá como dependencia Localization,
    módulo creado para crear objetos de esa clase.

    • Modelo:

  • Controlador:
  • Nota: En el método changeSelectedLoc recargamos la página, ya que el template se carga antes de cambiar el lenguaje,
    y al cambiarlo NO se actualiza la vista.
    De ahí que busquemos una forma de presistir el estado, y utilicemos las cookies.

  • Creamos la plantilla
  • Por cada localización creada en nuestro controlador, (each) crearemos un elemento a la lista de idiomas, al que le vamos a asignar una action.
    Esta llamará al método changeSelectedLoc de this.

    this hace referencia al controlador de Localizations ya que se encuentra dentro de ese {{#each }} ver linea 1.
    De este modo tendremos cargada en nuestra plantilla una lista de elementos (idiomas), en los que registraremos el evento de cambio de idioma.
    Si os fijáis en la función recibimos un objeto loc, y es que el this nos proporciona esa vinculación a cada objeto loc, que es en definitiva cada Localization que tenemos creado en el controlador.

    8. Conclusiones

    Con todo esto tendremos una aplicación simple internacionalizada, a partir de este ejemplo podréis internacionalizar otras aplicaciones.

    Cualquier duda o sugerencia podéis comentarla.

    Dejar respuesta

    Please enter your comment!
    Please enter your name here