sábado, 15 de septiembre de 2012

Trabajando con vectores en el AppBar de Windows 8 con Blend y Metro Studio

Hola

Aprovechando que me encuentro trabajando en Sugges.me y aprendiendo cosas del Blend para Windows 8, les quiero mostrar algo bonito que se puede hacer usando Metro Studio 2 de Syncfusion, el cual es gratuito.

Voy a empezar por enseñarles como trabajar con la barra de aplicaciones desde Blend. Como siempre mi recomendación es que si bien tenemos que aprender XAML, definitivamente Blend nos hace mucho más productivos y nos puede ayudar con detalles que no recordemos del XAML.

Actualización 2012/09/29
Este procedimiento puedes realizarlo cuando requieras hacer tus propios botones. Recuerden que para la versión de lanzamiento de Visual Studio, en el archivo StandardStyles.xaml en la carpeta common se encuentran comentariados algunos estilos de botones básicos.

En primer lugar ubicamos en Blend en los objetos el Top o Bottom AppBar y ahí agregamos desde los controles un AppBar.


Como ven este ya está formatado con la estructura típica, 2 stackpanels alineados a izquierda y derecha respectivamente.


Ahora procedemos desde la zona de controles a añadir un botón.


Al soltar el botón en el lugar que corresponde ocurre que este no tiene el formato de un botón de barra de aplicaciones.


En versiones anteriores de Blend encontrabamos una serie de botones con estilos predeterminados, yo no he podido volver a encontrarlos, el unico que aparece es uno genérico AppBarButtonStyle.


Mi recomendación con este y con cualquier estilo y plantilla que venga por defecto es que la editemos como copia para poder personalizarlo


Y para que los distingan de los demás estilos un consejo más es que pongan el nombre de su aplicación o algún distintivo a sus estilos y templates, además de que los guarden en un archivo de recursos independiente. 


En la plantilla nos importan 2 elementos importantes el etiqueta del botón y el contenido en el cual la plantilla por defecto ubica el texto asociado al formato base del botón, cosa que no queremos en un botón de AppBar.


Pues bien, lo primero que corregiremos es lograr que el content que es el texto de un botón base se ubique en la etiqueta de la parte inferior del botón y para esto debemos editar el binding de la propiedad Text.


De esa forma observamos como el texto se asocia a la posición donde la necesitamos. No lo edites aqui, cuando terminemos la edición este campo queda para configurar en Blend.


Como vemos, nos falta una imagen asociada y es ahí donde entra Metro Studio 2. En el podemos encontrar cantidades de imágenes, buscamos la que mejor se asocia a nuestro comando y la editamos.


Allí tenemos multiples opciones de edición, seleccionamos fondo transparente y el tamaño de imagen que queremos.


Luego la exportamos y guardamos en la carpeta de nuestro proyecto,


Además a través de Blend, o como en la imagen a través de Visual Studio, incluimos la imagen en nuestro proyecto. 


Yo acostumbro tener los dos entornos abiertos al tiempo Blend y Visual Studio, cada uno es bueno para algo específico, sin embargo el Visual Studio 2012 permite en ocasiones intervenir de forma más facil algunos elementos cuando se encuentran en el archivo de la página y no en archivos de recursos. Un ejemplo de eso es la cabecera de los grupos en la platilla tipo grid, puesto que la plantilla por defecto tiene en esa cabecera un evento de clic asociado y por tanto tienen la plantilla dentro de la página, les invito a intentar cambiarle el color a la fuente del título de grupo desde Blend y desde Visual studio para entender mejor de lo que hablo.

Recuerden si incluyen el archivo desde Visual Studio, guardar y cuando Blend les pregunte si desean recargar, aceptarlo. Esto los sacará de la edición de la plantilla como fue mi caso, para volver, nos ubicamos en el botón y esta vez no le decimos editar una copia si no, editar el actual.


Ahora añadimos una imagen dentro del content del botón, como ven el mensaje indica que se reemplazará el string que habia antes.


En las propiedades de la imagen seleccionamos la nueva imagen que ya debe estar cargada si la incluimos correctamente en el proyecto.


Ahora, salimos de la edición del botón para ver como quedó en el diseño final.


Si observaramos la página en tamaño real, veremos que se ve muy bien, además de que en esta vista ya podemos editar el texto del botón, pero si ampliamos la imagen, vemos que la imagen se torna borrosa. Podríamos cambiar la imagen por una de mayor tamaño, pero lo mejor sería usar vectores, de tal forma que no añadamos peso extra a nuestra aplicación y que ella pueda escalar y adaptarse con elegancia.


Para esto nos ayuda otra vez Metro Studio, el cual tiene una opción para exportar el XAML de la imagen que seleccionamos.


Tomamos el código generado por Metro Studio.


Y lo ubicamos en el lugar donde antes habiamos colocado nuestra imagen. Les recomiendo mucho identar el codigo para que no se desordene.


Como vemos, la imagen no se ve correctamente necesitamos añadir márgenes.


Nos ubicamos en el Grid y añadimos márgenes, en mi caso con 8 a cada lado quedó perfecto. Vemos desde aquí como la imagen a pesar de ser tan grande, no se torna borrosa, justo por que es un formato de vectores.


Aquí está como se vé ahora en la vista del diseño final, esto además nos evita manejar tantos archivos de imágenes extra.


Lo más importante de las plantillas es que seamos consientes de que las tendremos a disposición así que si decidimos añadir otro botón de editar en otra pantalla, simplemente añadimos un botón normal y seleccionamos la plantilla que ya creamos.


Y ahora para crear un botón con otra imagen, podemos partir desde nuestro botón, generando una copia del estilo y simplemente cambiando el XAML de la imagen.


Muy bien, eso es todo, espero que les sea de utilidad en alguna ocasión. Hasta la próxima.

Sorey

Actualización 2012/09/22: Quiero contarles que la alineación de los iconos centrales con otras imagenes me quedaba desbalanceada ( :P ) bueno eso a mi ojos que le gustan las cosas bonitas. Razón por la cual me tocó editar todo el botón hasta dejarlos como quería, este proceso es un poquito más complejo y prefiero explicarlo en video. Les muestro el efecto en los botones.


Como ven quedan mucho más pulidos, el problema es que con este cambio toca editar todos los estados del botón, para que se vea bien cuando con los gestos del mouse, es decir:

Cuando el mouse pasa encima

Cuando el mouse presiona el botón

Esto hay que hacerlo tambien para mostrar el botón desactivado. Les comparto además dos enlaces para aprender a usar las barras de aplicación según las guías de diseño de interfaces modernas

Diseño de navegación para aplicaciones estilo Metro 
http://msdn.microsoft.com/es-es/library/windows/apps/xaml/hh761500.aspx 
Diseño de comandos para aplicaciones estilo Metro 
http://msdn.microsoft.com/es-es/library/windows/apps/xaml/hh761499.aspx

domingo, 9 de septiembre de 2012

Trabajando Bases de Datos locales SQLite en Windows 8

Hola a todos

Aprovechando que hoy ando trabajando por estos días con Windows 8, hoy les traigo este tema que nos hizo sufrir a más de uno mientras esperabamos el RTM, en realidad esperabamos ansiosamente el wrapper de SQLite sin saberlo.

SQLite es una biblioteca de software que implementa una en sí misma, sin servidor, sin necesidad de configuración, el motor de base de datos transaccional de SQL y su código fuente es de dominio público.

Pues bien, SQLite ahora está disponible para nuestras aplicaciones Windows 8 que requieren almacenamiento estructurado local. El dolor que teniamos es que hasta ahora no existia una implementación de un wrapper estable y aprobado por Microsoft, que nos permitiera usarlo en nuestras apps. Soy enfática en el tema de aprobado por Microsoft puesto que ya habían varias implementaciones por ahí que muchos estaban usando, sin embargo al enviar nuestras aplicaciones a ser certificadas para publicarse en el Windows Store, estas podían recibir observaciones. Sin embargo ya la librería oficial escrita en C++ y que nos provee todo el poder y funcionalidad de SQLite está disponible para nuestras apps.

A continuación voy a hacer un ejemplo sencillo, paso a paso, mostrando como usarlo en una aplicación  Windows 8, este ejemplo está basado en el artículo publicado por Tim Heuer, una de mis fuentes recurrentes.

Aclaro y soy muy enfatica en ello, de la interfaz que use en el ejemplo, nada que ver con como debería ser una aplicación Windows 8, en este caso el ejemplo está más centrado en como usar SQLite.

En primer lugar debemos instalar la extensión que nos permite usar la librería de C++ creada por el equipo de Windows. La encontramos en Tools > Extensions and Updates


Luego buscamos los componentes en línea SQLite for Windows Runtime y la descargamos para que sea instalada en nuestra máquina.


Se nos pide una confirmación, que aceptamos para proceder con la instalación.


Visual Studio nos notifica que debemos reiniciar para que la extensión sea tomada.


Reiniciamos y abrimos nuestro proyecto y seleccionamos la opción de añadir referencias.


Debemos seleccionar SQLite y Microsoft Visual C++ Runtime para que la librería funcione correctamente.


En mi caso Visual Studio reportaba un error, ya que debía seleccionar una plataforma específica a pesar de que en realidad se nombran todas las posibles en el mismo mensaje de error.


Para corregir ingresamos a las propiedades del proyecto


Y seleccionamos en la sección Build, la plataforma de destino.


Ahora bien,  en este punto si tenemos el conocimiento podríamos acceder a la librería y usarla, sin embargo lo recomendado es buscar algún Wraper existente en C# como es mi caso, para no tener que lidiar con esto si no sabemos como hacerlo. Muchos de esos wraper se encuentran disponibles en NuGet. Si usamos VB debemos continuar los pasos hasta añadir el código del wraper, y compilar una librería en C# y luego referenciar esta desde nuestro proyecto VB.

Para iniciar la instalación del wraper verificamos en las extensiones si lo tenemos instalado y si no procedemos a hacerlo igual que se hizo con el SQLite.


Ahora bien ingresamos a NuGet para buscar un wrapper adecuado para nuestra aplicación.


El wrapper recomendado en el artículo de base de este post es sqlite-net, lo seleccionamos e instalamos.


Se nos pide seleccionar en que aplicación vamos a añadir el código, en este caso solo tengo un proyecto.


Lo que sucede es que añaden dos API a nuestro código, una de ellas es una API que usa  Async , palabra que si no entiendes a este instante te recomiendo estudiar en Channel 9 o en el Blog de Walter Novoa

En este post usaré Async, si quieres ver como usar la otra API, puedes ver el post de Tim Heuer o bien leer la documentación en español del Windows Developer Center


Para esto también es muy importante tener los conceptos de objetos y ORM claros en tu cabeza. De hecho empezamos nuestro ejemplo construyendo la clase que mapea con la estructura de nuestra tabla de ejemplo. No debemos confundir la clase con la tabla, la tabla de hecho no la veremos, sin embargo es la clase quien nos ayudará a que finalmente se cree la tabla (esto solo suena enredado si no tienes claros los conceptos que te mencioné)

La clase es sencilla, sin embargo podrás ver unos decoradores sobre ella

Otros decoradores pueden ser AutoIncrement, MaxLength(30).

Ahora creamos nuestra interfaz sencilla, les comparto el Document Outline para que se guien.



Tambien pueden ver el XAML del formulario. Solo recuerden que hacer una aplicación Windows 8 requiere de mucho más, pero es bueno iniciar desde lo fácil. 

Aprovecho para recomendarles que aprendan a manejar Blend, de verdad es una gran herramienta para abstraernos un poco del arduo trabajo de hacer XAML, sin embargo es igual de importante entender y saber modifical el XAML cuando algo va mal.


Ahora va el código del botón insertar como ven es bastante sencillo de usar cuando ya tienes el wrapper correcto.


Aquí la aplicación funcionando.


Luego tenemos el botón consultar que lleva un ListView los items de la base de datos, bastante sencillo tambien.


Aqui vemos la aplicación mostrando los nombres registrados.


Recuerden que hay mucho que hacer con respecto a las listas, y en XAML si sabemos manejar los enlaces correctamente podemos mostrar más información sin hacer más código, veamos un ejemplo de esto para terminar.

Pueden modificar el DataTemplate del ListView así:


Como mostraremos todo el objeto y no solo una parte de el modificamos el código.


Y de esta forma podemos tener una lista con más forma, que de hecho podemos editar mucho mejor si usamos Expression Blend.


Espero que este corto ejemplo les resulte de mucha utilidad. Nos vemos la próxima.

Sorey