MVVM Light: Localización

Hola,

Aquí está el último artículo de esta serie sobre MVVM Light

Realmente la localización no forma parte de MVVM Light en sí, es algo que ya existía de antes y que sirve para todo tipo de aplicaciones.

Pero vamos a aprovechar esta serie para meter aquí el artículo y así podamos hacer aplicaciones con buena arquitectura y localizados.

Pero antes que nada….

¿Qué es la localización?

Básicamente es el proceso de adaptar un software a un idioma concreto, por ejemplo, traduciendo sus textos y esto es precisamente lo que vamos a aprender aquí.

¿Cómo se hace eso? Pues el texto está escrito en el xaml y en los .cs…

Es muy fácil como veremos a continuación:

Para empezar, abrimos el proyecto del artículo de comandos, que como recordaréis lo dejamos en inglés a conciencia.

Ejecutamos el proyecto, rellenamos los campos y el resultado es como este:

Todo perfectamente en inglés.

¿Cual es el primer paso a la hora de localizar una aplicación?

Colocar todas las cadenas en un recurso aparte y nunca escribirlas directamente en el código.

Para ello creamos un nueva carpeta en nuestro proyecto llamada Resources, dentro creamos un nuevo item del tipo Resources File (O ficheros de recursos como me imagino que será en castellano).

A este fichero le vamos a poner de nombre Strings.resx. Si lo abrimos, vemos que tenemos 3 columnas en las que rellenar datos. En la primera va el identificador de la cadena, en la segunda irá la cadena en sí y en la tercera podemos poner un comentario que ayude a aquella persona que le toque traducir a saber en qué contexto estaba esa palabra (opcional).

Por ejemplo, imaginad que tenemos la siguiente cadena: “Choose Color” y la tenemos que meter en el fichero Strings.resx, pues básicamente sería algo del tipo:

  • ChooseColor – Choose Color – Color Picker window

O sea: identificador – cadena – comentario

Bueno, ya que sabemos como rellenar el fichero, voy a colocar la lista de todas las cadenas que estamos usando en la aplicación:

  • InsertName – Insert your name:
  • InsertAge – Insert your age:
  • Accept – Accept
  • Count – Count
  • Reset – Reset
  • Greeting – Hello, my name is {0} and Im {1} years old.
  • CountMessage – Greeting has {0} characters.

Como véis, hemos colocado aquí todas las cadenas tanto de los .xaml como de los .cs

NOTA: Solo se han de colocar aquellas cadenas que van a ser mostradas por pantalla (pues son las que nos interesan), aquellas cadenas como las de los RaisePropertyChanged pues no hay que meterlas ahí.

MUY IMPORTANTE: En la ventana de Strings.resx donde metéis todos los datos, arriba hay un combobox que pone: Modificador de acceso, tenéis que cambiarlo de internal a public. Además vais a tener que ir al fichero Strings.Designer.cs y ahi modificar el constructor cambiandole el modificador de acceso de internal a public. Además, tendrás que hacer estas 2 cosas cada vez que se guarde el fichero (por ejemplo al meter una nueva entrada). Esto es MUY importante y nada más que por esto merece la pena leer el tutorial.

Bien, este fichero contiene el idioma por defecto de la aplicación, esto quiere decir que si abrimos el programa en un windows ruso y no lo tenemos localizado al ruso, usará el lenguaje por defecto, en este caso, inglés.

Ahora bien, necesitamos quitar todas las cadenas de nuestro programa y sustituirlas por las que están en este fichero. ¿Cómo?

Para empezar necesitamos poder acceder a dicho recurso de forma global en todos los .xaml, y ya sabemos que para eso todo lo que definamos en App.xaml será global para todo fichero .xaml

Así que vamos a App.xaml y colocamos:

Un nuevo namespace:

xmlns:res="clr-namespace:EjemploMVVML.Resources"

Y ahora creamos una instancia del recurso:

<res:Strings x:Key="LocStrings" />

͉sta linea la colocamos junto a la instancia del ViewModelLocator

Bien, ya que tenemos acceso a Strings en cualquier .xaml, vamos a empezar a sustituir las viejas cadenas de esta forma:

{Binding Source={StaticResource LocStrings}, Path=Identificador}

Por ejemplo, el primer label, el de insertar la edad:

<Label Content="{Binding Source={StaticResource LocStrings}, Path=InsertName}" Height="23"
	   HorizontalAlignment="Left" Margin="30,31,0,0" VerticalAlignment="Top" Width="123" />

Simplemente hemos sustituido la cadena escrita a mano por la que tenemos en Strings.resx

Ahora tienes que hacerlo con las demás cadenas que están en el .xaml (por simplificar el tamaño del tutorial no voy a pegar aqui el código, pero vamos, es algo mecánico.

Y bueno suponiendo que tenemos el .xaml listo con todo modificado, vamos a explicar como hacer esto mismo pero en C# para las cadenas de nuestras clases:

string cadena = Resources.Strings.Identificador;

¿Nada complicado verdad? :)

Así que nuestras dos propiedades del MainViewModel quedarían así:

Greeting = string.Format(Resources.Strings.Greeting,
	APerson.Name, APerson.Age);
CountMessage = string.Format(Resources.Strings.CountMessage, characters);

Ala, ya tenemos todo listo.

Normalmente cuando creamos una aplicación que soportará localización, metemos directamente todas las cadenas al Strings.resx para ahorrarnos trabajo :P

Bueno, ya tenemos todo listo. Así que lo que queda es añadir un nuevo fichero de recursos por cada lenguaje que vayamos a meter, cada fichero tendrá un nombre del tipo:

Strings.xx-yy.resx

Por ejemplo:

  • Strings.es-es.resx
  • Strings.en-us.resx
  • Strings.de-de.resx

Para nuestro ejemplo, creamos un fichero de recursos llamado Strings.es-es.resx junto a Strings.resx.

Este fichero es igual al anterior y se usa igual que el anterior. En este caso, la primera columna llevará los identificadores (los mismos que antes) y en la segunda la cadena pero ya en el idioma que estamos localizando:

  • InsertName – Introduce tu nombre:
  • InsertAge – Introduce tu edad:
  • Accept – Aceptar
  • Count – Contar
  • Reset – Reiniciar
  • Greeting – Hola, mi nombre es {0} y tengo {1} años.
  • CountMessage – El saludo tiene {0} caracteres.

Nada más, ahora si abrimos nuestro programa…

Nos sale totalmente en castellano, puesto que tenemos nuestro sistema operativo en castellano.

Así que sólo quedaría añadir un fichero por cada idioma que queramos soportar y nada más.

Os adjunto el proyecto (.NET 4):

EjemploMVVML.zip

Con esto doy por concluida la serie de artículos sobre Iniciación a MVVM Light.

Como ejercicio final os recomendaría echarle un ojo por encima a mi aplicación Apunta Notas ya que está escrita usando todo lo que aquí hemos aprendido y quizá os pueda solucionar muchas de las dudas que tengás, aunque podéis preguntar en cualquier artículo las dudas que os hayan quedado.

Apunta Notas

Hasta la próxima.

Tags: , , ,

Un comentario

Dejar un comentario