Introducción a WPF/E (nombre en código)

Diciembre de 2006

Publicado: 15 de Enero de 2007

Laurence Moroney
Microsoft Corporation

Este artículo se aplica a:
   "WPF/E" (nombre en código)
   Microsoft Visual Studio 2005

Resumen:En este artículo se ofrece una descripción general de alto nivel de "WPF/E" y el modo en que encaja en la pila de desarrollo de 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: el paso a Web.Next La evolución del desarrollo web: el paso a Web.Next
Creación de una aplicación sencilla de "WPF/E" Creación de una aplicación sencilla de "WPF/E"
Preparación de un archivo de diseño gráfico para "WPF/E" Preparación de un archivo de diseño gráfico para "WPF/E"
Uso de Visual Studio 2005 para crear un proyecto "WPF/E" Uso de Visual Studio 2005 para crear un proyecto "WPF/E"
Preparación de un proyecto de Visual Studio 2005 para "WPF/E" Preparación de un proyecto de Visual Studio 2005 para "WPF/E"
Edición de una página web para representar contenido de "WPF/E" Edición de una página web para representar contenido de "WPF/E"
Comprensión de JavaScript Comprensión de JavaScript
Edición de XAML para agregar texto Edición de XAML para agregar texto
Edición de XAML para crear una animación sencilla Edición de XAML para crear una animación sencilla
Edición de XAML para crear una interacción sencilla Edición de XAML para crear una interacción sencilla
Adición de recursos multimedia Adición de recursos multimedia
Conclusión Conclusión
Apéndice I: La experiencia de la instalación Apéndice I: La experiencia de la instalación
Apéndice II: Configuración de tipos de servidor MIME Apéndice II: Configuración de tipos de servidor MIME

¿Qué es "WPF/E"?

"WPF/E" es el nombre en código de una nueva tecnología de presentación web creada para ser compatible con distintas plataformas. Permite la creación de experiencias interactivas, ricas y visualmente sorprendentes que se pueden ejecutar en cualquier lugar: en exploradores y en múltiples dispositivos y sistemas operativos de equipos de escritorio (como Macintosh de Apple). De acuerdo con WPF (Windows Presentation Foundation, bases de las presentaciones de Windows), la tecnología de presentaciones de Microsoft .NET Framework 3.0 (la infraestructura de programación de Windows), XAML (eXtensible Application Markup Language, lenguaje de marcado de aplicaciones extensible) es la base de la funcionalidad de presentaciones "WPF/E".

Este artículo le guiará a través de las conceptos básicos de "WPF/E" y el modo de usar las herramientas de Microsoft, como Microsoft Expression Graphic Designer, Microsoft Visual Studio 2005 y XAML, para crear sitios con ricos gráficos. En primer lugar, se tratarán las bases que condujeron a "WPF/E" y al lugar que ocupa actualmente en el panorama del desarrollo.

La evolución del desarrollo web: el paso a Web.Next

Cuando Tim Berner-Lee inventó en CERN el concepto moderno de Web, se pretendía que se tratara de un sistema para el almacenamiento de documentos estáticos y su interrelación en un sistema basado en redes. Con el paso de los años, creció la innovación, siendo el siguiente paso lógico la generación de documentos "activos" al solicitarse, con información específica del usuario o del momento. La tecnología CGI entre otras permitió este avance. Con el tiempo, la capacidad de generar documentos en Web adquirió suma importancia y la tecnología evolucionó pasando por CGI, Java, ASP y, más tarde, ASP.NET.

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

La experiencia de usuario se reveló como un gran obstáculo para las aplicaciones web, pues las restricciones técnicas impedían que se consiguiera la misma riqueza que en las aplicaciones cliente con datos locales.

El objeto XMLHttpRequest, lanzado por Microsoft como parte de Internet Explorer 5 en 2000, se convirtió en la base de la tecnología JavaScript asincrónico y XML (AJAX), que posibilitó que las aplicaciones web ofrecieran una respuesta más dinámica a las intervenciones del usuario y que partes de la página web se actualizaran sin necesidad de que se volviera a cargar completamente el contenido. Ciertas soluciones innovadoras creadas en AJAX, como los mapas de Windows Live Local, acercaron las aplicaciones web a la posibilidad de ofrecer una experiencia de usuario similar a la de las aplicaciones cliente.

"WPF/E" es el siguiente paso en la evolución de la potencial riqueza de la experiencia de usuario que los desarrolladores y diseñadores de aplicaciones pueden presentar a sus clientes. Lo consigue al permitir que los diseñadores expresen su creatividad y guarden su trabajo en un formato que funciona directamente en Web. Antes, los diseñadores diseñaban sitios web y experiencias de usuario con herramientas que ofrecían un rico resultado y los desarrolladores tenían que superar los obstáculos de la plataforma web para poder llevarlos a la práctica. Con el modelo "WPF/E", los diseñadores pueden crear la experiencia de usuario que deseen y expresarla como XAML. Los desarrolladores pueden incorporar directamente este XAML a la página web mediante el tiempo de ejecución de "WPF/E". De esta forma, ambos pueden trabajar más estrechamente que antes para ofrecer una experiencia de usuario de cliente enriquecida.

Como XAML es XML, está basado en texto, de modo que ofrece una descripción de los contenidos enriquecidos compatible con firewall y fácil de examinar. Aunque existen otras tecnologías (como Java Applets, ActiveX y Flash) que se pueden usar para desarrollar contenidos más ricos que DHTML/CSS/JavaScript, todas ellas envían contenidos binarios al explorador, hecho difícil de revisar para la seguridad, por no mencionar la dificultad para su actualización: cualquier cambio requiere la reinstalación de toda la aplicación, lo que no supone precisamente la experiencia más cómoda para el usuario y puede ocasionar el estancamiento de las páginas. Cuando se usa "WPF/E" y se debe aplicar un cambio en el contenido enriquecido, se genera un nuevo archivo XAML en el servidor; la siguiente ocasión que el usuario visita la página, este XAML se descarga y la experiencia se actualiza sin necesidad de una reinstalación.

En el núcleo de "WPF/E" se encuentra el módulo de mejora del explorador, que representa XAML y dibuja los gráficos resultantes en la superficie del explorador. Se trata de una pequeña descarga (menos de 2 MB) que se puede instalar cuando el usuario llega al sitio con el contenido "WPF/E". Este módulo expone el marco subyacente de la página XAML para los desarrolladores de JavaScript, de modo que la interacción con el contenido a nivel de página ya es posible y los desarrolladores pueden, por ejemplo, escribir controladores de eventos o manipular los contenidos de la página XAML mediante código JavaScript.

Pero, ya basta de teoría. Vamos a ponernos manos a la obra y a echar un vistazo a nuestro primer proyecto "WPF/E".

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

Vamos a empezar echando un vistazo a Microsoft Expression Graphic Designer para crear un gráfico muy sencillo en XAML para "WPF/E". La figura 1 muestra el producto en acción.

Figura 1. La herramienta Expression Graphic Designer

Expression Graphic Designer es una nueva herramienta de Microsoft que aúna las mejores herramientas de diseño gráfico basadas en vectores y píxeles, lo que permite que los diseñadores exploren nuevas posibilidades creativas. Permite la incorporación de gráficos de otras aplicaciones y la exportación de elementos de diseño a varias herramientas de software, como XAML para WPF y "WPF/E".

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

Abra el archivo Popcan.xpr con Expression Graphic Designer. Se puede encontrar en Archivos de programa\Microsoft Expression\Design Beta 1\Samples directory. Se trata del archivo gráfico usado en la figura 1.

Una vez abierto el archivo, verá que es bastante grande, si se mide en píxeles; el tamaño se averigua usando las reglas horizontal y vertical y, en este caso, verá que la medida es 1.280 x 1.024 píxeles. En la figura 2 se muestra la regla horizontal con la anchura de la imagen.

Figura 2. Regla horizontal de Expression Graphic Designer

Este dato también consta en el cuadro de diálogo Document Size (File, Document Size), como se muestra en la figura 3.

Figura 3. Cuadro de diálogo Document Size

Cambie las dimensiones de la imagen en el cuadro de diálogo Document Size a 300 x 150 píxeles. Se consigue escribiendo 300 en el cuadro de texto Width y 150 en el cuadro de texto Height del cuadro de diálogo Document Size, como se muestra en la figura 4.

Figura 4. Configuración de las dimensiones en 300 x 150 píxeles

Al hacer clic en Aceptar en este cuadro de diálogo, la imagen cambiará de tamaño. La lata aparece ahora tan distorsionada, baja y rechoncha, como se aprecia en la figura 5.

Figura 5. El documento con dimensiones de 300 x 150 píxeles

Debido a que el dibujo es vectorial, se puede modificar su tamaño sin perder fidelidad. Cuando esté en la superficie de diseño, presione CTRL+A para seleccionar todos los elementos del dibujo. Aparecerá un contorno verde y mostrará los elementos seleccionados, como se muestra en la figura 6.

Figura 6. Todos los elementos de imagen seleccionados

Puede arrastrar ahora la imagen por el marco y desplazar las esquinas para cambiar el tamaño de la imagen hasta que se consiga la relación de aspecto deseada. En la figura 7 se ve la lata en la esquina superior izquierda del documento con otras dimensiones para parecer más realista.

Figura 7. Lata con otras dimensiones para tener una relación de aspecto mejor

Ya está listo para exportar la imagen como una imagen XAML de "WPF/E".

Para esto haga clic en File, Export, XAML o use CTRL+ALT+X. De este modo aparece el cuadro de diálogo Common Save, que se puede usar para especificar la ubicación del archivo XAML. Llame al archivo Popcan.xaml y seleccione Save. Aparecerá el cuadro de diálogo Xaml Export. En este cuadro de diálogo se pueden incluir más especificaciones acerca del archivo de exportación, como que se desea exportar un XAML compatible con "WPF/E" (figura 8).

Figura 8. Exportación de XAML para "WPF/E"

En el lado derecho se encuentra el Panel de vista previa, en el que se puede examinar la imagen con las funciones de zoom y panorámica para asegurarse de que está perfecto antes de continuar. A la derecha, las fichas permiten que se examine tanto la imagen como el código XAML que representa. Si XAML le es desconocido, sería buena idea que echara un vistazo a la ficha XAML Code para relacionar el código con su aplicación en la imagen.

Las opciones desplegables a la derecha permiten que se especifiquen atributos de exportación, como el modo en que se deben tratar las imágenes rasterizadas, si se deben vectorizar o sólo ubicarlas en un directorio específico. Por el momento se pueden dejar los valores predeterminados, pero hay que asegurarse de haber seleccionado "WPF/E" en Document Format, como se muestra en la figura 8.

Cuando todo esté listo, haga clic en el botón Export y el código XAML para "WPF/E" se escribirá en el disco. Tendrá que utilizar esto más adelante en el proyecto web de Visual Studio 2005. En el siguiente paso, verá la forma de configurar un proyecto web y prepararlo para XAML.

Uso de Visual Studio 2005 para crear un proyecto "WPF/E"

El SDK de "WPF/E" incluye una plantilla para Visual Studio 2005 que permite crear proyectos de "WPF/E". Para poder usarla en Visual Studio 2005, primero se han de descargar los siguientes complementos de IDE.

En primer lugar, se necesita Update to Support Web Application Projects (Actualización para admitir proyectos de aplicación web), que se puede descargar e instalar desde Microsoft.

Después de instalarla correctamente, se puede instalar el complemento Visual Studio 2005 Web Applications Projects. Haga clic en el siguiente vínculo para descargar e instalar WebApplicationProjectSetup.msi. La descarga de SDK de "WPF/E" incluye un archivo comprimido llamado "WPF/E" JSApplication.zip. Cree un directorio "WPF/E" en \Archivos de programa\Microsoft Visual Studio 8\Common7\IDE\ProjectTemplates\CSharp y copie en él el archivo comprimido. A continuación, asegúrese de que el entorno de desarrollo está cerrado y ejecute devenv.exe/setup desde el símbolo del sistema.

Visual Studio ya está preparado para crear proyectos de "WPF/E". Se puede hacer iniciando el IDE de Visual Studio y haciendo clic en File, New Project. Verá "WPF/E" dentro de los tipos de proyecto disponibles, así como la plantilla de aplicaciones de JavaScript de "WPF/E" que se usa para crear nuevas aplicaciones de "WPF/E", como se muestra en la figura 9.

Figura 9. Uso de la plantilla de Visual Studio

Así se crea un proyecto nuevo con una página HTML sencilla y un archivo XAML que representa un sencillo botón. Es conveniente echar un vistazo al HTML para ver cómo usa JavaScript para configurar el control de "WPF/E" (se tratará más adelante), así como el modo en que XAML expone un evento que se puede interceptar y controlar en JavaScript.

Preparación de un proyecto de Visual Studio 2005 para "WPF/E"

Aunque se pueden crear aplicaciones con la plantilla de la sección anterior, es también conveniente comprender cómo funciona y se entrega "WPF/E" y que vea así la sencillez con la que se puede configurar un sitio web existente para desarrollar el módulo "WPF/E" en el explorador. En esta sección, se trata el tema de la configuración manual de un sitio web para hacerlo un sitio "WPF/E".

Al escribir este artículo, usé Visual Studio 2005 y la vista previa de CTP de "Orcas". No se necesita "Orcas" pero, si lo tiene instalado, simplifica el hecho de escribir el código XAML, ya que se dispone de IntelliSense y una vista previa del XAML terminado en el diseñador XAML "Cider". No obstante, hay que tener en cuenta que Cider está diseñado para WPF, no para "WPF/E", de modo que no se debería usar para desarrollar código XAML para "WPF/E" en este momento.

Así que, para empezar, hay que abrir Visual Studio 2005 y crear un nuevo sitio web mediante el cuadro de diálogo New Web Site dentro de File, como se observa en la figura 10.

Figura 10. Creación de un sitio web nuevo con Visual Studio 2005

Así se crea una nueva solución que contiene una sencilla página ASP.NET Default.aspx ASP.NET que, al ejecutarse, genera HTML que se representa en el explorador. De esta forma se consigue la base para la primera página "WPF/E".

A continuación, debe importar los archivos de desarrollo para el complemento.Para esto, debe crear en primer lugar un directorio Bin en el sitio web haciendo clic en el botón secundario del mouse sobre el proyecto (http://localhost/MyFirstWPFE) en el Explorador de soluciones y seleccionando New Folder. Cambie el nombre de la nueva carpeta a "Install" y agregue los siguientes archivos de la descarga de "WPF/E" a este directorio nuevo. install.msi, MozillaControl1712.exe, WPFE.dmg, xcpctrl.cab, y xcpctrl.xpi. (puede arrastrar desde el explorador de Windows y colocarlos directamente en el directorio Bin de la ventana del Explorador de soluciones de Visual Studio 2005.) También puede conseguir estos archivos en cualquier proyecto desarrollado con la plantilla de Visual Studio 2005, como en la sección anterior.

A continuación, debe agregar el archivo aghost.js al sitio web. De nuevo, puede hacerse arrastrándolo desde el explorador de Windows y colocándolo en la solución. Por último, cree otra carpeta nueva llamada XAML en la solución y copie en ella el archivo Popcan.xaml, creado con anterioridad.

Edición de una página web para representar contenido de "WPF/E"

Ahora se tratará la edición de la página web para conseguir que administre contenido "WPF/E" incrustado. Se trata de algo bastante sencillo, ya que sólo implica la adición de una referencia sencilla de JavaScript y una llamada a un objeto de JavaScript definido en aghost.js. Las bibliotecas de JavaScript y los instaladores de "WPF/E" hacen el resto.

En primer lugar, edite la página para que parezca la de la lista 1. Todo lo que se hizo fue cambiar el título "Untitled Page", agregar una referencia de JavaScript a aghost.js y agregar al cuerpo de la página un nuevo Div que contenía la llamada al objeto agHost. Todo esto aparece resaltado en la lista 1.

Lista 1. Código HTML predeterminado

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" 
Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html  >
<head id="Head1" runat="server">
    <title>My first "WPF/E" Page!</title>
   <script type="text/javascript" src="agHost.js "></script>
</head>
<body>
    <form id="form1" runat="server">
    
    <div id="AgControl1Host">
    <script type="text/javascript">
    new agHost("AgControl1Host", "AgControl1", "400",
                 "400", "#00000000", null, "xaml/Popcan.xaml",
                 "True", "30", null);
        </script>
    </div>
    </form>
</body>
</html>

La llamada de JavaScript a "new AgHost" puede que le resulte ahora un tanto oscura, pero no se preocupe: se tratará todo esto más adelante. En las siguientes secciones, se tratará en primer lugar la ejecución de esta aplicación con Internet Explorer y Mozilla Firefox. Después, el objeto de JavaScript que controla "WPF/E", además de realizar trabajos de edición para agregar la animación al gráfico y darle vida. Ahora está listo para ejecutar la aplicación y que ASP.NET genere la página con el contenido "WPF/E". Presione F5 en Visual Studio para iniciar la aplicación. La primera vez que ejecute una aplicación, el explorador detectará si "WPF/E" está instalado. Si no lo está, cuando la página se inicie, aparecerá un cuadro de diálogo preguntándole si desea instalar el módulo "WPF/E". En el Apéndice I se detalla la instalación para Internet Explorer y Mozilla Firefox en Windows.

Comprensión de JavaScript

A continuación se encuentra el código JavaScript que incrustaba este XAML a la página mediante "WPF/E".

new agHost("AgControl1Host", "AgControl1", "400", "400", "#00000000", 
null, "xaml/Popcan.xaml", 
            "True", "30", null);

De este modo se crea una nueva instancia del complemento de "WPF/E" mediante una lista de parámetros que se pueden usar para crearlo. Estos parámetros son (en orden):

hostElementID: Nombre del elemento HTML en el que se alojará el control del complemento. Así, si tiene un <div> en la página que contiene el complemento, dele al <div> un nombre y úselo aquí.

controlID: Id. del propio complemento.

height: Altura deseada del control en píxeles.

width: Anchura deseada del control en píxeles.

backgroundColor: Color de fondo deseado para el control.

sourceElement: Nombre del elemento de página que contiene XAML para el control. Ésta es una de las maneras de configurar el XAML para el control (cuando el XAML está en la página) contenido dentro de un elemento <script>. En caso de usar este enfoque, ponga el id. del elemento <script> en este parámetro y el control lo tomará de ahí.

sourceURL: Ubicación de un archivo XAML externo.

isWindowless: Tipo booleano. Establézcalo en True si desea que el control "WPF/E" no tenga ventanas. Esto significa que en una página HTML, el control "WPF/E" estará integrado con el HTML y, por ejemplo, si lo establece para ser transparente, el HTML se mostrará "detrás". Si tiene ventanas (es decir, si está establecido en False), el contenido "WPF/E" se encontrará en una zona definida de la página y el formato HTML fluirá a su alrededor.

maxFrameRate: Número que especifica la velocidad de cuadro máxima en que "WPF/E" representará el contenido animado.

loadHandler: Nombre de un elemento <script> de la página que activar cuando el control está cargado

errorHandler: Nombre de un elemento <script> de la página que activar en caso de error del control.

Cuando crea una nueva instancia de un control agHost con estos parámetros, se realiza un llamada de agHost.js (se necesita una referencia de secuencia de comandos a este archivo en el HTML), que genera la etiqueta <object> que aloja el control. De este modo, en el caso anterior, la siguiente etiqueta <object> se genera si usa Internet Explorer.

<object id="AgCotnrol1" height="400" width="400"
    Codebase="install/xcpctrl.cab"
    classid="CLSID:32C73088-76AE-40F7-AC40-81F62CB2C1DA">
    <param name="Source" value="xaml/Popcan.xaml" />
    <param name="MaxFrameRate" value="30" />
    <param name="BackgroundColor" value="#00000000" />
    <param name="WindowlessMode" value="True" />
</object>

Si lo prefiere, siempre puede usar este código directamente en la página, pero el hecho de usar el objeto de JavaScript implica más texto y no hace que la página HTML se estanque en los detalles de implementación de la etiqueta <object>.

Edición de XAML para agregar texto

Puede editar el XAML directamente desde Visual Studio si desea agregar algo. En este ejemplo, agregará un control TextBlock al XAML para contener algún texto básico.

Abra el archivo XAML en Visual Studio 2005. Si tiene la CTP de "Orcas" instalada, podrá obtener una vista previa del XAML en el editor "Cider", como se muestra en la figura 11. Tenga en cuenta que no podrá usar el cuadro de herramientas para agregar controles al XAML para "WPF/E", ya que el diseñador "Cider" sólo es válido para aplicaciones WPF. Si no, sólo se abrirá el editor XML.

Figura 11. Uso de Visual Studio 2005 para editar el XAML

Para agregar un bloque de texto al XAML, desplácese al final y agregue el siguiente código, justo antes de la etiqueta de cierre </Canvas>.

<Canvas x:Name="Layer_3">
  <TextBlock x:Name="MyLink" Canvas.Left="150" Canvas.Top="0"
      FontFamily="Verdana" FontSize="18"
      Width="250" TextWrapping="Wrap">
          Drink some of this yummy WPFE soda!
          Much better than a Hello, World App, right?
   </TextBlock>
</Canvas>

Se puede ver el efecto sobre la página web en la figura 12.

Figura 12. XAML con bloque de texto

Edición de XAML para crear una animación sencilla

XAML especifica guiones gráficos para las animaciones. En este ejemplo, agregará una animación sencilla a la página "WPF/E" en la que el texto rebotará en la parte superior e inferior de la pantalla. Este efecto se consigue agregando un EventTrigger que se activa cuando Canvas se carga. Este EventTrigger puede contener una acción. La acción especificada es comenzar un guión gráfico que contenga "DoubleAnimation." Este tipo de animación se usa para manipular un número dentro de un intervalo que comience en "From" y termine en "To." Se puede establecer para que se repita constantemente o para que cambie de forma automática de dirección. Por tanto, se puede especificar que, para "rebotar" el texto, se anime su parte superior (Top) desde 0 hasta una cifra especificada, cambiando automáticamente la dirección de la animación cuando se haya hecho y repitiéndose constantemente. El guión gráfico necesario es el siguiente.

<Storyboard Storyboard.TargetName="MyLink"
            Storyboard.TargetProperty="(Canvas.Top)" >
  <DoubleAnimation AutoReverse="True" RepeatBehavior="Forever"
                   BeginTime="0" Duration="0:0:1"
                   From="0" To="90">
  </DoubleAnimation>
</Storyboard>

Y la especificación completa de Canvas con el texto y los desencadenadores para activar la animación es la siguiente.

<Canvas x:Name="Layer_3">
  <Canvas.Triggers>
    <EventTrigger RoutedEvent="Canvas.Loaded">
      <EventTrigger.Actions>
        <BeginStoryboard>
          <Storyboard Storyboard.TargetName="MyLink"
                      Storyboard.TargetProperty="(Canvas.Top)" >
            <DoubleAnimation AutoReverse="True" RepeatBehavior="Forever"
                             BeginTime="0" Duration="0:0:1"
                             From="0" To="90">
            </DoubleAnimation>
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
  </Canvas.Triggers>
  <TextBlock x:Name="MyLink" Canvas.Left="150" Canvas.Top="0"
             FontFamily="Verdana" FontSize="18" Width="250"
             TextWrapping="Wrap">
               Drink some of this yummy "WPF/E" soda!
               Much better than a Hello, World App, right?
  </TextBlock>
</Canvas>

Ahora, al ver el sitio web en acción, el texto "rebota" hacia arriba y abajo en el lado derecho.

Edición de XAML para crear una interacción sencilla

"WPF/E" permite que los codificadores de JavaScript interactúen con el XAML. En este ejemplo, verá cómo controlar un evento iniciado cuando el usuario interactúa con el archivo XAML. El texto que "rebota" del anterior ejemplo se convertirá en un hipervínculo que más tarde se usará para dirigir a otra página.

Para esto debe especificar el controlador de evento en la declaración TextBlock. Se estará capturando un clic del mouse, de modo que hay que usar el controlador de evento MouseLeftButtonDown para especificar la función de JavaScript que controlará el clic. Éste es el bloque de texto con una declaración para un controlador de JavaScript llamado hyperlink_MouseLeftButtonDown.

<TextBlock 
MouseLeftButtonDown="javascript:hyperlink_MouseLeftButtonDown"
    x:Name="MyLink" Canvas.Left="150" Canvas.Top="0"
    FontFamily="Verdana" FontSize="18"
    Width="250" TextWrapping="Wrap">Channel 9 is cool!</TextBlock>

Ahora podrá controlar este evento con el JavaScript de la página de alojamiento (o en una biblioteca externa a la que haga referencia la página), como a continuación.

    <script language="javascript">
       function hyperlink_MouseLeftButtonDown(sender, args) {
            window.open("http://channel9.msdn.com");
        }
    </script>

De este modo, al ejecutar la página, aparecerá un hipervínculo animado y en movimiento que, tras hacer clic sobre él, lleva al sitio Channel 9 de MSDN.

Adición de recursos multimedia

"WPF/E" lleva lo último de Windows Media a los desarrolladores web. Se puede agregar fácilmente contenido multimedia a las aplicaciones "WPF/E" mediante la etiqueta <MediaElement> en XAML, como se indica a continuación.

<Canvas x:Name="Layer_4">
    <MediaElement x:Name="VideoLayer" Source="Butterfly.wmv"
                  Canvas.Top="0" Canvas.Left="130"
                  Height="200" Width="200">
    </MediaElement>
</Canvas>

Hay que tener en cuenta que el archivo Butterfly.wmv debe estar en el sitio web raíz para que funcione. Este archivo WMV es uno de los "Vídeos de muestra" que incluye Windows Vista y se encuentra en la carpeta Documentos. Si no dispone de este archivo, lo puede sustituir por cualquier archivo WMV.

MediaElement expone métodos que se pueden usar para iniciar, parar, pausar o buscar el vídeo. Revise la documentación y los ejemplos de "WPF/E" para obtener más información a este respecto.

En la figura 13, se puede ver la aplicación de "WPF/E" con vídeo incrustado.

Figura 13. "WPF/E" con vídeo incrustado

Conclusión

En este artículo se ofrece una descripción general de alto nivel de "WPF/E" y el modo en que encaja en la pila de desarrollo de la próxima generación de aplicaciones web. Ya ha visto cómo XAML se usa como pegamento para fijar las especificaciones del diseñador con las herramientas del desarrollador y para ofrecérselas al usuario. Ha obtenido una visión general de Expression Graphic Designer, el modo en que se puede usar para definir gráficos para páginas web y cómo éstos se pueden exportar a XAML para "WPF/E". Después ha importado este XAML a un proyecto web de Visual Studio 2005 y repasado cómo se configura para implementar el tiempo de ejecución de XAML para Internet Explorer y Firefox, de modo que se represente el XAML para "WPF/E" XAML del diseñador. Finalmente, ha visto cómo manipular el XAML para agregar animaciones, interacciones y contenido multimedia.

Lo que se ha hecho en este artículo es sólo esquematizar lo que es posible con "WPF/E". Existen multitud de funcionalidades en esta tecnología que se pueden usar para comenzar hoy la creación de la próxima Web. Será un emocionante viaje, así que... ¡súbase!

Apéndice I: La experiencia de la instalación

Para poder ver páginas web con contenidos "WPF/E", debe integrar "WPF/E" al explorador. Para esto, puede usar un método de etiqueta de objeto que solicite al usuario la instalación o puede detectar si el explorador cuenta con "WPF/E" e indicar al usuario la página de descarga apropiada para obtener el módulo:

  • Para PC

  • Para Macintosh

Con nuestra aplicación, utilizamos una etiqueta de objeto que solicita al usuario la instalación del módulo "WPF/E" adecuado si no se cuenta aún con él. De ese modo, la primera vez que ejecute una aplicación, el explorador detectará si "WPF/E" está instalado. Si no lo está, cuando la página se inicie, aparecerá un cuadro de diálogo preguntándole si desea instalar el módulo "WPF/E". En la siguiente sección se detalla la experiencia de usuario siguiendo este flujo de trabajo con Microsoft Internet Explorer y Mozilla Firefox, respectivamente.

Ejecución de la página en Internet Explorer

Aparecerá el cuadro de diálogo Advertencia de seguridad de Internet Explorer que se muestra en la figura 14. Si selecciona Instalar, el complemento se descargará e instalará como se detalla en las siguientes secciones.

Figura 14. Advertencia de seguridad del explorador para la instalación de "WPF/E"

Seleccione Instalar y el Asistente de instalación se iniciará, como se muestra en la figura 15.

Figura 15. Inicio de la instalación de "WPF/E"

Lea detenidamente el contrato de licencia de usuario final y, si desea continuar, seleccione Acepto. En ese momento, comenzará la instalación de WPFE, como se aprecia en la figura 16.

Figura 16. Instalación de "WPF/E"

Cuando la instalación se haya completado correctamente, aparecerá el cuadro de diálogo Instalación completa, como se muestra en la figura 17.

Figura 17. Instalación de "WPF/E"

Haga clic en Finalizar y todo estará listo. De hecho, el XAML funcionará de inmediato, como se observa en la figura 18.

Figura 18. XAML representado en el explorador

En la siguiente sección, se trata la experiencia de instalación del complemento en el explorador Mozilla Firefox.

Ejecución de la página en Mozilla Firefox

En la sección anterior se ha visto cómo incluir "WPF/E" en Internet Explorer. Pero "WPF/E" es una tecnología compatible con varias plataformas y exploradores. En esta sección, se trata su funcionamiento con Mozilla Firefox en un entorno de Microsoft Windows Vista.

Si "WPF/E" no está instalado, se verá algo similar a lo que aparece en la figura 19 al ejecutar Firefox.

Figura 19. Ejecución de "WPF/E" en Firefox

Haga clic en Install Missing Plugins (Instalar complementos no disponibles), en la parte superior derecha de la pantalla. Firefox buscará complementos conocidos que coincidan con el tipo de "WPF/E" (application/xcp-plugin), pero no encontrará ninguno. Se debe a que "WPF/E" no es aún un producto público y, por tanto, el complemento no está disponible en el Firefox Plugin Finder Service Directory —Directorio del servicio de búsqueda de complementos de Firefox— (lo estará cuando se lance el producto). Observe la figura 20.

Figura 20. Firefox Plugin Finder Service

No obstante, se puede realizar una instalación manual desde el cuadro de diálogo Plugin Finder Service (Servicio de búsqueda de complementos). Esto le llevará a una URL que contiene el archivo MSI que puede iniciarse para instalar el tiempo de ejecución de "WPF/E". A partir de este punto, la experiencia de instalación es idéntica a la de Internet Explorer, descrita en la sección anterior.

Una vez finalice, ejecute la página; "WPF/E" representará el XAML en Mozilla Firefox, como se muestra en la figura 21.

Figura 21. Representación del XAML en Mozilla Firefox

Apéndice II: Configuración de tipos de servidor MIME

Configuración de IIS 6.x

La configuración de IIS para los tipos MIME necesarios para ejecutar aplicaciones "WPF/E" es muy sencilla. Si se obtiene una página en blanco en lugar de una representación de XAML, puede que no se haya configurado XAML como un tipo de XML reconocible en IIS. Para esto, debe llamar al cuadro de diálogo Propiedades del sitio web y seleccionar la ficha Encabezados HTTP, como aparece en la figura 22.

Figura 22. Configuración de IIS 6.x

En la parte inferior del cuadro de diálogo, se encuentra un botón que permite la especificación de estos tipos. Tenga en cuenta que los archivos de servidor sólo de IIS con extensiones están registrados en esta lista; de modo que, si .xaml no está registrado, no se podrán utilizar estos archivos ni obtener XAML en el control "WPF/E". En la figura 23 se muestra la configuración correcta. Use el botón Nuevo del cuadro de diálogo para agregarlo, en caso necesario.

Figura 23. Configuración del tipo MIME en IIS

Debe tener en cuenta que, aunque no se muestra en la figura 23, si desea que la aplicación se pueda instalar en Macintosh, debe usar application/octet-stream como tipo MIME para la extensión de archivo .DMG.

Configuración de IIS 7.x

Para configurar IIS 7.x en Windows Vista, debe hacer clic en primer lugar en el botón secundario sobre Equipo en el menú Inicio de Windows y seleccionar Administrar. De esta forma se inicia la consola de Administración de equipos, desde la que se puede seleccionar IIS, como se aprecia en la figura 24.

Figura 24. Consola de Administración de equipos de Windows Vista

Desplácese por la lista de elementos hasta encontrar el applet Tipos MIME. Inícielo para configurar los tipos MIME, como se muestra en la figura 25.

Figura 25. Configuración de tipos MIME de IIS 7

Se puede usar el panel Acción para agregar los tipos MIME necesarios.

.XAML : text/xml
.DMG: application/octet-stream
Mostrar: