Silverlight 2 Beta2 se ha publicado hoy. Podéis descargarlo junto a las herramientas para usarlo en Visual Studio y Expression Blend aquí.
Esta Beta2 incluye un montón de mejoras (más abajo tenéis más detalles), pero sigue ocupando 4.6 MB y tarda menos de 10 segundos en instalarse en cada máquina. No precisa tener instalado el .NET Framework para que funcione, y todas las características son multi-navegador, tanto en máquinas Mac como en Windows. Estas características serán soportadas a traves de la release de Moonlig 2.
La licencia de esta Beta2 es go-live que nos permite empezar a desarrollar con Silverlight 2 en aplicaciones comerciales. Habrá algunos cambios en la API cuando pase a release, de manera que las aplicaciones que hagamos con la beta, habrá que actualizarlas para que funcionen con la versión final. Pero dichos cambios van a ser muy sencillos, de manera que podeis empezar a planificar y comenzar proyectos desde ya.
Podemos empezar a crear aplicaciones Silverlight Beta 2 con las herramientas de Silverlight para Visual Studio y Expression Blend 2.5 de la versión de Junio. Os las podéis descargar aquí. Estas herramientas funcionan tanto en VS 2008 como en VS 2008 SP1 Beta.
Mejoras en UI y Controles
Silverlight 2 Beta 2 incluye un montón de trabajo en UI y en los controles:
- Más controles por defecto.
En la Beta 1 se incluyeron pocos controles. Los más comunes (Botones, Listbox, slider, etc) estaban en diferentes assemblies que podíamos añadir para nuestras aplicaciones (lo que aumentaba el tamaño de descarga). La Beta 2 instala más de 30 de los controles más comunes como parte del núcleo de Silverlight 2. De esta manera podemos crear aplicaciones Silverlight 2 que usen esos controles que ocupan menos de ·kb – mejorando el tiempo de descarga y de instalación.
Además estamos trabajando en más controles de alto nivel que se implementarán en assemblies diferentes que podemos referenciar para incluirlos en nuestras aplicaciones. Entre otros está el DataGrid (más detalles abajo), calendar (ahora con selección múltiple de días), y Tabpanel (nuevo en la beta2.
Esperamos publicar unos 100 controles para Silverlight.
- Soporte para la edición de templates de apoyo.
Una de las características más potentes del modelo de programación de WPF y Silverlight es la habilidad de personalizar todo el look&feel de los controles. Esto permite que desarrolladores y diseñadores puedan trabajar en equipo más fácilmente.Hablé de estos conceptos en el post sobre templates de Silverlight aquí.
La preview de Blend 2.5 de Junio (de esta semana) permite al diseñador editar estos templates – haciendo más fácil cambiar el aspecto de cualquier control sin tener que ir al XAML para hacerlo.
Veamos esto en acción, arrastramos dos controles Slide en Expression Blend:
Decidimos que el primer Slide es muy largo y ancho para nuestra aplicación. Para cambiarle el aspecto hacemos clic derecho en uno de los slides en el diseñador y seleccionamos el menú: “Edit Control Parts”. Podemos elegir entre un template vacío para el slide (y empezar de cero), o editar una copia del template por defecto (empezando por ahí y cambiarlo):
Después de seleccionar editar una copia del control existente, Blend nos preguntará por un nombre que defina el template del control. Se lo damos y eligimos guardar el estilo en el nivel de aplicacion (en el App.xaml) o en la página/usercontrol actual:
Cuando le damos a “ok” entraremos en el modo de edición del template del contorl Slide. Podemos cambiarlo, añadir/eliminar cualquier elemento, etc .. Fijáos cómo en modo de edición podemos ver y elegir cualquiera de los elementos que forman parte del control slide (están en un círculo rojo en la ventana de “Objects”).
Para hacer que la cabecera sea más pequeña, seleccionamos el eelemento “HorizontalThumb” y le cambiamos el ancho (tanto gráficamente como cambiando la propiedad en el grid):
Ahora podemos usar la barra de navegación de encima del diseñador para volver a la página y ver los cambios:
Fijáos que ahora sólo uno de los controles slide está usando el estilo que hemos definido.
Para aplicar el mismo estilo a otros slides, podemos seleccionarlo, boton derecho, y seleccionamos “Apply Resource” :
Ahora ambos slides tienen el mismo estilo:
Los cambios que le hagamos al estilo “ScottSlider” se aplicarán automáticamente a ambos controles.
Fijáos que todos los controles de Silverlight 2 soportan estos templates y se tendra la experiencia de usuario anterior en Expression Blend.
Soporte de Visual State Manager (VSM)
Los templates de los controles de Silverlight y WPF soportan tanto la personalización del “look” de un control, como el “feel”. Por “feel” me refiero a su interactividad. Por ejemplo: cómo reacciona cuando es pulsado, cuando obtiene el foco, cuando lo pierde, cuando está pulsado, si está deshabilitado, tiene algo dentro seleccionado, etc. Normalmente queremos que se ejecuten algunas animaciones cuando el usuario interactua con un control como este.
Una de las cosas nuevas que se introducen en la Beta 2 de Silverlight 2 es el “Visual State Manager” (SVN) que hace que sea mucho más sencillo crear templates interactivos para los controles. VSM introduce dos conceptos básicos que podemos aprovechar en los templates de controles: “Visual States” y “State Transitions”. Por ejemplo, un control como Button define muchos estados visuales por sí mismo – “Normal”, “MouseOver”, “Pressed”, “Disabled”, “Focused”, “Unfocused”. Cuando estamos en modo de edición en Blend, los diseñadores pueden editar fácilmente cómo se representa el botón en cada estado, y además pueden configurar las reglas de transición para controlar cúanto tiempo debe durar la animación cuando pasa de un estado a otro. En tiempo de ejécución Silverlight ejecutará dinámicamente la animación apropada para mover el control de un estado a otro.
Lo curioso de este modelo es que los diseñadores no necesitan escribir código, no tienen que crear la animación manualmente, y no tienen que comprender el modelo de objetos de los controles para que sean productivos. Con esto conseguimos que la curva de aprendizaje para crear templates interactivos sea realmente fácil, e implica que los diseñadores de hoy día pueden trabajar muy fácilmente con Silverlight. Dentro de poco añadiremos este Visual State Manager (VSM) a WPF, permitiendo usarlo en aplicaciones windows también, permitiendo compartir templates entre WPF y Silverlight.
Para ver un ejemplo en acción, añadamos un Button a la superficie de diseño:
Hagamos clic derecho en el boton y editaremos su template. En lugar de empezar con el template por defecto (como hicimos con el slider antes), crearemos un template vacío:
Blend nos pedirá el nombre del estilo que vamos a crear. Lo llamaremos “ScottButton” y le damos a ok. Esto hará que el diseñador se ponga en modo de diseño de controles para el Button, y empezamos con un template vacío:
Una de las cosas que nos daremos cuenta es la nueva ventana de Blend: “States”. Esto nos mostrará todos los “Visual States” (Estados visuales) que tiene el button. Está seleccionado el estado “Base” – que nos permite definir el arbol visual común de un template button.
Añadimos algunos elementos vectoriales al estado base que define el look de un boton personalizado. Podemos usar la herramienta de dibujos vectoriales que está integrada en Blend para hacer estos gráficos, o podemos usar Expresion Design o Adobe Illustrator para crear el vector e importarlo a Blend. En la siguiente imagen estamos aadiendo cuatro elementos “Path” al template – uno un fondo con bordes (llamado “background”), una sombra (“shadow”), una opacidad del 40% cerca del borde superior, y uno que define el contenido interno (en este caso es un dibujo de una casa):
Nota: podemos importar una imagen, pero con los elementos vectoriales tendremos la flexibilidad de escalar/encojer/transformar el boton más tarde y tener el mismo aspecto en cualquier resolución o escala (particularmente útil en escenarios mobile con Silverlight – cuando las resoluciones de pantalla son diferentes o pequeñas). También nos permite animar/cambiar cualquier elemento.
Una vez que hemos terminado el diseño del estado base, le damos a F5 para ejecutar nuestra aplicación en el navegador:
Como podéis ver – nuestro botón ahora tiene un aspecto más bonito. A pesar de su nuevo aspecto, el botón sigue lanzando los mismos eventos de foco, clic y hover como ántes – asi que el desarrollador cuando use el boton no tiene que cambiar ningún código cuando trabaje con él.
Lo malo de este botón es que no es interactivo. Quiero decir que no hay ningún feedback visual cuando el botón consigue/pierde el foco, etc.. ni siquiera cuando hacemos clic.
Para añadir interactividad al botón, volvemos a Blend. Hemos añadido elementos vectoriales al estado “Base” del control. Esto nos permitió definir el look de nuestor botón. Ahora vamos a personalizar los estados visuales.
Por ejemplo, para implementar un comportamiento mouse-over para el botón, seleccionamos el estado “MouseOver” en la ventana de “States”, y cambiaremos el look del botón cuando está en el estado base. He seleccionado l elemento “shine” del control y he cambiado la propiedad Opacity en el property grid para conseguir un efecto visual cuando estemos en el estado MouserOver. Fijáos que Blend a resaltado el elemento Shine con un punto rojo y nos ha mostrado la propiedad Opacity de la ventana de objetos. Con esto nos damos cuenta rápidamente de los cambios que hemos hecho entre el estado Base y el MouseOver:
Ahora podemos seleccionar el estado “Pressed” y personalizar el look del botón cuando es pulsado. Cambiaremos dos cosas del estado Base. El primer cambio es hacer el elmento “shine” visible (como en el estado MouseOver). El segundo será cambiar un poco el offset del contenido – mientras mantenemos el elmento de sombra estacionario. Esto nos resultará en un efecto curioso cuando pulsemos el botón:
Podemos implementar el cambio del offset al backgroun, al contenido y los elementos shine seleccionándolos en el diseñador y aplicamos la transformación en el navegador de propiedades:
Y ahora, ejecutamos la aplicación otra vez, y veremos que nuestro botón ahora es interactivo. Este es el estado normal del botón:
Si ponemos el ratón encima:
Si hacemos clic el botón se hundirá y se esconderá la sombra (y volverá a su estado normal cuando soltemos el botón del ratón):
Fijáos que no he tenido que escribir ningún código ni XAML para cambiar el look & feel – el nuevo Visual State Manager se encarga de administrar los estados visuales por nosotros.
Por defecto, silverlight construye dinámicamente y ejecuta las transiciones Storyboard por nosotros a mediada que nos vamos moviendo de un estado visual a otro (generando animaciones suaves entre los dos estados). No tenemos que escribir nada de código para que esto ocurra (nota: seguis teniendo la habilidad de arrastrar y añadir más transiciones Storyboard si queremos, pero para la mayoría de los casos usaréis la transición automática).
Una de las características que podéis aprovechar de estas transiciones automáticas es personalizar el tiempo de duración que se tarda en pasar de un estado a otro. Esto lo podéis hacer haciendo clic en la flecha de la derecha de un estado visual y configurar una regla que controla cuánto tiempo tarda la animación de transicion.
Por ejemplo, podemo indicar que queremos que tarde 2 segundos del estado visual “Normal” al “MouseOver” añadiendo la siguiente regla:
Podemos hacer que esta regla tarde .2 segundos en pasar de Normal->MouseOver:
Si hacemos clic en el estado MouseOver y configuramos una regla que haga que la transición MouseOver->Normal sea de .4 segundos:
Ahora cuando arranquemos la aplicación veremos una animación entre transiciones más lenta cuando pasemos el ratón por encima, esto le da un aspecto más pulido a nuestra aplicación. No hemos tenido que escribir ni una sola línea de código para conseguir este efecto. Todos los controles que vienen con Silverlight 2 tendrán este soporte paara el Visual State Manager.
Si queréis aprender más sobre esto, leed estos tutoriales aquí y aquí, y estos vídeos aquí, aquí y aqui.
TextBox
La beta 2 incluye varias mejores en la edición del control TextBox. Scroll, selección de varias lineas, teclas de navegación, y copiar/pegar desde el clipboard ya están soportados.
La beta 2 también añade el soporte de entrada IME Level3 para caracteres de otros idiomas:
Soporte de entrada
Beta2 soporta nuevas entradas de teclado en modo pantalla completa (flechas, tabs, intro, home, fin, avpag, repag, espacio). Nota: No se soportan todas las teclas para evitar escenarios de robo de contraseñas.
Accesibilidad y automatización
En la beta 2 se ha añadido un framework de UI Automation. Permite que lectores de pantalla y otras herramientas de ayuda a discapacitados identifiquen e interactúen con los componentes que tenemos en nuestra aplicación Silverlight 2.
En la beta 2 se usa este framework para permitir este comportamiento a un conjunto de controles. En la versión final de Silverlight 2 todos los controles darán soporte a este framework. También añadiremos soporte para escenarios de alto contraste. Estas características nos permitiran crear aplicaciones accesibles, que complen con la norma 508. Este framework permitirá también la creación de test automáticos de interfaz de usuario.
Sistema de animaciones y gráficos
Se ha añadido soporte para propiedades de animación dependiences. También se soporta la animación de objetos (estructuras de animaciones). También podemos crear Storyboard en código que animen partes del arbol de renderizado sin tener que añadirlo (permitiendonos embeber animaciones en código). El soporte de callback por frame se añadirá en la versión final.
También se incluye una clase estática Visual Tree Helper que nos brinda una API avanzada para la inspección de árboles visuales. Nos permite enumerar los hijos de un elemento y obtener el padre de un elemento. Esta APi funciona con cualqueir UIElement que le pasemos.
DeepZoom
En esta beta se soporta un archivo de manifiesto basado en XML para colecciones DeepZoom. También se añade soporte para MultiScaleTileSource para DeepZoom (que permite al desarrollador engancharse a pirámides de imágenes que no conforman el formato Deep Zoom para conseguir el mayor rendimiento posible de Deep Zoom.
Compatibilidad WPF
Silverlight Beta2 incluye un montón de cambios para mejorar la compatibilidad de las APIs de Silverlight y WPF (nota: la versión final contendrá algún trabajo adicional sobre compatibilidad). También estamos añadiendo nuevas APIs en Silverlight 2 de WPF en .NET 3.5 SP1 de este verano..
Este trabajo, combinado con el soporte VSM que estamos integrando en WPF, permitirá la reutilización de código entre aplicaciones de escritorio y web.
MEJORAS MULTIMEDIA.
Streamming adaptativo.
En esta Beta2 soporta el “streamming adaptativo”- que nos permite codificar multimedia en varios bit-rates y conseguir una aplicación Silverlight que eliga dinámicamente aquél que más convenga a la red y a la cpu.
Esto permite una experiencia mucho más rica – ya que hace posible que los proveedores de contenido puedan ofrecer versiones de alta y baja calidad, y hacer que Silverlight escoga el mejor formato dependiendo de la máquina del usuario que acceda al contenido. Si mientras estamos viendo un video la máquina o las condiciones de red cambian, Silverlight cambiará automáticamente a la versión de bit-rate más adecuado sin tener que esperar a que se guarde un buffer ni que se interrumpa la reproducción.
Esta característica de streamming adaptativo es extensible – permite añadir la lógica que queramos para decidir cuándo cambiar el fomato, y el bit-rate que será usado. De manera que cualquier proveedor de multimedia pueda integrar sus sitemas con Silverlight y proveer videos de gran calidad.
Proteccion de contenido
Beta 2 incluye protección DRM, soporta Windows DRM y PlayReady DRM. Ambos multinavegador y multiplataforma.
Listas de reproducción de servidor.
En la Beta2 se soportan listas de reproducción del lado del servidor (las versiones anteriores sólo soportaban listas de reproducción clientes).
MEJORAS DE RED
En esta Beta2 se ha trabajado mucho en el espacio de networking:
Sockets multi dominio.
En la beta 2 se ha añadido el soporte de networking multidominio tanto HTTP como Sockets (con lo que nuestra aplicación puede llamar a otros sitios diferentes del que fué descargada).
Silverlight comprobará la existencia de un archivo de políticas en XML en los servidores remotos que indica cuándo está permitido el multi networking. Silverlight soporta un nuevo formato de archivo XML de políticas que hemos desarrollado, como los archivos de políticas de Flash (con lo que podemos abrir contenido Flash desde aplicaciones Silverlight sin tener que hacer trabajo de más).
Background Thread Networking.
Esta Beta2 permite que las aplicaciones Silverlight puedan iniciar peticiones de red en threads en background, así como procesar las respuestas también en el mismo tipo de threads. Esto permite un montón de escenarios, y nos permite evitar bloquear la interfaz de usuario mientras se están haciendo comunicaciones HTTP o por Sockets.
Comunicaciones Duplex (Server Push)
Con la Beta 2 se añade la posibilidad de establecer canales de comunicación duplex con un servicio WCF en un servidor. Esto nos permite un modelo de programación más claro que permite a los servidores mandar mensajes a clientes Silverlight sin que el desarrollador tenga que hacer un pool a lo sservidores. Este modelo de programación es muy útil en multitud de escenarios, como en aplicaciones tipo Messenger, aplicaciones de monitorización/actualización y aplicaciones de comercio electrónico.
Servicios Web
Se ha mejorado significativamente la interoperabilidad con servicios web SOAP. Las clases proxi se pueden configurar sin tener que recompilar las aplicaciones. Visual Studio tiene un nuevo template de proyecto llamado “Silverlight-enabled WCF Service” que podemos añadir a proyectos ASP.NET para publicar servicios a clientes.
Servicios de datos REST y ADO.NET
Silverlight incluye soporte para trabajar con servicios web basados en REST
La beta 2 añade la posibilidad de llamar y consumir ADO.NET Data Services(nombre en clave: “Astoria”). ADO.NET Data Services se publicará como parte del .NET 3.5 SP1 y hará muy fácil la publicación de end-points de datos en un proyecto ASP.NET consumible por cualquier cliente de URIs REST. Silverlight Beta 2 soporta un cliente ADO.NET Data Service que nos permite llamar fácilmente a estos servicios (y opcionalmente podremosusar expresiones LINQ para expresar consultas REST remotas).
JSON
También se soportan llamadas a servicios JSON.
Esta Beta 2 incluye el soporte LINQ to JSON que nos permite consultar, filtrar y mapear resultados JSON a objetos .NET en una aplicación Silverlight. Lo que hace más fácil aún trabajar con end-points AJAX y con servicios publicados en la web.
Mejoras de Datos:
En esta beta se ha trabajado un montón en el terreno de datos:
DataGrid
Se han añadido varias características nuevas al control DataGrid, entre otras:
- Auto size en columnas y filas.
- Ordenación por columnas (tanto con una sola columna como con varias).
- Reordenación por el usuario final (permitiendo arrastrar/soltar columnas).
- Soporte para columnas congeladas (para evitar que una columna particular sea personalizada).
- Mejoras de rendimiento.
DataBinding
También se han añadido nuevas características al data-binding y la valadicación, entre otras:
- Validacion Pre-binding y evento BindingValidationError (que nos permite administrar la entrada de las validaciones en bindings de dos direcciones).
- Soporte de expressiones binding en propiedades enlazadas.
- Soporte de conversión más rico (incluida la conversión fallback).
Almacenamiento aislado
Silverlight permite que las aplicaciones guarden datos locales en un cliente (a traves del “Isolated Storage”). Las aplicaciones pueden preguntarles a los usuarios el tamaño disponible para guardar datos (por ejemplo: un usuario puede permitir que un programa de email tenga un espacio disponible de 50MB).
Se ha aumentado el espacio por defecto a 1MB. También se ha mejorado la administración de este espacio que se le puede asignar a las aplicaciones, así como la habilidad de eliminar los datos locales de las aplicaciones. Se puede acceder a una interfaz gráfica para gestionar estos permisos con el botón derecho en en el menú “Silverlight Configuration”.
Comprendiendo la compatibilidad con Silverlight1.0 y Silverlight 2 Beta 1
Silverlight 2 Beta 2 es compatible con cualquier aplicación que use Silverlight 1.0
Esta beta 2 no ejecutará aplciaciones de Silverlight 2 Beta 1, ya que hemos un gran cambio en la api entre las dos betas. Los navegadores que tengan la Beta 1 de Silverlight 2 instalada cuando visiten un sitio con una aplicacion con la Beta 2 se les preguntará si quieren actualizarse a la Beta2. Una vez que se haga esto, no se podrán ejecutar aplicaciones hechas con la Beta 1 sin desinstalar la Beta 2 ántes. así que si tenemos publicado un ejemplo con la Beta1, lo más sensato es que lo actualizemos a la Beta 2.
Hemos publicado un documento que detalla los cambios entre estas dos betas para que os sirva de ayuda, aquí. También recomiendo que leais los post de Shawn Wildermuth What Changed in Silverlight 2 Beta2 y Upgrading your Silverlight 2 Projects to Beta2 para más detalles de esos cambios.
Resumen
Para aprender más sobre Silverlight 2 y descargar la release de la Beta 2, visitad http://www.silverlight.net y http://expression.microsoft.com. Publicaremos artículos, tutoriales, videos y más en ambos sitios en las próximas semanas. También postearé algunos tutoriales en mi blog.
Si ya los habéis leído os recomiendo que miréis mis post anteriores Primer vistazo a silverlight 2 y Primer vistazo a Silverlight 2 con Expression Blend que escribí hace unos meses cuando publicamos la Beta1, creo que son un buén punto de inicio para ver el modelo de programación de Silverlight y sobre todo cómo se integra con Visual Studio 2008 y Expression Blend.
Espero que sirva.
Scott.
Traducido por: Juan María Laó Ramos.
juanlao 
felicidades muy bueno y dscriptivo
LikeLike