[Windows 8] Apps Metro para desarrolladores Windows Phone 7.5 (6 de N)

Hola a todos!

Continuando con nuestra serie sobre Windows 8 para desarrolladores Windows Phone 7.5, hoy vamos a examinar una parte muy importante de toda aplicación: La localización. Todos sabemos ya que ofertar nuestra aplicación en diferentes idiomas puede marcar una gran diferencia en las descargas y el uso de la misma. Hace algún tiempo ya vimos lo fácil que era realizar esto en Windows Phone 7.5 (aquí), en las aplicaciones Metro es, si cabe, aún más sencillo. Simplemente deberemos seguir algunas convenciones y automáticamente se obrará la magia de obtener una aplicación con soporte para múltiples idiomas.

Archivos RESX y Archivos RESW

En Windows Phone (y en Silverlight o WPF) disponíamos de archivos de recursos, del tipo RESX. En Windows 8 tendremos un nuevo tipo de archivo de recursos: RESW. Estos nuevos archivos RESW comparten la forma de trabajar de los archivos RESX, tendremos un editor donde podremos crear pares de clave/valor que representen recursos:

image

Pero aquí terminan las similitudes. Con los archivos RESX, se generaba una clase automáticamente con las propiedades que hubiésemos indicado. En el caso de los RESW, estos son compilados a un formato binario PRI y no se genera ninguna clase a la que podamos acceder mediante código, lo cual tampoco es necesario.

Y aquí comienzan las convenciones. El archivo RESW debe llamarse Resources.resw, no sé si esto se trata de una limitación de la beta actual o esta convención estará presente en la versión final de las herramientas, pero por ahora es así. Podemos colocar el archivo en cualquier carpeta de nuestra solución, pero obligatoriamente deberemos contenerlo en una subcarpeta con el nombre del idioma que soportamos. De esta forma, si nuestra aplicación soportase Inglés, Español y Francés, tendríamos esta estructura de directorios:

image

Otra notable diferencia que encontramos entre los archivos RESX y los RESW es la forma de utilizarlos. En este sentido, los archivos RESW se parecen mucho a la forma de traducir los textos de ASP.NET. Como nombre del valor indicaremos un nombre que luego asignaremos a una propiedad del control a traducir y también indicaremos la propiedad a la que deseamos aplicar el valor, por ejemplo: AppTitle.Text:

image

Ahora en el elemento o elementos de nuestro XAML en los que deseemos usar este recurso, deberemos indicar la propiedad x:Uid con el valor AppTitle:

BlankPage.xaml
  1. <Grid Background=”{StaticResource ApplicationPageBackgroundBrush}“>
  2.     <TextBlock Margin=”110,20,20,0″ HorizontalAlignment=”Left”
  3.                 VerticalAlignment=”Top” FontSize=”56″
  4.                 x:Uid=”AppTitle”
  5.                 Text=”AppTitle”></TextBlock>
  6. </Grid>

Si ejecutamos nuestra aplicación de ejemplo y tenéis el idioma de Windows 8 establecido en Inglés, obtendremos automáticamente el siguiente resultado:

image

Se ha hecho la magia! Automáticamente la aplicación a buscado un recuso con el identificador que hemos indicado en la propiedad x:Uid y a aplicado el valor encontrado a la propiedad indicada, teniendo en cuenta el idioma actual para seleccionar el recurso correcto. Si cambiásemos el idioma de Windows a Español o Francés el resultado cambiaría acorde:

imageimage

¿Como identifica el idioma Windows si tenemos varios instalados? Si vamos a la lista de idiomas en Control Panel > Languages:

image

Nuestra aplicación usará como idioma el primero de la lista, siempre que exista más de uno. De esta forma, variando el orden de esta lista podremos probar diferentes configuraciones de idiomas.

Imágenes

Otro punto de localización que podemos encontrar son las imágenes, en muchas aplicaciones queremos cambiar una imagen que mostramos dependiendo del idioma en que estemos trabajando. Para realizar esto lo primero que tenemos que hacer es organizar nuestras imágenes de la misma forma que nuestros recursos RESW, en carpetas por la cultura a la que pertenecen:

image

A continuación usaremos el formato de Uri ms-appx:/// para referenciar a nuestra imagen, sin indicar el subdirectorio del idioma en el que se encuentra, de esta forma:

Localización de imágenes
  1. <Image VerticalAlignment=”Top” HorizontalAlignment=”Left”
  2.         Width=”300″ Margin=”110,100,20,0″
  3.         Source=”ms-appx:///images/map.gif”></Image>

Automáticamente WinRT nos dará la imagen que se encuentre dentro de la carpeta de idioma correspondiente al idioma actual:

image

Conclusión

Como hemos podido ver, la localización de aplicaciones en aplicaciones Metro es realmente sencilla, lo cual hace que no haya excusa para traducir una aplicación: Aumentará nuestro éxito de forma exponencial y no aumentará nuestro tiempo de desarrollo. De hecho, usando este sistema, podemos corregir fallos de expresión o ortográficos de una forma sencilla y compartir una misma cadena de texto para varios elementos, con lo que modificarla sería mucho más sencillo que si el texto estuviese diseminado por todo el XAML. Como siempre, aquí tenéis el proyecto de ejemplo que he usado, aunque esta vez es realmente sencillo, para que juguéis con el. Pronto una nueva entrega, estad atentos!

Un saludo y Happy Coding!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *