La semana pasada vimos el primer vistazo a Silverlight 2 en el que hablamos sobre la Beta1 de Silverlight 2. En el post vimos unos link a una serie de tutoriales que nos enseñaban algunos conceptos fundamentales que se esconden detrás de Silverlight y WPF, y vimos cómo usarlo para crear un cliente de búsquedas con Silverlight:
En los primeros tutoriales no usé ninguna herramienta visual para crear la interfaz de usuario, sino que nos centramos en mostrar el código XAML (ya que creo que nos ayuda a explicar ciertos conceptos mucho mejor). Ahora que hemos visto estos conceptos – veamos qué herramientas podemos usar para ser más productivos aún.
Soporte de Silverlight de Expression Blend
Además de publicar la Beta1 de Silverlight 2, también publicaremos una herramienta para poder usarlo en Visual Studio 2008 y Expression Studio. Esta herramienta nos ofrece un poder increíble para crear estas interfaces de usuario y están diseñadas para permitir que tanto diseñadores como programadores puedan trabajar juntos.
En el post de hoy vamos a ver algunas de las características que van a salir en la preview de Marzo de Expression Blend 2.5. Despues de ver el funcionamiento básico de Blend, veremos cómo usarlo para crear clientes Silverlight multiplataforma y multinavegador:
En la imagen de arriba vemos una captura de pantalla de la aplicación en un MAC. Debajo tenéis un pantallazo de cómo se ve en tiempo de diseño en Expression Blend:
Usaremos Expression Blend para crear gráficamente la interfaz de usuario de la aplciación, y lo usaremos para enlazar la interfaz a clases .NET que representan nuestra sesión de chat.
Todos los controles que usaremos están hecho con la Beta 1 de Silverlight 2.
Disclaimer: No soy diseñador (que chulo soy)
Dejadme decir que soy un programador no un diseñador. Y no soy muy chulo. Mientras que empiezo a comprender las técnicas para crear interfazes de usuario, suelo elegir mal los colores y las fuentes ( sólo despues de hacer las capturas de pantalla para este post un compañero me dijo que hay un sitio dedicado a decir cuales son las fuentes y colores prohibidas).
Para aquellos que tengais dotes artísticas – sed buenos y centraos en las características y técnicas que estoy enseñando, no en las fuentes y colores que uso. 🙂
Empezando: Crear un proyecto Silverlight 2
Expression Blend y Visual Studio 2008 comparten el mismo formato de archivo de proyecto/solucion, es decir, podemos crear un proyecto Silverlight en VS 2008 y abrirlo con Expression Blend, o viceversa. También podemos tener abierta la solución con VS 2008 y Expression Blend al mismo tiempo.
En el primer post de la serie de Silvelight vimos cómo crear un proyecto Silverlight con VS 2008, ahora veremos cómo crear una aplicación Silverlight con Expression Blend. En Expression Blend nos vamos al menú File->New Project, seleccionamos “Silverlight 2 Application”, y le damos a OK:
Esto creará una nueva solución (compatible con VS) y un projecto de aplicación Silverlight:
Blend incluye un diseñador WYSIWYG para aplicaciones Silverlight 2. Cuando abrimos páginas y controles Silverlight podemos cambiar a vista diseño, vista del XAML, o ver los dos a la vez. En la imagen de arriba estamos usando esta última vista.
Conceptos básicos: Añadir controles
Expression Blend tiene una paleta mucho más completa que Visual Studio (es más parecido a las opciones de diseño que puede tener una herramienta como Photoshop).
Blend soporta la edición de gráficos vectoriales:
Blend también soporta el añadido y edición de controles. Hay un icono especial en la barra de herramientas para controles layout (Grid, Stack, Canvas, Border, ScrollViewer, etc), controles de texto (TextBox, TextBlock, etc), y un icono que muestra los controles que estamos usando actualmente:
El icono “>>” muestra una lista de todos los controles disponibles:
Aseguraos de marcar el checkbox “Show All” arriba a la derecha si no véis el control que estáis buscando. También podéis usar el cuadro de búsqueda para filtrar los controles por nombre.
NOTA: Blend permite diseñar todos los controles (tanto los incluidos como los personalizados o los user controls que referencie nuestra aplicación).
Una vez que seleccionemos un control, podemos seleccionar y arrastrar en la superficie de diseño. También podemos arrastrar controles de la barra de controles activos. Por defecto hay reglas automáticas y markadores de posicionamiento cuando añadimos e interactuamos con los controles en tiempo de diseño (aquí tenéis un formulario con un boton, un calendario y un slider):
Más conceptos básicos: Propiedades de los controles
Podemos seleccionar cualquier objeto y ver el panel de propiedades al lado derecho para personalizarlas:
Estamos cambiando la brocha “Background” del botón para que sea un gradiente azul (el tercer tab en rojo debajo de “Brushes” nos permite configurar el gradiente).
Nota: La ventana de propiedades tiene un buscador que podemos usar para filtrar las propiedades visibles:
Como todos los controles en Silverlight y WPF están compuestos de gráficos vectoriales, podemos personalizarlos como queramos. Por ejemplo, podemos cambiar las propiedades “Transform” de nuestro boton y rotarlo/escalarlo:
Esto nos da una gran flexibilidad para personalizar rápidamente y conseguir la experiencia de usuario que queramos:
Nota: Podemos hacer zoom en la superficio de diseño pulsando la tecla “Ctrl” y usando la rueda del ratón. Podemos movernos por toda la superficie pulsando la barra espacioadora, mostrará una mano en el cursor del ratón, y podemos usarlo para movernos por la pantall. Este truco es muy útil cuando estamos muy cerca con el zoom y poder movernos por la interfaz.
Creando la aplicación de Chat: Definiendo el aspecto
En la segunda parte: Usando el administrador de aspecto del tutorial sobre Silverlight vismo el sistema de aspectos de Silverlight y WPF, y cómo usar layout panels para controlar los aspectos visuales de la aplicación. Expression Blend hace que la definición de de esas reglas visuales sea fácil.
Recordad nuestro objetivo en la creación de la aplicación de chat era tener una interfaz como esta:
Para ello empezaremos definiendo un grid con tres columnas en la página. Esto lo hacemos en el margen izquierdo de la superficie de diseño y hacemos clic donde queramos establecer la definición de la fila (aquí tenéis una fila ya definida – el cursor en rojo indica dónde haré clic para añadir una segunda fila):
Si hacemos clic en la esquina superior izquierda podremos cambiar la vista de diseño de un Canvas o un Grid:
En el modo Grid Blend nos indicará si una fila o columna tiene un ancho fijo o proporcional al tamaño del control. Debajo de los “empty locks” se indica que las tres filas son proporcinales entre si (esto indica que si agrandamos la ventana del navegador, las filas también se harán más grandes, siempre proporcionalmente)
Si hacemos clic en los cerrojos de arriba y abajo estamos diciendo que tienen un ancho fijo, y la del centro aumentará hasta completar el espacio libre:
El último paso que nos queda es definir la longitud. De la misma manera que antes diremos si es una longitud fija o dinámica:
Una vez que hemos hecho esto, el archivo XAML queda así:
Nota: Arriba hemos fijado el ancho y la longitud de nuestra aplicación Silverlight (fijáos que los atributos ancho y largo está definido en la raíz del elemento <UserControl>). podemos hacer que la aplicación tenga un tamáño dinámico que se ajuste al contenedor HTML del navegador eliminando los atributos Width y Height (hablé sobre esto ál final del tutorial de layout aquí). Si queremos definir en tiempo de diseño el ancho y el largo de nuestra aplicación, lo haremos poniendo los atributos d:DesignWidth=”640″ y d:DesignHeight=”476″. Esto hará que el tamaño por defecto sea ese.
Creando la aplicación de Chat: Añadir controles y colores
Ahora que tenemos el núcleo del layout de nuestra aplicación de chat, añadamos algunos controles para personalizar el aspecto que tendrá.
Empezaremos seleccionando el Grid raíz y personalizaremos el color del background para que sea un gradiente azul. Una aproximación que podemos usar es usar el panel “Interaction” y hacer clic en el control que queramos:
Podemos usar el panel de propiedades de “Brochas” para personalizar una brocha LinearGradient azul:
Una vez que tengamos esto trabajaremos en el pie de nuestra ventana de chan, y añadiremos un boton “Send”:
Para el textbox del mensaje usaremos un textbox estándar. Pero para añadir alguna pijada, añadiremos un control borde con un “RoundRadius” de 5 y un Background y un borderBrush:
Ahora embebemos el Textbox en el control Border.
Nota: Para ajustar el Textbox al control Border en vista diseño, queremos hacer doble clic en control Borde que interactue con la ventana. Esto lo configuramos como la inserción activa del control, y lo resaltaremos en amarillo:
Ahora podemos poner el control TextBox y añadirlo dentro del control Border. Pondremos la brocha de background y la del borde que hicimos antes para tener un control como el siguiente:
El XAML generado por Blend será el siguiente (fijaos cómo se incluye el TextBox debajo del control Border – esto no habría ocurrido si el Border no fuese el control activo de inserción):
Podemos repetir el proceso anterior para la fila de cabecera y poner un TextBlock con un control Border y añadir un control image en la columna derecha para obtener esto:
El XAML generado es este:
Ahora, añadiremos un nuevo control Border en la fila del centro y añadimos un control ListBox dentro. Configuraremos un control Border para que se distingas las dos columnas de nuestro grid, y personalizaremos el background y foreground. Pondremos algunos mensajes de test dentro del ListBox:
El XAML generado es el siguiente:
Y ahora cuando ejecutemos la aplicación tendremos un cliente de chat ejecutandose en el navegador. A medida que cambiemos el tamaño de la ventana los controles se ajustarán al tamaño de la ventana:
Aún nos queda algún trabajo para que esta aplicación de chat sea más completa, pero al menos ya tenemos algo funcionando.
Creando la aplicación de chat: Añadir las clases “ChatMessage” y “ChatSession”
Ya hemos creado la interfaz de usuario con Expression Blend, abramos el mismo proyecto con Visual Studio y añadamos algunas clases con las que poder enlazar la interfaz de usuario.
Podemos abrir le proyecto con Visual Studio, o desde Expression Blend, haciendo clic derecho en el nodo del proyecto y seleccionamos la opción “Edit in Visual Studio” :
El soporte de la Beta1 de VS 2008 para Silvelright soporta soluciones de Silverlight 2, intellisense y soporte para eventos, debugging de aplicaciones Silverlight ejecutnadose tanto en Windows como en Mac. VS 2008 soporta la edición doble diseño-código de archivos XAML. Por ejemplo, aquí tenemos la página anterior que hicimos con Blend abierta con VS 2008:
La vista diseño de VS 2008 en la Beta1 no es interactiva (es de sólo lectura). Los cambios que hagamos en el código se reflejarán en la vista diseño – lo que nos da una grata experiencia (y vs 2008 tiene un intellisense completo en el código XAML con Silverlight 2 Beta 1).
Para este post no vamos a usar el editor de código XAML de Visual Studio. Vamos a crear algunas clases que usaremos para represntar un ChatSession y lo asociaremos a los mensajes del chat. Luego usaremos Blend para enlazar la interfaz de usuario.
Empezamos añadiendo una nueva clase llamada “ChatMessage” con dos propiedades:
Luego creamos la clase “ChatSession” que representa una sesión de chat:
La clase ChatSession tiene tres propiedades públicas. Las dos primeras representan al nombre del usuario remoto y el avatar.
La tercera propiedad es una colección de los mensajes anteriores. Fijáos que no es una colección List<ChatMessage>, sino ObservableCollection<ChatMessage>. Puede que esta colección no os sea familiar si venís de ASP.NET -pero para los que vienen de Windows Forms o WPF si les será familiar. Básicamente es una colección que lanza eventos cuando se añaden o eliminan elementos (y cuando los elementos implementan la interfaz INotifyPropertyChanged también cuando se modifican). Es muy útil cuando estamos enlazando datos – ya que los controles de la interfaz de usuario usan estas notificaciones para saber cuando actualizar los valores sin que el programador tenga que añadir código explícito para ello.
La clase ChatSession tiene dos métodos públicos – uno que se conecta al servidor de chat, y otro que envía mensajes al servidor. Para reducir la complejidad (ya que no hay servidor de chat) he obviado estos métodos. En la vida real tendremos que usar la implementación de sockets que trae Silverlight para conectarnos a un servidor de chat.
La clase ChatSession implementa la interfaz INotifyPropertyChanged – lo que implica que expone un evento público “PropertyChanged”. Lanzaremos este evento cuando cambie alguna propiedad. Esto permitira que los “listeners” (por ejemplo: controles que se han enlazado a ella) sean notificados cuando se cambien los valores de los elementos.
Implementando datos falsos para el enlace en tiempo de diseño.
Desde una perspectiva funcional, el código de abajo es todo lo que necesitamos para implementar nuestro cliente chat. Para aumentar la experiencia en tiempo de diseño en Blend, también necesitamos añadir un constructor que compruebe si estamos en ejecución o en tiempo de diseño, y cargara nuestro objeto ChatSession con datos falseos si estamos en el diseñador:
En um momento veremos cómo nos ayuda esto a visualizar datos en el diseñador.
Creando la aplicación de Chat: Enlazando la interfaz de usuario con Expression Blend.
Ahora que tenemos los objetos ChatMessage y ChatSession definidos, podemos usarlos en Blend para enlazarlos con la interfaz de usuario.
Vimos cómo enlazar datos con Silverlight y WPF en el quinto tutorial: uso de Databinding y el control Listbox para mostrar datos de la semana pasada. En el post de hoy estamos usando Expression Blend para lanzar las expresiones de enlace en vez de ponerlas manualmente. Empezaremos usando el panel “Data” debajo del panel “Project”:
Clicearemos en “+ CLR Object” para mostrar un cuadro de diálogo que nos permita seleccionar un objeto .NET para enlazarlo a un control de la interfaz de usuario. Usaremos un objeto “ChatSession”:
Esto hará que se añada un objeto ChatSession al Data tray, y expondrá las propiedades (y subpropiedades) en un treeview:
Podemos enlazar cualquier control de la interfaz en vista de diseño a estas propiedades seleccionandolas y arrastrandolas al control que queramos. Por ejemplo, podemos reemplazar el texto de la etiqueta “ScottGu” y enlazarlo a la expression RemoteUserName):
Cuando soltamos la propiedad en el Textblock, Blend nos pregunta si queremos enlazarlo al control o crear uno nuevo. Por defecto se selecciona el control existente), Blend nos pregunta qué tipo de expresion queremos enlazar:
Le indicamos que queremos un enlace “OneWay” a la propidad Text del TextBlock. Cuando le damos a OK, se actualizará con la propiedad correspondiente.
Podemos repetir esto para el control Imagen (y enlazarlo con la propiedad RemoteAvatarUrl) así como el ListBox (con la coleccion MessageHistory). Una vez hecho todo esto, Blend nos mostrará la siguiente vista:
Os estaréis preguntando sobre el contenido del ListBox – porque se muestra “ChatClient.ChatMessage”?. Bueno, por ahora el ListBox está enlazado a una colección de objetos .NET, y se devuelve lo que devuelva el método ToString() de una instancia de ChatMessage.
Podemos cambiar este comportamiento añadiendo un <DataTemplate> al ListBox :
Nota: Para la preview de Blend 2.5 tenemos que definir los datatemplates en la vista de código. En próximas versiones podremos usar el diseñador para esto. Esta característica está disponible para objetos WPF si quieremos jugar con el : como diseñadores, podemos crear el look de los datos con una experiencia WYSIWYG completa. Sólo crea un proyecto WPF para probarlo.
De esta manera el diseñador nos muestra esto:
Lo bueno de tener estos datos “tontos” en tiempo de diseño nos permite tener un mayor sentido a la hora de diseñar la interfaz de usuario, ya que no tenemos que ejecutar la aplicación para ver cómo queda, y permite a un diseñador (o programador) trabajar más fácilmente en la interfaz de usuario sin tener que ejecutarla.
Creando la aplicación de chat: Actualizar el aspecto del botón y del listbox usando estilos y templates de controles
Una de las cosas que hablamos en la séptima parte: Part 7: Using Control Templates to Customize a Control’s Look and Feel era cómo permitir a los desarrolladores y diseñadores personalizar el look&feel de los controles. Consiguiendo así una gran flexibilidad para manipular la interfaz de usuario de la aplicación y crear exactamente lo que el usuario quiere.
Podemos usar la característica de Control Template de Silverlight y WPF para personalizar el boton de enviar y el listbox de nuestro chat para tener un look & feel más pulido. Para ello crearemos unos estilos “Messagehistory”y “SendButton” que guardaremos en el archivo App.xaml de nuestro proyecto. Estos estilos tendrán un Control Template que sobreescriba el look & feel del control y cambiará la estrucutra visual.
Nota: la release de marzo de Blend 2.5 tenemos que definir los control templates en vista de código. En futuras versiones podremos hacerlo en el diseñador. Sin embargo, esta característica ya está disponible en proyectos WPF.
Por ejemplo, el siguiente control template de ListBox lo podremos usar para eliminar el doble border que hay en el ListBox y definir un aspecto más ancho al scroll-bar del contenedor del listbox:
Aplicando este template a nuestro listbox tendremos el siguiente resultado:
Ahora podemos hacer algo parecido con el template del boton, y no sólo definir una forma personalizada del boton – sino definir también animaciones que se apliquen a la forma y personalizar lo que ocurra cuando ocurra el evento “MouserOver”, “Pressed”, o “Normal” (todo esto se puede encapsular en la definición del estilo – de forma que el programador no tenga que hacer nada para habilitar esto:
Una vez que tenemos estos estilos definidos, es fácil usar Expression Blend y aplicarlo a los controles en la vista diseño.
Cliceando en la ventana “Resources” nos muestra todas las referencias a recursos de nuestro proyecto:
Podemos expandir el nodo “App.xaml” para ver los estilos que hay disponibles. Para aplicar un estilo a un control, sólo tenemos que arrastralo al control. Por ejemplo, así es el boton ántes de aplicar el estilo “SendButton”:
Y este es el boton con el estilo ya aplicado:
Como el estilo tiene ciertas animaciones definidas, el botón cambiara en tiempo de ejecución dependiendo de cómo interactue el usuario con él.
Por defecto el boton se muestra así:
Cuando se ponga el ratón encima, el aspecto es este:
Cuando se haga clic, se mostrará:
Cuando soltemos el boton volverá a mostrarse la primera
Estas animaciones suelen añadir un acabado más pulido. Lo mejor de todo, un diseñador puede crear y personalizar la funcionalidad que quieran ellos mismos – el programador sólo tiene que implementar la funcionalidad de la página sin tener que escribir níngún código.
En proximas versiones de Blend, los diseñadores podrán no sólo definir formas y estructuras – sino también animaciones – usando sólo la vista de diseño (sin editar código ni nada).
Implementar la funcionalidad del Chat
Ahora que hemos usado Blend para enlazar los controles, y pulir más la interactividad de la interfaz de usuario, volvamos a Visual Studio para escribir el código que implementa la funcionalidad del chat.
Concretamente ayadiremos el siguiente código al constructor de la página para iniciar un ChatSession con el usuario remoto, y veamos el escenario del boton “Enviar”:
Cuando añadamos el código anterior y ejecutemos la aplicación, veremos que la interfaz se enlaza a un ChatSession con nombre remoto “ScottGu” (en lugar de los datos falsos que había en tiempo de diseño). Cuando escribamos texto en al TextBox y hagamos clic en el boton Send, el listBox se actualizará automáticamente:
¿Porque se actualiza el ListBox, os estaréis preguntando? Esto es debido a que el ListBox está enlazado a la propiedad ChatSession.MessageHistory – que es de tipo ObservableCollection<ChatMessage>. Es decir, la colección lanza las notificaciones de cambios cuando se añade un nuevo objeto ChatMessage, que detecta el ListBox y se actuliza el mismo.
No hace falta ningún código para que se vean los cambios en el ListBox. La arquitectura de enlazado es limpia.
Resumen
Sólo hemos visto unas cuantas características que soporta Expression Blend. Y funcionan tanto para proyectos Silverlight como en WPF. Todas estarán disponibles en la preview de Marzo de Blend 2.5 – y estarán disponibles brevemente.
Creo que veréis las posibilidades que VS 2008 y Expression Studio tienen para aumentar la productividad a la hora de crear interfaces de usuario. Desarrolladores y diseñadores pueden usarlas cuando trabajen en el mismo proyecto (evitando ademas interferir los unos en los otros). Incluso podemos tener abierto el proyecto en la misma máquina con las dos herramientas y usarlo al mismo tiempo.
Escribiré más sobre Expression Blend ( un montón de características de las que no he hablado aún) una vez que esté disponible para descarga. También postearé el chat anterior cuando esté disponible la Beta 1 de Silverlight 2 para que podáis ejecutarlo.
Espero que sirva.
Scott.
Traducido por: Juan María Laó Ramos.
juanlao 
ami me surgio una duda ¿como puedo usar los controles creados en Blend en VS de preferencia VS2005?
LikeLike
quiciera que juera mas esplicito.
que lo explicaran con mas claridad para personas.
con poca cultura,
gracias
LikeLike
Marleny tiene razon es la primera vez que quiero trabajar con blend, pues me encanto su interfaz enlas aplicacioens creadas, pero no entiendo mucho de esto. solo he programado en vb2005
LikeLike
Me gustó mucho tu post, y lo encuentro muy claro, sin embargo, me gustaría conocer la parte de Sockets con silverlight.
LikeLike