Exportar (0) Imprimir
Expandir todo
Expandir Minimizar

Introducción a Silverlight

19 de febrero de 2007

Publicado: 1 de Mayo de 2007

Laurence MoroneyMicrosoft Corporation

Se aplica a:
   Silverlight (anteriormente WPF/E)
   Microsoft Visual Studio 2005

Resumen: Estas notas del producto proporcionan una introducción de alto nivel a Silverlight y acerca de cómo se adapta en la pila de desarrollo para la próxima generación de aplicaciones web.

En esta página

¿Qué es "WPF/E"? ¿Qué es "WPF/E"?
La evolución del desarrollo web: Avanzando hacia Web.Next La evolución del desarrollo web: Avanzando hacia Web.Next
Creación de una aplicación de "WPF/E" sencilla Creación de una aplicación de "WPF/E" sencilla
Preparación de un archivo de diseño de gráficos para "WPF/E" Preparación de un archivo de diseño de gráficos para "WPF/E"
Introducción a la invocación de Silverlight Introducción a la invocación de Silverlight
Conclusión Conclusión

¿Qué es "WPF/E"?

Silverlight es una nueva tecnología de presentación web creada para su ejecución en distintas plataformas. Hace posible un uso más completo, atractivo visualmente e interactivo, y se puede ejecutar en todos los entornos: con exploradores y en múltiples dispositivos y sistemas operativos de escritorio (como en Macintosh de Apple). Al igual que WPF (Windows Presentation Foundation), la tecnología de presentación en Microsoft .NET Framework 3.0 (la infraestructura de programación de Windows), XAML (eXtensible Application Markup Language, lenguaje de marcado de aplicaciones extensible), constituye la base de la capacidad de presentación de Silverlight.

En este artículo se ofrece un recorrido por los aspectos básicos de Silverlight y, asimismo, se le guia en el uso de la pila de herramientas de Microsoft, entre las que se incluyen Microsoft Expression Blend, Microsoft Visual Studio 2005 y XAML para generar complejos sitios gráficos. En primer lugar, expliquemos los antecedentes que hicieron nacer a Silverlight y dónde se sitúa en el escenario del desarrollo.

La evolución del desarrollo web: Avanzando hacia Web.Next

Cuando Tim Berners-Lee inventó la Web moderna en CERN, se pretendía que ésta sirviera como un sistema que hiciera posible que los documentos estáticos se almacenaran en un sistema basado en la red con vínculos al mismo. Con el paso de los años, se fueron incorporando innovaciones y el siguiente paso lógico fueron los documentos "activos" que se generan en el momento en que se solicitan, con información específica del momento o del usuario. Tecnologías como CGI activaron este aspecto. Más adelante, la capacidad para generar documentos en la Web se convirtió en algo primordial y la tecnología evolucionó de CGI, a Java, ASP y, posteriormente, a ASP.NET.

ASP.NET supuso un hito en la capacidad de los desarrolladores para desarrollar aplicaciones web de calidad con un paradigma de desarrollo de servidores y con las mejores herramientas de la línea de productos Visual Studio.

La experiencia del usuario resultó ser una gran barrera en las aplicaciones web, donde las restricciones técnicas evitaban que éstas pudieran ofrecer la misma variedad de uso que una aplicación cliente con datos locales.

El objeto XMLHttpRequest, que Microsoft lanzó como parte de Internet Explorer en 2000, se convirtió en la base de la tecnología asíncrona de JavaScript y XML (AJAX) que hizo posible que las aplicaciones web pudieran proporcionar una respuesta más dinámica a las entradas de los usuarios, mediante la actualización de pequeñas porciones de una página web sin necesidad de volver a cargar totalmente los contenidos. Las soluciones innovadores que se generaron con AJAX, como los mapas regionales de Windows Live, llevaron a las aplicaciones web a dar un paso adelante en su capacidad para lograr un uso similar a las aplicaciones cliente.

Silverlight representa el paso siguiente en el desarrollo del potencial de riqueza en utilización que los desarrolladores y diseñadores de aplicaciones pueden presentar a sus clientes. Esto se consigue permitiendo a los diseñadores expresar su creatividad y guardar su trabajo en un formato que funcione directamente en la Web. En el pasado, los diseñadores creaban un sitio web y ofrecían una utilización a los usuarios a través de herramientas que proporcionaban resultados variados, pero el desarrollador tenía que solventar las restricciones de la plataforma web siendo capaz de ofrecer tales resultados. En el modelo de Silverlight, los diseñadores pueden generar el tipo de utilización para el usuario que desean y expresarlo como XAML. Un desarrollador puede incorporar este XAML directamente en una página web mediante el tiempo de ejecución de Silverlight. De esta forma, ambos pueden trabajar más estrechamente que antes con el fin de proporcionar una utilización completa y variada al usuario.

Como XAML es XML, está basado en texto, lo cual proporciona una descripción de sus ricos contenidos fácil de inspeccionar y totalmente compatible con los firewall. Aunque se pueden usar otras tecnologías —como subprogramas en Java, ActiveX y Flash— para implementar contenidos más ricos que DHTML, CSS y JavaScript, todas ellas envían contenidos binarios al explorador. Esto resulta difícil de auditar, sin mencionar la dificultad de actualización, ya que para cualquier cambio es necesario que la aplicación se vuelva a instalar, lo que no es tan fácil para el usuario y podría provocar estancamientos en las páginas. Cuando se usa Silverlight y es necesario realizar un cambio en el contenido enriquecido, se genera un nuevo archivo XAML en el servidor. La próxima vez que el usuario vaya a la página, se descargará este XAML y se actualizará la experiencia sin ninguna reinstalación.

En el núcleo de Silverlight está el módulo de mejora del explorador que genera XAML y ofrece los gráficos resultantes en la superficie del explorador. Se trata de una descarga pequeña (menos de 2 MB), que se puede instalar cuando el usuario se encuentra con un sitio con contenido de Silverlight. Este módulo expone el marco de trabajo subyacente de la página XAML a los desarrolladores de JavaScript, de forma que se hace posible la interacción con el contenido en la página y, por tanto, el desarrollador puede, por ejemplo, escribir controladores de eventos o manipular los contenidos de la página XAML mediante el código de JavaScript.

Pero, basta ya de teoría, Pasemos a la práctica y echemos un vistazo a nuestro primer proyecto de Silverlight.

Creación de una aplicación de "WPF/E" sencilla

Comencemos echando un vistazo a Microsoft Expression Blend para crear un gráfico muy sencillo en XAML para Silverlight. Para crear una aplicación de Silverlight en Blend, seleccione Archivo->Nuevo proyecto y se abrirá el cuadro de diálogo Nuevo proyecto. Consulte la figura 1.

Figura 1. Creación de un nuevo proyecto con Expression Blend

Seleccione Aceptar y se creará un proyecto nuevo. Este proyecto contendrá una página HTML predeterminada, algún código JavaScript detrás de esta página, un documento XAML, un código JavaScript para el documento XAML y Silverlight.js.

Silverlight.js contiene el código para descargar y crear una instancia del control Silverlight. Es una parte de Silverlight SDK.

Default.html es una página web HTML estándar. Contiene tres referencias de script de JavaScript, que señalan Silverlight.js, Default.html.js (que contiene un código específico de la aplicación para crear instancias de Silverlight) y Scene.xaml.js (que contiene controladores de eventos para los eventos de la aplicación definidos en el XAML).

Éste está diseñado para separar la página (default.html), de la lógica de instalación (default.html.js), del diseño (Scene.xaml) y del código de evento (Scene.xaml.js). Pero, basta ya de teoría, pasemos al desarrollo de una aplicación sencilla.

Preparación de un archivo de diseño de gráficos para "WPF/E"

Agregue un archivo de vídeo al proyecto. Para ello, haga clic con el botón secundario en el archivo del proyecto en la ventana Archivos de proyecto en la parte superior derecha de la pantalla y seleccione Agregar elemento existente

Cuando seleccione un archivo WMV y lo agregue al proyecto, el archivo aparecerá en el Explorador del proyecto y se agregará un elemento multimedia al escenario.

Figura 2. Adición de un Elemento multimedia a un escenario XAML.

Ahora puede ejecutar el proyecto y el explorador iniciará y reproducirá el vídeo.

Puede detener la reproducción automática del vídeo mediante la edición del XAML. A la derecha del diseñador de XAML aparecerán dos fichas: Diseño y XAML. Seleccione la ficha XAML; se abrirá el Editor de XAML. Esto se puede ver en la Figura 3. Use esta herramienta para editar texto XAML del MediaElement para agregar un atributo AutoPlay=False.

Figura 3. Edición de XAML en el Editor XAML

Si ejecuta la aplicación ahora, verá el contenido de Silverlight representando el primer fotograma del vídeo, pero no lo reproducirá.

Adición de controles al reproductor de vídeo

Agregue dos bloques de texto a la aplicación e incluya el texto Play y Stop y los nombres txtPlay y txtStop, respectivamente. Una vez que haya terminado, el XAML mostrará algo como esto:

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Width="640" Height="480"
   Background="White"
   >
   
<MediaElement AutoPlay="False" x:Name="Movie_wmv" Width="320" 
Height="240" 
Canvas.Left="128" Canvas.Top="56" Source="Movie.wmv" Stretch="Fill"/>
   
<TextBlock x:Name="txtPlay" Width="72" Height="24" Canvas.Left="136" 
Canvas.Top="336" Text="Play" TextWrapping="Wrap"/>

   <TextBlock x:Name="txtStop" Width="80" Height="24" Canvas.Left="136" 
Canvas.Top="368" Text="Stop" TextWrapping="Wrap"/>
</Canvas>

A continuación, agregue la declaración del controlador de eventos al XAML para los bloques de texto. Use el atributo MouseLeftButtonDown para declarar el controlador haciendo clic con el mouse. En el bloque de texto txtPlay, agregue un controlador de eventos a DoPlay, y en el bloque txtStop agregue un controlador de eventos a DoStop. Una vez que haya terminado, el XAML mostrará algo como esto:

<TextBlock x:Name="txtPlay" Width="72" Height="24" Canvas.Left="136" 
      Canvas.Top="336" Text="Play" TextWrapping="Wrap"  
      MouseLeftButtonDown="javascript:DoPlay"/>

<TextBlock x:Name="txtStop" Width="80" Height="24" Canvas.Left="136" 
      Canvas.Top="368" Text="Stop" TextWrapping="Wrap" 
      MouseLeftButtonDown="javascript:DoStop"/>

Cuando el usuario haga clic en uno de los bloques de texto provocará un evento que puede interceptar y procesar desde una función de JavaScript.

Controlar eventos en JavaScript

La plantilla creó una Scene.xaml.js que puede usarse para interceptar y procesar los eventos de usuario en JavaScript. Puesto que especificó los controladores de eventos DoPlay y DoStop en XAML, debe implementarlos aquí. El código para hacer esto se muestra aquí:

function DoPlay(sender, eventArgs)
{
   var theHost = document.getElementById("SilverlightControl");
   var theMedia = theHost.content.findName("Movie_wmv");
   theMedia.Play();
}

function DoStop(sender, eventArgs)
{
   var theHost = document.getElementById("SilverlightControl");
   var theMedia = theHost.content.findName("Movie_wmv");
   theMedia.Stop();
}

En este caso, el control de Silverlight se llama SilverlightControl y la variable de JavaScript llama al host al que hace referencia. Esto se usa para encontrar el elemento Media, que en este caso se llama Movie_wmv. Este elemento multimedia se creó al agregar la película al proyecto, y el nombre está basado en el nombre de la película. Por lo que si posee una película llamada Movie.wmv, éste se llamará Movie_wmv. Si usara una película diferente, el control se llamaría de otro modo.

El elemento multimedia dispone de métodos Play y Stop que pueden usarse para iniciar o detener la reproducción del elemento multimedia.

Ahora que tenemos una referencia al elemento multimedia, podemos llamar a esos métodos y la película se detendrá o empezará. Puede ver esto en acción en la Figura 4.

Figura 4. Ejecución de la aplicación.

Acaba de crear su primera aplicación de Silverlight. Para obtener más recursos de Silverlight, consulte el nuevo Centro de desarrollo de Silverlight y http://www.silverlight.net/.

Introducción a la invocación de Silverlight

La página HTML llama a createSilverlight(), que está presente en la página de código subyacente Default.html.js.

Sys.Silverlight.createObjectEx({
      source: "Scene.xaml",
      parentElement: document.getElementById("SilverlightControlHost"),
      id: "SilverlightControl",
      properties: {
         width: "100%",
         height: "100%",
         version: "0.9"
      },
      events: {
         onLoad: Sys.Silverlight.createDelegate(scene, scene.handleLoad)
      }
   });

Esto implica una serie de propiedades, entre las que se incluyen las usadas para definir el Xaml que se va a representar, la apariencia del control Silverlight y los controladores de eventos onLoad y onError.

La propiedad source: se usa para definir el XAML que desea representar con el control Silverlight. Puede tratarse de un archivo externo (como en este caso) o de una etiqueta <script> con nombre en la página que contiene el XAML.

Al colocar un control Silverlight en la página, éste debe colocarse dentro de un <DIV> con nombre. La propiedad parentElement: debe rellenarse con el nombre de este <DIV>.

El Id. del control se especifica en la propiedad id:.

Los atributos físicos del control, como alto, ancho y versión, se establecen mediante una matriz cargada en la propiedad properties: . Para obtener más información sobre el conjunto completo de propiedades, consulte la documentación de Silverlight SDK.

Conclusión

Este artículo le ha ofrecido una completa información general acerca de Microsoft Silverlight y acerca de cómo se adapta en la pila de desarrollo para la próxima generación de aplicaciones web. Ha visto cómo se utiliza XAML a modo de cola que une las especificaciones del diseñador con las herramientas del desarrollador y la entrega al usuario. Ha echado un vistazo a Expression Blend y ha comprobado cómo se puede usar para definir una interfaz de usuario para páginas web y cómo programarlas con JavaScript.

Este artículo no ha sido nada más que un aperitivo de lo que se puede hacer con Silverlight. Esta tecnología cuenta con multitud de funcionalidades que podrá comenzar a usar ahora para crear su próximo sitio web. Va a ser un viaje divertido, así que suba a bordo.

Mostrar:
© 2014 Microsoft