LPCU 175

tapa Silverlight.qxp

21/09/2009

11:07 a.m.

PÆgina 1

SILVERLIGHT DESCUBRA UN NUEVO NIVEL EN EL DESARROLLO DE APLICACIONES PARA INTERNET

CONTENIDO 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

Desde su lanzamiento, Silverlight se convirtió rápidamente en la opción multiplataforma ideal, tanto para desarrollar aplicaciones enriquecidas e interactivas, como para generar experiencias multimedia de vanguardia. Quien consiga dominarlo podrá ofrecer a sus clientes aplicaciones visualmente impresionantes, tiempos de respuesta sin comparación y requerimientos mínimos de ancho de banda, todas ventajas acordes a los tiempos de la incipiente Web 3.0.

Esta obra ofrece un acercamiento profundo y práctico a esta herramienta, y está dirigida a desarrolladores con conocimiento de Microsoft .NET Framework, que deseen profundizar en el desarrollo Web. La enorme experiencia de Matías Iacono como desarrollador en esta plataforma lo convierte en el guía ideal para aportar consejos prácticos bien fundados, ejemplos enriquecedores y código optimizado para aplicar en sus propios proyectos.

redusers.com 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 posibilidad de estar en contacto con los editores, y de participar del foro de lectores, en donde podrá intercambiar opiniones y experiencias.

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

NIVEL DE USUARIO PRINCIPIANTE

INTERMEDIO

AVANZADO

EXPERTO

SILVERLIGHT 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.

por MATÍAS IACONO

RT_Bombo_LIBROSilverlight.qxp

21/09/2009

17:07

Página RT2

CONÉCTESE CON LOS MEJORES

LIBROS DE COMPUTACIÓN usershop.redusers.com

DESCUBRA EL POTENCIAL DE WINDOWS VISTA

APRENDA A PROGRAMAR CON EL LENGUAJE MÁS POTENTE

MANUALES USERS I 384 páginas I ISBN 978-987-1347-40-7

DESARROLLADORES I 400 páginas I ISBN 978-987-1347-76-6

MANEJE LAS HERRAMIENTAS DE VISTA COMO UN EXPERTO

DESARROLLE APLICACIONES PARA WINDOWS Y LA WEB

MANUALES USERS I 352 páginas I ISBN 978-987-663-007-8

MANUALES .CODE I 368 páginas I ISBN 978-987-1347-32-2

01_Silverlight.qxp

9/30/09

1:20 PM

Page 13

Silverlight

Capítulo

1

Introducción a Silverlight 2 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.

SERVICIO DE ATENCIÓN AL LECTOR: usershop@redusers.com

Iniciarse en el mundo de Silverlight 2 Navegar hacia el mundo de Silverlight 2 La experiencia de usuario y la portabilidad Arquitectura de Silverlight 2 Microsoft .Net Framework Interfaz de usuario y presentación El código XAML Herramientas de desarrollo para Silverlight 2 Resumen Actividades

14 14 16 19 20 21 22 24 27 28

01_Silverlight.qxp

9/30/09

1:20 PM

Page 14

1. INTRODUCCIÓN A SILVERLIGHT 2

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 siguen buscando mejores formas y herramientas para trabajar en este fascinante mundo. 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 desarrollo 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ágenes 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 escritorio. 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 acompañaron dichos acontecimientos. Por supuesto, esta evolución no sólo fue de capacidades de hardware y prestaciones hacia el usuario. Al mismo tiempo, estuvo acompañada por software, lenguajes de programación y herramientas de desarrollo que, en conjunto, ayudaran a amortiguar la curva de complejidad sobre las necesidades crecientes que tenían los sistemas. En definitiva, existían mayores requerimientos 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 herramientas 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 documentos, redes sociales e interconexión de servicios, entre otros, debemos entender 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 mucho más requeridas por aquellos que se ven involucrados en el desarrollo web. Debido 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 dominio 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 14

01_Silverlight.qxp

9/30/09

1:20 PM

Page 15

Iniciarse en el mundo de Silverlight 2

visible Silverlight. Este software forma parte de dicho crecimiento y sirve como solución, ya que plantea una mejor forma de desarrollar contenido dinámico para 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 conocimiento 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 lenguajes tan populares como Borland C# Builder y Delphi, también de Borland. De esta 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, extendiendo 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 servicios web o cualquier elemento con la capacidad de retornar XML, al mismo tiempo que puede ser programado o desarrollado mediante aquel lenguaje que usamos todos 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.

VB

C++

C#

J#

...

Common Language Specification

Windows Forms

ADO .NET y XML

Visual Studio .NET

ASP .NET Web Forms • Web Services Mobile Internet Toolkit

Librería de clases base Common Language Runtime Sistema Operativo

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.

15

01_Silverlight.qxp

9/30/09

1:20 PM

Page 16

1. INTRODUCCIÓN A SILVERLIGHT 2

La experiencia de usuario y la portabilidad Antes de la aparición de Microsoft .Net Framework, construir una aplicación de software 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 programación trajera consigo. El diseño, entonces, quedaba encapsulado dentro del código 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 implementada 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 negocio) nunca quedaría del todo igual, castigando la experiencia del usuario que se habí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 ambientes 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 esquema 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 aplicació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.

,

¿QUÉ ES SILVERLIGHT?

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 lenguajes de programación y arquitectura.

16

01_Silverlight.qxp

9/30/09

1:20 PM

Page 17

Iniciarse en el mundo de Silverlight 2

CardSpace

WPF

Microsoft .NET Framework Versión 2.0

WF

WCF

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 mismas 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. Pensemos 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 dentro 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 Y LENGUAJES

Microsoft .Net Framework no sólo soporta los lenguajes de programación propuestos por Microsoft. 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 aprender un nuevo lenguaje para desarrollar en Microsoft .Net Framework.

17

01_Silverlight.qxp

9/30/09

1:20 PM

Page 18

1. INTRODUCCIÓN A SILVERLIGHT 2

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 producto 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. Aplicaciones de escritorio

Navegadores web

CSS/HTML

XAML

JavaScript/AJAX ASP.net

Framework .Net

Figura 3. Silverlight se nutre de cada una de las principales características de los dos mundos, generando una mejor experiencia de usuario e independencia en plataformas.

RRR

VERSIONES DE MICROSOFT .NET FRAMEWORK

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 Framework 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.

18

01_Silverlight.qxp

9/30/09

1:20 PM

Page 19

Iniciarse en el mundo de Silverlight 2

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 escritorio y, por el otro, la portabilidad entre plataformas y la rapidez de la actualizació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, posibilitar 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 puntos 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 Silverlight 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. Esto se consigue gracias a un plugin o aditivo que hará las veces de gestor o inté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), redes, 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 características sobre la base de su área de trabajo, como veremos a continuación.

_`

LA DIFÍCIL ADOPCIÓN POR PARTE DE LOS USUARIOS

Por lo general, es difícil lograr que un usuario adopte una nueva aplicación cuando está acostumbrado 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.

19

01_Silverlight.qxp

9/30/09

1:20 PM

Page 20

1. INTRODUCCIÓN A SILVERLIGHT 2

.NET para Silverlight Data

WPF

WCF

LINQ XLINQ XML

Controls Data Binding Layout Editing

DLR

BCC

Iron Python Iron Ruby Jscript

Generics Collections Cryptography Threading

REST RSS/ATOM SOAP

POX JSON

Librería para Microsoft AJAX

Motor JavaScript

Motor de ejecución CLR

XAML Centro de interfaz gráfica Vector Animation

Text Images

Periféricos

DRM

Keyboard Mouse Ink

Media

Multimedia VC1 WMA MP3 Centro de presentación Manejo de navegador Integrado con la red

Integrado con DOM

Servicio de aplicaciones

Instalador

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. 20

01_Silverlight.qxp

9/30/09

1:20 PM

Page 21

Iniciarse en el mundo de Silverlight 2

• LinQ y XLinQ: soporte especializado para llevar a cabo el manejo de colecciones 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 Framework, que nos ofrece soporte para el manejo de cadenas de texto, expresiones regulares, 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 para lenguajes de programación como JavaScript, Iron Phyton e Iron Ruby.

• Almacenamiento aislado: permite generar sectores de almacenamiento de archivos 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 presentació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 como 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 facilita 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 confección de las interfaces. Éstas son creadas sobre la base de XML. Como pudimos ver hasta aquí, Silverlight no es un simple visualizador de animaciones, 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 utilizados, por lo general, en el desarrollo de aplicaciones de escritorio y web, ademá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 navegador web, sin estar atado a un sistema operativo ni a un navegador específico.

21

01_Silverlight.qxp

9/30/09

1:20 PM

Page 22

1. INTRODUCCIÓN A SILVERLIGHT 2

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 exactamente. 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 (base de XML), entender la estructura de XAML resulta simple e intuitivo. Veamos a continuación un ejemplo de elementos XML simples:

RRR

PROGRAMACIÓN PROFESIONAL

Debido a que Silverlight puede ser desarrollado con los principales lenguajes de programación soportados por Microsoft .Net Framework, éste brinda pleno soporte para la programación orientada a objetos y puede absorber todos los beneficios inherentes a este modelo de programación.

22

01_Silverlight.qxp

9/30/09

1:20 PM

Page 23

Iniciarse en el mundo de Silverlight 2

<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 nombre más los caracteres </, lo que especificará la finalización del tag. En el ejemplo, también podemos notar cómo un elemento puede contener otros elementos, así como atributos 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 definidas 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.

23

01_Silverlight.qxp

9/30/09

1:20 PM

Page 24

1. INTRODUCCIÓN A SILVERLIGHT 2

El ejemplo nos sirve, al mismo tiempo, para mostrar otros atributos importantes dentro 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 control, 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 visual. Con este atributo, podremos cambiar el texto representado al principio en tiempo 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 controles 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 potenciamiento visual en interfaces de usuario, sería muy interesante contar con herramientas 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 fuentes 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 elementos 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.

RRR

XAML Y XML

Gracias a la extensibilidad de XML como lenguaje de etiquetas es que XAML genera un nuevo subconjunto 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.

24

01_Silverlight.qxp

9/30/09

1:20 PM

Page 25

Iniciarse en el mundo de Silverlight 2

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 mencionada, 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 poder 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 adelante, es posible construirlos por nuestra cuenta desde cero, toda la lógica de funcionalidad ya se encuentra contenida y probada en ellos. Esto nos ahorra tiempo de trabajo 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 abanico 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.

DESCARGA DE SILVERLIGHT 2 TOOLS PARA VISUAL STUDIO 2008

Además del Service Pack 1 para Visual Studio 2008, también deberíamos contar con el conjunto 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.

25

01_Silverlight.qxp

9/30/09

1:20 PM

Page 26

1. INTRODUCCIÓN A SILVERLIGHT 2

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 inglé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 acelerar el desarrollo de componentes Silverlight. Veremos más a fondo las cualidades 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 Expression 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 proyecto 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 forma directa con Microsoft Expression Blend 2.

Debido al mismo motivo citado en el caso de Visual Studio 2008, es necesario instalar un conjunto de herramientas en Microsoft Expression Blend 2 para contar 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.

26

01_Silverlight.qxp

9/30/09

1:20 PM

Page 27

Iniciarse en el mundo de Silverlight 2

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 contar 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 gratuitas 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.

… 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.

27

01_Silverlight.qxp

9/30/09

1:20 PM

Page 28

ACTIVIDADES PREGUNTAS TEÓRICAS

EJERCICIOS PRÁCTICOS

1 ¿En qué modelo se basa el código XAML pa-

1 Diríjase al sitio web de la W3C (www.

ra representar los elementos de la interfaz?

w3.org/XML) para aprender más sobre XML.

2 ¿Subconjunto de qué otro modelo de desarrollo visual para Windows podríamos considerar a Silverlight?

2 Para introducirse mejor en el mundo de Silverlight, intente ampliar el ejemplo propuesto en este capítulo, modificando el

3 ¿Qué versión de Microsoft .Net Framework necesitamos, como mínimo, para trabajar

tipo de fuente y el color de fondo de la aplicación creada.

con Silverlight 2.0?

3 Para conocer más sobre desarrollo con 4 ¿Qué sistemas operativos y navegadores

Microsoft .Net, tome el curso gratuito del

web soportan la ejecución de Silverlight 2.0?

Desarrollador 5 Estrellas desde el sitio web de Microsoft. Este curso ayuda a en-

5 ¿Qué herramienta resulta ideal para desa-

tender términos utilizados en este libro. La

rrolladores, que les permita potenciar el

URL es www.mslatam.com/latam/msdn/

desarrollo de aplicaciones Silverlight 2.0?

comunidad/dce2005.

6 ¿Los diseñadores visuales cuentan con al-

4 Instale Microsoft Expression Blend 2 y

guna herramienta de software que los ayu-

déjelo listo para trabajar en el siguiente

de a crear contenido para Silverlight 2.0?

capítulo.

7 ¿Es necesario instalar algún aditamento en la herramienta de desarrollo?

5 Una vez instalados Visual Studio 2008 y Microsoft Expression Blend 2, ingrese en www.silverlight.net, el sitio oficial de

8 ¿Silverlight 2.0 provee algún conjunto de componentes listos para usar?

Silverlight, descargue los ejemplos y analícelos. Esto ayuda a entender con mayor facilidad esta tecnología.

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?

28

REDISEﾃ前 BOMBOS LIBROS - ISSU - Base Editable - Sep 10.indd 1

08/09/2010 15:54:03