Silver Light

CONCTESE CON LOS MEJORESLIBROS DE COMPUTACIN

DESCUBRA EL POTENCIAL DE WINDOWS VISTAMANUALES USERS I 384 pginas I ISBN 978-987-1347-40-7

MANEJE LAS HERRAMIENTAS DE VISTA COMO UN EXPERTO

MANUALES USERS I 352 pginas I ISBN 978-987-663-007-8

DESARROLLE APLICACIONES PARA WINDOWS Y LA WEBMANUALES .CODE I 368 pginas I ISBN 978-987-1347-32-2

usershop.redusers.com

APRENDA A PROGRAMAR CON EL LENGUAJE MS POTENTE

DESARROLLADORES I 400 pginas I ISBN 978-987-1347-76-6

RT_Bombo_LIBROSilverlight.qxp 21/09/2009 17:07 Pgina RT2

DESCUBRA UN NUEVO NIVEL EN EL DESARROLLODE APLICACIONES PARA INTERNET

00_Silverlight.qxp 9/30/09 1:16 PM Page 1

TTULO: SILVERLIGHT

AUTOR: Matas Iacono

COLECCIN: Manuales USERS

FORMATO: 17 x 24 cm

PGINAS: 352

Copyright MMIX. Es una publicacin de Gradi S.A. Hecho el depsito que marca laley 11723. Todos los derechos reservados. No se permite la reproduccin parcial o to-tal, el almacenamiento, el alquiler, la transmisin o la transformacin de este libro, encualquier forma o por cualquier medio, sea electrnico o mecnico, mediante foto-copias, digitalizacin u otros mtodos, sin el permiso previo y escrito del editor. Suinfraccin est penada por las leyes 11723 y 25446. La editorial no asume responsa-bilidad alguna por cualquier consecuencia derivada de la fabricacin, funcionamien-to y/o utilizacin de los servicios y productos que se describen y/o analizan. Todas lasmarcas mencionadas en este libro son propiedad exclusiva de sus respectivos due-os. Impreso en Argentina. Libro de edicin argentina. Primera impresin realizadaen Sevagraf, Costa Rica 5226, Grand Bourg, Malvinas Argentinas, Pcia. de BuenosAires en octubre de MMIX.

ISBN 978-987-663-010-8

Iacono, MatasSilverlight. - 1a ed. - Banfield - Lomas de Zamora : Gradi, 2009.352 p. ; 24x17 cm. - (Manual users; 175)

ISBN 978-987-663-010-8

1. Informtica. I. TtuloCDD 005.3


4PRELIMINARES

Matas Iacono

Ingeniero de sistemas, Microsoft Most Valuable Professional enASP.net, Orador Regional para INETA Latam, Scrum Master cer-tificado y Microsoft Certified Technology Specialist. Cuenta conms de quince aos de experiencia en el desarrollo de softwarecon distintas tecnologas y metodologas.Ha dictado cerca de cincuenta conferencias tcnicas en distintospases latinoamericanos, as como escrito y publicado artculos ennumerosas publicaciones internacionales.Ha trabajado para empresas extranjeras de gran envergadura. Enla actualidad, se desempea como ingeniero de software para Mo-torola Argentina y es profesor en la Universidad Tecnolgica Na-cional de Crdoba.

AgradecimientosAgradezco a todos los amigos que me brindaron su apoyo y susopiniones sobre lo escrito. A Miguel Saez, de Microsoft, por ha-berme facilitado material y a Lucas Ontivero, de Motorola Ar-gentina, por su crtica aguda, que me ayud con el contenido pro-puesto en el libro.

DedicatoriaA mi familia, por quedarse a mi lado largos fines de semana mien-tras conclua este libro.


5PRLOGOSi hay algo a lo que le debemos la actual difusin de la tecnologa informtica, tan-to dentro del hogar como de las oficinas, es a la continua evolucin de las interfa-ces grficas de usuarios (GUI). Gracias a ellas, personas de todas las edades y pro-fesiones, en todo el mundo, pueden interactuar con equipos de computacin parafines tan diversos como entretenerse, obtener informacin, realizar clculos y co-municarse, entre un sinnmero de otras posibilidades.Es seguro que tanto la constante innovacin en el desarrollo de las interfaces gr-ficas como la aparicin de Internet han sido los catalizadores para uno de los msfabulosos cambios en la manera en que las personas, alrededor del globo, se rela-cionan mediante el uso de la tecnologa.Mientras que la Web seguir siendo el mbito de comunicacin del futuro, es de es-perar que los requerimientos de interactividad entre mquinas y humanos se vuel-van an ms sofisticados y exigentes. Ante esto, Microsoft desarroll Silverlight, unanueva apuesta para el desarrollo de elementos de grficos de interaccin con los usua-rios orientados a la Web.En este aspecto es, justamente, en el que esta obra hace un gran aporte, al presentarSilverlight 2.0 de una manera amena, clara y completa. En ella, se abarcan no slolos pormenores tcnicos de la tecnologa, sino que, adems, el autor se ha esmeradoen brindar al lector un cmulo de conocimientos que slo podra obtenerse mediantela experiencia, todo esto reflejado en tips, datos tiles, recomendaciones, curiosida-des, advertencias y todos los consejos que el lector reconocer como invaluables a lahora de adentrarse en esta apasionante tecnologa.Por ltimo, quisiera agradecer a Matas Iacono por este maravilloso trabajo que hasido una gua segura en el aprendizaje de Silverlight y, con cuya lectura y estudio,me he sentido guiado y acompaado siempre.

Lucas OntiveroIngeniero de software,

Motorola Argentina

Prlogo


PRELIMINARES

66

EL LIBRO DE UN VISTAZOEn esta obra se vern los conceptos principales para dominar Silverlight, la tecnologa de

Microsoft orientada al desarrollo de contenido dinmico 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.

Captulo 1

INTRODUCCIN A SILVERLIGHT 2

Para conocer Silverlight desde sus comienzos,

en este captulo 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.

Captulo 2

MICROSOFT EXPRESSION BLEND 2

En este captulo nos enfocaremos

en Microsoft Expression Blend 2 como

herramienta de desarrollo para Silverlight,

orientada a diseadores visuales

y a diagramadores de aplicaciones. Daremos

un paseo por la interfaz de Microsoft

Expression Blend 2 y crearemos nuestra

primera aplicacin Silverlight. Este captulo

ayudar a los diseadores y desarrolladores

a entender cada uno de estos mundos.

Captulo 3

EL MEJOR TRABAJO, CON LA MEJOR

HERRAMIENTA

Luego de enfocarnos en el diseador visual,

centraremos la atencin de este captulo

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.

Captulo 4

XAML AL EXTREMO

Cada uno de los controles y componentes

proporcionados por Silverlight,

su funcionalidad, eventos, mtodos

y funciones, sern vistos en este captulo.

Cada uno de estos elementos ser descripto

con profundidad, generando cdigo

de ejemplo por cada uno de ellos.

Este captulo representa una excelente gua

de referencia sobre todos los componentes

disponibles en Silverlight.

Captulo 5

LUZ, CMARA, ACCIN

Gran parte de las prestaciones otorgadas

por Silverlight incluyen la posibilidad

de mover objetos dentro de nuestra aplicacin.

En este captulo veremos cmo manipular esta

caracterstica, ya que se explicarn

los distintos modelos disponibles para

animaciones y transformaciones dentro

de las aplicaciones Silverlight.

Captulo 6

CERRAR EL CRCULO

Silverlight tambin otorga mucho potencial

con el manejo de imgenes, video y sonido.

En este captulo hablaremos de ciertas

caractersticas relacionadas con actividades


El libro de un vistazo

7

!A lo largo de este manual encontrar una serie de recuadros que le brindarn informacin

complementaria: curiosidades, trucos, ideas y consejos sobre los temas tratados.

Cada recuadro est identificado con uno de los siguientes iconos:

INFORMACIN COMPLEMENTARIA

CURIOSIDADESE IDEAS

DATOS TILESY NOVEDADES

ATENCIN SITIOS WEB

como consumir videos, mostrar imgenes

o tocar sonidos dentro de las aplicaciones.

Tambin hablaremos de Deep Zoom

y sus caractersticas, as como del dibujo

a mano alzada con InkPresenter.

Captulo 7

INTERCONEXIN

Este captulo ofrece funcionalidades

altamente valiosas. Crearemos un juego

desde cdigo C# y un lector de RSS,

usaremos almacenamiento aislado para

guardar informacin en el cliente, crearemos

aplicaciones para subir archivos al servidor

y culminaremos con la implementacin

de la ltima tecnologa de interoperabilidad

propuesta por Microsoft al conectar Silverlight

con Windows Communication Foundation.

Captulo 8

EL NAVEGADOR Y SU DOMINIO

Silverlight se ejecuta dentro de una pgina

HTML manejada por el navegador web.

Por tal motivo, posee gran potencial

de interaccin con el cliente. En este captulo

veremos cmo Silverlight puede manipular

HTML as como intercambiar informacin

con JavaScript. Adems, conoceremos cmo

JavaScript es capaz de consumir servicios

generados desde Silverlight.

Apndice 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 caractersticas, limitaciones y el futuro

de Silverlight como tecnologa fuera

de su ambiente nativo. Adems, se presentan

algunas herramientas gratuitas y de cdigo

libre que nos ayudarn en el desarrollo,

tanto para Windows como para Linux.

Apndice B

SILVERLIGHT 3, LA NUEVA GENERACIN

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 seccin, encontraremos

un ndice que nos ayudar a buscar de forma

rpida los trminos ms importantes de esta

obra. Adems, veremos un listado de sitios

de inters para ampliar nuestros

conocimientos y mantenernos al tanto

de las ltimas novedades en la materia.


Contenido

9

Sobre el autor 4

Prlogo 5

El libro de un vistazo 6

Informacin complementaria 7

Introduccin 12

Captulo 1

INTRODUCCIN 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 presentacin 21

El cdigo XAML 22

Herramientas de desarrollo

para Silverlight 2 24

Resumen 27

Actividades 28

Captulo 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

Pgina inicial de Silverlight 2 39

La pgina App.xaml 40

El entorno de Expression Blend 2 43

La barra de herramientas 46

Crear nuestra primera aplicacin

con Expression Blend 2 48

Resumen 53

Actividades 54

Captulo 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 aplicacin

con Visual Studio 2008 63

Interoperabilidad con

Expression Blend 2 76

Resumen 79

Actividades 80

Captulo 4

XAML AL EXTREMO

El lenguaje XAML 82

Qu es XAML? 82

Declaracin 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 interaccin con el usuario 103

CONTENIDO


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

Captulo 5

LUZ, CMARA, ACCIN

Mover objetos 156

Transformaciones 158

Transformacin de traslacin 159

Transformacin de rotacin 161

Transformacin escalar 165

Transformacin de distorsin 167

Aplicar todas las transformaciones 168

Animaciones 170

DoubleAnimation 171

ColorAnimation 173

Animaciones y transformaciones 175

Estilos y plantillas 178

Estilos 178

Plantillas 182

Resumen 185

Actividades 186

Captulo 6

CERRAR EL CRCULO

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

Captulo 7

INTERCONEXIN

Ampliar las funcionalidades 222

Silverlight desde C# 222


Contenido

11

WebClient 230

Enviar informacin 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

Captulo 8

EL NAVEGADOR Y SU DOMINIO

Conectar tecnologas 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

Apndice A

SILVERLIGHT FUERA

DE WINDOWS

Proyecto Moonlight 330

Sistemas operativos 330

Versiones de Moonlight 331

Herramientas de desarrollo 331

Problemas conocidos 333

Apndice B

SILVERLIGHT 3, LA NUEVA GENERACIN

Silverlight 3 336

Nuevos controles 336

Efectos en tres dimensiones 337

Uso de Pixel Shader 338

Fuera del navegador 339

Servicios al lector

ndice temtico 342

Sitios web recomendados 345


INTRODUCCINEste libro est orientado a desarrolladores de software, y diseadores visuales y gr-ficos que deseen expandir su rea de conocimiento de desarrollo hacia el ambienteweb. Un lector con nociones iniciales podr ver, durante los captulos, una evolu-cin que le dar la oportunidad de aprender sin necesidad de saberes previos sobrela tecnologa propuesta, Silverlight, mientras que aquel lector con experiencia po-dr encontrar en estas pginas una gua fundamental para aprender, con agilidad,conceptos sobre esta tecnologa de Microsoft. Sin embargo, es necesario, para am-bos lectores, contar con conocimientos medios de desarrollo utilizando MicrosoftC#, as como las tcnica primordiales del funcionamiento y ejecucin 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 talforma que el lector se sienta cmodo con su evolucin y que aprenda a cada pasoque da. Desde la recomendacin y el uso de las herramientas ideales para el desa-rrollo bajo esta tecnologa, tanto para diseadores como para desarrolladores, gene-ramos ejemplos prcticos en cada captulo, que abarcan desde HTML hasta C#, ascomo la aplicacin de ASP.net y el uso de JavaScript.Silverlight es un modelo en ebullicin. En el momento de lanzarse la versin 1,sus caractersticas eran limitadas; pero, al poco tiempo, Microsoft mejor la tec-nologa y sac a relucir la segunda versin de Silverlight, versin de la que se ocupaeste libro. Pero esta efervescencia, este cambio constante junto a la bsqueda deun mejor producto y de una tecnologa superior, hicieron que, durante el tiem-po de escritura de este libro, Microsoft sacara la siguiente versin de Silverlight.En este momento, ya contamos con la versin 3 de Silverlight como una versinfuncional 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 slo aprender sobre Silverlight, sinoque tendr un bono extra al final, que le servir de rampa de lanzamiento paraabordar de lleno la nueva versin y permanecer siempre actualizado.

PRELIMINARES

12


Introduccina Silverlight 2

Iniciarse en el mundo de Silverlight 2 14

Navegar hacia el mundo de Silverlight 2 14La experiencia de usuario y la portabilidad 16Arquitectura de Silverlight 2 19Microsoft .Net Framework 20Interfaz de usuario y presentacin 21El cdigo XAML 22Herramientas de desarrollo para Silverlight 2 24

Resumen 27Actividades 28

Captulo 1

En este primer captulo 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 grficas,

los diseadores y programadores,

as como las limitaciones

de las herramientas usadas por cada uno.

Silverlight

SERVICIO DE ATENCIN AL LECTOR: [email protected]


INICIARSE EN EL MUNDO DE SILVERLIGHT 2Muchos cambios se han producido en el desarrollo web desde sus inicios. Se hansucedido 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 aos de evolucin hasta la actualidad, cuando una de estasherramientas ve la luz para traer una solucin a nuevas necesidades. Veamos, eneste captulo, los componentes clave de Silverlight 2: las herramientas de desarro-llo y diseo, su arquitectura y los elementos principales que le dan vida.

Navegar hacia el mundo de Silverlight 2Desde los inicios de la Web, sta ha ido evolucionando, mutando y creciendo.Esta evolucin se inici con la simple transferencia de texto, pas por las imge-nes y la captura de datos del usuario por parte del sistema, hasta llegar al manejode contenido personalizado. ste se genera para el usuario y por l, simulandocasi el mismo comportamiento de aplicaciones desarrolladas para sistemas de es-critorio. Los cambios radicales en las tasas de transferencias de datos, as comoen las capacidades de los equipos que servan esta informacin, tambin acom-paaron dichos acontecimientos. Por supuesto, esta evolucin no slo fue de capa-cidades de hardware y prestaciones hacia el usuario. Al mismo tiempo, estuvo acom-paada por software, lenguajes de programacin y herramientas de desarrollo que,en conjunto, ayudaran a amortiguar la curva de complejidad sobre las necesida-des crecientes que tenan los sistemas. En definitiva, existan mayores requeri-mientos por parte de los usuarios y de los sistemas, por lo que la implementacinen lneas de cdigo y la puesta en marcha de los servicios necesitaron de herra-mientas que hicieran ms simple este trabajo.En la actualidad, el desarrollo web est ms pujante que nunca. Adems, con eladvenimiento de teoras (y prcticas) como el Cloud Computing o servicios deInternet totalmente dinmicos para correos electrnicos, confeccin de docu-mentos, redes sociales e interconexin de servicios, entre otros, debemos enten-der que la Web seguir creciendo y mejorando durante mucho ms tiempo. Estonos llevar de vuelta a la idea antes tratada: mayor complejidad, mejoramiento enlas herramientas y el soporte. Esta mejora en las herramientas que brindan soportetanto al desarrollador como al diseador se hace cada vez ms necesaria y es mu-cho ms 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 tecnologa nicay definitiva, el desarrollador web se ve en la necesidad imperativa de adquirir do-minio y conocimientos sobre decenas de tecnologas y lenguajes de programacin,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. INTRODUCCIN A SILVERLIGHT 2

14


visible Silverlight. Este software forma parte de dicho crecimiento y sirve comosolucin, ya que plantea una mejor forma de desarrollar contenido dinmico pa-ra la Web. Esto sucede no slo en lo visual, sino tambin como herramienta dedesarrollo basado en tecnologas comunes ya conocidas.No debemos equivocarnos al pensar que Silverlight constituye la estrategia deMicrosoft para competir con el ya popular Flash, ex de Macromedia, y ahora deAdobe. Por el contrario, Silverlight representa una oportunidad de reutilizar el co-nocimiento ya adquirido sobre cdigo basado en Microsoft.Net Framework, unmodelo que soporta no slo lenguajes desarrollados y mantenidos por esta empresa,sino que cuenta, por el contrario, con el soporte de compaas creadoras de lengua-jes tan populares como Borland C# Builder y Delphi, tambin de Borland. De es-ta forma, Silverlight trae consigo la posibilidad de enriquecer la experiencia visualen el cliente web, trabajando en cualquiera de los navegadores de Internet msconocidos. Puede interactuar y ser modificado por lenguajes como JavaScript, ex-tendiendo el concepto de HTML dinmico y A.J.A.X. (Asynchronous JavaScript andXML o, en castellano, JavaScript asncrono y XML). Tambin puede consumir ser-vicios web o cualquier elemento con la capacidad de retornar XML, al mismo tiempoque puede ser programado o desarrollado mediante aquel lenguaje que usamos to-dos los das para nuestros desarrollos, o con el que nos sintamos ms cmodos paragenerar las lneas de cdigo que darn vida a nuestra aplicacin.

Figura 1. Microsoft .Net Framework es el nexo entre el sistema

operativo y nuestro cdigo. Nos ofrece una plataforma de ejecucin, libreras

de cdigo, acceso a datos y soporte para diferentes lenguajes.

VB C++ C# J# ...

Common Language Specification

Visual Studio .NET

ADO .NET y XML

Librera de clases base

Common Language Runtime

Sistema Operativo

ASP .NETWeb Forms Web Services

Mobile Internet Toolkit

WindowsForms

Iniciarse en el mundo de Silverlight 2

15


La experiencia de usuario y la portabilidadAntes de la aparicin de Microsoft .Net Framework, construir una aplicacin de soft-ware requera diferentes habilidades y dependa del ambiente en el cual se desarrollaraesta aplicacin. As, si las aplicaciones necesitaban desarrollarse para ser usadas bajoWindows, stas requeran que su diseo visual se creara de manera especial para estemodelo. Al mismo tiempo, debera contemplar las limitaciones que el lenguaje de pro-gramacin trajera consigo. El diseo, entonces, quedaba encapsulado dentro del cdi-go del lenguaje seleccionado, siendo casi imposible su implementacin en otro lenguajeo en una nueva versin del mismo. Pensemos que, si una aplicacin deba ser migradaa una nueva versin del lenguaje o, por necesidades de negocio, deba ser implemen-tada en otro lenguaje, toda la interfaz visual deba ser reescrita e implementada. A loanterior debamos sumar que, si exista un cambio de ambiente, es decir, si movamosel desarrollo a un dispositivo mvil o a la Web, no slo la interfaz deba ser reescrita,sino que tambin deba cambiar la lgica radicada en el cdigo. Esto no slo acarreareinversin de tiempo y dinero, sino que, adems, la interfaz (y tal vez la lgica de ne-gocio) nunca quedara del todo igual, castigando la experiencia del usuario que se ha-ba acostumbrado a una herramienta ya construida e implementada.Con la primera versin del .Net Framework, Microsoft hace el intento inicial degenerar portabilidad entre ambientes y lenguajes, separando la interfaz grfica dellenguaje de programacin y proveyendo componentes comunes para que los am-bientes similares puedan reutilizar las interfaces ya creadas. Gracias a esto, tenamosaplicaciones creadas para Windows, que tambin funcionaban en dispositivos mviles,aunque an quedaba trabajo por hacer en cuanto a desarrollo web y Windows,ya que estos dos ambientes seguan siendo incompatibles. Con la versin 3.0 deMicrosoft .Net Framework, se introdujo un nuevo enfoque por medio de un es-quema XML para la confeccin y manipulacin de interfaces de usuarios: ya noaparecan los tpicos botones y cajas de texto rgidas comunes en cualquier aplica-cin de escritorio. Este esquema, llamado XAML (eXtensive Application MarkupLanguage, o en castellano, Lenguaje Extensible de Formato para Aplicaciones) porsus siglas en ingls, le permiti al desarrollador crear otro tipo de aplicaciones anivel visual. XAML fue explotado por WPF (Windows Presentation Foundation),pero muy rpido se entendi que XAML tena mucho futuro por delante.


16

La experiencia demuestra que la primera reaccin 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 tcnicos, como lengua-

jes de programacin y arquitectura.

QU ES SILVERLIGHT?


Figura 2. CardSpace, WCF, WPF y WF (Workflow Foundation)

se agregan como parte de Framework 3 sobre la versin 2 de Framework.

Silverlight 2 usa, para la representacin visual de sus elementos, XAML. Las mis-mas etiquetas que, como decamos antes, tambin son soportadas por aplicacionesde escritorio construidas con WPF. Esto genera una ventaja significativa sobre lacreacin de aplicaciones y la adaptacin del usuario a nuevas tecnologas. Pen-semos que, al tener un componente comn como XAML para la representacinvisual de elementos de la interfaz grfica, el esfuerzo aplicado para la creacin deuno de estos componentes puede ser reutilizado y explotado en otros ambientes,no slo en aquel para el cual Silverlight fue ideado. Pensemos entonces en unaaplicacin de escritorio, con cientos de usuarios que la usan durante meses o aosy, de un momento a otro, se encuentran usando la misma aplicacin, pero den-tro de un navegador web, con los mismos botones, el mismo contenido visual eigual comportamiento. Uno de los lados ms rugosos en la implementacin de unsistema est atado a la adopcin de ste por parte del usuario, y es en los cambiosde plataformas y ambientes donde se producen las discordias. Aqu es necesario

Microsoft.NET Framework

Versin 2.0

CardSpace WPF

WCFWF


17

Microsoft .Net Framework no slo soporta los lenguajes de programacin propuestos por Mi-

crosoft. Tambin podemos encontrar otros como Boo, Icc, Clarion#, Cobol, Corba, Eiffel, Fortran,

Lisp, PHP, Perl y ms. 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


invertir mayor esfuerzo para que esta nueva idea sea aceptada. Por tal motivo, noshar falta toda la ayuda posible al momento de hacer este cambio. En la Web, las aplicaciones tienen ms representatividad y, por ende, su atractivoy su facilidad de uso necesitan potenciarse. Esta mejora es llevada a cabo por laimplementacin de soluciones que conjugan JavaScript y XML, dando como pro-ducto la pieza conocida como A.J.A.X., donde bien podemos encontrar cientos demodelos listos para ser implementados. Pero el desarrollo sigue enfocndose en lamanipulacin del HTML que, sin desmerecer sus posibilidades, siempre llegar aun techo mximo, relacionado con las capacidades del mismo modelo HTML. Encomparacin con el modelo de aplicaciones de escritorio, la interactividad ofrecidapor este ltimo es muy superior a la que presenta HTML, y es aqu donde Silverlight,una vez ms, explota lo mejor de estos dos mundos y lo lleva en forma directa almbito de aquel que pierde en comparacin: el del HTML.

Figura 3. Silverlight se nutre de cada una de las principales

caractersticas de los dos mundos, generando una mejor experiencia

de usuario e independencia en plataformas.

Navegadores web

CSS/HTML

JavaScript/AJAXASP.net

Aplicacionesde escritorio

XAML

Framework .Net


18

Es importante entender las diferencias entre las versiones de Microsoft .Net Framework. Slo a

partir de la versin 3, se incorpora el uso de XAML, as como WPF, pero el ncleo de este Fra-

mework se mantiene idntico al de la versin 2. Al desarrollar para cualquiera de estas nuevas

plataformas, deberemos elegir una versin de Framework 3 o superior.

VERSIONES DE MICROSOFT .NET FRAMEWORK


Como observamos en la Figura 3, Silverlight toma lo mejor de los dos mundos. Porun lado, los controles y componentes verstiles propuestos por el desarrollo de es-critorio y, por el otro, la portabilidad entre plataformas y la rapidez de la actuali-zacin de aplicaciones a miles de usuarios al mismo tiempo que otorga Internet.Esta versatilidad y portabilidad entre plataformas, tanto de escritorio como web,no sera posible sin un lenguaje comn de representacin de controles.XAML es el lenguaje que nos dar esta posibilidad no slo para el desarrollo, sinoque tambin 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 adopcin 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 utilizacin de XAML y Silverlight.

Arquitectura de Silverlight 2Al comienzo de nuestro recorrido, nombramos algunas de las caractersticas de Sil-verlight que, al mismo tiempo, definen su planteo arquitectnico. Dijimos queSilverlight 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-trprete. Este componente ronda los 5 megabytes, lo que constituye una sumamuy pequea en relacin con su potencia. En la actualidad, es soportado por losprincipales navegadores de Internet como Internet Explorer, FireFox y Safari,as como los sistemas operativos Windows (con base en Windows XP con ServicePack 2 y hasta Windows 7), Mac OS X 10+ y Linux.Pero Silverlight, aunque hemos hecho hincapi en la gestin de interfaces de usuario,no slo es un lienzo donde podemos crear animaciones vectoriales, sino, muy por elcontrario, 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 ms. Como observamos en la Figura 4, Silverlight va muchoms all y nos entrega, por sobre todas las cosas, acceso a las ltimas tecnologas ypatrones de desarrollo de software. Podemos separar y enumerar las diferentes carac-tersticas sobre la base de su rea de trabajo, como veremos a continuacin.


19

Por lo general, es difcil lograr que un usuario adopte una nueva aplicacin cuando est acos-

tumbrado a la que usa desde hace aos. Este problema de adopcin 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 adopcin ser casi transparente.

LA DIFCIL ADOPCIN POR PARTE DE LOS USUARIOS


Figura 4. En este diagrama podemos observar

la arquitectura soporte completa de Silverlight 2.

Microsoft .Net FrameworkCon respecto a las lneas de cdigo y de clases ya implementadas para ser usadas porel desarrollador de cdigo, el Framework disponible cubre todas las reas necesariaspara interactuar con datos y hasta con lenguajes propios de la Web.

.NET para Silverlight

Centro de presentacin

Manejo de navegador

WCF

RESTRSS/ATOM

SOAP

Librera paraMicrosoft

AJAX

MotorJavaScript

POXJSON

WPF

ControlsData Binding

LayoutEditing

Data

Motor de ejecucin CLR

XAML

LINQXLINQXML

Centro de interfazgrfica

VectorAnimation

TextImages

Integradocon la red

Integradocon DOM

Serviciode aplicaciones

Instalador

Perifricos

KeyboardMouse

Ink

Multimedia

VC1WMAMP3

DRM

Media

BCC

GenericsCollections

CryptographyThreading

DLR

Iron PythonIron Ruby

Jscript


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 consultasintegradas con el lenguaje de programacin.

WCF (Windows Communication Foundation): plataforma de comunicacin paraacceso a servicios web, servicios remotos y peticiones HTTP, entre otros.

Librera de clases base: acceso a las libreras de clases de Microsoft .Net Frame-work, que nos ofrece soporte para el manejo de cadenas de texto, expresiones regu-lares, serializacin de datos, manejo de internacionalizacin de aplicaciones y ms.

CLR (Common Language Runtime): motor de Microsoft .Net que se encarga delmanejo de la memoria y dems puntos de contacto con el sistema operativo.

DLR (Dynamic Language Runtime, en castellano Lenguajes Dinmicos): soporte pa-ra lenguajes de programacin como JavaScript, Iron Phyton e Iron Ruby.

Almacenamiento aislado: permite generar sectores de almacenamiento de archi-vos e informacin de manera aislada y para usuarios especficos.

Interfaz de usuario y presentacinSilverlight tambin presenta una gran cantidad de funcionalidad en cuanto a su pre-sentacin visual y puede manejar sonidos, imgenes y videos, as como una serie decontroles y componentes listos para usar.

Video y sonido: inclusin de soporte de formatos de video y sonido comunes co-mo MP3 y WMA. Incluye capacidades de streaming.

Imgenes: capacidad de despliegue de imgenes tanto vectoriales como mapas debits en sus formatos ms comunes, texto y animaciones.

Enlazado de datos: capacidad de enlazado de fuentes de datos automtica que fa-cilita el despliegue de la informacin desde diferentes fuentes de datos.

Controles: set de controles listos para usar que brindan la posibilidad de crearnuestro propio set de controles y de reusarlos en diferentes aplicaciones.

XAML: implementacin de eXtensible Application Markup Language para la con-feccin 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 lasprincipales tecnologas Microsoft y que permite desenvolvernos con soltura almomento de desarrollar aplicaciones sobre ste. Silverlight, entonces, nos ofrece la potencia de los lenguajes de programacin uti-lizados, por lo general, en el desarrollo de aplicaciones de escritorio y web, ade-ms, de su posibilidad de interaccin con bases de datos y servicios remotos.Tambin, nos brinda la elegancia de sus vistosas interfaces visuales, que puedeninteractuar con lenguajes cliente, tales como JavaScript, enmarcado en un nave-gador web, sin estar atado a un sistema operativo ni a un navegador especfico.


21


Figura 5. En la imagen, observamos los controles

visuales listos para usar y su apariencia por defecto.

El cdigo XAMLYa hemos nombrado a XAML como uno de los componentes fundamentales deSilverlight, pero veamos un poco ms en profundidad de qu se trata exactamen-te. XAML es un lenguaje declarativo, formado por etiquetas descriptivas paracada uno de los componentes que Silverlight pueda representar. XAML basa elconcepto descriptivo en el conocido modelo de XML. Gracias a esta cualidad (ba-se de XML), entender la estructura de XAML resulta simple e intuitivo. Veamosa continuacin un ejemplo de elementos XML simples:


22

Debido a que Silverlight puede ser desarrollado con los principales lenguajes de programacin

soportados por Microsoft .Net Framework, ste brinda pleno soporte para la programacin orien-

tada a objetos y puede absorber todos los beneficios inherentes a este modelo de programacin.

PROGRAMACIN PROFESIONAL


Contenido del Elemento

Etiquetas o tags descriptivas dentro de caracteres < y >. Cada elemento es iniciado conun nombre especfico y siempre deberemos sealar su cierre utilizando el mismo nom-bre ms los caracteres

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 TextBlockson controles preestablecidos por el entorno de Silverlight. Canvas es utilizadopara definir un elemento contenedor de otros componentes, y TextBlock nos da laposibilidad de mostrar texto en pantalla en forma de bloques. La combinacin deestos elementos produce lo que aparece en la Figura 6, pero el concepto va ms allporque muestra cmo, anidando elementos, podemos conseguir diferentes efectosvisuales. As, es posible mezclar un control del tipo botn con un control utilizadopara mostrar imgenes o videos y obtener como resultado un botn en cuyo fondose 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 porel lenguaje de programacin que elijamos para darle funcionalidad a la interfaz vi-sual. Con este atributo, podremos cambiar el texto representado al principio en tiem-po de ejecucin, sobre la base de la reaccin de un evento por parte del usuario opor parte del flujo de nuestra aplicacin. A medida que avancemos en el libro, nosintroduciremos dentro de XAML; tambin en los diferentes componentes y con-troles disponibles por parte del entorno de desarrollo y libreras de objetos.

Herramientas de desarrollo para Silverlight 2Si tenemos en cuenta que una de las principales cualidades de Silverlight es el poten-ciamiento visual en interfaces de usuario, sera muy interesante contar con herramien-tas para su correcto diseo y diagramacin. As, de manera sencilla, nos guiaran en laconfeccin de los elementos XAML, su estructura, controles anidados, enlazado a fuen-tes de datos, entre otros. Microsoft nos provee de dos herramientas principales, cadauna de ellas enfocada a cubrir una de las ramas involucradas en la generacin de ele-mentos Silverlight. Por un lado, para desarrolladores de software, la herramienta porexcelencia es Microsoft Visual Studio en su versin 2008. Aunque la nueva versinde esta herramienta puede obtenerse con facilidad (Visual Studio 10), la que hemosnombrado es suficiente para emprender nuestra labor. Microsoft Visual Studio 2008resultar ideal debido a su soporte de Microsoft .Net Framework 3.5, herramientaque trae consigo una serie de plantillas para 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 representacin de controles en el entorno de Silverlight. As

lo hace flexible en la creacin de los elementos, fcil de entender y portable entre ambientes.

XAML Y XML


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, adems de la herramienta mencio-nada, el Service Pack 1 para sta. La instalacin del Service Pack 1, junto con la delas herramientas de desarrollo de Silverlight 2, incluirn en Visual Studio 2008 lasplantillas de la Figura 7. Debido a que la versin 2 de Silverlight vio la luz despusque la herramienta de desarrollo, este procedimiento resulta la nica forma de po-der ver los asistentes y dems componentes dentro de la mencionada herramienta.Adems de las plantillas que acelerarn el desarrollo, podremos encontrar una serie decontroles y componentes para su uso inmediato que, si bien, como veremos ms ade-lante, es posible construirlos por nuestra cuenta desde cero, toda la lgica 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 slo algunos de los que encontraremos dentro del aba-nico de posibilidades. Como vemos en la Figura 8, Visual Studio 2008 nos presenta unalista completa de controles listos para usar que, como ya dijimos, tienen toda la lgicaque necesitarn impresa en el mismo componente, y, adems, est pronta para usar.


25

Adems del Service Pack 1 para Visual Studio 2008, tambin deberamos contar con el con-

junto de herramientas de Silverlight. stas pueden ser descargadas desde la direccin

www.microsoft.com/downloads, ingresando Silverlight 2 tools for Visual Studio 2008 como

criterio de bsqueda.

DESCARGA DE SILVERLIGHT 2 TOOLS PARA VISUAL STUDIO 2008


Figura 8. Grillas, cajas de texto y listas desplegables son slo

algunos de los controles listos para usar incluidos en Visual Studio 2008.

Por otro lado, tambin existe una herramienta para diseadores grficos que nocuenten con experiencia en el desarrollo de software. Con una interfaz similar ala de herramientas para manejo fotogrfico, Microsoft Expression Blend 2 lepermite al diseador grfico, y por qu no al desarrollador, construir XAML demanera rpida y amigable, como toda herramienta WYSIWYG (What you see iswhat you get o en castellano Lo que ves es lo que obtienes) por sus siglas en in-gls. Esto quiere decir que, al trabajar con Microsoft Expression Blend 2, eldiseo que planteemos ser igual al resultado final en el momento de ejecucinde la aplicacin de Silverlight. Deberemos usar Microsoft Expression Blend 2 siestamos habituados a la creacin de imgenes vectoriales o si slo buscamos ace-lerar el desarrollo de componentes Silverlight. Veremos ms a fondo las cualida-des de Microsoft Expression Blend 2 a lo largo de los captulos, con suficientedetalle 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 comn, nos veremoscreando cdigo en la primera herramienta, abriendo y editando el mismo pro-yecto en la segunda, para terminar con algunos retoques artsticos o acelerar elenlazado de datos en nuestro trabajo. En la Figura 9, podemos observar cmo unproyecto 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 Studio 2008, es necesarioinstalar 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 1para Microsoft Expression Blend 2 nos otorgar la prestacin.


26


Figura 9. Microsoft Expression Blend 2 trabajando

sobre una solucin creada en Microsoft Visual Studio 2008.

A lo largo del libro haremos referencia a estas dos herramientas, que sern usadaspara los distintos ejemplos que plantearemos. Por tal motivo, es recomendable con-tar con las herramientas instaladas en nuestro equipo antes de continuar con lossiguientes captulos. Es posible tambin realizar los ejemplos con las versiones gra-tuitas de Visual Studio 2008 (Visual Studio 2008 Express), aunque no podemosgarantizar que los ejemplos de interfaz y otros aspectos concuerden con lo que losusuarios de estas versiones vern en sus equipos.


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 versin 1 de Silverlight hasta la actual, ha habido mejoras

notables, con mayor funcionalidad y prestaciones tanto para el desarrollador como para el

diseador visual. El usuario final se ve beneficiado al tener que descargar un plugin de tamao

pequeo y que trabaja en casi todos los navegadores y sistemas operativos de la actualidad.


28

PREGUNTAS TERICAS

1 En qu modelo se basa el cdigo XAML pa-

ra representar los elementos de la interfaz?

2 Subconjunto de qu otro modelo de desa-

rrollo visual para Windows podramos con-

siderar a Silverlight?

3 Qu versin de Microsoft .Net Framework

necesitamos, como mnimo, para trabajar

con Silverlight 2.0?

4 Qu sistemas operativos y navegadores

web soportan la ejecucin 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 diseadores visuales cuentan con al-

guna herramienta de software que los ayu-

de a crear contenido para Silverlight 2.0?

7 Es necesario instalar algn aditamento en

la herramienta de desarrollo?

8 Silverlight 2.0 provee algn conjunto de

componentes listos para usar?

9 Por qu es importante crear interfaces

atractivas e intuitivas en las aplicaciones?

10Cmo se llama el modelo de desarrollo

para la Web que conjuga el uso de XML y

JavaScript?

ACTIVIDADES

EJERCICIOS PRCTICOS

1 Dirjase al sitio web de la W3C (www.

w3.org/XML) para aprender ms sobre

XML.

2 Para introducirse mejor en el mundo de

Silverlight, intente ampliar el ejemplo pro-

puesto en este captulo, modificando el

tipo de fuente y el color de fondo de la apli-

cacin creada.

3 Para conocer ms 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 trminos utilizados en este libro. La

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

comunidad/dce2005.

4 Instale Microsoft Expression Blend 2 y

djelo listo para trabajar en el siguiente

captulo.

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

analcelos. Esto ayuda a entender con

mayor facilidad esta tecnologa.


MicrosoftExpressionBlend 2

Un paseo por Expression Blend 2 30

Silverlight 2 con Expression Blend 2 30Unir los extremos 32Un recorrido por Expression Blend 2 37Explorador de soluciones 38Pgina inicial de Silverlight 2 39La pgina App.xaml 40El entorno de Expression Blend 2 43La barra de herramientas 46Crear nuestra primera aplicacin con Expression Blend 2 48

Resumen 53Actividades 54

Captulo 2

Cules son las herramientas disponibles

para desarrollar aplicaciones Silverlight?

Cmo podemos aumentar nuestra

productividad a la hora de escribir XAML?

stas son algunas de las preguntas

que abordaremos en este captulo.

Silverlight

SERVICIO DE ATENCIN AL LECTOR: [email protected]


UN PASEO POR EXPRESSION BLEND 2En el captulo anterior, nos introdujimos en el mundo de Silverlight 2. Vimosalgunas de sus caractersticas, los elementos que lo componen y las principales he-rramientas de desarrollo usadas para la creacin de aplicaciones y componentes deSilverlight. Una de estas herramientas, Microsoft Expression Blend 2, es usadapor los diseadores visuales y por los desarrolladores como un suplemento paralos detalles visuales avanzados. En este captulo, ahondaremos en el uso de estaherramienta y su interaccin con Silverlight 2, cmo crear animaciones as comotambin elementos compuestos, para finalizar con la creacin de nuestra primeraaplicacin Silverlight 2. Este contenido est dirigido, en especial, a diseadoresvisuales que quieran incursionar en el uso de Expression Blend 2 como herramientade diseo para software y a desarrolladores de software que necesiten modificar, demanera rpida, interfaces visuales basadas en XAML.

Silverlight 2 con Expression Blend 2Desde los inicios de su desarrollo, este software siempre se enfoc, de maneraprioritaria, en las lneas de cdigo y en la solucin del problema propuesto. Es-to sucede ya que, justamente, fueron el cdigo y el problema por corregir los quemotivaron la creacin de soluciones de software, que provean una respuestaprogramtica a la dificultad planteada. Este enfoque, el de la solucin del problema,caus que en el desarrollo de software primara la capacidad y la calidad de reso-lucin de un problema por encima del enfoque interactivo entre la aplicacin yel 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 haca mediantetarjetas perforadas, las cuales se apilaban en grandes cajas y que posean, en s mis-mas, la resolucin de una de las partes que solucionaba el todo del problema. Sinninguna duda, este sistema era manejado slo por el desarrollador de este softwareprimario y no por alguien ajeno a la informtica de la poca. Desde ese momen-to de la historia y hasta la actualidad, se produjeron cambios en la manera en queel usuario interactuaba entonces e interacta ahora con esta pieza de software. Sin

2. MICROSOFT EXPRESSION BLEND 2

30

A pesar de ms de 40 aos de evolucin en la ingeniera de software, slo en la actualidad se po-

ne especial nfasis en las interfaces visuales y en cmo stas pueden ser parte de la solucin

del problema al que el usuario se debe enfrentar a diario. As, vemos aparecer nuevas tecnolo-

gas multitctiles en sistemas operativos, o de captura de movimientos en consolas de juegos.

LA EVOLUCIN DE LAS INTERFACES


embargo, ste seguira encontrndose una y otra vez ante una herramienta que,aunque en esencia cubriera sus necesidades funcionales y resolviera el dominio delproblema planteado, no abarcara los conceptos de usabilidad, ergonoma visualo interactividad entre el hombre y la mquina.

Figura 1. En el Mix 2009 realizado por Microsoft,

uno de los temas por tratar fue la creacin de interfaces grficas.

Despus de algunas dcadas marcadas por este comportamiento de parte de laingeniera de software y de aquellos que la han practicado, de alguna forma, el usuariotermin acostumbrndose a la idea de obtener aplicaciones o piezas de software queaparecen, como grandes hitos visuales y pantallas monocromticas. Esto sucede,incluso, en pleno auge de las tarjetas aceleradoras de video con capacidades vi-suales que diez aos atrs se reservaban slo a inmensos ordenadores destinados a laproduccin de efectos cinematogrficos. Muy pocos desarrolladores de softwarecontemporneos, incluidas las empresas, contemplan como parte de sus desarro-llos la inclusin de esta temtica. Slo con la llegada de la Web, algunos de ellosadicionaron esto como una necesidad comercial, pero, en muy pocos casos, co-mo una realidad para brindar un mejor producto que, adems de solucionar un

Un paseo por Expression Blend 2

31

Es importante incluir en los proyectos de desarrollo de software a un diseador grfico 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 slo por las lneas de cdigo,

la usabilidad es un aspecto muy importante.

CONSULTEMOS A UN DISEADOR


problema, resulte optimizado en lo que a interactividad con el usuario se refiere.Por supuesto, la implantacin de este concepto dentro del desarrollo de softwareacarre ciertos problemas que han tenido que ser resueltos por fuerza bruta ms quepor inteligencia, debido a que la solucin planteada, la de incorporar mejoras vi-suales e interactivas, requiere de la presencia de otras ciencias. Esas ciencias estnalejadas del desarrollo de software, por lo que el problema resulta bastante claro altener que unir, de alguna forma, extremos que hablan idiomas diferentes.

Unir los extremosEn la actualidad, el mayor impedimento en la creacin de aplicaciones visuales yel 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-cin de diseadores grficos especializados en experiencia de usuario, stos plasmansu trabajo en herramientas ms ligadas a las doctrinas del diseo grfico y las artesvisuales que a las del desarrollo de software. Entonces, el problema recae en quetanto el diseador como el desarrollador hablan idiomas diferentes: los primerosse refieren a colores, movimiento, disposicin de elementos y formas, entre otrosaspectos, mientras que los segundos necesitan saber qu mostrar y cmo se reali-zar el cdigo que contenga la lgica. Al mismo tiempo, los diseadores suelendesconocer las limitaciones de las plataformas donde sern creados los productosde software y tienden a generar elementos visuales extremadamente atractivos, pe-ro con costos elevados en su implementacin por parte del desarrollador. Al finaly sin ser lo ltimo, el producto resultante del diseador ser un conjunto de im-genes o un esquema que mostrar lo pretendido de manera visual para la aplica-cin de software, y le deja al desarrollador la tarea de volver a armar esto dentrode las lneas de cdigo, quien no lo conseguir con exactitud al compararlo conlo propuesto en un principio por el diseador.Y es aqu donde han surgido herramientas que traducen, de alguna forma, estoque el diseador piensa y plasma en algo que el desarrollador pueda usar. As, esposible encontrar herramientas muy potentes como Adobe Fireworks donde,por medio del modelo visual creado por el diseador, el desarrollador obtiene unconjunto de imgenes y cdigo HTML. A pesar de eso, este tipo de herramientasacarrea un problema, ya que se enfocan en el diseador y no en el desarrollador,creando cdigo HTML que, basado en el dibujo propuesto, generan HTML pocotil para su implementacin, como podemos ver a continuacin. El siguiente esel resultado HTML generado para la Figura 2.


32


[...41 lneas eliminadas ...]

Y, si bien este cdigo puede ayudar, resulta imposible de usar para el desarrollador,por lo que ste se ver forzado a reescribir partes o su totalidad para poder obtenercdigo que le sea til. Para esto utilizar slo cdigo HTML, debido a que a ste sele pueden agregar cuestiones programticas a diferencia del anterior.

Filtro de bsqueda

Figura 2. A la derecha podemos

ver lo que consigui el desarrollador como resultado

del concepto ideado por el diseador.


33


El problema es claro: estas herramientas hacen las veces de traductores, pero no de ge-neradores. Traducen lo que el diseador quiso decir a algo que el desarrollador puedaentender, pero, en este proceso de traduccin, 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 enque no es un traductor, sino un generador de funcionalidad, con la caractersticade que para el diseador la herramienta se comportar como cualquier otra herra-mienta de las que est acostumbrado a usar. Sin embargo, a medida que diagrama ydisea los contenidos visuales, sta generar funcionalidad lista para ser implementa-da por el desarrollador de software, como podemos observar en el siguiente cdigo:


34

Existen especializaciones en el desarrollo de software que se enfocan en la optimizacin de las

interfaces visuales, llegando al punto de calcular la cantidad de clics que deber hacer un usuario

para conseguir realizar una accin determinada. La implementacin de estas tcnicas produce

mayor aceptacin de los productos por parte de los usuarios.

OPTIMIZACIN DE LA INTERFAZ


El diseador ver, en lugar del cdigo anterior, un modelo como el que se mues-tra en la figura que aparece a continuacin:

Figura 3. Una lista desplegable creada con Expression Blend 2,

que generar cdigo XAML listo para ser usado por el desarrollador.

Como el desarrollador obtiene cdigo que se adapta a sus necesidades, puede en-focarse directamente en la solucin del problema. A modo de ejemplo, en las si-guientes lneas de cdigo vemos cmo el desarrollador agrega algunas lneas decdigo C# en la clase asociada al cdigo XAML para generar funcionalidad so-bre el producto del diseador:

public partial class Page : UserControl{

public Page(){// Required to initialize variablesInitializeComponent();

this.ComboBox.Items.Add(Item 1);this.ComboBox.Items.Add(Item 2);


35


this.ComboBox.Items.Add(Item 3);}

}

El resultado de esta implementacin de cdigo podemos verlo a continuacin:

Figura 4. Como observamos en esta imagen, el resultado propuesto

por el diseador y la implementacin del desarrollador son idnticas.

Microsoft Expression Blend 2, entonces, sirve de nexo entre los dos elementosinvolucrados en el desarrollo, tanto para diseadores 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 diseador obtendr en la pieza de software el comportamiento y la aparienciavisual, tal como los haba ideado, mientras que el desarrollador no se ver forzadoa intentar traducir estas ideas a elementos programticos y se dedicar exclusiva-mente a la funcionalidad y a la resolucin del problema.


36

Contar con un diseo visual de la aplicacin de manera temprana no slo sincronizar a los

miembros del equipo de desarrollo, ya que todos tendrn una idea general del producto final, sino

que puede servir de disparador de retroalimentacin por parte del cliente al ver con antelacin

la idea del producto terminado.

PROTOTIPO DEL PRODUCTO


Un recorrido por Expression Blend 2Al iniciar Expression Blend 2 o al crear un nuevo proyecto con l, podemos elegirentre cuatro tipos diferentes. Tenemos dos proyectos especficos para Silverlight ysus diferentes versiones, pero tambin podemos disear y trabajar con proyectosWindows Presentation Foundation (WPF).

Aplicacin WPF: este tipo de proyecto representa una aplicacin de escritorio consoporte para WPF. Si tenemos en cuenta que WPF tambin se compone de cdigoXAML, es posible crear un entorno visual directamente desde Expression Blend 2.

Librera de controles WPF: esta librera de controles est especializada en el en-capsulamiento de elementos XAML y cdigo de programacin para su posteriorreutilizacin en aplicaciones WPF. Debemos optar por esta opcin 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 consoporte para la versin 1 de Silverlight. Debemos tener en cuenta que este modelono es tratado en este libro y adems representa una versin antigua del software.

Aplicacin de Silverlight 2: una vez instalado el Service Pack 1 para ExpressionBlend 2, podremos ver esta clase de trabajos. ste es el tipo de proyectos sobre loscuales nos moveremos, tanto de manera visual como programtica.

Figura 5. Lista de proyectos incluidos en Expression Blend 2.


37

La mayora de los controles preestablecidos en Silverlight presentarn un comportamiento si-

milar al de sus homnimos presentes en el desarrollo web y de escritorio. Al interactuar con

ellos se deber, por consiguiente, imitar las mismas lneas de cdigo usadas en los dems

ambientes de desarrollo con Microsoft .Net.

CONTROLES EN SILVERLIGHT


Adems de poder indicar el nombre del proyecto que vamos a crear y la ubica-cin fsica que tendr, es posible seleccionar el lenguaje de programacin con elcual preferimos trabajar. Vale aclarar que, para poder conseguir esta lista, es ne-cesario haber instalado esos lenguajes en nuestra estacin de trabajo. El hecho depoder seleccionar un lenguaje de programacin se refiere a que cualquier cdigoque se realice desde Expression Blend 2 se har en ese lenguaje, por lo que es im-portante elegir aquel con el que estemos ms familiarizados.

Explorador de solucionesUna vez que hemos creado el proyecto Silverlight 2, podremos navegar entre susarchivos desde el explorador de la solucin, que tpicamente puede ser encontradoa la derecha de la aplicacin, como podemos observar en la Figura 6. Este exploradornos mostrar, como elementos iniciales, una pgina del tipo XAML ms una clasecreada en el lenguaje seleccionado, en este caso C#. Esta clase de C# es la que serusada para generar el cdigo que maneje los elementos creados en la pgina XAML.

Figura 6. El explorador de soluciones (rea superior derecha)

de Expression Blend 2 con los elementos iniciales de una aplicacin Silverlight 2.


38

Para mejorar nuestro desarrollo en Expression Blend 2, es recomendable tener instalado, ade-

ms, alguna de las herramientas de desarrollo de software de Microsoft, como por ejemplo

Visual Studio 2008. Esto har que, de tener que agregar cdigo de programacin a nuestro pro-

yecto Silverlight, lo podamos hacer con mayor facilidad desde estas herramientas.

INTEROPERABILIDAD


Pgina inicial de Silverlight 2El archivo Page.xaml es considerado la pgina o componente de inicio para nuestraaplicacin Silverlight 2, teniendo como contenido el siguiente cdigo:

En el caso de Silverlight 2, el elemento inicial es representado por un tag llamado. Lo que nos dice esto es que no ser considerado como una apli-cacin 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 declaracin de atributos de este control Silverlight, se incluye elnombre de la clase de C# encargada de manejar los componentes del control, ascomo el ancho y el alto, en pixeles, del control. Si exploramos el contenido deesa 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;


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

automtica a las dimensiones de su contenedor.

DIMENSIONES DE SILVERLIGHT


using System.Windows.Shapes;

namespace SilverlightApplication2{

public partial class Page : UserControl{

public Page(){

// Required to initialize variablesInitializeComponent();

}}

}

Esta clase, como ya comentamos, es la que ser usada como contenedor de laimplementacin del cdigo que interactuar con los componentes colocados en lapgina XAML previamente vista. Esto quiere decir que, si queremos que nuestraaplicacin Silverlight consuma datos de una base de datos o reaccione apoyada enestmulos por parte del usuario, deberamos escribir esas lneas dentro de esta clase.Por supuesto, no estamos obligados a acumular todas las lneas de cdigo en estenico archivo ya que, como en todo lenguaje orientado a objetos, podremos creartantas clases como necesitemos sin estar obligados a tener una pgina XAML porcada una. As, podramos encapsular la lgica de negocios o el acceso a datos enclases especializadas, y generar cdigo mantenible y fcilmente modificable.

La pgina App.xamlLa pgina App.xaml, junto con la clase de cdigo que la representa, es otro de losarchivos 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 lasdems pginas de tipo XAML. Como podemos ver en el siguiente cdigo:


40

Como una buena prctica en el desarrollo de software, encontramos los patrones de diseo de

software. stos representan formas de crear cdigo para solucionar problemas especficos. Es

importante tener presente estos patrones para mejorar la calidad del cdigo creado en Silverlight.

Como resultado, obtendremos cdigo ms prolijo y ms fcil de modificar.

PATRONES DE DISEO DE SOFTWARE


>

......

En el cdigo anterior, el archivo App.xaml es usado para alojar la definicin de unnuevo elemento TextBox, que presenta ciertas particularidades de sus atributos decolor 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 aplicacin. Por lo comn, cuando desarrollemos conSilverlight, tendremos la necesidad de crear nuestros propios esquemas visualespara que sean aplicados sobre controles especficos. Una forma de compartir estosesquemas es mediante su colocacin dentro de este archivo. De cualquier manera,hablaremos ms de estos esquemas y propiedades en los captulos 4 y 5.


41

Debemos tener cuidado en la cantidad de informacin que agregamos a nuestros archivos XAML,

ya que stos deben ser descargados por el usuario. Un archivo de gran tamao tomar ms

tiempo en ser descargado, en detrimento de la experiencia del usuario. Podemos usar carga por

demanda para mejorar esta experiencia.

TAMAO DE ARCHIVOS


Figura 7. El esquema generado puede ser aplicado a otros

controles del mismo tipo en cualquier otra pgina de Silverlight.

Con respecto a la pgina de cdigo (App.xaml.cs), podemos decir que presentaun conjunto de eventos que se dispararn en determinados momentos de la vi-da de nuestra aplicacin. El cdigo genrico se muestra a continuacin, y luegolo analizaremos con ms 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 herethis.RootVisual = new Page();

}

private void OnExit(object sender, EventArgs e) {}


42


El primer mtodo, constructor de esta clase, se encarga de enlazar eventos inhe-rentes al comportamiento de nuestra aplicacin. El mtodo OnStartup se ejecutaral inicio de la aplicacin, en este caso, podramos colocar cdigo en l para con-seguir algn comportamiento necesario al momento de inicializarse nuestra apli-cacin. Por ejemplo, podramos necesitar inicializar objetos o conectarnos a unservicio web, entre otras posibilidades. En el mismo caso, el evento OnExit ser dis-parado en el momento en el que la aplicacin sea cerrada o terminada, y de igualforma que en el caso anterior, podramos necesitar liberar ciertos recursos o realizaracciones especficas cuando la aplicacin concluya.

El entorno de Expression Blend 2El 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 diseadorescomo 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 cmo

son manipulados distintos controles de manera visual.

Desde esta rea central, tambin es posible interactuar en forma directa con elcdigo XAML. En nuestra interfaz podemos ver, en la parte superior derecha, lasopciones para intercambiar entre los diferentes modos de visualizacin: Diseo,XAML o Dividir (mixto), y tenemos la posibilidad de modificar los componentesdesde cualquiera de estas vistas. Si contamos con cierta experiencia en edicin de


43


XAML, es probable que trabajemos en el modo mixto o de pantalla dividida, yaque esto puede acelerar nuestro trabajo de manera significativa.El prximo grupo de paneles que vamos a inspeccionar es el de las propiedades.ste se encuentra situado a la derecha de Expression Blend 2. Tpicamente, estaspropiedades son el acceso rpido a las configuraciones de aspecto y comportamientode los controles adicionados al lienzo de edicin. Para lograr la inspeccin de laspropiedades de un control, primero ser necesario seleccionarlo. Segn el controlseleccionado, las propiedades se vern afectadas en relacin 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,

slo debemos movernos usando la barra de desplazamiento ubicada a la derecha.

En esta rea tambin podemos encontrar, en la parte superior, opciones que tenganque ver con el proyecto. En especial, la pestaa relacionada con los recursos dela aplicacin, donde se listarn 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


44

En Silverlight, no slo es posible modificar la apariencia visual de los controles nativos mediante

la generacin de esquemas. Tambin podremos crear nuestros propios componentes y controles

heredndolos en nuestro propio cdigo y creando nueva lgica funcional.

IMPLEMENTACIN DE CONTROLES


elementos sobre alguno de los controles existentes para aplicar las configuracio-nes a ese control. El resultado de arrastrar el estilo configurado al inicio permiteobtener 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 pestaa de recursos.

El ltimo panel que agrupa informacin sobre nuestra aplicacin Silverlight se en-cuentra a la izquierda del lienzo de dibujo. Sobre estos grupos, en la parte superior, seubican las transformaciones y animaciones de los componentes de nuestra aplica-cin. Aunque hablaremos de estas propiedades con mayor detalle en el captulo 5, valerecalcar que se pueden generar diferentes efectos de movimiento y transformacionesdesde esta seccin. Debajo de este panel, se encuentra el rbol de controles de la p-gina que estamos visualizando. Los controles se agruparn de manera jerrquica sobrela base del contenedor inmediato superior. Si tenemos en cuenta que los controlesXAML pueden ser contenedores de otros controles XAML, esta estructura nos darrpido acceso a cada uno de los elementos que componen un control de manera rpi-da. En la Figura 11, podemos ver un ejemplo de este rbol y del panel de animaciones.


45

Todas las imgenes, videos y sonidos que agreguemos a nuestro proyecto, as como cualquier

archivo externo, sern comprimidos en un nico archivo final con extensin XAP. Este archivo

es, en realidad, un archivo zip que contiene todos los elementos creados por el proyecto Silverlight.

COMPRESIN DE ARCHIVOS


Figura 11. En este rbol de controles se muestra la lista

de elementos agregados antes a nuestro lienzo de dibujo, cmo stos

son contenidos por una grilla y sta, a su vez, por el control Silverlight.

La barra de herramientasDesde la barra de herramientas de Expression Blend 2, tendremos acceso a todoslos controles y componentes preestablecidos de Silverlight y de Microsoft .NetFramework. Podemos separar la lista de controles en los siguientes grupos:

Elementos de dibujo: son aquellos que nos dan acceso a herramientas de dibujovectoriales. Con stos, podremos dibujar lneas, curvas, crculos y rectngulos.

Figura 12. Listas de controles para dibujo vectorial.

Contenedores y agrupadores: la tarea de estos elementos consiste, principal-mente, en agrupar otros controles Silverlight, aunque tambin se encargan deordenar, dentro de la superficie de dibujo, la disposicin de esos elementos. As,


46


podemos encontrar grillas, donde se definirn filas y columnas (agregando den-tro de cada celda distintos controles y componentes) o elementos de barras dedesplazamiento para colocar contenido que exceda los lmites de ancho o alto de-finidos para una zona de nuestra aplicacin.

Figura 13. Controles para la agrupacin y contencin de otros elementos y controles.

Interaccin con el usuario: este ltimo grupo representa aquellos controles ycomponentes que sirven para capturar comportamiento por parte del usuario.Dentro de los ms conocidos, podemos encontrar los botones, cajas de texto, lis-tas desplegables y botones de seleccin mltiple, entre otros.

Figura 14. Controles ms comunes para capturar informacin por parte del usuario.

Los controles antes nombrados suelen ser los que se usan con mayor frecuencia para eldesarrollo de aplicaciones con Silverlight, pero existen otros que no se ven de forma di-recta. Para poder acceder a ellos, es necesario seleccionar el ltimo elemento de la listaen la barra de herramientas. Al hacerlo, podremos ver la lista completa de controles dis-ponibles y agregarlos a nuestra coleccin de controles, como se muestra a continuacin.


47


Figura 15. Todos los controles disponibles desde Expression Blend 2.

Crear nuestra primera aplicacin con Expression Blend 2Ya estamos en condiciones de comenzar a trabajar con Expression Blend 2 para crearnuestra primera aplicacin Silverlight. En este caso, crearemos un visor simple devideos. Este visor deber contemplar las posibilidades de iniciar, pausar y detener, enforma completa, una pelcula designada por nosotros. El primer paso es crear unanueva aplicacin Silverlight 2. Una vez hecho esto, necesitaremos agregar a nuestrolienzo de dibujo un control del tipo MediaElement, que sirve para representar videos,imgenes y sonidos en Silverlight. Para poder agregar este control, es necesario que lobusquemos en la lista completa de controles Silverlight, como vimos en la Figura 15,ya que no se encuentra disponible en la barra de herramientas. Junto con este control,agregaremos alguno del tipo Border. Este control es necesario para darle una apa-riencia de caja a nuestra pelcula, debido aque el control MediaElement no poseecaractersticas. Podemos obtener un cambio en la configuracin visual del controlBorder si modificamos sus caractersticas en la pestaa Propiedades. Para este caso,


48

A medida que Silverlight va madurando, ms empresas y portales en la Web se inclinan por

la utilizacin de esta tecnologa sobre otras. Uno de los ltimos portales que opt por modi-

ficar toda su implementacin de servicios para los usuarios fue Terra, al cambiar su utilizacin

de Adobe Flash por Silverlight.

CADA VEZ MS SE INCLINAN POR SILVERLIGHT


debemos modificar las propiedades del fondo (Background), para que se aplique elcolor degradado, y las de apariencia, colocando el grosor del borde del control(BorderThikness) en 1 y el radio de curvatura de las esquinas (CornerRadius) en 10.

Figura 16. Propiedades aplicadas al control Border.

Por ltimo, el control MediaElement debe ser contenido por el control que representael borde configurado previamente. Para esto, arrastramos el control MediaElement den-tro del control Border para lograr el efecto deseado. Como podemos editar directamenteXAML, es posible lograr el mismo fin con las siguientes lneas de cdigo:

Por ltimo, es necesario que agreguemos tres botones para las tres acciones antesdefinidas. Podremos cambiarle el texto que se va a mostrar en cada botn, presio-nando dos veces con el puntero del ratn sobre el control, o mediante sus propie-dades. El resultado debera ser similar al mostrado en la siguiente figura.


49


Figura 17. Nuestro visor de videos con los botones que controlarn la reproduccin.

Una vez conseguido el visor de videos, es necesario configurar el control MediaElementpara especificarle cul ser el video que se va a reproducir. Seleccionamos el con-trol MediaElement en la lista de propiedades y buscamos la fuente de contenido(Source). Por lo general, podremos seleccionar formatos soportados por Silverlightde los que hablaremos con ms detalles en el captulo 6 cuando veamos el compo-nente MediaElement de manera especial. Una vez que hemos seleccionado el videoen cuestin, presionamos la tecla F5 para inicializar la aplicacin. Esta accin de-ber iniciar un explorador de Internet y desplegar la aplicacin creada. Podremosnotar que el video se reproduce con normalidad, pero los botones creados para ca-da una de las acciones no funcionan como esperbamos, debido a que no hemosgenerado ningn cdigo que las realice (Figura 18).Para conseguirlo, el primer paso es asignarle un nombre a nuestro MediaElement,ya que sin l no podremos acceder a las propiedades del control, por lo que no se-r posible iniciarlo, pausarlo o detenerlo. Podemos asignarle el nombre al controlseleccionndolo y agregndole el mismo que tiene en la lista de propiedades o me-diante XAML por medio del atributo x:Name=Nombre del Control. El elementoMediaElement quedar como se ve en el siguiente cdigo:


50

Si necesitamos buscar material sobre desarrollo de interfaces visuales, es posible que tambin

las encontremos mediante la sigla UX (User eXperience o experiencia de usuario, por su signifi-

cado en ingls). Debido a que el trmino, con el tiempo, mut, tendremos ms chances de hallar

informacin mediante este ltimo nombre.

INTERFACES DE USUARIO


Figura 18. El visor de videos trabajando de manera correcta en nuestro navegador.

Si tenemos en cuenta que la lgica debe ser creada en la clase de cdigo C#, necesita-remos escribir algunas lneas en ella para realizar las acciones propuestas por los tresbotones. Tenemos varios caminos para lograrlo: podramos usar Visual Studio 2008para generar el cdigo. Visual Studio 2008 es una herramienta de alto nivel para lacreacin de cdigo para aplicaciones, as como para realizar pruebas sobre l. Por otrolado, sera posible modificar el archivo de clase y el cdigo XAML por nuestra cuen-ta. Sin embargo, esto puede redundar en un aumento de trabajo y del tiempo dedesarrollo y crear posibles problemas en la confeccin del cdigo, si no somos expe-rimentados conocedores del lenguaje de programacin utilizado. De cualquier ma-nera, para este ejemplo, si optamos por la segunda opcin, slo deberemos seguir unoscuantos pasos. Primero, en el cdigo XAML, tendremos que agregar el atributoClick=Nombre del Mtodo por cada botn creado. Click representa el evento por el


51

Expression Blend 2 trae consigo un pequeo servidor de pginas web. Este servidor es activado

en el momento en que queremos depurar nuestro trabajo y ver los resultados obtenidos. Gra-

cias a este servidor, no dependeremos de grandes infraestructuras para desplegar y ejecutar

nuestros proyectos cada vez que necesitemos validar lo que estemos desarrollando.

SERVIDOR WEB


cual se disparar la accin o la lgica contenida en el mtodo o funcin creada en elcdigo C#. As, cuando el usuario presione el botn en cuestin, el evento Click serdisparado y se desencadenar toda la lgica que hayamos programado. Es necesario,entonces, que modifiquemos nuestro XAML para agregar los tres eventos:

Estos tres eventos ahora hacen referencia a tres funciones: Iniciar, Pausar y Detener. Pa-ra agregar la lgica que maneje estas acciones, necesitamos modificar nuestra clase C#.Si no contamos con Visual Studio 2008, podremos abrirla con el bloc de notas o cual-quier editor de texto. El resultado final debera ser como el que sigue:

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;using System.Windows.Shapes;

namespace SilverlightApplication2{

public partial class Page : UserControl

{public Page(){


52


// Required to initialize variablesInitializeComponent();

}

private void Iniciar(object sender, RoutedEventArgs e){

visorVideo.Play();}

private void Pausar(object sender, RoutedEventArgs e){

visorVideo.Pause();}

private void Detener(object sender, RoutedEventArgs e){

visorVideo.Stop();

}}

}

En el cdigo anterior, vemos cmo una simple lnea de cdigo por accin pue-de ejecutar, pausar o detener el video. Si volvemos a ejecutar nuestra aplicacinSilverlight, deberemos poder interactuar con el video seleccionado mediante losbotones, inicindolo, detenindolo y pausndolo.


53

RESUMEN

Expression Blend 2 es una herramienta altamente flexible que une dos reas del desarrollo

de software que haban estado separadas y con falta de comunicacin. De esta forma les da

tanto a los diseadores como a los desarrolladores una forma

Silver Light

Documents

Transcript of Silver Light