Descarga la aplicación para disfrutar aún más
Vista previa del material en texto
• 1 ,j , "¡' j I I ¡' ,1" \ r , ¡' I I I \l '\ • j " I I APROVECHE AL MÁXIMO SU POTENCIAL ILIMITADO SILVERUGHT PARA DISEÑADORES Y DESARROLLADORES MICROSOFT EXPRESSION BLEND 2 Y MICROSOFT VISUAL STUDIO 2008 UNQ, WCF y SERVICIOS WEB CON C# CREACiÓN DE ANIMACIONES Y TÉCNICAS DE ESCRITURA PARA DISPOSITIVOS TÁCTILES INTERACCiÓN CON JAVASCRIPT, HTML, XML y CSS DESCUBRA UN NUEVO NIVEL EN EL DESARROLLO DE APLICACIONES PARA INTERNET INCLUYE NOVEDADES DE LA VERSiÓN 3.0 por MATÍAS IACONO En este sitio encontrará una gran variedad de recursos y software relacionado, que le servirán como complemento al contenido del libro. Además, tendrá la po- sibilidad de estar en contacto con los editores, y de participar del foro de lecto- res, en donde podrá intercambiar opiniones y experiencias. Silverlight is the cross-platform, cross-browser plug-in for rich interactive applications and cutting-edge media experiences. With advanced tips from our expert, this book provides practical, grounded advice, and rich examples, to be ready for today´s challenges. SILVERLIGHT DESCUBRA UN NUEVO NIVEL EN EL DESARROLLO DE APLICACIONES PARA INTERNETCONTENIDO N I V E L D E U S U A R I O PRINCIPIANTE INTERMEDIO AVANZADO EXPERTO 1 | INTRODUCCIÓN A SILVERLIGHT Experiencia de usuario y portabilidad | Arquitectura de Silverlight 2 | Microsoft .NET Framework | Interfaz de usuario y presentación | El código XAML | Herramientas de desarrollo 2 | MICROSOFT EXPRESSION BLEND 2 Silverlight con Expression Blend | Explorador de soluciones | Entorno | Barra de herramientas | Crear nuestra primera aplicación 3 | SILVERLIGHT PARA DESARROLLADORES Puesta a punto de Visual Studio 2008 | Crear la primera aplicación | Interoperabilidad con Expression Blend 2 4 | XAML AL EXTREMO El lenguaje XAML | Declaración de objetos | Controles y componentes | Grid | GridSplitter | Canvas | StackPanel | ScrollViewer | Border | Controles de iteración con el usuario | Button | CheckBox | RadioButton | HyperlinkButton | Image | ComboBox | ListBox | TextBlock | TextBox | PasswordBox | DataGrid | Calendar | DatePicker | ProgressBar | Slider 5 | LUZ, CÁMARA, ACCIÓN Mover objetos | Transformaciones de traslación, rotación, escalar y distorsión | Animaciones | DoubleAnimation | ColorAnimation | Estilos y plantillas 6 | CERRAR EL CÍRCULO MediaElement | Ejecutar sonidos | Elementos con video embebido | Deep Zoom | Dibujar con InkPresenter | Áreas de dibujo 7 | INTERCONEXIÓN Ampliar las funcionalidades | Silverlight desde C# | WebClient | Enviar información | Capacidad de almacenamiento | OpenFileDialog | Manejo de hilos | Temporizador | Hilos y eventos | Consumir servicios desde Silverlight | Manipular datos | LinQ 8 | EL NAVEGADOR Y SU DOMINIO Conectar tecnologías | Silverlight 2 y HTML | HtmlDocument y HtmlElement | HtmlPage | HtmlWindow | Cookies | Modificar CSS | Silverlight 2 y JavaScript | Llamar funciones | Objetos para JavaScript APÉNDICE A | SILVERLIGHT FUERA DE WINDOWS APÉNDICE B | SILVERLIGHT 3, LA NUEVA GENERACIÓN redusers.com SILVERLIGHT tapa Silverlight.qxp 21/09/2009 11:07 a.m. PÆgina 1 http://www.a-pdf.com/?wm-demo CONÉCTESE CON LOS MEJORES LIBROS DE COMPUTACIÓN DESCUBRA EL POTENCIAL DE WINDOWS VISTA MANUALES USERS I 384 páginas I ISBN 978-987-1347-40-7 MANEJE LAS HERRAMIENTAS DE VISTA COMO UN EXPERTO MANUALES USERS I 352 páginas I ISBN 978-987-663-007-8 DESARROLLE APLICACIONES PARA WINDOWS Y LA WEB MANUALES .CODE I 368 páginas I ISBN 978-987-1347-32-2 usershop.redusers.com APRENDA A PROGRAMAR CON EL LENGUAJE MÁS POTENTE DESARROLLADORES I 400 páginas I ISBN 978-987-1347-76-6 RT_Bombo_LIBROSilverlight.qxp 21/09/2009 17:07 Página RT2 http://usershop.redusers.com/ DESCUBRA UN NUEVO NIVEL EN EL DESARROLLO DE APLICACIONES PARA INTERNET 00_Silverlight.qxp 9/30/09 1:16 PM Page 1 TÍTULO: SILVERLIGHT AUTOR: Matías Iacono COLECCIÓN: Manuales USERS FORMATO: 17 x 24 cm PÁGINAS: 352 Copyright © MMIX. Es una publicación de Gradi S.A. Hecho el depósito que marca la ley 11723. Todos los derechos reservados. No se permite la reproducción parcial o to- tal, el almacenamiento, el alquiler, la transmisión o la transformación de este libro, en cualquier forma o por cualquier medio, sea electrónico o mecánico, mediante foto- copias, digitalización u otros métodos, sin el permiso previo y escrito del editor. Su infracción está penada por las leyes 11723 y 25446. La editorial no asume responsa- bilidad alguna por cualquier consecuencia derivada de la fabricación, funcionamien- to y/o utilización de los servicios y productos que se describen y/o analizan. Todas las marcas mencionadas en este libro son propiedad exclusiva de sus respectivos due- ños. Impreso en Argentina. Libro de edición argentina. Primera impresión realizada en Sevagraf, Costa Rica 5226, Grand Bourg, Malvinas Argentinas, Pcia. de Buenos Aires en octubre de MMIX. ISBN 978-987-663-010-8 Iacono, Matías Silverlight. - 1a ed. - Banfield - Lomas de Zamora : Gradi, 2009. 352 p. ; 24x17 cm. - (Manual users; 175) ISBN 978-987-663-010-8 1. Informática. I. Título CDD 005.3 00_Silverlight.qxp 9/30/09 1:16 PM Page 2 00_Silverlight.qxp 9/30/09 1:16 PM Page 3 http://www.redusers.com mailto:usershop@redusers.com http://www.redusers.com 4 PRELIMINARES Matías Iacono Ingeniero de sistemas, Microsoft Most Valuable Professional en ASP.net, Orador Regional para INETA Latam, Scrum Master cer- tificado y Microsoft Certified Technology Specialist. Cuenta con más de quince años de experiencia en el desarrollo de software con distintas tecnologías y metodologías. Ha dictado cerca de cincuenta conferencias técnicas en distintos países latinoamericanos, así como escrito y publicado artículos en numerosas publicaciones internacionales. Ha trabajado para empresas extranjeras de gran envergadura. En la actualidad, se desempeña como ingeniero de software para Mo- torola Argentina y es profesor en la Universidad Tecnológica Na- cional de Córdoba. Agradecimientos Agradezco a todos los amigos que me brindaron su apoyo y sus opiniones sobre lo escrito. A Miguel Saez, de Microsoft, por ha- berme facilitado material y a Lucas Ontivero, de Motorola Ar- gentina, por su crítica aguda, que me ayudó con el contenido pro- puesto en el libro. Dedicatoria A mi familia, por quedarse a mi lado largos fines de semana mien- tras concluía este libro. 00_Silverlight.qxp 9/30/09 1:16 PM Page 4 5 PRÓLOGO Si hay algo a lo que le debemos la actual difusión de la tecnología informática, tan- to dentro del hogar como de las oficinas, es a la continua evolución de las interfa- ces gráficas de usuarios (GUI). Gracias a ellas, personas de todas las edades y pro- fesiones, en todo el mundo, pueden interactuar con equipos de computación para fines tan diversos como entretenerse, obtener información, realizar cálculos y co- municarse, entre un sinnúmero de otras posibilidades. Es seguro que tanto la constante innovación en el desarrollo de las interfaces grá- ficas como la aparición de Internet han sido los catalizadores para uno de los más fabulosos cambios en la manera en que las personas, alrededor del globo, se rela- cionan mediante el uso de la tecnología. Mientras que la Web seguirá siendo el ámbito de comunicación del futuro, es de es- perar que los requerimientos de interactividad entre máquinas y humanos se vuel- van aún más sofisticados y exigentes. Ante esto, Microsoft desarrolló Silverlight, una nueva apuesta para el desarrollo de elementos de gráficos de interacción con los usua- rios orientados a la Web. En este aspecto es, justamente, en el que esta obra hace un gran aporte, al presentar Silverlight 2.0 de una manera amena, clara y completa. En ella, se abarcan no sólo los pormenores técnicos de la tecnología, sino que, además, el autor se ha esmerado en brindar al lector un cúmulo de conocimientos que sólo podría obtenerse mediante la experiencia, todo esto reflejado en tips, datos útiles, recomendaciones, curiosida- des, advertencias y todos los consejos que el lectorreconocerá como invaluables a la hora de adentrarse en esta apasionante tecnología. Por último, quisiera agradecer a Matías Iacono por este maravilloso trabajo que ha sido una guía segura en el aprendizaje de Silverlight y, con cuya lectura y estudio, me he sentido guiado y acompañado siempre. Lucas Ontivero Ingeniero de software, Motorola Argentina Prólogo 00_Silverlight.qxp 9/30/09 1:16 PM Page 5 PRELIMINARES 66 EL LIBRO DE UN VISTAZO En esta obra se verán los conceptos principales para dominar Silverlight, la tecnología de Microsoft orientada al desarrollo de contenido dinámico y animaciones para la Web. El contenido está dirigido a desarrolladores con conocimiento de Microsoft .Net Framework, C# como lenguaje principal, y que dominen algunos conceptos de JavaScript y HTML. Capítulo 1 INTRODUCCIÓN A SILVERLIGHT 2 Para conocer Silverlight desde sus comienzos, en este capítulo describiremos su arquitectura. Hablaremos de las diferencias entre aplicaciones tradicionales y las nuevas aplicaciones visuales, y conoceremos la lista de herramientas necesarias para poder desarrollar aplicaciones Silverlight. Capítulo 2 MICROSOFT EXPRESSION BLEND 2 En este capítulo nos enfocaremos en Microsoft Expression Blend 2 como herramienta de desarrollo para Silverlight, orientada a diseñadores visuales y a diagramadores de aplicaciones. Daremos un paseo por la interfaz de Microsoft Expression Blend 2 y crearemos nuestra primera aplicación Silverlight. Este capítulo ayudará a los diseñadores y desarrolladores a entender cada uno de estos mundos. Capítulo 3 EL MEJOR TRABAJO, CON LA MEJOR HERRAMIENTA Luego de enfocarnos en el diseñador visual, centraremos la atención de este capítulo en el desarrollador. Para esto, veremos qué posibilidades nos ofrece Microsoft Visual Studio 2008 para desarrollar aplicaciones Silverlight, los controles y componentes propuestos, su interfaz visual y los diferentes tipos de proyectos disponibles desde este entorno de desarrollo. Capítulo 4 XAML AL EXTREMO Cada uno de los controles y componentes proporcionados por Silverlight, su funcionalidad, eventos, métodos y funciones, serán vistos en este capítulo. Cada uno de estos elementos será descripto con profundidad, generando código de ejemplo por cada uno de ellos. Este capítulo representa una excelente guía de referencia sobre todos los componentes disponibles en Silverlight. Capítulo 5 LUZ, CÁMARA, ACCIÓN Gran parte de las prestaciones otorgadas por Silverlight incluyen la posibilidad de mover objetos dentro de nuestra aplicación. En este capítulo veremos cómo manipular esta característica, ya que se explicarán los distintos modelos disponibles para animaciones y transformaciones dentro de las aplicaciones Silverlight. Capítulo 6 CERRAR EL CÍRCULO Silverlight también otorga mucho potencial con el manejo de imágenes, video y sonido. En este capítulo hablaremos de ciertas características relacionadas con actividades 00_Silverlight.qxp 9/30/09 1:16 PM Page 6 El libro de un vistazo 7 ! A lo largo de este manual encontrará una serie de recuadros que le brindarán información complementaria: curiosidades, trucos, ideas y consejos sobre los temas tratados. Cada recuadro está identificado con uno de los siguientes iconos: INFORMACIÓN COMPLEMENTARIA CURIOSIDADES E IDEAS DATOS ÚTILES Y NOVEDADES ATENCIÓN SITIOS WEB��� ���� como consumir videos, mostrar imágenes o tocar sonidos dentro de las aplicaciones. También hablaremos de Deep Zoom y sus características, así como del dibujo a mano alzada con InkPresenter. Capítulo 7 INTERCONEXIÓN Este capítulo ofrece funcionalidades altamente valiosas. Crearemos un juego desde código C# y un lector de RSS, usaremos almacenamiento aislado para guardar información en el cliente, crearemos aplicaciones para subir archivos al servidor y culminaremos con la implementación de la última tecnología de interoperabilidad propuesta por Microsoft al conectar Silverlight con Windows Communication Foundation. Capítulo 8 EL NAVEGADOR Y SU DOMINIO Silverlight se ejecuta dentro de una página HTML manejada por el navegador web. Por tal motivo, posee gran potencial de interacción con el cliente. En este capítulo veremos cómo Silverlight puede manipular HTML así como intercambiar información con JavaScript. Además, conoceremos cómo JavaScript es capaz de consumir servicios generados desde Silverlight. Apéndice A SILVERLIGHT FUERA DE WINDOWS Gracias a MoonLight, Silverlight puede salir de Windows y trabajar en sistemas operativos basados en Linux y Unix. Hablaremos del proyecto MoonLight, sus características, limitaciones y el futuro de Silverlight como tecnología fuera de su ambiente nativo. Además, se presentan algunas herramientas gratuitas y de código libre que nos ayudarán en el desarrollo, tanto para Windows como para Linux. Apéndice B SILVERLIGHT 3, LA NUEVA GENERACIÓN Daremos un vistazo al producto recientemente lanzado por Microsoft. Silverlight 3 trae consigo valiosas mejoras al modelo ya planteado, las que enumeraremos para ganar conocimiento adicional por sobre lo ya aprendido durante todo el libro. Servicios al lector En esta última sección, encontraremos un índice que nos ayudará a buscar de forma rápida los términos más importantes de esta obra. Además, veremos un listado de sitios de interés para ampliar nuestros conocimientos y mantenernos al tanto de las últimas novedades en la materia. 00_Silverlight.qxp 9/30/09 1:16 PM Page 7 00_Silverlight.qxp 9/30/09 1:16 PM Page 8 http://www.redusers.com Contenido 9 Sobre el autor 4 Prólogo 5 El libro de un vistazo 6 Información complementaria 7 Introducción 12 Capítulo 1 INTRODUCCIÓN A SILVERLIGHT 2 Iniciarse en el mundo de Silverlight 2 14 Navegar hacia el mundo de Silverlight 2 14 La experiencia de usuario y la portabilidad 16 Arquitectura de Silverlight 2 19 Microsoft .Net Framework 20 Interfaz de usuario y presentación 21 El código XAML 22 Herramientas de desarrollo para Silverlight 2 24 Resumen 27 Actividades 28 Capítulo 2 MICROSOFT EXPRESSION BLEND 2 Un paseo por Expression Blend 2 30 Silverlight 2 con Expression Blend 2 30 Unir los extremos 32 Un recorrido por Expression Blend 2 37 Explorador de soluciones 38 Página inicial de Silverlight 2 39 La página App.xaml 40 El entorno de Expression Blend 2 43 La barra de herramientas 46 Crear nuestra primera aplicación con Expression Blend 2 48 Resumen 53 Actividades 54 Capítulo 3 EL MEJOR TRABAJO, CON LA MEJOR HERRAMIENTA Silverlight para desarrolladores 56 Puesta a punto de Visual Studio 2008 56 Silverlight 2 con Visual Studio 59 Crear la primera aplicación con Visual Studio 2008 63 Interoperabilidad con Expression Blend 2 76 Resumen 79 Actividades 80 Capítulo 4 XAML AL EXTREMO El lenguaje XAML 82 ¿Qué es XAML? 82 Declaración de objetos 82 Controles y componentes 83 Controles contenedores y agrupadores 84 Control Grid 84 Control GridSplitter 89 Control Canvas 92 Control StackPanel 95 Control ScrollViewer 98 Control Border 101 Controles de interacción con el usuario 103 CONTENIDO 00_Silverlight.qxp 9/30/09 1:16 PM Page 9 PRELIMINARES 10 Control Button 103 Control CheckBox 106 Control RadioButton 110 Control HyperlinkButton 113 Control Image 114 Control ComboBox 117 Control ListBox 124 Control TextBlock 126 Control TextBox 127 Control PasswordBox 130 Control DataGrid 132 Control Calendar 139 Control DatePicker 147 Control ProgressBar 148 Control Slider 152 Resumen 153 Actividades 154 Capítulo 5 LUZ, CÁMARA, ACCIÓN Mover objetos 156 Transformaciones 158 Transformación de traslación 159 Transformación de rotación 161 Transformación escalar 165 Transformación de distorsión 167 Aplicar todas las transformaciones 168 Animaciones 170 DoubleAnimation 171 ColorAnimation 173 Animaciones y transformaciones 175 Estilos y plantillas 178 Estilos 178 Plantillas 182Resumen 185 Actividades 186 Capítulo 6 CERRAR EL CÍRCULO MediaElement 188 Ejecutar sonidos 188 Video 194 Elementos con video embebido 195 Marcadores de video 196 Deep Zoom 199 Crear el primer Deep Zoom 200 Incluir Deep Zoom en Silverlight 203 Dibujar con InkPresenter 208 Dibujar en forma manual 212 Dibujar sobre otros elementos 215 InkPresenter y áreas de dibujo 217 Resumen 219 Actividades 220 Capítulo 7 INTERCONEXIÓN Ampliar las funcionalidades 222 Silverlight desde C# 222 00_Silverlight.qxp 9/30/09 1:16 PM Page 10 Contenido 11 WebClient 230 Enviar información 233 Almacenamiento aislado 239 Implementar el almacenamiento aislado 240 Capacidad de almacenamiento 245 Almacenar configuraciones 247 OpenFileDialog 251 Manejo de hilos 255 El concepto de hilos 256 Temporizador 257 Personalizar los hilos 259 Hilos y eventos 261 Consumir servicios desde Silverlight 263 Crear un servicio WCF 270 Manipular datos 275 Enlazado de datos 276 LinQ 283 Resumen 287 Actividades 288 Capítulo 8 EL NAVEGADOR Y SU DOMINIO Conectar tecnologías 290 Silverlight 2 y el HTML 290 HtmlDocument y HtmlElement 292 HtmlPage 301 HtmlWindow 307 Cookies 316 Modificar CSS 320 Silverlight 2 y JavaScript 323 Llamar funciones 325 Objetos Silverlight para JavaScript 327 Resumen 347 Actividades 348 Apéndice A SILVERLIGHT FUERA DE WINDOWS Proyecto Moonlight 330 Sistemas operativos 330 Versiones de Moonlight 331 Herramientas de desarrollo 331 Problemas conocidos 333 Apéndice B SILVERLIGHT 3, LA NUEVA GENERACIÓN Silverlight 3 336 Nuevos controles 336 Efectos en tres dimensiones 337 Uso de Pixel Shader 338 Fuera del navegador 339 Servicios al lector Índice temático 342 Sitios web recomendados 345 00_Silverlight.qxp 9/30/09 1:16 PM Page 11 INTRODUCCIÓN Este libro está orientado a desarrolladores de software, y diseñadores visuales y grá- ficos que deseen expandir su área de conocimiento de desarrollo hacia el ambiente web. Un lector con nociones iniciales podrá ver, durante los capítulos, una evolu- ción que le dará la oportunidad de aprender sin necesidad de saberes previos sobre la tecnología propuesta, Silverlight, mientras que aquel lector con experiencia po- drá encontrar en estas páginas una guía fundamental para aprender, con agilidad, conceptos sobre esta tecnología de Microsoft. Sin embargo, es necesario, para am- bos lectores, contar con conocimientos medios de desarrollo utilizando Microsoft C#, así como las técnica primordiales del funcionamiento y ejecución de la Web. Los temas propuestos en el libro fueron seleccionados para cubrir la mayor superfi- cie de conceptos sobre Silverlight 2, presentados de una manera progresiva de tal forma que el lector se sienta cómodo con su evolución y que aprenda a cada paso que da. Desde la recomendación y el uso de las herramientas ideales para el desa- rrollo bajo esta tecnología, tanto para diseñadores como para desarrolladores, gene- ramos ejemplos prácticos en cada capítulo, que abarcan desde HTML hasta C#, así como la aplicación de ASP.net y el uso de JavaScript. Silverlight es un modelo en ebullición. En el momento de lanzarse la versión 1, sus características eran limitadas; pero, al poco tiempo, Microsoft mejoró la tec- nología y sacó a relucir la segunda versión de Silverlight, versión de la que se ocupa este libro. Pero esta efervescencia, este cambio constante junto a la búsqueda de un mejor producto y de una tecnología superior, hicieron que, durante el tiem- po de escritura de este libro, Microsoft sacara la siguiente versión de Silverlight. En este momento, ya contamos con la versión 3 de Silverlight como una versión funcional y finalizada, por lo que incluimos un apartado, al final del libro, para in- troducir al lector en algunas de las nuevas funcionalidades provistas por Silverlight 3. De esta forma, con este texto, el lector no sólo aprenderá sobre Silverlight, sino que tendrá un bono extra al final, que le servirá de rampa de lanzamiento para abordar de lleno la nueva versión y permanecer siempre actualizado. PRELIMINARES 12 00_Silverlight.qxp 9/30/09 1:16 PM Page 12 Introducción a Silverlight 2 Iniciarse en el mundo de Silverlight 2 14 Navegar hacia el mundo de Silverlight 2 14 La experiencia de usuario y la portabilidad 16 Arquitectura de Silverlight 2 19 Microsoft .Net Framework 20 Interfaz de usuario y presentación 21 El código XAML 22 Herramientas de desarrollo para Silverlight 2 24 Resumen 27 Actividades 28 Capítulo 1 En este primer capítulo veremos el porqué de Silverlight 2, al mismo tiempo que hablaremos de problemas comunes en el desarrollo de software desde la óptica de las interfaces gráficas, los diseñadores y programadores, así como las limitaciones de las herramientas usadas por cada uno. Silverlight SERVICIO DE ATENCIÓN AL LECTOR: usershop@redusers.com 01_Silverlight.qxp 9/30/09 1:20 PM Page 13 mailto:usershop@redusers.com INICIARSE EN EL MUNDO DE SILVERLIGHT 2 Muchos cambios se han producido en el desarrollo web desde sus inicios. Se han sucedido mejoras sustanciales hasta la llegada de la Web 2.0 y, sin embargo, se si- guen buscando mejores formas y herramientas para trabajar en este fascinante mun- do. Recorramos esos años de evolución hasta la actualidad, cuando una de estas herramientas ve la luz para traer una solución a nuevas necesidades. Veamos, en este capítulo, los componentes clave de Silverlight 2: las herramientas de desarro- llo y diseño, su arquitectura y los elementos principales que le dan vida. Navegar hacia el mundo de Silverlight 2 Desde los inicios de la Web, ésta ha ido evolucionando, mutando y creciendo. Esta evolución se inició con la simple transferencia de texto, pasó por las imáge- nes y la captura de datos del usuario por parte del sistema, hasta llegar al manejo de contenido personalizado. Éste se genera para el usuario y por él, simulando casi el mismo comportamiento de aplicaciones desarrolladas para sistemas de es- critorio. Los cambios radicales en las tasas de transferencias de datos, así como en las capacidades de los equipos que servían esta información, también acom- pañaron dichos acontecimientos. Por supuesto, esta evolución no sólo fue de capa- cidades de hardware y prestaciones hacia el usuario. Al mismo tiempo, estuvo acom- pañada por software, lenguajes de programación y herramientas de desarrollo que, en conjunto, ayudaran a amortiguar la curva de complejidad sobre las necesida- des crecientes que tenían los sistemas. En definitiva, existían mayores requeri- mientos por parte de los usuarios y de los sistemas, por lo que la implementación en líneas de código y la puesta en marcha de los servicios necesitaron de herra- mientas que hicieran más simple este trabajo. En la actualidad, el desarrollo web está más pujante que nunca. Además, con el advenimiento de teorías (y prácticas) como el Cloud Computing o servicios de Internet totalmente dinámicos para correos electrónicos, confección de docu- mentos, redes sociales e interconexión de servicios, entre otros, debemos enten- der que la Web seguirá creciendo y mejorando durante mucho más tiempo. Esto nos llevará de vuelta a la idea antes tratada: mayor complejidad, mejoramiento en las herramientas y el soporte. Esta mejora en las herramientas que brindan soporte tanto al desarrollador como al diseñador se hace cada vez más necesaria y es mu- cho más requeridas por aquellos que se ven involucrados en el desarrollo web. De- bido a que desarrollar para la Web no se restringe al uso de una tecnología única y definitiva, el desarrollador web se ve en la necesidad imperativa de adquirir do- minio y conocimientos sobre decenas de tecnologías y lenguajes de programación, como XML, HTML, CSS, JavaScript, ActionScript, Lingo, PHP, C# y Java, entre muchas otras que forman el conjunto de la Web. Y es aquí donde se hace 1. INTRODUCCIÓN A SILVERLIGHT 2 14 01_Silverlight.qxp 9/30/09 1:20 PM Page 14 visible Silverlight. Este software forma partede dicho crecimiento y sirve como solución, ya que plantea una mejor forma de desarrollar contenido dinámico pa- ra la Web. Esto sucede no sólo en lo visual, sino también como herramienta de desarrollo basado en tecnologías comunes ya conocidas. No debemos equivocarnos al pensar que Silverlight constituye la estrategia de Microsoft para competir con el ya popular Flash, ex de Macromedia, y ahora de Adobe. Por el contrario, Silverlight representa una oportunidad de reutilizar el co- nocimiento ya adquirido sobre código basado en Microsoft.Net Framework, un modelo que soporta no sólo lenguajes desarrollados y mantenidos por esta empresa, sino que cuenta, por el contrario, con el soporte de compañías creadoras de lengua- jes tan populares como Borland C# Builder y Delphi, también de Borland. De es- ta forma, Silverlight trae consigo la posibilidad de enriquecer la experiencia visual en el cliente web, trabajando en cualquiera de los navegadores de Internet más conocidos. Puede interactuar y ser modificado por lenguajes como JavaScript, ex- tendiendo el concepto de HTML dinámico y A.J.A.X. (Asynchronous JavaScript and XML o, en castellano, JavaScript asíncrono y XML). También puede consumir ser- vicios web o cualquier elemento con la capacidad de retornar XML, al mismo tiempo que puede ser programado o desarrollado mediante aquel lenguaje que usamos to- dos los días para nuestros desarrollos, o con el que nos sintamos más cómodos para generar las líneas de código que darán vida a nuestra aplicación. Figura 1. Microsoft .Net Framework es el nexo entre el sistema operativo y nuestro código. Nos ofrece una plataforma de ejecución, librerías de código, acceso a datos y soporte para diferentes lenguajes. VB C++ C# J# ... Common Language Specification V isu a l S tu d io .N E T ADO .NET y XML Librería de clases base Common Language Runtime Sistema Operativo ASP .NET Web Forms • Web Services Mobile Internet Toolkit Windows Forms Iniciarse en el mundo de Silverlight 2 15 01_Silverlight.qxp 9/30/09 1:20 PM Page 15 La experiencia de usuario y la portabilidad Antes de la aparición de Microsoft .Net Framework, construir una aplicación de soft- ware requería diferentes habilidades y dependía del ambiente en el cual se desarrollara esta aplicación. Así, si las aplicaciones necesitaban desarrollarse para ser usadas bajo Windows, éstas requerían que su diseño visual se creara de manera especial para este modelo. Al mismo tiempo, debería contemplar las limitaciones que el lenguaje de pro- gramación trajera consigo. El diseño, entonces, quedaba encapsulado dentro del códi- go del lenguaje seleccionado, siendo casi imposible su implementación en otro lenguaje o en una nueva versión del mismo. Pensemos que, si una aplicación debía ser migrada a una nueva versión del lenguaje o, por necesidades de negocio, debía ser implemen- tada en otro lenguaje, toda la interfaz visual debía ser reescrita e implementada. A lo anterior debíamos sumar que, si existía un cambio de ambiente, es decir, si movíamos el desarrollo a un dispositivo móvil o a la Web, no sólo la interfaz debía ser reescrita, sino que también debía cambiar la lógica radicada en el código. Esto no sólo acarrea reinversión de tiempo y dinero, sino que, además, la interfaz (y tal vez la lógica de ne- gocio) nunca quedaría del todo igual, castigando la experiencia del usuario que se ha- bía acostumbrado a una herramienta ya construida e implementada. Con la primera versión del .Net Framework, Microsoft hace el intento inicial de generar portabilidad entre ambientes y lenguajes, separando la interfaz gráfica del lenguaje de programación y proveyendo componentes comunes para que los am- bientes similares puedan reutilizar las interfaces ya creadas. Gracias a esto, teníamos aplicaciones creadas para Windows, que también funcionaban en dispositivos móviles, aunque aún quedaba trabajo por hacer en cuanto a desarrollo web y Windows, ya que estos dos ambientes seguían siendo incompatibles. Con la versión 3.0 de Microsoft .Net Framework, se introdujo un nuevo enfoque por medio de un es- quema XML para la confección y manipulación de interfaces de usuarios: ya no aparecían los típicos botones y cajas de texto rígidas comunes en cualquier aplica- ción de escritorio. Este esquema, llamado XAML (eXtensive Application Markup Language, o en castellano, Lenguaje Extensible de Formato para Aplicaciones) por sus siglas en inglés, le permitió al desarrollador crear otro tipo de aplicaciones a nivel visual. XAML fue explotado por WPF (Windows Presentation Foundation), pero muy rápido se entendió que XAML tenía mucho futuro por delante. 1. INTRODUCCIÓN A SILVERLIGHT 2 16 � La experiencia demuestra que la primera reacción por parte de los desarrolladores al ver Silverlight es asociarlo en forma directa con la competencia de Adobe Flash. Silverlight persigue objetivos similares, pero se separa de Adobe Flash en ciertos aspectos técnicos, como lengua- jes de programación y arquitectura. ¿QUÉ ES SILVERLIGHT? 01_Silverlight.qxp 9/30/09 1:20 PM Page 16 Figura 2. CardSpace, WCF, WPF y WF (Workflow Foundation) se agregan como parte de Framework 3 sobre la versión 2 de Framework. Silverlight 2 usa, para la representación visual de sus elementos, XAML. Las mis- mas etiquetas que, como decíamos antes, también son soportadas por aplicaciones de escritorio construidas con WPF. Esto genera una ventaja significativa sobre la creación de aplicaciones y la adaptación del usuario a nuevas tecnologías. Pen- semos que, al tener un componente común como XAML para la representación visual de elementos de la interfaz gráfica, el esfuerzo aplicado para la creación de uno de estos componentes puede ser reutilizado y explotado en otros ambientes, no sólo en aquel para el cual Silverlight fue ideado. Pensemos entonces en una aplicación de escritorio, con cientos de usuarios que la usan durante meses o años y, de un momento a otro, se encuentran usando la misma aplicación, pero den- tro de un navegador web, con los mismos botones, el mismo contenido visual e igual comportamiento. Uno de los lados más rugosos en la implementación de un sistema está atado a la adopción de éste por parte del usuario, y es en los cambios de plataformas y ambientes donde se producen las discordias. Aquí es necesario Microsoft .NET Framework Versión 2.0 CardSpace WPF WCFWF Iniciarse en el mundo de Silverlight 2 17 �� Microsoft .Net Framework no sólo soporta los lenguajes de programación propuestos por Mi- crosoft. También podemos encontrar otros como Boo, Icc, Clarion#, Cobol, Corba, Eiffel, Fortran, Lisp, PHP, Perl y más. Esto puede resultar en especial interesante, ya que no necesitamos apren- der un nuevo lenguaje para desarrollar en Microsoft .Net Framework. MICROSOFT .NET Y LENGUAJES 01_Silverlight.qxp 9/30/09 1:20 PM Page 17 invertir mayor esfuerzo para que esta nueva idea sea aceptada. Por tal motivo, nos hará falta toda la ayuda posible al momento de hacer este cambio. En la Web, las aplicaciones tienen más representatividad y, por ende, su atractivo y su facilidad de uso necesitan potenciarse. Esta mejora es llevada a cabo por la implementación de soluciones que conjugan JavaScript y XML, dando como pro- ducto la pieza conocida como A.J.A.X., donde bien podemos encontrar cientos de modelos listos para ser implementados. Pero el desarrollo sigue enfocándose en la manipulación del HTML que, sin desmerecer sus posibilidades, siempre llegará a un techo máximo, relacionado con las capacidades del mismo modelo HTML. En comparación con el modelo de aplicaciones de escritorio, la interactividad ofrecida por este último es muy superior a la que presenta HTML, y es aquí donde Silverlight, una vez más, explota lo mejor de estos dos mundos y lo lleva en forma directa al ámbito de aquel que pierde en comparación: el del HTML. Figura 3. Silverlight se nutre de cada una de las principales características de los dos mundos, generando una mejor experiencia de usuario e independenciaen plataformas. Navegadores web CSS/HTML JavaScript/AJAX ASP.net Aplicaciones de escritorio XAML Framework .Net 1. INTRODUCCIÓN A SILVERLIGHT 2 18 ��� Es importante entender las diferencias entre las versiones de Microsoft .Net Framework. Sólo a partir de la versión 3, se incorpora el uso de XAML, así como WPF, pero el núcleo de este Fra- mework se mantiene idéntico al de la versión 2. Al desarrollar para cualquiera de estas nuevas plataformas, deberemos elegir una versión de Framework 3 o superior. VERSIONES DE MICROSOFT .NET FRAMEWORK 01_Silverlight.qxp 9/30/09 1:20 PM Page 18 Como observamos en la Figura 3, Silverlight toma lo mejor de los dos mundos. Por un lado, los controles y componentes versátiles propuestos por el desarrollo de es- critorio y, por el otro, la portabilidad entre plataformas y la rapidez de la actuali- zación de aplicaciones a miles de usuarios al mismo tiempo que otorga Internet. Esta versatilidad y portabilidad entre plataformas, tanto de escritorio como web, no sería posible sin un lenguaje común de representación de controles. XAML es el lenguaje que nos dará esta posibilidad no sólo para el desarrollo, sino que también brinda la oportunidad de aumentar la versatilidad de las interfaces, poder llevar el comportamiento de las aplicaciones de escritorio a la Web, posibi- litar la adopción por parte del usuario final de manera independiente del sistema, mediante el aumento de la calidad y de la velocidad en el desarrollo, y otros pun- tos ganados con la utilización de XAML y Silverlight. Arquitectura de Silverlight 2 Al comienzo de nuestro recorrido, nombramos algunas de las características de Sil- verlight que, al mismo tiempo, definen su planteo arquitectónico. Dijimos que Silverlight está enfocado a la Web y que es ejecutado por el navegador web. Es- to se consigue gracias a un plugin o aditivo que hará las veces de gestor o in- térprete. Este componente ronda los 5 megabytes, lo que constituye una suma muy pequeña en relación con su potencia. En la actualidad, es soportado por los principales navegadores de Internet como Internet Explorer, FireFox y Safari, así como los sistemas operativos Windows (con base en Windows XP con Service Pack 2 y hasta Windows 7), Mac OS X 10+ y Linux. Pero Silverlight, aunque hemos hecho hincapié en la gestión de interfaces de usuario, no sólo es un lienzo donde podemos crear animaciones vectoriales, sino, muy por el contrario, consiste en una plataforma liviana de desarrollo con soporte para SOA (Service Oriented Architecture o, en castellano, Arquitectura Orientada a Servicios), re- des, manejo de datos, y más. Como observamos en la Figura 4, Silverlight va mucho más allá y nos entrega, por sobre todas las cosas, acceso a las últimas tecnologías y patrones de desarrollo de software. Podemos separar y enumerar las diferentes carac- terísticas sobre la base de su área de trabajo, como veremos a continuación. Iniciarse en el mundo de Silverlight 2 19 �� Por lo general, es difícil lograr que un usuario adopte una nueva aplicación cuando está acos- tumbrado a la que usa desde hace años. Este problema de adopción se ve potenciado en quienes nunca usaron una computadora. Pero, si podemos reproducir en el ordenador lo que el usuario está acostumbrado a utilizar en la vida real, la adopción será casi transparente. LA DIFÍCIL ADOPCIÓN POR PARTE DE LOS USUARIOS 01_Silverlight.qxp 9/30/09 1:20 PM Page 19 Figura 4. En este diagrama podemos observar la arquitectura soporte completa de Silverlight 2. Microsoft .Net Framework Con respecto a las líneas de código y de clases ya implementadas para ser usadas por el desarrollador de código, el Framework disponible cubre todas las áreas necesarias para interactuar con datos y hasta con lenguajes propios de la Web. .NET para Silverlight Centro de presentación Manejo de navegador WCF REST RSS/ATOM SOAP Librería para Microsoft AJAX Motor JavaScript POX JSON WPF Controls Data Binding Layout Editing Data Motor de ejecución CLR XAML LINQ XLINQ XML Centro de interfaz gráfica Vector Animation Text Images Integrado con la red Integrado con DOM Servicio de aplicaciones Instalador Periféricos Keyboard Mouse Ink Multimedia VC1 WMA MP3 DRM Media BCC Generics Collections Cryptography Threading DLR Iron Python Iron Ruby Jscript 1. INTRODUCCIÓN A SILVERLIGHT 2 20 01_Silverlight.qxp 9/30/09 1:20 PM Page 20 • LinQ y XLinQ: soporte especializado para llevar a cabo el manejo de colec- ciones de objetos, acceso a datos y XML. Con LinQ podremos crear consultas integradas con el lenguaje de programación. • WCF (Windows Communication Foundation): plataforma de comunicación para acceso a servicios web, servicios remotos y peticiones HTTP, entre otros. • Librería de clases base: acceso a las librerías de clases de Microsoft .Net Frame- work, que nos ofrece soporte para el manejo de cadenas de texto, expresiones regu- lares, serialización de datos, manejo de internacionalización de aplicaciones y más. • CLR (Common Language Runtime): motor de Microsoft .Net que se encarga del manejo de la memoria y demás puntos de contacto con el sistema operativo. • DLR (Dynamic Language Runtime, en castellano Lenguajes Dinámicos): soporte pa- ra lenguajes de programación como JavaScript, Iron Phyton e Iron Ruby. • Almacenamiento aislado: permite generar sectores de almacenamiento de archi- vos e información de manera aislada y para usuarios específicos. Interfaz de usuario y presentación Silverlight también presenta una gran cantidad de funcionalidad en cuanto a su pre- sentación visual y puede manejar sonidos, imágenes y videos, así como una serie de controles y componentes listos para usar. • Video y sonido: inclusión de soporte de formatos de video y sonido comunes co- mo MP3 y WMA. Incluye capacidades de streaming. • Imágenes: capacidad de despliegue de imágenes tanto vectoriales como mapas de bits en sus formatos más comunes, texto y animaciones. • Enlazado de datos: capacidad de enlazado de fuentes de datos automática que fa- cilita el despliegue de la información desde diferentes fuentes de datos. • Controles: set de controles listos para usar que brindan la posibilidad de crear nuestro propio set de controles y de reusarlos en diferentes aplicaciones. • XAML: implementación de eXtensible Application Markup Language para la con- fección de las interfaces. Éstas son creadas sobre la base de XML. Como pudimos ver hasta aquí, Silverlight no es un simple visualizador de ani- maciones, sino un avanzado complemento de desarrollo que hace uso de las principales tecnologías Microsoft y que permite desenvolvernos con soltura al momento de desarrollar aplicaciones sobre éste. Silverlight, entonces, nos ofrece la potencia de los lenguajes de programación uti- lizados, por lo general, en el desarrollo de aplicaciones de escritorio y web, ade- más, de su posibilidad de interacción con bases de datos y servicios remotos. También, nos brinda la elegancia de sus vistosas interfaces visuales, que pueden interactuar con lenguajes cliente, tales como JavaScript, enmarcado en un nave- gador web, sin estar atado a un sistema operativo ni a un navegador específico. Iniciarse en el mundo de Silverlight 2 21 01_Silverlight.qxp 9/30/09 1:20 PM Page 21 Figura 5. En la imagen, observamos los controles visuales listos para usar y su apariencia por defecto. El código XAML Ya hemos nombrado a XAML como uno de los componentes fundamentales de Silverlight, pero veamos un poco más en profundidad de qué se trata exactamen- te. XAML es un lenguaje declarativo, formado por etiquetas descriptivas para cada uno de los componentes que Silverlight pueda representar. XAML basa el concepto descriptivo en el conocido modelo de XML. Gracias a esta cualidad (ba- se de XML), entender la estructura de XAML resulta simple e intuitivo. Veamos a continuación un ejemplo de elementos XML simples: 1. INTRODUCCIÓN A SILVERLIGHT 2 22 ��� Debido a queSilverlight puede ser desarrollado con los principales lenguajes de programación soportados por Microsoft .Net Framework, éste brinda pleno soporte para la programación orien- tada a objetos y puede absorber todos los beneficios inherentes a este modelo de programación. PROGRAMACIÓN PROFESIONAL 01_Silverlight.qxp 9/30/09 1:20 PM Page 22 <Contenedor> <Elemento Atributo=”Valor”> Contenido del Elemento </Elemento> </Contenedor> Etiquetas o tags descriptivas dentro de caracteres < y >. Cada elemento es iniciado con un nombre específico y siempre deberemos señalar su cierre utilizando el mismo nom- bre más los caracteres </, lo que especificará la finalización del tag. En el ejemplo, tam- bién podemos notar cómo un elemento puede contener otros elementos, así como atri- butos descriptivos y valores dentro del mismo nodo. XAML sigue este mismo patrón: <Canvas Width=”300” Height=”300” Background=”Brown”> <TextBlock x:Name=”Texto” Text=”Hola Mundo!”></TextBlock> </Canvas> El ejemplo en XAML nos demuestra que la estructura es similar al del que hemos usado para XML, con la salvedad de que las etiquetas o tags ya se encuentran defi- nidas y asociadas a los elementos visuales que representan. En el ejemplo, colocamos un contenedor que tendrá un tamaño en ancho y en alto de 300 pixeles, y color de fondo azul. Dentro de este contenedor, encontramos otro control utilizado para la visualización de textos, que mostrará la frase Hola Mundo! en pantalla. Figura 6. Resultado de nuestra primera prueba con XAML y Silverlight. Iniciarse en el mundo de Silverlight 2 23 01_Silverlight.qxp 9/30/09 1:20 PM Page 23 El ejemplo nos sirve, al mismo tiempo, para mostrar otros atributos importantes den- tro del mundo de XAML y de Silverlight. Tanto el elemento Canvas como TextBlock son controles preestablecidos por el entorno de Silverlight. Canvas es utilizado para definir un elemento contenedor de otros componentes, y TextBlock nos da la posibilidad de mostrar texto en pantalla en forma de bloques. La combinación de estos elementos produce lo que aparece en la Figura 6, pero el concepto va más allá porque muestra cómo, anidando elementos, podemos conseguir diferentes efectos visuales. Así, es posible mezclar un control del tipo botón con un control utilizado para mostrar imágenes o videos y obtener como resultado un botón en cuyo fondo se reproduce un video. Por último, el atributo x:Name es el que le otorga, al con- trol, la capacidad de tener un nombre único, descriptivo, que podrá ser usado por el lenguaje de programación que elijamos para darle funcionalidad a la interfaz vi- sual. Con este atributo, podremos cambiar el texto representado al principio en tiem- po de ejecución, sobre la base de la reacción de un evento por parte del usuario o por parte del flujo de nuestra aplicación. A medida que avancemos en el libro, nos introduciremos dentro de XAML; también en los diferentes componentes y con- troles disponibles por parte del entorno de desarrollo y librerías de objetos. Herramientas de desarrollo para Silverlight 2 Si tenemos en cuenta que una de las principales cualidades de Silverlight es el poten- ciamiento visual en interfaces de usuario, sería muy interesante contar con herramien- tas para su correcto diseño y diagramación. Así, de manera sencilla, nos guiarían en la confección de los elementos XAML, su estructura, controles anidados, enlazado a fuen- tes de datos, entre otros. Microsoft nos provee de dos herramientas principales, cada una de ellas enfocada a cubrir una de las ramas involucradas en la generación de ele- mentos Silverlight. Por un lado, para desarrolladores de software, la herramienta por excelencia es Microsoft Visual Studio en su versión 2008. Aunque la nueva versión de esta herramienta puede obtenerse con facilidad (Visual Studio 10), la que hemos nombrado es suficiente para emprender nuestra labor. Microsoft Visual Studio 2008 resultará ideal debido a su soporte de Microsoft .Net Framework 3.5, herramienta que trae consigo una serie de plantillas para Silverlight 2. 1. INTRODUCCIÓN A SILVERLIGHT 2 24 ��� Gracias a la extensibilidad de XML como lenguaje de etiquetas es que XAML genera un nuevo sub- conjunto de estas etiquetas para la representación de controles en el entorno de Silverlight. Así lo hace flexible en la creación de los elementos, fácil de entender y portable entre ambientes. XAML Y XML 01_Silverlight.qxp 9/30/09 1:20 PM Page 24 Figura 7. Visual Studio 2008 otorga pleno soporte para Silverlight 2 mediante plantillas como las que observamos en la imagen. De cualquier manera, tendremos que instalar, además de la herramienta mencio- nada, el Service Pack 1 para ésta. La instalación del Service Pack 1, junto con la de las herramientas de desarrollo de Silverlight 2, incluirán en Visual Studio 2008 las plantillas de la Figura 7. Debido a que la versión 2 de Silverlight vio la luz después que la herramienta de desarrollo, este procedimiento resulta la única forma de po- der ver los asistentes y demás componentes dentro de la mencionada herramienta. Además de las plantillas que acelerarán el desarrollo, podremos encontrar una serie de controles y componentes para su uso inmediato que, si bien, como veremos más ade- lante, es posible construirlos por nuestra cuenta desde cero, toda la lógica de funcio- nalidad ya se encuentra contenida y probada en ellos. Esto nos ahorra tiempo de tra- bajo al no tener que desarrollar algo ya existente. Componentes como botones, calendarios y cajas de texto son sólo algunos de los que encontraremos dentro del aba- nico de posibilidades. Como vemos en la Figura 8, Visual Studio 2008 nos presenta una lista completa de controles listos para usar que, como ya dijimos, tienen toda la lógica que necesitarán impresa en el mismo componente, y, además, está pronta para usar. Iniciarse en el mundo de Silverlight 2 25 � Además del Service Pack 1 para Visual Studio 2008, también deberíamos contar con el con- junto de herramientas de Silverlight. Éstas pueden ser descargadas desde la dirección www.microsoft.com/downloads, ingresando Silverlight 2 tools for Visual Studio 2008 como criterio de búsqueda. DESCARGA DE SILVERLIGHT 2 TOOLS PARA VISUAL STUDIO 2008 01_Silverlight.qxp 9/30/09 1:20 PM Page 25 http://www.microsoft.com/downloads Figura 8. Grillas, cajas de texto y listas desplegables son sólo algunos de los controles listos para usar incluidos en Visual Studio 2008. Por otro lado, también existe una herramienta para diseñadores gráficos que no cuenten con experiencia en el desarrollo de software. Con una interfaz similar a la de herramientas para manejo fotográfico, Microsoft Expression Blend 2 le permite al diseñador gráfico, y por qué no al desarrollador, construir XAML de manera rápida y amigable, como toda herramienta WYSIWYG (What you see is what you get o en castellano Lo que ves es lo que obtienes) por sus siglas en in- glés. Esto quiere decir que, al trabajar con Microsoft Expression Blend 2, el diseño que planteemos será igual al resultado final en el momento de ejecución de la aplicación de Silverlight. Deberemos usar Microsoft Expression Blend 2 si estamos habituados a la creación de imágenes vectoriales o si sólo buscamos ace- lerar el desarrollo de componentes Silverlight. Veremos más a fondo las cualida- des de Microsoft Expression Blend 2 a lo largo de los capítulos, con suficiente detalle como para poder utilizarlo con cierta seguridad. Por último, cabe mencionar que Microsoft Visual Studio 2008 y Microsoft Ex- pression Blend 2 se compenetran de tal forma que, por lo común, nos veremos creando código en la primera herramienta, abriendo y editando el mismo pro- yecto en la segunda, para terminar con algunos retoques artísticos o acelerar el enlazado de datos en nuestro trabajo. En la Figura 9, podemos observar cómo un proyecto creado en Visual Studio 2008 puede ser abierto y manipulado en for- ma directa con Microsoft Expression Blend 2. Debido al mismo motivo citado en el caso de Visual Studio2008, es necesario instalar un conjunto de herramientas en Microsoft Expression Blend 2 para con- tar con plantillas que den soporte a Silverlight 2. En este caso, el Service Pack 1 para Microsoft Expression Blend 2 nos otorgará la prestación. 1. INTRODUCCIÓN A SILVERLIGHT 2 26 01_Silverlight.qxp 9/30/09 1:20 PM Page 26 Figura 9. Microsoft Expression Blend 2 trabajando sobre una solución creada en Microsoft Visual Studio 2008. A lo largo del libro haremos referencia a estas dos herramientas, que serán usadas para los distintos ejemplos que plantearemos. Por tal motivo, es recomendable con- tar con las herramientas instaladas en nuestro equipo antes de continuar con los siguientes capítulos. Es posible también realizar los ejemplos con las versiones gra- tuitas de Visual Studio 2008 (Visual Studio 2008 Express), aunque no podemos garantizar que los ejemplos de interfaz y otros aspectos concuerden con lo que los usuarios de estas versiones verán en sus equipos. Iniciarse en el mundo de Silverlight 2 27 … RESUMEN Silverlight puede ser una herramienta extremadamente potente con soporte basado en Microsoft .Net Framework, que nos otorga la posibilidad de desarrollar en el lenguaje y la forma que mejor nos convenga. Desde la versión 1 de Silverlight hasta la actual, ha habido mejoras notables, con mayor funcionalidad y prestaciones tanto para el desarrollador como para el diseñador visual. El usuario final se ve beneficiado al tener que descargar un plugin de tamaño pequeño y que trabaja en casi todos los navegadores y sistemas operativos de la actualidad. 01_Silverlight.qxp 9/30/09 1:20 PM Page 27 28 � PREGUNTAS TEÓRICAS 1 ¿En qué modelo se basa el código XAML pa- ra representar los elementos de la interfaz? 2 ¿Subconjunto de qué otro modelo de desa- rrollo visual para Windows podríamos con- siderar a Silverlight? 3 ¿Qué versión de Microsoft .Net Framework necesitamos, como mínimo, para trabajar con Silverlight 2.0? 4 ¿Qué sistemas operativos y navegadores web soportan la ejecución de Silverlight 2.0? 5 ¿Qué herramienta resulta ideal para desa- rrolladores, que les permita potenciar el desarrollo de aplicaciones Silverlight 2.0? 6 ¿Los diseñadores visuales cuentan con al- guna herramienta de software que los ayu- de a crear contenido para Silverlight 2.0? 7 ¿Es necesario instalar algún aditamento en la herramienta de desarrollo? 8 ¿Silverlight 2.0 provee algún conjunto de componentes listos para usar? 9 ¿Por qué es importante crear interfaces atractivas e intuitivas en las aplicaciones? 10 ¿Cómo se llama el modelo de desarrollo para la Web que conjuga el uso de XML y JavaScript? ACTIVIDADES EJERCICIOS PRÁCTICOS 1 Diríjase al sitio web de la W3C (www. w3.org/XML) para aprender más sobre XML. 2 Para introducirse mejor en el mundo de Silverlight, intente ampliar el ejemplo pro- puesto en este capítulo, modificando el tipo de fuente y el color de fondo de la apli- cación creada. 3 Para conocer más sobre desarrollo con Microsoft .Net, tome el curso gratuito del Desarrollador 5 Estrellas desde el sitio web de Microsoft. Este curso ayuda a en- tender términos utilizados en este libro. La URL es www.mslatam.com/latam/msdn/ comunidad/dce2005. 4 Instale Microsoft Expression Blend 2 y déjelo listo para trabajar en el siguiente capítulo. 5 Una vez instalados Visual Studio 2008 y Microsoft Expression Blend 2, ingrese en www.silverlight.net, el sitio oficial de Silverlight, descargue los ejemplos y analícelos. Esto ayuda a entender con mayor facilidad esta tecnología. 01_Silverlight.qxp 9/30/09 1:20 PM Page 28 http://www.w3.org/XML http://www.w3.org/XML http://www.mslatam.com/latam/msdn/ http://www.silverlight.net Microsoft Expression Blend 2 Un paseo por Expression Blend 2 30 Silverlight 2 con Expression Blend 2 30 Unir los extremos 32 Un recorrido por Expression Blend 2 37 Explorador de soluciones 38 Página inicial de Silverlight 2 39 La página App.xaml 40 El entorno de Expression Blend 2 43 La barra de herramientas 46 Crear nuestra primera aplicación con Expression Blend 2 48 Resumen 53 Actividades 54 Capítulo 2 ¿Cuáles son las herramientas disponibles para desarrollar aplicaciones Silverlight? ¿Cómo podemos aumentar nuestra productividad a la hora de escribir XAML? Éstas son algunas de las preguntas que abordaremos en este capítulo. Silverlight SERVICIO DE ATENCIÓN AL LECTOR: usershop@redusers.com 02_Silverlight.qxp 9/30/09 1:23 PM Page 29 mailto:usershop@redusers.com UN PASEO POR EXPRESSION BLEND 2 En el capítulo anterior, nos introdujimos en el mundo de Silverlight 2. Vimos algunas de sus características, los elementos que lo componen y las principales he- rramientas de desarrollo usadas para la creación de aplicaciones y componentes de Silverlight. Una de estas herramientas, Microsoft Expression Blend 2, es usada por los diseñadores visuales y por los desarrolladores como un suplemento para los detalles visuales avanzados. En este capítulo, ahondaremos en el uso de esta herramienta y su interacción con Silverlight 2, cómo crear animaciones así como también elementos compuestos, para finalizar con la creación de nuestra primera aplicación Silverlight 2. Este contenido está dirigido, en especial, a diseñadores visuales que quieran incursionar en el uso de Expression Blend 2 como herramienta de diseño para software y a desarrolladores de software que necesiten modificar, de manera rápida, interfaces visuales basadas en XAML. Silverlight 2 con Expression Blend 2 Desde los inicios de su desarrollo, este software siempre se enfocó, de manera prioritaria, en las líneas de código y en la solución del problema propuesto. Es- to sucede ya que, justamente, fueron el código y el problema por corregir los que motivaron la creación de soluciones de software, que provean una respuesta programática a la dificultad planteada. Este enfoque, el de la solución del problema, causó que en el desarrollo de software primara la capacidad y la calidad de reso- lución de un problema por encima del enfoque interactivo entre la aplicación y el ejecutor de ese programa. Así, dentro de la historia del software y las compu- tadoras, por carencias o por el enfoque antes citado, el trabajo se hacía mediante tarjetas perforadas, las cuales se apilaban en grandes cajas y que poseían, en sí mis- mas, la resolución de una de las partes que solucionaba el todo del problema. Sin ninguna duda, este sistema era manejado sólo por el desarrollador de este software primario y no por alguien ajeno a la informática de la época. Desde ese momen- to de la historia y hasta la actualidad, se produjeron cambios en la manera en que el usuario interactuaba entonces e interactúa ahora con esta pieza de software. Sin 2. MICROSOFT EXPRESSION BLEND 2 30 �� A pesar de más de 40 años de evolución en la ingeniería de software, sólo en la actualidad se po- ne especial énfasis en las interfaces visuales y en cómo éstas pueden ser parte de la solución del problema al que el usuario se debe enfrentar a diario. Así, vemos aparecer nuevas tecnolo- gías multitáctiles en sistemas operativos, o de captura de movimientos en consolas de juegos. LA EVOLUCIÓN DE LAS INTERFACES 02_Silverlight.qxp 9/30/09 1:23 PM Page 30 embargo, éste seguiría encontrándose una y otra vez ante una herramienta que, aunque en esencia cubriera sus necesidades funcionales y resolviera el dominio del problema planteado, no abarcaría los conceptos de usabilidad, ergonomía visual o interactividad entre el hombre y la máquina. Figura 1. En el Mix 2009 realizado por Microsoft, uno de los temas por tratar fue la creación de interfaces gráficas. Después de algunas décadas marcadas por este comportamiento de parte de la ingeniería de software y de aquellos que la han practicado, de alguna forma, el usuario terminó acostumbrándose a la idea de obtener aplicaciones o piezas de software que aparecen, como grandes hitos visuales y pantallas monocromáticas. Esto sucede, incluso, enpleno auge de las tarjetas aceleradoras de video con capacidades vi- suales que diez años atrás se reservaban sólo a inmensos ordenadores destinados a la producción de efectos cinematográficos. Muy pocos desarrolladores de software contemporáneos, incluidas las empresas, contemplan como parte de sus desarro- llos la inclusión de esta temática. Sólo con la llegada de la Web, algunos de ellos adicionaron esto como una necesidad comercial, pero, en muy pocos casos, co- mo una realidad para brindar un mejor producto que, además de solucionar un Un paseo por Expression Blend 2 31 � Es importante incluir en los proyectos de desarrollo de software a un diseñador gráfico que cuente con experiencia en interfaces de usuario. No debemos desestimar este punto en nues- tros desarrollos. El éxito de nuestro producto no está marcado sólo por las líneas de código, la usabilidad es un aspecto muy importante. CONSULTEMOS A UN DISEÑADOR 02_Silverlight.qxp 9/30/09 1:23 PM Page 31 problema, resulte optimizado en lo que a interactividad con el usuario se refiere. Por supuesto, la implantación de este concepto dentro del desarrollo de software acarreó ciertos problemas que han tenido que ser resueltos por fuerza bruta más que por inteligencia, debido a que la solución planteada, la de incorporar mejoras vi- suales e interactivas, requiere de la presencia de otras ciencias. Esas ciencias están alejadas del desarrollo de software, por lo que el problema resulta bastante claro al tener que unir, de alguna forma, extremos que hablan idiomas diferentes. Unir los extremos En la actualidad, el mayor impedimento en la creación de aplicaciones visuales y el trabajo realizado por los expertos en esta materia es causado por las herramien- tas que éstos utilizan. Cuando en un proyecto de software es necesaria la interven- ción de diseñadores gráficos especializados en experiencia de usuario, éstos plasman su trabajo en herramientas más ligadas a las doctrinas del diseño gráfico y las artes visuales que a las del desarrollo de software. Entonces, el problema recae en que tanto el diseñador como el desarrollador hablan idiomas diferentes: los primeros se refieren a colores, movimiento, disposición de elementos y formas, entre otros aspectos, mientras que los segundos necesitan saber qué mostrar y cómo se reali- zará el código que contenga la lógica. Al mismo tiempo, los diseñadores suelen desconocer las limitaciones de las plataformas donde serán creados los productos de software y tienden a generar elementos visuales extremadamente atractivos, pe- ro con costos elevados en su implementación por parte del desarrollador. Al final y sin ser lo último, el producto resultante del diseñador será un conjunto de imá- genes o un esquema que mostrará lo pretendido de manera visual para la aplica- ción de software, y le deja al desarrollador la tarea de volver a armar esto dentro de las líneas de código, quien no lo conseguirá con exactitud al compararlo con lo propuesto en un principio por el diseñador. Y es aquí donde han surgido herramientas que traducen, de alguna forma, esto que el diseñador piensa y plasma en algo que el desarrollador pueda usar. Así, es posible encontrar herramientas muy potentes como Adobe Fireworks donde, por medio del modelo visual creado por el diseñador, el desarrollador obtiene un conjunto de imágenes y código HTML. A pesar de eso, este tipo de herramientas acarrea un problema, ya que se enfocan en el diseñador y no en el desarrollador, creando código HTML que, basado en el dibujo propuesto, generan HTML poco útil para su implementación, como podemos ver a continuación. El siguiente es el resultado HTML generado para la Figura 2. <tr> <td><img src=”images/spacer.gif” width=”103” height=”1” border=”0”alt=”” /></td> 2. MICROSOFT EXPRESSION BLEND 2 32 02_Silverlight.qxp 9/30/09 1:23 PM Page 32 <td> [...41 líneas eliminadas ...] <td colspan=”2”><img name=”Untitled1_r4_c1” src=”images/Untitled- 1_r4_c1.gif” width=”112” height=”60” border=”0” id=”Untitled1_r4_c1” alt=”” /></td> <td><img src=”images/spacer.gif” width=”1” height=”60” border=”0” alt=”” /></td> </tr> Y, si bien este código puede ayudar, resulta imposible de usar para el desarrollador, por lo que éste se verá forzado a reescribir partes o su totalidad para poder obtener código que le sea útil. Para esto utilizará sólo código HTML, debido a que a éste se le pueden agregar cuestiones programáticas a diferencia del anterior. <span>Filtro de búsqueda</span> <br> <select> <option></option> <option></option> <option></option> </select> Figura 2. A la derecha podemos ver lo que consiguió el desarrollador como resultado del concepto ideado por el diseñador. Un paseo por Expression Blend 2 33 02_Silverlight.qxp 9/30/09 1:23 PM Page 33 El problema es claro: estas herramientas hacen las veces de traductores, pero no de ge- neradores. Traducen lo que el diseñador quiso decir a algo que el desarrollador pueda entender, pero, en este proceso de traducción, las herramientas no traducen funciona- lidad, por lo que el desarrollador no la obtendrá y deberá retraducirla por su cuenta. La diferencia sustancial sobre este concepto por parte de Expression Blend 2 reside en que no es un traductor, sino un generador de funcionalidad, con la característica de que para el diseñador la herramienta se comportará como cualquier otra herra- mienta de las que está acostumbrado a usar. Sin embargo, a medida que diagrama y diseña los contenidos visuales, ésta generará funcionalidad lista para ser implementa- da por el desarrollador de software, como podemos observar en el siguiente código: <Grid x:Name=”LayoutRoot” Background=”White”> <TextBlock Height=”23” HorizontalAlignment=”Left” Margin=”96,32,0,0” VerticalAlignment=”Top” Width=”174” Text=”Filtro de búsqueda” TextWrapping=”Wrap” FontFamily=”Aharoni” FontSize=”18”/> <ComboBox Height=”42” HorizontalAlignment=”Left” Margin=”96,59,0,0” Style=”{StaticResource ComboBoxStyle1}” VerticalAlignment=”Top” Width=”160” OpacityMask=”{x:Null}”> <ComboBox.Foreground> <LinearGradientBrush EndPoint=”0.5,1” StartPoint=”0.5,0”> <GradientStop Color=”#FFF36767”/> <GradientStop Color=”#FFFFFFFF” Offset=”1”/> </LinearGradientBrush> </ComboBox.Foreground> <ComboBox.Background> <LinearGradientBrush EndPoint=”0.5,1” StartPoint=”0.5,0”> <GradientStop Color=”#FFC07070”/> <GradientStop Color=”#FF0F0000” Offset=”1”/> </LinearGradientBrush> 2. MICROSOFT EXPRESSION BLEND 2 34 �� Existen especializaciones en el desarrollo de software que se enfocan en la optimización de las interfaces visuales, llegando al punto de calcular la cantidad de clics que deberá hacer un usuario para conseguir realizar una acción determinada. La implementación de estas técnicas produce mayor aceptación de los productos por parte de los usuarios. OPTIMIZACIÓN DE LA INTERFAZ 02_Silverlight.qxp 9/30/09 1:23 PM Page 34 </ComboBox.Background> </ComboBox> </Grid> El diseñador verá, en lugar del código anterior, un modelo como el que se mues- tra en la figura que aparece a continuación: Figura 3. Una lista desplegable creada con Expression Blend 2, que generará código XAML listo para ser usado por el desarrollador. Como el desarrollador obtiene código que se adapta a sus necesidades, puede en- focarse directamente en la solución del problema. A modo de ejemplo, en las si- guientes líneas de código vemos cómo el desarrollador agrega algunas líneas de código C# en la clase asociada al código XAML para generar funcionalidad so- bre el producto del diseñador: public partial class Page : UserControl { public Page() { // Required to initialize variables InitializeComponent(); this.ComboBox.Items.Add(“Item 1”); this.ComboBox.Items.Add(“Item 2”); Un paseo por Expression Blend 2 35 02_Silverlight.qxp 9/30/09 1:23 PM Page 35 this.ComboBox.Items.Add(“Item 3”); } } El resultado de esta implementación de código podemos verlo a continuación: Figura 4. Como observamos en esta imagen, el resultado propuesto por el diseñadory la implementación del desarrollador son idénticas. Microsoft Expression Blend 2, entonces, sirve de nexo entre los dos elementos involucrados en el desarrollo, tanto para diseñadores como para desarrolladores. De esta manera se logra que los productos resultantes en ambos casos sean com- patibles entre sí, para que ninguno de los profesionales involucrados tenga la ne- cesidad de salir de su ámbito natural de trabajo. El resultado final será, entonces, que el diseñador obtendrá en la pieza de software el comportamiento y la apariencia visual, tal como los había ideado, mientras que el desarrollador no se verá forzado a intentar traducir estas ideas a elementos programáticos y se dedicará exclusiva- mente a la funcionalidad y a la resolución del problema. 2. MICROSOFT EXPRESSION BLEND 2 36 ��� Contar con un diseño visual de la aplicación de manera temprana no sólo sincronizará a los miembros del equipo de desarrollo, ya que todos tendrán una idea general del producto final, sino que puede servir de disparador de retroalimentación por parte del cliente al ver con antelación la idea del producto terminado. PROTOTIPO DEL PRODUCTO 02_Silverlight.qxp 9/30/09 1:23 PM Page 36 Un recorrido por Expression Blend 2 Al iniciar Expression Blend 2 o al crear un nuevo proyecto con él, podemos elegir entre cuatro tipos diferentes. Tenemos dos proyectos específicos para Silverlight y sus diferentes versiones, pero también podemos diseñar y trabajar con proyectos Windows Presentation Foundation (WPF). • Aplicación WPF: este tipo de proyecto representa una aplicación de escritorio con soporte para WPF. Si tenemos en cuenta que WPF también se compone de código XAML, es posible crear un entorno visual directamente desde Expression Blend 2. • Librería de controles WPF: esta librería de controles está especializada en el en- capsulamiento de elementos XAML y código de programación para su posterior reutilización en aplicaciones WPF. Debemos optar por esta opción cuando quere- mos crear elementos reutilizables para ser incorporados en distintas aplicaciones. • Sitio de Silverlight 1: este tipo de proyectos está orientado a crear sitios web con soporte para la versión 1 de Silverlight. Debemos tener en cuenta que este modelo no es tratado en este libro y además representa una versión antigua del software. • Aplicación de Silverlight 2: una vez instalado el Service Pack 1 para Expression Blend 2, podremos ver esta clase de trabajos. Éste es el tipo de proyectos sobre los cuales nos moveremos, tanto de manera visual como programática. Figura 5. Lista de proyectos incluidos en Expression Blend 2. Un paseo por Expression Blend 2 37 � La mayoría de los controles preestablecidos en Silverlight presentarán un comportamiento si- milar al de sus homónimos presentes en el desarrollo web y de escritorio. Al interactuar con ellos se deberá, por consiguiente, imitar las mismas líneas de código usadas en los demás ambientes de desarrollo con Microsoft .Net. CONTROLES EN SILVERLIGHT 02_Silverlight.qxp 9/30/09 1:23 PM Page 37 Además de poder indicar el nombre del proyecto que vamos a crear y la ubica- ción física que tendrá, es posible seleccionar el lenguaje de programación con el cual preferimos trabajar. Vale aclarar que, para poder conseguir esta lista, es ne- cesario haber instalado esos lenguajes en nuestra estación de trabajo. El hecho de poder seleccionar un lenguaje de programación se refiere a que cualquier código que se realice desde Expression Blend 2 se hará en ese lenguaje, por lo que es im- portante elegir aquel con el que estemos más familiarizados. Explorador de soluciones Una vez que hemos creado el proyecto Silverlight 2, podremos navegar entre sus archivos desde el explorador de la solución, que típicamente puede ser encontrado a la derecha de la aplicación, como podemos observar en la Figura 6. Este explorador nos mostrará, como elementos iniciales, una página del tipo XAML más una clase creada en el lenguaje seleccionado, en este caso C#. Esta clase de C# es la que será usada para generar el código que maneje los elementos creados en la página XAML. Figura 6. El explorador de soluciones (área superior derecha) de Expression Blend 2 con los elementos iniciales de una aplicación Silverlight 2. 2. MICROSOFT EXPRESSION BLEND 2 38 ��� Para mejorar nuestro desarrollo en Expression Blend 2, es recomendable tener instalado, ade- más, alguna de las herramientas de desarrollo de software de Microsoft, como por ejemplo Visual Studio 2008. Esto hará que, de tener que agregar código de programación a nuestro pro- yecto Silverlight, lo podamos hacer con mayor facilidad desde estas herramientas. INTEROPERABILIDAD 02_Silverlight.qxp 9/30/09 1:23 PM Page 38 Página inicial de Silverlight 2 El archivo Page.xaml es considerado la página o componente de inicio para nuestra aplicación Silverlight 2, teniendo como contenido el siguiente código: <UserControl xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation” xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml” x:Class=”SilverlightApplication2.Page” Width=”640” Height=”480”> <Grid x:Name=”LayoutRoot” Background=”White”/> </UserControl> En el caso de Silverlight 2, el elemento inicial es representado por un tag llamado <UserControl>. Lo que nos dice esto es que no será considerado como una apli- cación en sí misma, sino como un componente que puede ser incrustado o con- sumido por otras aplicaciones del tipo Silverlight, así como por aplicaciones web. En la misma declaración de atributos de este control Silverlight, se incluye el nombre de la clase de C# encargada de manejar los componentes del control, así como el ancho y el alto, en pixeles, del control. Si exploramos el contenido de esa clase, podremos ver lo siguiente: using System; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Ink; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; Un paseo por Expression Blend 2 39 ��� Es posible hacer que nuestro control Silverlight se adapte a la superficie que lo contiene. Si co- locamos el elemento Silverlight dentro de una tabla HTML y configuramos las propiedades del elemento para que sus atributos Width y Height sean igual a Auto, éste se adaptará de manera automática a las dimensiones de su contenedor. DIMENSIONES DE SILVERLIGHT 02_Silverlight.qxp 9/30/09 1:23 PM Page 39 http://schemas.microsoft.com/winfx/2006/xaml/presentation%E2%80%9D http://schemas.microsoft.com/winfx/2006/xaml%E2%80%9D using System.Windows.Shapes; namespace SilverlightApplication2 { public partial class Page : UserControl { public Page() { // Required to initialize variables InitializeComponent(); } } } Esta clase, como ya comentamos, es la que será usada como contenedor de la implementación del código que interactuará con los componentes colocados en la página XAML previamente vista. Esto quiere decir que, si queremos que nuestra aplicación Silverlight consuma datos de una base de datos o reaccione apoyada en estímulos por parte del usuario, deberíamos escribir esas líneas dentro de esta clase. Por supuesto, no estamos obligados a acumular todas las líneas de código en este único archivo ya que, como en todo lenguaje orientado a objetos, podremos crear tantas clases como necesitemos sin estar obligados a tener una página XAML por cada una. Así, podríamos encapsular la lógica de negocios o el acceso a datos en clases especializadas, y generar código mantenible y fácilmente modificable. La página App.xaml La página App.xaml, junto con la clase de código que la representa, es otro de los archivos creados inicialmente. Esta clase es usada en especial para almacenar có- digo XAML, que en el caso de App.xaml puede ser reusado dentro de todas las demás páginas de tipo XAML. Como podemos ver en el siguiente código: 2. MICROSOFT EXPRESSION BLEND 2 40 � Como una buena práctica en el desarrollo de software, encontramos los patronesde diseño de software. Éstos representan formas de crear código para solucionar problemas específicos. Es importante tener presente estos patrones para mejorar la calidad del código creado en Silverlight. Como resultado, obtendremos código más prolijo y más fácil de modificar. PATRONES DE DISEÑO DE SOFTWARE 02_Silverlight.qxp 9/30/09 1:23 PM Page 40 <Application.Resources> <!— Resources scoped at the Application level should be defined here. —> <Style x:Key=”TextBoxStyle1” TargetType=”TextBox”> <Setter Property=”BorderThickness” Value=”1”/> <Setter Property=”Background”> <Setter.Value> <LinearGradientBrush EndPoint=”0.5,1” StartPoint=”0.5,0”> <GradientStop Color=”#FFE8EFF1”/> <GradientStop Color=”#FF87DFF4” Offset=”1”/> </LinearGradientBrush> </Setter.Value> </Setter> <Setter Property=”Foreground” Value=”#FFFF0000”/> <Setter Property=”Padding” Value=”2”/> <Setter Property=”BorderBrush”> ... ... En el código anterior, el archivo App.xaml es usado para alojar la definición de un nuevo elemento TextBox, que presenta ciertas particularidades de sus atributos de color y comportamiento, como podemos ver en la Figura 7. Este nuevo elemento, ahora, puede ser accedido y consumido por cualquier otro TextBox que se en- cuentre dentro de nuestra aplicación. Por lo común, cuando desarrollemos con Silverlight, tendremos la necesidad de crear nuestros propios esquemas visuales para que sean aplicados sobre controles específicos. Una forma de compartir estos esquemas es mediante su colocación dentro de este archivo. De cualquier manera, hablaremos más de estos esquemas y propiedades en los capítulos 4 y 5. Un paseo por Expression Blend 2 41 ��� Debemos tener cuidado en la cantidad de información que agregamos a nuestros archivos XAML, ya que éstos deben ser descargados por el usuario. Un archivo de gran tamaño tomará más tiempo en ser descargado, en detrimento de la experiencia del usuario. Podemos usar carga por demanda para mejorar esta experiencia. TAMAÑO DE ARCHIVOS 02_Silverlight.qxp 9/30/09 1:23 PM Page 41 Figura 7. El esquema generado puede ser aplicado a otros controles del mismo tipo en cualquier otra página de Silverlight. Con respecto a la página de código (App.xaml.cs), podemos decir que presenta un conjunto de eventos que se dispararán en determinados momentos de la vi- da de nuestra aplicación. El código genérico se muestra a continuación, y luego lo analizaremos con más detalle: public App() { this.Startup += this.OnStartup; this.Exit += this.OnExit; this.UnhandledException += this.Application_UnhandledException; InitializeComponent(); } private void OnStartup(object sender, StartupEventArgs e) { // Load the main control here this.RootVisual = new Page(); } private void OnExit(object sender, EventArgs e) { } 2. MICROSOFT EXPRESSION BLEND 2 42 02_Silverlight.qxp 9/30/09 1:23 PM Page 42 El primer método, constructor de esta clase, se encarga de enlazar eventos inhe- rentes al comportamiento de nuestra aplicación. El método OnStartup se ejecutará al inicio de la aplicación, en este caso, podríamos colocar código en él para con- seguir algún comportamiento necesario al momento de inicializarse nuestra apli- cación. Por ejemplo, podríamos necesitar inicializar objetos o conectarnos a un servicio web, entre otras posibilidades. En el mismo caso, el evento OnExit será dis- parado en el momento en el que la aplicación sea cerrada o terminada, y de igual forma que en el caso anterior, podríamos necesitar liberar ciertos recursos o realizar acciones específicas cuando la aplicación concluya. El entorno de Expression Blend 2 El entorno de Expression Blend 2 no se limita a los archivos previamente tratados. Si tenemos en cuenta que esta herramienta puede ser usada tanto por diseñadores como por desarrolladores, podremos encontrar elementos útiles para los dos casos. Una de las secciones destacadas involucra el lienzo de dibujo central. En este lien- zo, podremos arrojar y ordenar todos los controles incluidos en Silverlight, así co- mo crear nuestros propios modelos y controles. Figura 8. En este lienzo, podemos ver cómo son manipulados distintos controles de manera visual. Desde esta área central, también es posible interactuar en forma directa con el código XAML. En nuestra interfaz podemos ver, en la parte superior derecha, las opciones para intercambiar entre los diferentes modos de visualización: Diseño, XAML o Dividir (mixto), y tenemos la posibilidad de modificar los componentes desde cualquiera de estas vistas. Si contamos con cierta experiencia en edición de Un paseo por Expression Blend 2 43 02_Silverlight.qxp 9/30/09 1:23 PM Page 43 XAML, es probable que trabajemos en el modo mixto o de pantalla dividida, ya que esto puede acelerar nuestro trabajo de manera significativa. El próximo grupo de paneles que vamos a inspeccionar es el de las propiedades. Éste se encuentra situado a la derecha de Expression Blend 2. Típicamente, estas propiedades son el acceso rápido a las configuraciones de aspecto y comportamiento de los controles adicionados al lienzo de edición. Para lograr la inspección de las propiedades de un control, primero será necesario seleccionarlo. Según el control seleccionado, las propiedades se verán afectadas en relación a éste por lo que no con- taremos con las mismas opciones en todos los casos. Figura 9. Existen otras propiedades relacionadas con diferentes controles, sólo debemos movernos usando la barra de desplazamiento ubicada a la derecha. En esta área también podemos encontrar, en la parte superior, opciones que tengan que ver con el proyecto. En especial, la pestaña relacionada con los recursos de la aplicación, donde se listarán todos los atributos previamente configurados, como los alojados en el archivo App.xaml, que ya hemos tratado. La gran venta- ja de esta lista de recursos radica en que podemos arrastrar cualquiera de estos 2. MICROSOFT EXPRESSION BLEND 2 44 ��� En Silverlight, no sólo es posible modificar la apariencia visual de los controles nativos mediante la generación de esquemas. También podremos crear nuestros propios componentes y controles heredándolos en nuestro propio código y creando nueva lógica funcional. IMPLEMENTACIÓN DE CONTROLES 02_Silverlight.qxp 9/30/09 1:23 PM Page 44 elementos sobre alguno de los controles existentes para aplicar las configuracio- nes a ese control. El resultado de arrastrar el estilo configurado al inicio permite obtener lo que podemos ver en la siguiente figura. Figura 10. El control de caja de texto posee, una vez aplicado, el estilo definido en el elemento TextBoxStyle1, que aparece debajo de la pestaña de recursos. El último panel que agrupa información sobre nuestra aplicación Silverlight se en- cuentra a la izquierda del lienzo de dibujo. Sobre estos grupos, en la parte superior, se ubican las transformaciones y animaciones de los componentes de nuestra aplica- ción. Aunque hablaremos de estas propiedades con mayor detalle en el capítulo 5, vale recalcar que se pueden generar diferentes efectos de movimiento y transformaciones desde esta sección. Debajo de este panel, se encuentra el árbol de controles de la pá- gina que estamos visualizando. Los controles se agruparán de manera jerárquica sobre la base del contenedor inmediato superior. Si tenemos en cuenta que los controles XAML pueden ser contenedores de otros controles XAML, esta estructura nos dará rápido acceso a cada uno de los elementos que componen un control de manera rápi- da. En la Figura 11, podemos ver un ejemplo de este árbol y del panel de animaciones. Un paseo por Expression Blend 2 45 �� Todas las imágenes, videos y sonidos que agreguemos a nuestro proyecto, así como cualquier archivo externo, serán comprimidos en un único archivo final con extensión XAP. Este archivo es, en realidad, un archivo zip que contiene todos los elementos creados por el proyecto Silverlight. COMPRESIÓN DE ARCHIVOS 02_Silverlight.qxp 9/30/09 1:23 PM Page 45 Figura 11. En este
Compartir