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
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.
DESCUBRA UN NUEVO NIVEL EN EL DESARROLLO DE APLICACIONES PARA INTERNET
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
SILVERUGHT PARA DISEÑADORES Y DESARROLLADORES
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
MICROSOFT EXPRESSION BLEND 2 Y MICROSOFT VISUAL STUDIO 2008
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.
UNQ, WCF y SERVICIOS WEB CON C# CREACiÓN DE ANIMACIONES Y TÉCNICAS DE ESCRITURA PARA DISPOSITIVOS TÁCTILES INTERACCiÓN CON JAVASCRIPT, HTML, XML y CSS • 1 ,j
,
"¡'
j
I I ¡'
,1"
por MATÍAS IACONO \
r,
¡'
I
II
\l
'\ • j
"
I
APROVECHE AL MÁXIMO SU POTENCIAL ILIMITADO
I
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
00_Silverlight.qxp
9/30/09
1:16 PM
Page 1
DESCUBRA UN NUEVO NIVEL EN EL DESARROLLO DE APLICACIONES PARA INTERNET
Iacono, Matías Silverlight. - 1a ed. - Banfield - Lomas de Zamora : Gradi, 2009. 352 p. ; 24x17 cm. - (Manual users; 175) ISBN 978-987-663-010-8 1. Informática. I. Título CDD 005.3
00_Silverlight.qxp
9/30/09
1:16 PM
Page 3
00_Silverlight.qxp
9/30/09
1:16 PM
Page 4
PRELIMINARES
Matías Iacono Ingeniero de sistemas, Microsoft Most Valuable Professional en ASP.net, Orador Regional para INETA Latam, Scrum Master certificado y Microsoft Certified Technology Specialist. Cuenta con más de quince años de experiencia en el desarrollo de software con distintas tecnologías y metodologías. Ha dictado cerca de cincuenta conferencias técnicas en distintos países latinoamericanos, así como escrito y publicado artículos en numerosas publicaciones internacionales. Ha trabajado para empresas extranjeras de gran envergadura. En la actualidad, se desempeña como ingeniero de software para Motorola Argentina y es profesor en la Universidad Tecnológica Nacional de Córdoba.
Agradecimientos Agradezco a todos los amigos que me brindaron su apoyo y sus opiniones sobre lo escrito. A Miguel Saez, de Microsoft, por haberme facilitado material y a Lucas Ontivero, de Motorola Argentina, por su crítica aguda, que me ayudó con el contenido propuesto en el libro.
Dedicatoria A mi familia, por quedarse a mi lado largos fines de semana mientras concluía este libro.
4
00_Silverlight.qxp
9/30/09
1:16 PM
Page 5
Prólogo
PRÓLOGO Si hay algo a lo que le debemos la actual difusión de la tecnología informática, tanto dentro del hogar como de las oficinas, es a la continua evolución de las interfaces gráficas de usuarios (GUI). Gracias a ellas, personas de todas las edades y profesiones, en todo el mundo, pueden interactuar con equipos de computación para fines tan diversos como entretenerse, obtener información, realizar cálculos y comunicarse, entre un sinnúmero de otras posibilidades. Es seguro que tanto la constante innovación en el desarrollo de las interfaces gráficas como la aparición de Internet han sido los catalizadores para uno de los más fabulosos cambios en la manera en que las personas, alrededor del globo, se relacionan mediante el uso de la tecnología. Mientras que la Web seguirá siendo el ámbito de comunicación del futuro, es de esperar que los requerimientos de interactividad entre máquinas y humanos se vuelvan aún más sofisticados y exigentes. Ante esto, Microsoft desarrolló Silverlight, una nueva apuesta para el desarrollo de elementos de gráficos de interacción con los usuarios orientados a la Web. En este aspecto es, justamente, en el que esta obra hace un gran aporte, al presentar Silverlight 2.0 de una manera amena, clara y completa. En ella, se abarcan no sólo los pormenores técnicos de la tecnología, sino que, además, el autor se ha esmerado en brindar al lector un cúmulo de conocimientos que sólo podría obtenerse mediante la experiencia, todo esto reflejado en tips, datos útiles, recomendaciones, curiosidades, advertencias y todos los consejos que el lector reconocerá como invaluables a la hora de adentrarse en esta apasionante tecnología. Por último, quisiera agradecer a Matías Iacono por este maravilloso trabajo que ha sido una guía segura en el aprendizaje de Silverlight y, con cuya lectura y estudio, me he sentido guiado y acompañado siempre.
Lucas Ontivero Ingeniero de software, Motorola Argentina
5
00_Silverlight.qxp
9/30/09
1:16 PM
Page 6
PRELIMINARES
EL LIBRO DE UN VISTAZO En esta obra se verán los conceptos principales para dominar Silverlight, la tecnología de Microsoft orientada al desarrollo de contenido dinámico y animaciones para la Web. El contenido está dirigido a desarrolladores con conocimiento de Microsoft .Net Framework, C# como lenguaje principal, y que dominen algunos conceptos de JavaScript y HTML.
Capítulo 1 INTRODUCCIÓN A SILVERLIGHT 2
tipos de proyectos disponibles desde este entorno de desarrollo.
Para conocer Silverlight desde sus comienzos, en este capítulo describiremos
Capítulo 4
su arquitectura. Hablaremos de las diferencias
XAML AL EXTREMO
entre aplicaciones tradicionales y las nuevas
Cada uno de los controles y componentes
aplicaciones visuales, y conoceremos la lista
proporcionados por Silverlight,
de herramientas necesarias para poder
su funcionalidad, eventos, métodos
desarrollar aplicaciones Silverlight.
y funciones, serán vistos en este capítulo. Cada uno de estos elementos será descripto
Capítulo 2
con profundidad, generando código
MICROSOFT EXPRESSION BLEND 2
de ejemplo por cada uno de ellos.
En este capítulo nos enfocaremos
Este capítulo representa una excelente guía
en Microsoft Expression Blend 2 como
de referencia sobre todos los componentes
herramienta de desarrollo para Silverlight,
disponibles en Silverlight.
orientada a diseñadores visuales y a diagramadores de aplicaciones. Daremos
Capítulo 5
un paseo por la interfaz de Microsoft
LUZ, CÁMARA, ACCIÓN
Expression Blend 2 y crearemos nuestra
Gran parte de las prestaciones otorgadas
primera aplicación Silverlight. Este capítulo
por Silverlight incluyen la posibilidad
ayudará a los diseñadores y desarrolladores
de mover objetos dentro de nuestra aplicación.
a entender cada uno de estos mundos.
En este capítulo veremos cómo manipular esta característica, ya que se explicarán
Capítulo 3
los distintos modelos disponibles para
EL MEJOR TRABAJO, CON LA MEJOR
animaciones y transformaciones dentro
HERRAMIENTA
de las aplicaciones Silverlight.
Luego de enfocarnos en el diseñador visual, centraremos la atención de este capítulo
Capítulo 6
en el desarrollador. Para esto, veremos
CERRAR EL CÍRCULO
qué posibilidades nos ofrece Microsoft Visual
Silverlight también otorga mucho potencial
Studio 2008 para desarrollar aplicaciones
con el manejo de imágenes, video y sonido.
Silverlight, los controles y componentes
En este capítulo hablaremos de ciertas
propuestos, su interfaz visual y los diferentes
características relacionadas con actividades
6
00_Silverlight.qxp
9/30/09
1:16 PM
Page 7
El libro de un vistazo
como consumir videos, mostrar imágenes
Apéndice A
o tocar sonidos dentro de las aplicaciones.
SILVERLIGHT FUERA DE WINDOWS
También hablaremos de Deep Zoom
Gracias a MoonLight, Silverlight puede salir
y sus características, así como del dibujo
de Windows y trabajar en sistemas
a mano alzada con InkPresenter.
operativos basados en Linux y Unix. Hablaremos del proyecto MoonLight,
Capítulo 7
sus características, limitaciones y el futuro
INTERCONEXIÓN
de Silverlight como tecnología fuera
Este capítulo ofrece funcionalidades
de su ambiente nativo. Además, se presentan
altamente valiosas. Crearemos un juego
algunas herramientas gratuitas y de código
desde código C# y un lector de RSS,
libre que nos ayudarán en el desarrollo,
usaremos almacenamiento aislado para
tanto para Windows como para Linux.
guardar información en el cliente, crearemos aplicaciones para subir archivos al servidor
Apéndice B
y culminaremos con la implementación
SILVERLIGHT 3, LA NUEVA GENERACIÓN
de la última tecnología de interoperabilidad
Daremos un vistazo al producto recientemente
propuesta por Microsoft al conectar Silverlight
lanzado por Microsoft. Silverlight 3 trae
con Windows Communication Foundation.
consigo valiosas mejoras al modelo ya planteado, las que enumeraremos para
Capítulo 8
ganar conocimiento adicional por sobre
EL NAVEGADOR Y SU DOMINIO
lo ya aprendido durante todo el libro.
Silverlight se ejecuta dentro de una página HTML manejada por el navegador web.
Servicios al lector
Por tal motivo, posee gran potencial
En esta última sección, encontraremos
de interacción con el cliente. En este capítulo
un índice que nos ayudará a buscar de forma
veremos cómo Silverlight puede manipular
rápida los términos más importantes de esta
HTML así como intercambiar información
obra. Además, veremos un listado de sitios
con JavaScript. Además, conoceremos cómo
de interés para ampliar nuestros
JavaScript es capaz de consumir servicios
conocimientos y mantenernos al tanto
generados desde Silverlight.
de las últimas novedades en la materia.
!
INFORMACIÓN COMPLEMENTARIA
A lo largo de este manual encontrará una serie de recuadros que le brindarán información complementaria: curiosidades, trucos, ideas y consejos sobre los temas tratados. Cada recuadro está identificado con uno de los siguientes iconos:
_`
CURIOSIDADES E IDEAS
,
ATENCIÓN
RRR
DATOS ÚTILES Y NOVEDADES
SITIOS WEB
7
00_Silverlight.qxp
9/30/09
1:16 PM
Page 8
00_Silverlight.qxp
9/30/09
1:16 PM
Page 9
Contenido
CONTENIDO Capítulo 3
Sobre el autor
4
Prólogo
5
EL MEJOR TRABAJO,
El libro de un vistazo
6
CON LA MEJOR HERRAMIENTA
7
Silverlight para desarrolladores
Información complementaria Introducción
12
Capítulo 1
56
Silverlight 2 con Visual Studio
59
Crear la primera aplicación
INTRODUCCIÓN A SILVERLIGHT 2 Iniciarse en el mundo de Silverlight 2
56
Puesta a punto de Visual Studio 2008
con Visual Studio 2008
63
14
Navegar hacia el mundo de Silverlight 2
14
La experiencia de usuario y la portabilidad
16
Arquitectura de Silverlight 2
19
Microsoft .Net Framework
20
Interfaz de usuario y presentación
21
El código XAML
22
Herramientas de desarrollo para Silverlight 2
24
Resumen
27
Actividades
28
Interoperabilidad con Expression Blend 2
76
Resumen
79
Actividades
80
Capítulo 2 Capítulo 4
MICROSOFT EXPRESSION BLEND 2 Un paseo por Expression Blend 2
30
XAML AL EXTREMO
Silverlight 2 con Expression Blend 2
30
El lenguaje XAML
82
Unir los extremos
32
¿Qué es XAML?
82
Un recorrido por Expression Blend 2 Explorador de soluciones
37
Declaración de objetos
82
38
Controles y componentes
83
Página inicial de Silverlight 2
39
Controles contenedores y agrupadores
84
La página App.xaml
40
Control Grid
84
El entorno de Expression Blend 2
43
Control GridSplitter
89
La barra de herramientas
46
Control Canvas
92
Control StackPanel
95
48
Control ScrollViewer
98
Resumen
53
Control Border
Actividades
54
Controles de interacción con el usuario 103
Crear nuestra primera aplicación con Expression Blend 2
101
9
00_Silverlight.qxp
9/30/09
1:16 PM
Page 10
PRELIMINARES
Control Button
103
ColorAnimation
173
Control CheckBox
106
Animaciones y transformaciones
175
Control RadioButton
110
Estilos y plantillas
178
Control HyperlinkButton
113
Estilos
178
Control Image
114
Control ComboBox
117
Resumen
185
Control ListBox
124
Actividades
186
Control TextBlock
126
Control TextBox
127
Control PasswordBox
130
Control DataGrid
132
Control Calendar
139
Control DatePicker
147
Control ProgressBar
148
Control Slider
Plantillas
182
152
Resumen
153
Actividades
154
Capítulo 6 CERRAR EL CÍRCULO MediaElement Ejecutar sonidos
188
Video
194
Elementos con video embebido
195
Marcadores de video
196
Deep Zoom Crear el primer Deep Zoom Incluir Deep Zoom en Silverlight
Capítulo 5
Dibujar con InkPresenter
LUZ, CÁMARA, ACCIÓN Mover objetos
156
188
199 200 203 208
Dibujar en forma manual
212
Dibujar sobre otros elementos
215
Transformaciones
158
Transformación de traslación
159
Resumen
219
Transformación de rotación
161
Actividades
220
Transformación escalar
165
Transformación de distorsión
167
Aplicar todas las transformaciones
168
INTERCONEXIÓN
Animaciones
170
Ampliar las funcionalidades
222
DoubleAnimation
171
Silverlight desde C#
222
10
InkPresenter y áreas de dibujo
217
Capítulo 7
00_Silverlight.qxp
9/30/09
1:16 PM
Page 11
Contenido
WebClient
230
Cookies
316
Enviar información
233
Modificar CSS
320
Almacenamiento aislado
239
Silverlight 2 y JavaScript Llamar funciones
Implementar el almacenamiento
323 325
aislado
240
Objetos Silverlight
Capacidad de almacenamiento
245
para JavaScript
Almacenar configuraciones
247
Resumen
347
OpenFileDialog
251
Actividades
348
Manejo de hilos
255
Apéndice A
El concepto de hilos
256
Temporizador
257
SILVERLIGHT FUERA
Personalizar los hilos
259
DE WINDOWS
Hilos y eventos
261
Proyecto Moonlight
Crear un servicio WCF Manipular datos Enlazado de datos LinQ
330
Sistemas operativos
330
263
Versiones de Moonlight
331
270
Herramientas de desarrollo
331
275
Problemas conocidos
333
Consumir servicios desde Silverlight
327
276 283
Resumen
287
Actividades
288
Capítulo 8 EL NAVEGADOR Y SU DOMINIO
Apéndice B SILVERLIGHT 3, LA NUEVA GENERACIÓN Silverlight 3
Conectar tecnologías
290
Silverlight 2 y el HTML
290
336
Nuevos controles
336
Efectos en tres dimensiones
337
Uso de Pixel Shader
338
Fuera del navegador
339
Servicios al lector
HtmlDocument y HtmlElement
292
HtmlPage
301
Índice temático
342
HtmlWindow
307
Sitios web recomendados
345
11
00_Silverlight.qxp
9/30/09
1:16 PM
Page 12
PRELIMINARES
INTRODUCCIÓN Este libro está orientado a desarrolladores de software, y diseñadores visuales y gráficos que deseen expandir su área de conocimiento de desarrollo hacia el ambiente web. Un lector con nociones iniciales podrá ver, durante los capítulos, una evolución que le dará la oportunidad de aprender sin necesidad de saberes previos sobre la tecnología propuesta, Silverlight, mientras que aquel lector con experiencia podrá encontrar en estas páginas una guía fundamental para aprender, con agilidad, conceptos sobre esta tecnología de Microsoft. Sin embargo, es necesario, para ambos lectores, contar con conocimientos medios de desarrollo utilizando Microsoft C#, así como las técnica primordiales del funcionamiento y ejecución de la Web. Los temas propuestos en el libro fueron seleccionados para cubrir la mayor superficie de conceptos sobre Silverlight 2, presentados de una manera progresiva de tal forma que el lector se sienta cómodo con su evolución y que aprenda a cada paso que da. Desde la recomendación y el uso de las herramientas ideales para el desarrollo bajo esta tecnología, tanto para diseñadores como para desarrolladores, generamos ejemplos prácticos en cada capítulo, que abarcan desde HTML hasta C#, así como la aplicación de ASP.net y el uso de JavaScript. Silverlight es un modelo en ebullición. En el momento de lanzarse la versión 1, sus características eran limitadas; pero, al poco tiempo, Microsoft mejoró la tecnología y sacó a relucir la segunda versión de Silverlight, versión de la que se ocupa este libro. Pero esta efervescencia, este cambio constante junto a la búsqueda de un mejor producto y de una tecnología superior, hicieron que, durante el tiempo de escritura de este libro, Microsoft sacara la siguiente versión de Silverlight. En este momento, ya contamos con la versión 3 de Silverlight como una versión funcional y finalizada, por lo que incluimos un apartado, al final del libro, para introducir al lector en algunas de las nuevas funcionalidades provistas por Silverlight 3. De esta forma, con este texto, el lector no sólo aprenderá sobre Silverlight, sino que tendrá un bono extra al final, que le servirá de rampa de lanzamiento para abordar de lleno la nueva versión y permanecer siempre actualizado.
12
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.
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
Contenido del Elemento
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
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
02_Silverlight.qxp
9/30/09
1:23 PM
Page 29
Silverlight
Capítulo
2
Microsoft Expression Blend 2 ¿Cuáles son las herramientas disponibles para desarrollar aplicaciones Silverlight? ¿Cómo podemos aumentar nuestra productividad a la hora de escribir XAML? Éstas son algunas de las preguntas que abordaremos en este capítulo.
Un paseo por Expression Blend 2 Silverlight 2 con Expression Blend 2 Unir los extremos Un recorrido por Expression Blend 2 Explorador de soluciones Página inicial de Silverlight 2 La página App.xaml El entorno de Expression Blend 2 La barra de herramientas Crear nuestra primera aplicación con Expression Blend 2 Resumen Actividades
30 30 32 37 38 39 40 43 46
48 53 54
02_Silverlight.qxp
9/30/09
1:23 PM
Page 30
2. MICROSOFT EXPRESSION BLEND 2
UN PASEO POR EXPRESSION BLEND 2 En el capítulo anterior, nos introdujimos en el mundo de Silverlight 2. Vimos algunas de sus características, los elementos que lo componen y las principales herramientas de desarrollo usadas para la creación de aplicaciones y componentes de Silverlight. Una de estas herramientas, Microsoft Expression Blend 2, es usada por los diseñadores visuales y por los desarrolladores como un suplemento para los detalles visuales avanzados. En este capítulo, ahondaremos en el uso de esta herramienta y su interacción con Silverlight 2, cómo crear animaciones así como también elementos compuestos, para finalizar con la creación de nuestra primera aplicación Silverlight 2. Este contenido está dirigido, en especial, a diseñadores visuales que quieran incursionar en el uso de Expression Blend 2 como herramienta de diseño para software y a desarrolladores de software que necesiten modificar, de manera rápida, interfaces visuales basadas en XAML.
Silverlight 2 con Expression Blend 2 Desde los inicios de su desarrollo, este software siempre se enfocó, de manera prioritaria, en las líneas de código y en la solución del problema propuesto. Esto sucede ya que, justamente, fueron el código y el problema por corregir los que motivaron la creación de soluciones de software, que provean una respuesta programática a la dificultad planteada. Este enfoque, el de la solución del problema, causó que en el desarrollo de software primara la capacidad y la calidad de resolución de un problema por encima del enfoque interactivo entre la aplicación y el ejecutor de ese programa. Así, dentro de la historia del software y las computadoras, por carencias o por el enfoque antes citado, el trabajo se hacía mediante tarjetas perforadas, las cuales se apilaban en grandes cajas y que poseían, en sí mismas, la resolución de una de las partes que solucionaba el todo del problema. Sin ninguna duda, este sistema era manejado sólo por el desarrollador de este software primario y no por alguien ajeno a la informática de la época. Desde ese momento de la historia y hasta la actualidad, se produjeron cambios en la manera en que el usuario interactuaba entonces e interactúa ahora con esta pieza de software. Sin
_`
LA EVOLUCIÓN DE LAS INTERFACES
A pesar de más de 40 años de evolución en la ingeniería de software, sólo en la actualidad se pone especial énfasis en las interfaces visuales y en cómo éstas pueden ser parte de la solución del problema al que el usuario se debe enfrentar a diario. Así, vemos aparecer nuevas tecnologías multitáctiles en sistemas operativos, o de captura de movimientos en consolas de juegos.
30
02_Silverlight.qxp
9/30/09
1:23 PM
Page 31
Un paseo por Expression Blend 2
embargo, éste seguiría encontrándose una y otra vez ante una herramienta que, aunque en esencia cubriera sus necesidades funcionales y resolviera el dominio del problema planteado, no abarcaría los conceptos de usabilidad, ergonomía visual o interactividad entre el hombre y la máquina.
Figura 1. En el Mix 2009 realizado por Microsoft, uno de los temas por tratar fue la creación de interfaces gráficas.
Después de algunas décadas marcadas por este comportamiento de parte de la ingeniería de software y de aquellos que la han practicado, de alguna forma, el usuario terminó acostumbrándose a la idea de obtener aplicaciones o piezas de software que aparecen, como grandes hitos visuales y pantallas monocromáticas. Esto sucede, incluso, en pleno auge de las tarjetas aceleradoras de video con capacidades visuales que diez años atrás se reservaban sólo a inmensos ordenadores destinados a la producción de efectos cinematográficos. Muy pocos desarrolladores de software contemporáneos, incluidas las empresas, contemplan como parte de sus desarrollos la inclusión de esta temática. Sólo con la llegada de la Web, algunos de ellos adicionaron esto como una necesidad comercial, pero, en muy pocos casos, como una realidad para brindar un mejor producto que, además de solucionar un
,
CONSULTEMOS A UN DISEÑADOR
Es importante incluir en los proyectos de desarrollo de software a un diseñador gráfico que cuente con experiencia en interfaces de usuario. No debemos desestimar este punto en nuestros desarrollos. El éxito de nuestro producto no está marcado sólo por las líneas de código, la usabilidad es un aspecto muy importante.
31
02_Silverlight.qxp
9/30/09
1:23 PM
Page 32
2. MICROSOFT EXPRESSION BLEND 2
problema, resulte optimizado en lo que a interactividad con el usuario se refiere. Por supuesto, la implantación de este concepto dentro del desarrollo de software acarreó ciertos problemas que han tenido que ser resueltos por fuerza bruta más que por inteligencia, debido a que la solución planteada, la de incorporar mejoras visuales e interactivas, requiere de la presencia de otras ciencias. Esas ciencias están alejadas del desarrollo de software, por lo que el problema resulta bastante claro al tener que unir, de alguna forma, extremos que hablan idiomas diferentes.
Unir los extremos En la actualidad, el mayor impedimento en la creación de aplicaciones visuales y el trabajo realizado por los expertos en esta materia es causado por las herramientas que éstos utilizan. Cuando en un proyecto de software es necesaria la intervención de diseñadores gráficos especializados en experiencia de usuario, éstos plasman su trabajo en herramientas más ligadas a las doctrinas del diseño gráfico y las artes visuales que a las del desarrollo de software. Entonces, el problema recae en que tanto el diseñador como el desarrollador hablan idiomas diferentes: los primeros se refieren a colores, movimiento, disposición de elementos y formas, entre otros aspectos, mientras que los segundos necesitan saber qué mostrar y cómo se realizará el código que contenga la lógica. Al mismo tiempo, los diseñadores suelen desconocer las limitaciones de las plataformas donde serán creados los productos de software y tienden a generar elementos visuales extremadamente atractivos, pero con costos elevados en su implementación por parte del desarrollador. Al final y sin ser lo último, el producto resultante del diseñador será un conjunto de imágenes o un esquema que mostrará lo pretendido de manera visual para la aplicación de software, y le deja al desarrollador la tarea de volver a armar esto dentro de las líneas de código, quien no lo conseguirá con exactitud al compararlo con lo propuesto en un principio por el diseñador. Y es aquí donde han surgido herramientas que traducen, de alguna forma, esto que el diseñador piensa y plasma en algo que el desarrollador pueda usar. Así, es posible encontrar herramientas muy potentes como Adobe Fireworks donde, por medio del modelo visual creado por el diseñador, el desarrollador obtiene un conjunto de imágenes y código HTML. A pesar de eso, este tipo de herramientas acarrea un problema, ya que se enfocan en el diseñador y no en el desarrollador, creando código HTML que, basado en el dibujo propuesto, generan HTML poco útil para su implementación, como podemos ver a continuación. El siguiente es el resultado HTML generado para la Figura 2.
32
02_Silverlight.qxp
9/30/09
1:23 PM
Page 33
Un paseo por Expression Blend 2
[...41 líneas eliminadas ...]
Y, si bien este código puede ayudar, resulta imposible de usar para el desarrollador, por lo que éste se verá forzado a reescribir partes o su totalidad para poder obtener código que le sea útil. Para esto utilizará sólo código HTML, debido a que a éste se le pueden agregar cuestiones programáticas a diferencia del anterior. Filtro de búsqueda
Figura 2. A la derecha podemos ver lo que consiguió el desarrollador como resultado del concepto ideado por el diseñador. 33
02_Silverlight.qxp
9/30/09
1:23 PM
Page 34
2. MICROSOFT EXPRESSION BLEND 2
El problema es claro: estas herramientas hacen las veces de traductores, pero no de generadores. Traducen lo que el diseñador quiso decir a algo que el desarrollador pueda entender, pero, en este proceso de traducción, las herramientas no traducen funcionalidad, por lo que el desarrollador no la obtendrá y deberá retraducirla por su cuenta. La diferencia sustancial sobre este concepto por parte de Expression Blend 2 reside en que no es un traductor, sino un generador de funcionalidad, con la característica de que para el diseñador la herramienta se comportará como cualquier otra herramienta de las que está acostumbrado a usar. Sin embargo, a medida que diagrama y diseña los contenidos visuales, ésta generará funcionalidad lista para ser implementada por el desarrollador de software, como podemos observar en el siguiente código:
_`
OPTIMIZACIÓN DE LA INTERFAZ
Existen especializaciones en el desarrollo de software que se enfocan en la optimización de las interfaces visuales, llegando al punto de calcular la cantidad de clics que deberá hacer un usuario para conseguir realizar una acción determinada. La implementación de estas técnicas produce mayor aceptación de los productos por parte de los usuarios.
34
02_Silverlight.qxp
9/30/09
1:23 PM
Page 35
Un paseo por Expression Blend 2
El diseñador verá, en lugar del código anterior, un modelo como el que se muestra en la figura que aparece a continuación:
Figura 3. Una lista desplegable creada con Expression Blend 2, que generará código XAML listo para ser usado por el desarrollador.
Como el desarrollador obtiene código que se adapta a sus necesidades, puede enfocarse directamente en la solución del problema. A modo de ejemplo, en las siguientes líneas de código vemos cómo el desarrollador agrega algunas líneas de código C# en la clase asociada al código XAML para generar funcionalidad sobre el producto del diseñador: public partial class Page : UserControl { public Page() { // Required to initialize variables InitializeComponent(); this.ComboBox.Items.Add(“Item 1”); this.ComboBox.Items.Add(“Item 2”);
35
02_Silverlight.qxp
9/30/09
1:23 PM
Page 36
2. MICROSOFT EXPRESSION BLEND 2
this.ComboBox.Items.Add(“Item 3”); } }
El resultado de esta implementación de código podemos verlo a continuación:
Figura 4. Como observamos en esta imagen, el resultado propuesto por el diseñador y la implementación del desarrollador son idénticas.
Microsoft Expression Blend 2, entonces, sirve de nexo entre los dos elementos involucrados en el desarrollo, tanto para diseñadores como para desarrolladores. De esta manera se logra que los productos resultantes en ambos casos sean compatibles entre sí, para que ninguno de los profesionales involucrados tenga la necesidad de salir de su ámbito natural de trabajo. El resultado final será, entonces, que el diseñador obtendrá en la pieza de software el comportamiento y la apariencia visual, tal como los había ideado, mientras que el desarrollador no se verá forzado a intentar traducir estas ideas a elementos programáticos y se dedicará exclusivamente a la funcionalidad y a la resolución del problema.
RRR
PROTOTIPO DEL PRODUCTO
Contar con un diseño visual de la aplicación de manera temprana no sólo sincronizará a los miembros del equipo de desarrollo, ya que todos tendrán una idea general del producto final, sino que puede servir de disparador de retroalimentación por parte del cliente al ver con antelación la idea del producto terminado.
36
02_Silverlight.qxp
9/30/09
1:23 PM
Page 37
Un paseo por Expression Blend 2
Un recorrido por Expression Blend 2 Al iniciar Expression Blend 2 o al crear un nuevo proyecto con él, podemos elegir entre cuatro tipos diferentes. Tenemos dos proyectos específicos para Silverlight y sus diferentes versiones, pero también podemos diseñar y trabajar con proyectos Windows Presentation Foundation (WPF). • Aplicación WPF: este tipo de proyecto representa una aplicación de escritorio con soporte para WPF. Si tenemos en cuenta que WPF también se compone de código XAML, es posible crear un entorno visual directamente desde Expression Blend 2. • Librería de controles WPF: esta librería de controles está especializada en el encapsulamiento de elementos XAML y código de programación para su posterior reutilización en aplicaciones WPF. Debemos optar por esta opción cuando queremos crear elementos reutilizables para ser incorporados en distintas aplicaciones. • Sitio de Silverlight 1: este tipo de proyectos está orientado a crear sitios web con soporte para la versión 1 de Silverlight. Debemos tener en cuenta que este modelo no es tratado en este libro y además representa una versión antigua del software. • Aplicación de Silverlight 2: una vez instalado el Service Pack 1 para Expression Blend 2, podremos ver esta clase de trabajos. Éste es el tipo de proyectos sobre los cuales nos moveremos, tanto de manera visual como programática.
Figura 5. Lista de proyectos incluidos en Expression Blend 2.
,
CONTROLES EN SILVERLIGHT
La mayoría de los controles preestablecidos en Silverlight presentarán un comportamiento similar al de sus homónimos presentes en el desarrollo web y de escritorio. Al interactuar con ellos se deberá, por consiguiente, imitar las mismas líneas de código usadas en los demás ambientes de desarrollo con Microsoft .Net.
37
02_Silverlight.qxp
9/30/09
1:23 PM
Page 38
2. MICROSOFT EXPRESSION BLEND 2
Además de poder indicar el nombre del proyecto que vamos a crear y la ubicación física que tendrá, es posible seleccionar el lenguaje de programación con el cual preferimos trabajar. Vale aclarar que, para poder conseguir esta lista, es necesario haber instalado esos lenguajes en nuestra estación de trabajo. El hecho de poder seleccionar un lenguaje de programación se refiere a que cualquier código que se realice desde Expression Blend 2 se hará en ese lenguaje, por lo que es importante elegir aquel con el que estemos más familiarizados.
Explorador de soluciones Una vez que hemos creado el proyecto Silverlight 2, podremos navegar entre sus archivos desde el explorador de la solución, que típicamente puede ser encontrado a la derecha de la aplicación, como podemos observar en la Figura 6. Este explorador nos mostrará, como elementos iniciales, una página del tipo XAML más una clase creada en el lenguaje seleccionado, en este caso C#. Esta clase de C# es la que será usada para generar el código que maneje los elementos creados en la página XAML.
Figura 6. El explorador de soluciones (área superior derecha) de Expression Blend 2 con los elementos iniciales de una aplicación Silverlight 2.
RRR
INTEROPERABILIDAD
Para mejorar nuestro desarrollo en Expression Blend 2, es recomendable tener instalado, además, alguna de las herramientas de desarrollo de software de Microsoft, como por ejemplo Visual Studio 2008. Esto hará que, de tener que agregar código de programación a nuestro proyecto Silverlight, lo podamos hacer con mayor facilidad desde estas herramientas.
38
02_Silverlight.qxp
9/30/09
1:23 PM
Page 39
Un paseo por Expression Blend 2
Página inicial de Silverlight 2 El archivo Page.xaml es considerado la página o componente de inicio para nuestra aplicación Silverlight 2, teniendo como contenido el siguiente código:
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 aplicación en sí misma, sino como un componente que puede ser incrustado o consumido por otras aplicaciones del tipo Silverlight, así como por aplicaciones web. En la misma declaración de atributos de este control Silverlight, se incluye el nombre de la clase de C# encargada de manejar los componentes del control, así como el ancho y el alto, en pixeles, del control. Si exploramos el contenido de esa clase, podremos ver lo siguiente: using using using using using using using using
Es posible hacer que nuestro control Silverlight se adapte a la superficie que lo contiene. Si colocamos el elemento Silverlight dentro de una tabla HTML y configuramos las propiedades del elemento para que sus atributos Width y Height sean igual a Auto, éste se adaptará de manera automática a las dimensiones de su contenedor.
39
02_Silverlight.qxp
9/30/09
1:23 PM
Page 40
2. MICROSOFT EXPRESSION BLEND 2
using System.Windows.Shapes; namespace SilverlightApplication2 { public partial class Page : UserControl { public Page() { // Required to initialize variables InitializeComponent(); } } }
Esta clase, como ya comentamos, es la que será usada como contenedor de la implementación del código que interactuará con los componentes colocados en la página XAML previamente vista. Esto quiere decir que, si queremos que nuestra aplicación Silverlight consuma datos de una base de datos o reaccione apoyada en estímulos por parte del usuario, deberíamos escribir esas líneas dentro de esta clase. Por supuesto, no estamos obligados a acumular todas las líneas de código en este único archivo ya que, como en todo lenguaje orientado a objetos, podremos crear tantas clases como necesitemos sin estar obligados a tener una página XAML por cada una. Así, podríamos encapsular la lógica de negocios o el acceso a datos en clases especializadas, y generar código mantenible y fácilmente modificable.
La página App.xaml La página App.xaml, junto con la clase de código que la representa, es otro de los archivos creados inicialmente. Esta clase es usada en especial para almacenar código XAML, que en el caso de App.xaml puede ser reusado dentro de todas las demás páginas de tipo XAML. Como podemos ver en el siguiente código:
,
PATRONES DE DISEÑO DE SOFTWARE
Como una buena práctica en el desarrollo de software, encontramos los patrones de diseño de software. Éstos representan formas de crear código para solucionar problemas específicos. Es importante tener presente estos patrones para mejorar la calidad del código creado en Silverlight. Como resultado, obtendremos código más prolijo y más fácil de modificar.
40
02_Silverlight.qxp
9/30/09
1:23 PM
Page 41
Un paseo por Expression Blend 2
Podemos ver que el estilo es declarado dentro de los recursos del tag de la misma forma que hicimos con las animaciones y el tag . Si bien ésta es una opción, también podríamos declarar este estilo en los recursos globales de toda la aplicación, colocándolo dentro del archivo App.xaml. 178
05_Silverlight.qxp
9/30/09
1:33 PM
Page 179
Mover objetos
De esta forma, si tenemos más de una página XAML en nuestra aplicación, podremos compartir el estilo entre ellas. Por otro lado, también vemos que aparecen dos nuevos atributos en la declaración de un estilo. • x:Key: este atributo es necesario para poder identificar el estilo creado. Consumiremos el estilo mediante este nombre. • TargetType: tipo de control que podrá usar este estilo. Con este atributo, restringimos el uso del estilo a un tipo de control. Es similar a la capacidad de ASP.net de generar estilos visuales para los controles, pudiendo crear estilos para tipos específicos.
Figura 17. Varios TextBox que consumen del mismo estilo.
CÓDIGO DE EJEMPLO
En la Web, podemos encontrar cientos de sitios con código de ejemplo para Silverlight 2. De cualquier manera, uno de los destacados es el sitio oficial de Silverlight, hasta el que podemos navegar para descargar excelentes ejemplos. La dirección es http://silverlight.net.
179
05_Silverlight.qxp
9/30/09
1:33 PM
Page 180
5. LUZ, CÁMARA, ACCIÓN
Los estilos se aplican a cada una de las propiedades del objeto que queremos configurar. En el caso de la Figura 17, el estilo utilizado es el siguiente:
Necesitamos colocar, por cada atributo por modificar, un tag , el mismo que especifica el nombre de la propiedad (Property) que se modificará y su valor (Value). Es posible también especificar valores para tipos complejos mediante el uso de , colocando dentro de éste la descripción del tipo complejo. Por último, deberemos aplicar el estilo al control que lo consumirá de la siguiente manera:
Si colocamos los estilos dentro de la declaración del tag como dentro del tag , es posible reutilizarlos de forma global, aunque también 180
05_Silverlight.qxp
9/30/09
1:33 PM
Page 181
Mover objetos
pueden reducir el alcance de los estilos limitándolos al control en sí o a un conjunto de controles contenidos por algún control contenedor. En la Figura 18, el botón de la derecha está contenido por un control StackPanel, que tiene declarado el estilo para el botón, estilo que sólo podrá ser consumido por los controles contenidos por el StackPanel. La declaración del estilo en el StackPanel es similar a la utilizada de manera global por el tag como el tag dentro del archivo App.xaml.
Estos estilos presentan una tipografía específica para cada uno, así como un tamaño de letra y un color especial. Apliquemos el primer estilo a un texto en HTML. Texto con estilos
En este caso, mediante el uso de class, asignamos el primer estilo a la frase Texto con Podemos ver el resultado en la siguiente imagen:
estilos.
_`
DE HTML A CSS
El desarrollo web ha evolucionado tanto a lo largo de los años que la aplicación de los formatos visuales a textos, imágenes, colores de fondo, posición de distintos elementos y otros aspector pasó de ser declarado con etiquetas HTML al uso total de las hojas de estilo. Al momento de diseñar nuestros sitios web, es una buena práctica aplicar esta técnica por sobre el uso de tags HTML.
318
08_Silverlight.qxp
9/30/09
1:36 PM
Page 319
Silverlight 2 y el HTML
Figura 26. El texto se muestra con las características del primer estilo creado.
Si tomamos el elemento desde la página web desde su HTML, mediante el identificador del elemento, estaremos en posición de modificar el estilo por otro de la lista de estilos creados con anterioridad, una vez presionado el botón en la aplicación Silverlight. private void Button_Click(object sender, RoutedEventArgs e) { HtmlPage.Document.GetElementById(“texto”).CssClass = “estilo2”; }
Figura 27. El formato de la frase cambió de acuerdo con el segundo estilo declarado. 319
08_Silverlight.qxp
9/30/09
1:36 PM
Page 320
8. EL NAVEGADOR Y SU DOMINIO
Otra posibilidad, si no contamos con una estructura de estilos predefinida, es la de modificar los valores de los estilos en el elemento HTML, utilizando el nombre de la propiedad que hace referencia al estilo que queramos modificar. private void Button_Click_1(object sender, RoutedEventArgs e) { HtmlElement etiqueta = HtmlPage.Document.GetElementById(“texto2”); etiqueta.SetStyleAttribute(“border”, “dashed 3px black”); etiqueta.SetStyleAttribute(“color”, “red”); }
Por cada estilo que deseemos aplicar, necesitamos realizar una llamada al método SetStyleAttribute(), especificando el nombre del estilo y su valor. Observemos, en la siguiente figura, cómo se visualiza el elemento HTML antes de aplicar un estilo y cómo queda luego su posterior transformación.
Figura 28. A izquierda, vemos una etiqueta sin estilo alguno. Al procesar el código Silverlight, éste aplica los estilos especificados.
SILVERLIGHT 2 Y JAVASCRIPT Así como hemos podido interactuar con el HTML contenedor de la aplicación Silverlight, también es posible hacerlo con el código JavaScript que se ejecuta en el navegador. Esta característica puede resultar muy valiosa si tenemos en cuenta el uso actual que se le da a la Web y todas las tecnologías involucradas. Por ejemplo, la implemen320
08_Silverlight.qxp
9/30/09
1:36 PM
Page 321
Silverlight 2 y JavaScript
tación de A.J.A.X., tecnología que le da vida a la Web 2.0, se nutre profundamente de JavaScript, por lo que tener control sobre este lenguaje, desde Silverlight y hacia él, puede potenciar mucho más las posibilidades de desarrollo de aplicaciones web. Como primera instancia, asociaremos un evento JavaScript a un elemento HTML que, cuando se ejecute, será capturado por la aplicación Silverlight para manejar este proceso. private void Button_Click(object sender, RoutedEventArgs e) { HtmlElement elemento = HtmlPage.Document.GetElementById(“contenedor”); elemento.AttachEvent(“onclick”, BotonCliente_Click); } private void BotonCliente_Click(object sender, HtmlEventArgs e) { ... ...
Las líneas anteriores toman un elemento HTML, para este caso, un botón, y adjuntan, al evento OnClick de JavaScript para ese botón, un manejador que se encontrará trabajando en la aplicación Silverlight. Cuando el usuario presione sobre el botón HTML, el método BotonCliente_Click se disparará y podremos ejecutar nuestro código.
Figura 29. El evento fue disparado desde el cliente.
Una vez disparado, podríamos ejecutar la lógica de la aplicación como para llamar a servicios web que retornen información, o construir nuevo HTML para el usuario. Esto puede convertirse en una herramienta poderosa si quisiéramos encapsular lógi321
08_Silverlight.qxp
9/30/09
1:36 PM
Page 322
8. EL NAVEGADOR Y SU DOMINIO
ca de código dentro de un lenguaje común como C# o cualquiera que utilicemos con Microsoft .Net. Pensemos que, muchas veces, la depuración de código JavaScript puede resultar compleja al extremo, incluso lenta, a medida que este código sube en dificultad. Conectarse a servicios web podría requerir de cientos de líneas de código, incluyendo el análisis del XML retornado por éste, así como el manejo de errores de conexión y demás. Por otro lado, podríamos llevar esta lógica a un componente Silverlight sin interfaz visual que se encargue de capturar cada uno de los eventos producidos en JavaScript por el cliente y manejarlos como si se tratase de una aplicación creada con Microsoft .Net. Esto podría ahorrarnos tiempo y esfuerzo, así como darnos la posibilidad de realizar mantenimiento futuro al código de forma mucho más eficiente. Los controles HTML cuentan con una serie de eventos a los que podemos subscribir los eventos Silverlight. Éstos se listan a continuación: • onchange: este evento se disparará cuando el control asociado sufra una modificación. En el caso de cajas de texto, si el usuario modifica su contenido; y en listas desplegables, si otro elemento de la lista es seleccionado. En la mayoría de los casos, el control deberá perder el foco para que el evento aplique. • onclick: se dispara cuando el usuario presiona el elemento con el mouse. • onmouseover: éste se disparará cuando el mouse pase por arriba del elemento. Junto con los valores pasados por argumento, se podrán encontrar las coordenadas por las cuales el mouse se mueve. • onmouseout: en el momento en el que el mouse deje la superficie del control HTML, este evento nos avisará. • onkeydown: si el usuario presiona una tecla cuando está dentro de un elemento, por lo general representado por una caja de texto, podremos saber qué tecla es la que está presionando. • onkeyup: si el usuario deja de presionar una tecla del teclado, el evento nos avisará. • onkeypress: si el usuario presionó y soltó una tecla, este evento se disparará. • onfocus: este evento será ejecutado cada vez que un control tome el foco. Esto es, que el cursor de escritura esté sobre él o si el usuario hubiera presionado con el botón del mouse sobre el control para conseguir el foco. • onblur: cada vez que un control pierda el foco, se disparará este evento. • onload: se dispara cuando la página termina de cargar todo su contenido. • onunload: cada vez que la página sea destruida, el evento nos avisará. Este evento asume que la página será descargada de la memoria del navegador cuando naveguemos a otra página o cuando presionemos un vínculo que haga que el contenido de la página se recargue. Por consiguiente, podríamos subscribirnos a cualquiera de los eventos antes listados. Debemos tener en cuenta que algunos eventos sólo son soportados por ciertos navegadores, por lo que deberíamos utilizarlos con cuidado. 322
08_Silverlight.qxp
9/30/09
1:36 PM
Page 323
Silverlight 2 y JavaScript
Llamar funciones Como dijimos, también es posible llamar a funciones JavaScript desde código Silverlight. Esto nos será de gran utilidad en casos en los que tengamos sitios web ya implementados, con lógica incluida en líneas de código JavaScript, y queramos extender esa funcionalidad desde Silverlight. Lo primero que necesitamos es algo de código JavaScript para poder utilizarlo desde Silverlight. <script language=”javascript” type=”text/javascript”> function MostrarMensaje(mensaje) { alert(mensaje); }
En este caso, sólo mostraremos un mensaje emergente, pasando un parámetro que representa el texto por mostrar. Desde Silverlight, usaremos el objeto HtmlPage y HtmlWindow para capturar el código JavaScript y ejecutarlo. HtmlPage.Window.Invoke(“MostrarMensaje”, “Mensaje desde Silverlight”);
El primer parámetro del método Invoke() especifica el nombre de la función JavaScript por ejecutar. El segundo y todos los siguientes representan cada uno de los parámetros que la función JavaScript pudiera necesitar. Así, si tenemos más de un parámetro que pasar a la función JavaScript, podremos colocarlos separados por comas. Como vemos en la siguiente figura, el mensaje de alerta es ejecutado en forma correcta.
Figura 30. Al presionar el botón, Silverlight llama y ejecuta la función JavaScript.
También es posible utilizar otra forma de referenciar y de ejecutar código JavaScript. La siguiente línea hará el mismo trabajo que lo planteado en las líneas anteriores: ScriptObject script = (ScriptObject)HtmlPage.Window.GetProperty(“MostrarMensaje”); script.InvokeSelf(“Mensaje desde Silverlight. Nueva forma”);
323
08_Silverlight.qxp
9/30/09
1:36 PM
Page 324
8. EL NAVEGADOR Y SU DOMINIO
En este caso, tomamos como una propiedad de la ventana actual el nombre de la función JavaScript y transformamos el resultado a un tipo ScriptObject, que albergará la función y su funcionalidad. En la Figura 31, observamos que el mensaje se despliega de la misma forma que en el caso anterior.
Figura 31. Utilizando otra forma de ejecutar código, obtenemos similares resultados.
Objetos Silverlight para JavaScript Silverlight también puede exponer métodos y funciones internas, como objetos JavaScript. En los apartados anteriores trabajamos con eventos y los ejecutamos de un lado y del otro, haciendo que Silverlight fuera el centro de atención, ya que éste se encargaba de la ejecución de funciones JavaScript, así como de la captura de eventos desde el navegador cliente. Por otro lado, es posible dar mayor protagonismo a JavaScript haciendo que Silverlight exponga sus métodos y funciones para que sean consumidos desde el código cliente. Esta posibilidad nos acercaría más al concepto de usar Silverlight como un proveedor de funcionalidad compleja en casos donde la misma implementación por parte de JavaScript acarrearía mucho más esfuerzo. Para lograr esto, es necesario decorar, con un atributo, la clase Silverlight que se expondrá hacia JavaScript y, con un segundo atributo, cada método o función que necesitemos exponer. [ScriptableType()] public partial class Page : UserControl { public Page() { InitializeComponent(); HtmlPage.RegisterScriptableObject(“Silver”, this); } [ScriptableMember()] public void MostrarMensaje(string mensaje) { this.txtMensaje.Text = mensaje; } }
324
08_Silverlight.qxp
9/30/09
1:36 PM
Page 325
Silverlight 2 y JavaScript
La primera línea, ScriptableType(), marca la clase como un tipo que podrá ser consumido desde JavaScript. La siguiente línea: HtmlPage.RegisterScriptableObject(“Silver”, this);
La línea anterior se encarga de registrar el código JavaScript que servirá de interfaz entre Silverlight y el código JavaScript que consuma esta funcionalidad. Para esto, es necesario especificar un nombre de objeto y la clase que se usará como punto de entrada del script. Por su parte, la línea ScriptableMember() hace referencia a los métodos y funciones que podrán ejecutarse desde JavaScript. Podremos tener tantos ScriptableMember() como funciones o métodos queramos exponer. Una vez expuesta esta información, podremos consumirla de la siguiente forma: <script type=”text/javascript”> function Mostrar() { var micontrol = document.getElementById(“AplicacionSilverlight”); micontrol.content.Silver.MostrarMensaje(“Mensaje desde JavaScript.”); }
El código JavaScript anterior captura el objeto Silverlight embebido en la página web. Este control se identifica mediante el uso del atributo ID dentro de su propia declaración, como podemos ver en el siguiente código:
