[Windows Phone 7.5] Dale calidad a tus aplicaciones con Expression Blend (II)

Hola a todos!

En el artículo anterior vimos una introducción rápida a Expression Blend 4 (Si no lo has visto, corre ¿A que esperas?) y lo fácil que resultaba con el mismo darle un aspecto personalizado a elementos de nuestra aplicación, unos botones más exactamente. En esta nueva entrega vamos a ver dos aspectos importantes: Por un lado veremos como controlar los estados visuales (y que son) de nuestros elementos.

Estados visuales

Los estados visuales de un elemento en Silverlight, son todos los posibles estados que dicho elemento puede tener. Por ejemplo, un botón puede estar presionado, normal, deshabilitado, con foco, sin foco… a estos diferentes estados es a lo que conocemos como estados visuales. Expression Blend nos permite al diseñar la plantilla de un elemento (como la que creamos para nuestros botones) indicar para cada estado del mismo que propiedades queremos alterar. Podemos ver esto mediante la pestaña “States” (Estados) que tenemos en la parte superior izquierda de la pantalla:

image

Por defecto al crear una nueva plantilla para un elemento (un botón, un textbox…) estos estados no realizan ninguna acción. ¿El resultado? Cuando usamos nuestro elemento, un botón por ejemplo, no responde de ninguna forma al usuario. no sabemos si está pulsado o no, si está activado o desactivado, en resumen: no da un feedback o respuesta visual a las acciones del usuario. Esto es algo muy desconcertante, pues estamos acostumbrados a obtener una respuesta inmediata a nuestras acciones, lo que en diseño se conoce como el patrón de gratificación instantánea. El no dar al usuario una respuesta rápida a sus acciones, de forma que pueda “saber” que la aplicación ha recibido su orden, puede ser muy frustrante.

Vamos a evitar esto de forma muy sencilla haciendo uso de los estados visuales. Partiremos de la base que dejamos terminada en el artículo anterior con nuestros botones. Si entramos a editar la plantilla del botón y seleccionamos la pestaña de States (Estados) veremos que al seleccionar cualquier estado, el punto que tiene a su izquierda se enciende en rojo y la pantalla central se rodea por un borde de este mismo color:

image

Esto significa que Blend está en modo “animación”, en este modo todos los cambios que hagamos a las propiedades de nuestra plantilla se quedarán guardados, de forma que cuando salgamos de este estado, por ejemplo al seleccionar el estado Normal, estos cambios se desharán y solo se aplicarán al volver al estado Pressed.

Para practicar un poco vamos a elegir el estado Pressed, seleccionar el ContentControl del árbol de objetos y vamos a incrementar su margen derecho hasta los 40 píxeles.

Veremos que además de modificar la propiedad y ver el efecto visual, en el árbol de objetos se ha marcado el ContentControl con un punto rojo y tenemos un desplegable que nos indica las propiedades que están siendo animadas:

image

Vamos a seleccionar ahora el estado Disabled, veremos que el punto rojo desaparece del ContentControl, pues todavía no hemos animado este estado. En este caso seleccionamos la Grid y cambiaremos sus colores a tonos grises, también seleccionaremos el ContentControl y estableceremos su opacidad al 20%. Si ahora establecemos un botón de los que teníamos en nuestra página inicial como deshabilitado obtendremos un resultado parecido a este:

image

El resultado hace que el usuario sepa fácilmente que botones puede usar y cuales no, además al pulsar un botón verá que el texto se desplaza levemente respondiendo a su pulsación.

Conclusión

Como hemos podido ver, usar los estados visuales nos permite dar más vida a nuestros elementos y nuestras plantillas, además de conseguir que la experiencia de nuestro usuario sea mucho mejor. En el siguiente artículo hablaremos más a fondo de las animaciones y como podemos, con sutiles detalles, mejorar el aspecto de nuestra aplicación y la experiencia global del usuario.

Por el camino, aquí tenéis el proyecto de ejemplo de este artículo, con la plantilla completa y los estados visuales definidos.

Un saludo y Happy Coding/Design

[Windows Phone 7.5] Podcast en español WPControla, episodio 1

wpcontrola_tile

Hola a todos!

Hoy os traigo la presentación de un proyecto que llevaba ya en el horno, cocinándose a fuego muy lento durante unos meses, los cocineros: mi gran amigo Rafael Serna y yo. Se trata de Windows Phone Controla una serie de podcast en castellano sobre desarrollo para Windows Phone donde intentaremos comentar las últimas novedades y noticias de la industria, entrevistar a gente interesante y traeros las promociones y concursos que se estén celebrando para que podáis participar. Además, también hablaremos de un API en cada capítulo.

Podéis acceder las post del primer podcast aquí

Espero que os guste y que podamos hacer muchos más.

Un saludo y Happy Coding!

[Windows Phone 7.5] Ejecutar varias instancias del emulador

Hola a todos!

Hoy os traigo un pequeño truco que puede resultar muy útil. Se trata de poder ejecutar múltiples instancias del emulador de Windows Phone en el mismo PC.

image

Esto nos será tremendamente útil si estamos desarrollando aplicaciones que interactúen entre usuarios, pudiendo tener 2 o 3 emuladores en nuestro PC con la aplicación iniciada o si queremos realizar una prueba larga de una aplicación mientras trabajamos en otra.

¿Como lo conseguimos? Lo primero que tenemos que hacer es ir a la carpeta AddOns de las Phone Tools que podemos encontrar en la siguiente ruta:

C:ProgramDataMicrosoftPhone ToolsCoreCon10.0addons

Una vez allí encontraremos un archivo llamado ImageConfig.en-US.xsl.si lo editamos con un editor de texto veremos que se trata de un XML con los datos de ejecución del emulador. Dentro de este XML tenemos que cambiar tres propiedades: El nombre del emulador, el GUID del emulador y el GUID de VMID.

Las dos primeras las encontraremos al principio del archivo:

<DEVICE Protected=”true” Name=”Windows Phone Emulator” ID=”5E7661DF-D928-40ff-B747-A4B1957194F9″>

Tenemos que generar un GUID, por ejemplo con la herramienta que incluye Visual Studio en Tools > Create GUID, ¡es importante escribir el GUID sin las llaves que genera la herramienta!

image

También tenemos que darle un nombre único, Por ejemplo “Windows Phone Emulator 2”. La siguiente clave a modificar es la VMID, podemos realizar una búsqueda hasta localizarla:

<PROPERTY ID=”VMID” Protected=”false”>
          {DF24EFAA-0FD3-44D1-8837-55E386D2905E}
</PROPERTY>

Aquí tenemos que copiar otro GUID, esta vez incluyendo las llaves. Una vez hecho esto, si abrimos Visual Studio y cargamos un proyecto de Windows Phone, podremos ver las diferentes instancias en las que ejecutar nuestra aplicación:

image

También las tendremos disponibles en la aplicación de despliegue:

image

Con este pequeño truco podremos tener varios emuladores en el mismo equipo, en mis pruebas me han funcionado perfectamente hasta un máximo de 3 emuladores. Con el 4º iniciándose el equipo se ha vuelto inestable hasta bloquearse completamente y he tenido que hacer un reset. Es muy posible que esto se deba a que no ha podido obtener el control de un core por VT. También, con 3 emuladores iniciados se ha producido el mismo efecto al responder una llamada de voz de Skype. Sin embargo con 2 emuladores no he tenido ningún tipo de incidencia. Destacar que el consumo es muy reducido en cuanto a memoria, unos 100Mb por emulador, por lo que no creo que el problema provenga de la memoria, creo que es más una cuestión de recursos de procesador. Mi PC es un Core i7 con 4 cores/8 hilos y 8Gb de RAM.

Con esta configuración, tener 3 emuladores iniciados no afecta significativamente el rendimiento del equipo.

Un saludo a todos y Happy Coding!!

[Windows Phone 7.5] Evita la navegación circular con el NonLinealNavigationService

Hola a todos!

Un problema muy repetido en el desarrollo de Windows Phone es el de las navegaciones circulares. Si no lo has sufrido, afortunado. Normalmente, teniendo varias páginas, la navegación que realizas entre ella es lineal, es decir, de la pagina A vas a la B, de esta vuelves a A y puedes ir a C, vuelves a A y sales de la aplicación:

image

Este tipo de navegación no representa ningún problema. Usando el sistema standard de navegación (NavigationService) de Windows Phone, podemos usar el método Navigate para avanzar a una nueva página, quedando la página actual referenciada en la pila de navegación, por lo que, desde la página B podemos llamar al método GoBack del NavigationService y volveremos a la página inmediatamente anterior. Lo dicho, muy simple, pero ¿que pasa si tenemos una configuración más compleja?

Imaginad, los que no hayáis sufrido la navegación circular, la siguiente situación: Nuestra aplicación tiene una página principal desde la que podemos ir a varias páginas diferentes, B y C. En la página B tenemos una lista de elementos que nos llevan a la página D, desde esta página al seleccionar un elemento concreto, volvemos a B para añadirlo a la lista. Al hacer esta navegación, obtenemos un bucle circular:

image

El problema de esto es que, al ir navegando entre B y D, vamos añadiendo páginas a nuestra pila de navegación, después de varios items, veremos que si queremos volver a A, tendremos que deshacer toda la navegación circular entre B y D, con lo que el usuario no tendrá el camino lógico que sería volver de D a B y de B a A. Hemos dado con una navegación no lineal.

Para evitar este problema, en Diciembre, el equipo de desarrollo de Windows Phone publicó a través de su blog una “receta” consistente en un servicio llamado NonLinealNavigationService, podemos encontrar el código del servicio y el artículo original aquí. Básicamente se trata de un servicio que examina nuestra pila de navegación y si se va a añadir una página que ya existe en el mismo, el servicio se encargará de realizar una navegación hacia atrás recursiva para corregir el posible problema de bucle.

Uno de los problemas que encontraremos con esto es que, aunque queramos, no será posible crear modelos de navegación no lineal, el servicio lo evitará siempre.

Espero que os sea de ayuda este nuevo servicio.

Enlace al código del NonLineal Navigation Service

Artículo “Solving Circular Navigation in Windows Phone Silverlight Applications”

Windows Phone Dev Team Blog

Un Saludo y Happy Coding!

[Windows Phone 7.5] Localizando el título de nuestra aplicación

Hola a todos!

En un artículo anterior aprendimos como de una manera sencilla podíamos localizar los textos de nuestra aplicación para adaptarlos al idioma seleccionado por el usuario en su dispositivo, pero… ¿Qué ocurre con el título? En los casos en que sea una palabra inventada, o si lo escribimos directamente en inglés, no será necesario traducirlo, pero si lo escribimos en español puede no ser descriptivo para alguien que no hable la lengua de cervantes…

Para arreglar esto podemos localizar este título al igual que lo hacemos con el resto de la aplicación, solo necesitaremos seguir unos pasos concretos por cada idioma que deseemos soportar. Esta localización tenemos que hacerla mediante una DLL nativa en C++, pero tranquilos, no tendremos que escribir código nativo complicado de ningún tipo.

Creando nuestros proyectos.

Para comenzar solo necesitamos una aplicación Windows Phone normal, en mi caso la he llamado wp75TitleLocalization. A continuación, tenemos que añadir un nuevo proyecto. Para ello pulsamos sobre el nombre de la solución en el Explorador de soluciones con el botón derecho y seleccionamos la opción Add –> New Project… :

image

En la ventana de selección de proyecto vamos a Visual C++ y seleccionamos Win32 Project. El proyecto debe llamarse AppResLib como podemos ver en la siguiente captura:

image

Solo tenemos que presionar OK y aparecerá el asistente de configuración del proyecto Win32. En el panel de la izquierda de este asistente debemos presionar sobre “Application Settings” y marcar en tipo de aplicación (Application Type) DLL y en opciones adicionales (Additional options) Empty Project y presionar el botón Finish (Terminar):

image

Ahora tendremos dos proyectos en nuestra solución: Nuestra aplicación Windows Phone y nuestro proyecto AppResLib:

image

A continuación tenemos que configurar nuestra nueva DLL, para ello hacemos click derecho sobre el nombre del proyecto (AppResLib) y seleccionamos Properties (Propiedades) del menú emergente, que nos mostrará la ventana de propiedades del proyecto:

image

En el panel de la derecha, bajo Configuration Properties (Propiedades de configuración) expandimos la opción Linker y seleccionamos la sección Advanced, donde tendremos que editar la opción No Entry Point, estableciéndola a “Yes (/NOENTRY)”, de esta forma podremos crear una DLL sin código fuente, solo con archivos de recursos:

image

Solo tenemos que presionar OK y nuestro proyecto ya estará listo para introducir nuestras cadenas de texto que serán usadas con el idioma correspondiente del dispositivo. Lo primero que necesitamos es crear las cadenas a usar por defecto. Esto significa que si nuestra aplicación por defecto está en inglés, deberemos introducir el título en inglés. Para esto, tenemos que presionar con el botón derecho sobre el proyecto AppResLib, seleccionar la opción Add y Resource, con lo que se nos pedirá el tipo de recurso a añadir, donde debemos escoger String Table y presionar el botón “New”:

image

Esto nos creará un archivo AppResLib.rc donde podremos introducir nuestras cadenas con 3 valores: ID, un nombre que identifique nuestra cadena, VALUE, un valor numérico que identifique nuestra cadena y CAPTION, nuestra cadena:

image

Añadiendo los nuevos títulos a nuestra aplicación

Simplemente hemos introducido una cadena para el título de nuestra aplicación y otro para el título del Tile principal cuando la anclamos al inicio. Guardamos y compilamos nuestro proyecto AppResLib. Una vez compilado debemos ir al directorio de salida del proyecto y copiar el archivo AppResLib.Dll al directorio de nuestro proyecto (donde está el app.xaml) a continuación debemos incluir este archivo en nuestro proyecto Windows Phone. Para ello simplemente presionaremos con el botón derecho sobre el nombre de nuestro proyecto y seleccionamos Add –> Existing Item:

image

Y en el cuadro de selección de archivos elegimos nuestra librería AppResLib.dll y a continuación establecemos en sus propiedades el Build Action a Content.

Lo siguiente será indicar a nuestra aplicación que debe usar la información de esta librería para mostrar los textos de título, esto lo haremos editando el archivo WMAppManifest.xml dentro de la carpeta Properties del proyecto.

Modificaremos dos secciones de este archivo: App:

  <App xmlns="" 
       ProductID="{55973013-456c-4b42-816e-1123faa4cf63}" 
       Title="@AppResLib.dll,-100" 
       RuntimeType="Silverlight" 
       Version="1.0.0.0" 
       Genre="apps.normal"  
       Author="wp75TitleLocalization author" 
       Description="Sample description" 
       Publisher="wp75TitleLocalization">

La única modificación en esta sección está en el atributo Title, donde le indicamos el nombre de la libraría a usar y el número (con un guión delante) de recurso que deseamos que muestre. Haremos lo mismo en la sección PrimaryToken:

  <PrimaryToken TokenID="wp75TitleLocalizationToken" TaskName="_default">
    <TemplateType5>
      <BackgroundImageURI IsRelative="true" IsResource="false">Background.png</BackgroundImageURI>
      <Count>0</Count>
      <Title>@AppResLib.dll,-101</Title>
    </TemplateType5>
  </PrimaryToken>

En este caso modificamos también el elemento Title, indicando la librería y el número de recurso de nuestra cadena. Si guardamos y ejecutamos la aplicación en el emulador obtendremos el siguiente resultado:

image

Como podemos ver, tanto en la lista de aplicaciones como en el tile principal se han usado los títulos que hemos definido en nuestra librería.

Añadiendo Idiomas extras

Ahora que ya tenemos sacados a recursos nuestros títulos, ¿Como podemos añadir más idiomas? Pues es extremadamente simple, solo tenemos que ir a nuestro proyecto AppResLib, editar el archivo de recursos AppResLib.rc y modificar las cadenas, por ejemplo en español:

image

A continuación compilamos la librería de nuevo y vamos al directorio donde se guarde. Solo tenemos que renombrar AppResLib.dll, añadiendo el código de idioma que deseemos que represente y terminado el archivo en mui: AppResLib.dll.[ID].mui, en el caso de Español sería: AppResLib.dll.0c0a.mui, cada idioma soportado por Windows Phone tiene una correspondencia en el nombre de esta librería:

Nombre de cultura

Código de cultura

Nombre de archivo

Chinese Simplified (PRC)

zh-CN

AppResLib.dll.0804.mui

Chinese Traditional (Taiwan)

zh-TW

AppResLib.dll.0404.mui

Czech (Czech Republic)

cs-CZ

AppResLib.dll.0405.mui

Danish (Denmark)

da-DK

AppResLib.dll.0406.mui

Dutch (Netherlands)

nl-NL

AppResLib.dll.0413.mui

English (United Kingdom)

en-GB

AppResLib.dll.0809.mui

English (United States)

en-US

AppResLib.dll.0409.mui

Finnish (Finland)

fi-FI

AppResLib.dll.040b.mui

French (France)

fr-FR

AppResLib.dll.040c.mui

German (Germany)

de-DE

AppResLib.dll.0407.mui

Greek (Greece)

el-GR

AppResLib.dll.0408.mui

Hungarian (Hungary)

hu-HU

AppResLib.dll.040e.mui

Italian (Italy)

it-IT

AppResLib.dll.0410.mui

Japanese (Japan)

ja-JP

AppResLib.dll.0411.mui

Korean (Korea)

ko-KR

AppResLib.dll.0412.mui

Norwegian (Norway)

nb-NO

AppResLib.dll.0414.mui

Polish (Poland)

pl-PL

AppResLib.dll.0415.mui

Portuguese (Brazil)

pt-BR

AppResLib.dll.0416.mui

Portuguese (Portugal)

pt-PT

AppResLib.dll.0816.mui

Russian (Russia)

ru-RU

AppResLib.dll.0419.mui

Spanish (Spain)

es-ES

AppResLib.dll.0c0a.mui

Swedish (Sweden)

sv-SE

AppResLib.dll.041d.mui

Ahora solo tenemos que copiar este nuevo archivo AppResLib.dll.0c0a.mui al directorio de nuestra aplicación Windows Phone (junto con el que copiamos anteriormente AppResLib.dll) e incluirlo en el proyecto de la misma forma que el AppResLib.dll y con la propiedad Build Action a Content:

image

Si establecemos el idioma del emulador en Español y ejecutamos nuestra aplicación, veremos como los títulos aparecen en el idioma del dispositivo:

image

Conclusión

Con esta sencilla práctica podremos personalizar un poco más nuestra aplicación para que se adapte al usuario y a su idioma. Aquí tenéis el código de este ejemplo, con el título en Ingles y Español (Inglés por defecto) para que podáis jugar con ellos.

Un saludo y Happy Coding!