Aprimore seus aplicativos HTML com o WPF/E CTP

Publicado em: 28 de dezembro de 2006
Por Laurence Moroney

Aplica-se a:

  • Windows Presentation Foundation/Everywhere

  • .NET Framework 3.0

  • Microsoft Visual Studio 2005

Resumo

este white paper fornece uma visão geral de alto nível do "WPF/E" e como ele se adapta aos desenvolvimentos para a próxima geração de aplicativos Web.

Nesta página

O que é "WPF/E"?
A evolução do desenvolvimento da Web: migrando para Web.Next
Criando um aplicativo "WPF/E" simples
Preparando um arquivo de design gráfico para "WPF/E"
Usando o Visual Studio 2005 para criar um projeto "WPF/E"
Preparando um projeto do Visual Studio 2005 para "WPF/E"
Editando sua página da Web para processar conteúdo "WPF/E"
Compreendendo o JavaScript
Editando o XAML para adicionar texto
Editando o XAML para animação simples
Editando o XAML para interação simples
Adicionando mídia à mixagem
Conclusão
Apêndice I: A experiência da instalação
Apêndice II: Configurando tipos de MIME de servidor

O que é "WPF/E"?

"WPF/E" é um nome de código para uma nova tecnologia de apresentação na Web criada para ser executada em uma variedade de plataformas. Ela permite a criação de experiências sofisticadas, visualmente impressionantes e interativas que podem ser executadas em qualquer lugar: com navegadores e em vários dispositivos e sistemas operacionais de desktop (como o Apple Macintosh). Consistente com o WPF (Windows Presentation Foundation), a tecnologia de apresentação no Microsoft .NET Framework 3.0 (a infra-estrutura de programação do Windows), a linguagem XAML (eXtensible Application Markup Language) é a base do recurso de apresentação "WPF/E".

Este white paper percorrerá com você os fundamentos de "WPF/E" e as etapas de como você pode usar as inúmeras ferramentas da Microsoft, incluindo o Microsoft Expression Graphic Designer, o Microsoft Visual Studio 2005 e a linguagem XAML para criar sites gráficos sofisticados. Primeiro, percorreremos as instruções elementares sobre o histórico que levou ao "WPF/E" e sua posição no panorama do desenvolvimento.

A evolução do desenvolvimento da Web: migrando para Web.Next

Quando a Web moderna foi inventada por Tim Berners-Lee na CERN, a intenção era que fosse um sistema que permitisse o armazenamento e a vinculação de documentos estáticos em um sistema baseado em rede. Com o passar dos anos, as inovações cresceram, sendo a próxima etapa lógica documentos "ativos" gerados no momento em que são solicitados com informações específicas de tempo ou usuário. Tecnologias como CGI propiciaram isso. Com o tempo, a capacidade de gerar documentos na Web se tornou imprescindível e a tecnologia evoluiu passando por CGI, Java, ASP e, então, o ASP.NET.

O ASP.NET proporcionou um marco na capacidade de um desenvolvedor desenvolver aplicativos Web de qualidade, rapidamente, usando um paradigma de desenvolvimento de servidor e as melhores ferramentas com a linha de produtos do Visual Studio.

A experiência do usuário mostrou-se como uma grande barreira aos aplicativos Web, pois restrições técnicas impediam que os aplicativos Web fornecessem o mesmo aperfeiçoamento em termos de experiência do usuário que um aplicativo cliente com dados locais poderia fornecer.

O objeto XMLHttpRequest, lançado pela Microsoft como parte do Internet Explorer 5 no ano 2000, tornou-se a base da tecnologia AJAX (Asynchronous JavaScript and XML) que permitiu aos aplicativos Web fornecerem uma resposta mais dinâmica à entrada do usuário, atualizando pequenas partes de uma página da Web sem solicitar uma recarga completa do conteúdo. Soluções inovadoras criadas em AJAX, como mapas Windows Live Local, levaram os aplicativos Web um passo adiante para tornar a experiência do usuário mais parecida com a que ele tinha no cliente.

"WPF/E" é a próxima etapa na evolução do aperfeiçoamento potencial da experiência do usuário que os desenvolvedores de aplicativos e designers podem apresentar a seus clientes. Ele faz isso permitindo aos designers expressarem sua criatividade e salvar seu trabalho em um formato que funcionará diretamente na Web. No passado, um designer projetaria um site e uma experiência do usuário usando ferramentas que forneciam uma saída sofisticada, mas o desenvolvedor tinha de enfrentar as limitações da plataforma Web para conseguir realizar isso. No modelo "WPF/E", os designers podem criar a experiência de usuário que desejarem e expressá-la como XAML. Essa linguagem XAML poderá então ser diretamente incorporada pelo desenvolvedor em uma página da Web usando o tempo de execução "WPF/E". Portanto, os dois podem trabalhar mais de perto do que nunca para proporcionar uma experiência de usuário de cliente sofisticada.

Como a linguagem XAML é XML, é baseada em texto, fornecendo uma descrição amigável para firewall e de fácil inspeção do conteúdo sofisticado. Embora existam outras tecnologias – como miniaplicativos Java, ActiveX e Flash – que possam ser utilizadas para implantar conteúdo mais sofisticado que DHTML/CSS/JavaScript, todas enviam conteúdo binário para o navegador, que é difícil de ser examinado em termos de segurança – sem mencionar a dificuldade de atualização, pois qualquer alteração requer a instalação de todo o aplicativo, o que não é uma experiência tão amigável para o usuário além de poder levar à estagnação das páginas. Quando "WPF/E" é usado e uma alteração é necessária no conteúdo sofisticado, um novo arquivo XAML é gerado no lado do servidor; na próxima vez em que o usuário navegar até a página, esse XAML é baixado e a experiência é atualizada sem reinstalação.

No núcleo do "WPF/E" está o módulo de aprimoramento de navegador que processa o XAML e desenha os gráficos resultantes na superfície do navegador. Trata-se de um download pequeno (menos de 2 MB) que pode ser instalado quando o usuário acessa o site com conteúdo "WPF/E". Esse módulo expõe a estrutura subjacente da página XAML aos desenvolvedores JavaScript, de modo que a interação com o conteúdo no nível da página torna-se possível e, portanto, o desenvolvedor pode, por exemplo, gravar manipuladores de eventos, ou manipular o conteúdo da página XAML usando código JavaScript.

Mas, basta de teoria! Vamos examinar logo nosso primeiro projeto "WPF/E".

Criando um aplicativo "WPF/E" simples

Vamos começar conhecendo o Microsoft Expression Graphic Designer para criar um gráfico muito simples em XAML para "WPF/E." A Figura 1 mostra o produto em ação.

Cc564904.WPFE_Introducao_fig01(pt-br,MSDN.10).gif
Figura 1. A ferramenta Expression Graphic Designer

A Expression Graphic Designer é uma nova ferramenta da Microsoft que reúne o melhor das ferramentas de design de gráficos vetoriais com base em pixel, permitindo aos designers explorarem novas possibilidades criativas. Ela lhe permite incorporar gráficos de outros aplicativos e exportar elementos de design para uma variedade de ferramentas de software, incluindo XAML para WPF e "WPF/E".

Preparando um arquivo de design gráfico para "WPF/E"

Com a Expression Graphic Designer, abra o arquivo Popcan.xpr. Você pode encontrá-lo em seu diretório Program Files\Microsoft Expression\Design Beta 1\Samples. Esse é o arquivo gráfico usado na Figura 1.

Depois de abrir o arquivo, verá que – quando medido em pixels – ele é muito grande; você pode observar isso usando as regras vertical e horizontal, constatando que de fato tem 1280 × 1024 pixels. A Figura 2 mostra a regra horizontal demonstrando a largura da imagem.

Cc564904.WPFE_Introducao_fig02(pt-br,MSDN.10).gif
Figura 2. Regra horizontal na Expression Graphic Designer

Você também pode ver isso na caixa de diálogo Document Size (File, Document Size), conforme mostra a Figura 3.

Cc564904.WPFE_Introducao_fig03(pt-br,MSDN.10).gif
Figura 3. Caixa de diálogo Document Size

Usando a caixa de diálogo Document Size, altere as dimensões da imagem para 300 pixels por 150 pixels. Para isso digite 300 na caixa de texto Width e 150 na caixa de texto Height na caixa de diálogo Document Size, conforme mostra a Figura 4.

Cc564904.fig04(pt-br,MSDN.10).gif
Figura 4. Configurando as dimensões para 300 por 150 pixels

Quando você clicar em OK nesta caixa de diálogo, a imagem será redimensionada. Agora, a lata está tão distorcida que parece curta e gorda, conforme mostra a Figura 5.

Cc564904.fig05(pt-br,MSDN.10).gif
Figura 5. O documento redimensionado para 300 por 150 pixels

Como o desenho é vetorial, você pode redimensioná-lo sem perder a fidelidade. Quando você estiver na superfície do design, pressione CTRL+A para selecionar todos os elementos no desenho. Um contorno verde será exibido mostrando os elementos selecionados, conforme mostra a Figura 6.

Cc564904.fig06(pt-br,MSDN.10).gif
Figura 6. Todos os elementos da imagem selecionados (clique na imagem para ampliá-la)

Você pode agora arrastar a imagem pelo quadro e arrastar os cantos para redimensioná-la até obter uma proporção de aspecto agradável. A Figura 7 mostra que a lata pode ser redimensionada para parecer mais realista e ser colocada no canto superior esquerdo do documento.

Cc564904.fig07(pt-br,MSDN.10).gif
Figura 7. Redimensionando a lata para obter uma proporção de aspecto melhor

Agora você está pronto para exportá-la como uma imagem "WPF/E" XAML.

Para isso, clique em File, Export, XAML ou use CTRL+ALT+X. Isso chamará a caixa de diálogo Common Save, que pode ser usada para especificar onde você deseja colocar o arquivo XAML. Chame o arquivo Popcan.xaml e selecione Save. A caixa de diálogo Xaml Export será exibida. A caixa de diálogo lhe permite fazer outras especificações no arquivo de exportação, inclusive especificar se você deseja exportar XAML compatível com "WPF/E", como mostra a Figura 8.

Cc564904.fig08(pt-br,MSDN.10).gif
Figura 8. Exportando XAML "WPF/E"

O lado direito da tela tem um painel de visualização em que você pode inspecionar a imagem, usando aplicação de zoom e panorâmica, verificando se ela OK antes de você prosseguir. Do lado direito, as guias lhe permitem alternar entre a inspeção da imagem e do código XAML que a representa. Se você é inexperiente em relação a XAML, é uma boa idéia examinar a guia XAML Code, para poder correlacionar como o código é aplicado à imagem.

As opções suspensas à direita permitem a especificação de atributos da exportação, incluindo como as imagens rasterizadas devem ser tratadas, se devem ser vetorizadas ou apenas enviadas a um diretório específico. Por hora, não há problema manter os padrões, mas verifique se "WPF/E" está selecionado em Document Format, como mostra a Figura 8.

Quando estiver pronto, clique no botão Export e o código XAML "WPF/E" será gravado no disco. Você o usará posteriormente em seu projeto da Web do Visual Studio 2005. Na próxima etapa, você verá como definir um projeto da Web e prepará-lo para XAML.

Usando o Visual Studio 2005 para criar um projeto "WPF/E"

O SDK do "WPF/E" inclui um modelo para o Visual Studio 2005 que permite a criação de projetos "WPF/E". Para poder usá-lo no Visual Studio 2005, primeiro é necessário fazer o download dos seguintes complementos para o IDE.

Primeiro, você precisará do Update to Support Web Application Projects, que pode ser baixado e instalado da Microsoft.

Depois da instalação com êxito, você poderá instalar o próprio complemento Web Applications Projects do Visual Studio 2005. Clique no link a seguir para baixar e instalar WebApplicationProjectSetup.msi. O download do SDK do "WPF/E" inclui um arquivo zipado, denominado "WPF/E" JSApplication.zip. Crie um diretório "WPF/E" no diretório \Program Files\Microsoft Visual Studio 8\Common7\IDE\ProjectTemplates\CSharp e copie esse arquivo zipado nele. Depois, verifique se seu ambiente de desenvolvimento está fechado e em um prompt de comando execute devenv.exe/setup.

O Visual Studio agora está pronto para criar projetos "WPF/E". Você pode fazer isso inicializando o Visual Studio IDE e clicando em File, New Project. Você verá "WPF/E" embaixo dos tipos de projeto disponíveis, bem como o modelo de aplicação "WPF/E" JavaScript que é utilizado para criar um novo aplicativo "WPF/E", como mostra a Figura 9.

Cc564904.fig09(pt-br,MSDN.10).gif
Figura 9. Usando o modelo do Visual Studio

Isso cria um novo projeto contendo uma página HTML única e um arquivo XAML representando um botão simples. É conveniente examinar o HTML para ver como ele usa JavaScript para definir o controle "WPF/E" (mais informações posteriormente) e também como o XAML expõe um evento que pode ser interceptado e manipulado em JavaScript.

Preparando um projeto do Visual Studio 2005 para "WPF/E"

Embora você possa criar um aplicativo usando o modelo da seção anterior, também é conveniente entender como o "WPF/E" funciona e é entregue, e para isso você pode ver como é simples configurar um site existente para implantar o módulo"WPF/E" no navegador. Nesta seção, veremos como configurar seu site manualmente para ser um site "WPF/E".

Ao escrever este white paper, usei o Visual Studio 2005 e o CTP "Orcas". Você não precisa do "Orcas", mas se o tiver instalado será muito mais fácil digitar o código XAML, pois terá IntelliSense e uma visualização do XAML terminado no designer XAML "Cider". Entretanto, observe que Cider é projetado para WPF, não para "WPF/E", portanto não deve ser usado para desenvolver o código XAML para "WPF/E" desta vez.

Para começar, inicialize o Visual Studio 2005 e crie um novo site usando a caixa de diálogo New Web Site em File, conforme mostra a Figura 10.

Cc564904.fig10(pt-br,MSDN.10).gif
Figura 10. Criando um novo site no Visual Studio 2005

Isso criará uma nova solução contendo uma página Default.aspx ASP.NET simples que, ao ser executada, gera HTML que será processado no navegador. Isso fornecerá a base para sua primeira página "WPF/E".

Depois, você precisará importar os arquivos de implantação para o plug-in. Para isso, crie primeiro um diretório Bin em seu site clicando com o botão direito do mouse no projeto (http://localhost/MyFirstWPFE) em Solution Explorer e selecionando New Folder. Renomeie a nova pasta "Install" e adicione os seguintes arquivos do download do "WPF/E" neste novo diretório: install.msi, MozillaControl1712.exe, WPFE.dmg, xcpctrl.cab e xcpctrl.xpi. (Você pode arrastá-los do Windows Explorer e soltá-los diretamente no diretório Bin na janela do Solution Explorer no Visual Studio 2005.) Você também pode obter esses arquivos de qualquer projeto que estiver desenvolvendo usando o modelo do Visual Studio 2005, como na seção anterior.

Em seguida, você deve adicionar o arquivo aghost.js a seu site. Novamente, você pode fazer isso arrastando-o do Windows Explorer e soltando-o em sua solução. Finalmente, crie uma outra pasta na solução denominada XAML e copie nela o arquivo Popcan.xaml criado anteriormente.

Editando sua página da Web para processar conteúdo "WPF/E"

Agora, você saberá como editar sua página da Web para que ela manipule conteúdo "WPF/E" incorporado. Isso é muito fácil, pois envolve apenas a adição de uma referência JavaScript única e uma chamada a um objeto JavaScript definido em aghost.js. As bibliotecas JavaScript e os instaladores "WPF/E" farão o restante.

Primeiro, edite sua página para que ela se pareça com uma na Listagem 1. Aqui, o título deixou de ser "Untitled Page", uma referência JavaScript a aghost.js foi adicionada e um novo Div contendo a chamada ao objeto agHost foi adicionado ao corpo da página. Tudo isso foi realçado na Listagem 1.

Listagem 1. Código HTML default.aspx

<%@ 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>

A chamada JavaScript a "new AgHost" pode parecer um pouco obscura agora, mas não se preocupe: você a examinará posteriormente. Nas próximas seções, primeiro você examinará a experiência de executar esse aplicativo no Internet Explorer e no Mozilla Firefox. Depois disso, você examinará o objeto JavaScript que controla "WPF/E" e também fará alguma edição para introduzir animação em seu gráfico para lhe dar vida. Agora você está pronto para executar o aplicativo e o ASP.NET gerará a página com conteúdo "WPF/E". Pressione F5 no Visual Studio 2005 para iniciar o aplicativo. Na primeira vez em que você executar um aplicativo, o navegador detectará se o "WPF/E" está instalado. Se não estiver instalado, quando a página for inicializada, será exibida uma caixa de diálogo perguntando se você deseja instalar o módulo "WPF/E". O Apêndice I detalha a experiência da instalação para o Internet Explorer e o Mozilla Firefox executados no Windows.

Compreendendo o JavaScript

A seguir, há o código JavaScript que incorporou esse XAML na página usando "WPF/E".

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

Isso cria uma nova instância do plug-in "WPF/E", usando uma lista de parâmetros que podem ser usados para criá-lo. Esses parâmetros são (em ordem):

hostElementID: esse é o nome do elemento HTML em que o controle plug-in será hospedado. Portanto, se você tiver um <div> na página que contenha o plug-in, dê um nome ao <div> e use esse nome aqui.

controlID: este é o identificador do próprio plug-in.

height: esta é a altura desejada do controle em pixels.

width: esta é a largura desejada do controle em pixels.

backgroundColor: esta é a cor do plano de fundo desejada para o controle.

sourceElement: este é o nome do elemento da página que contém XAML para o controle. Esta é uma forma de configurar o XAML para o controle – onde XAML está na página – contido em um elemento <script>. Se utilizar essa abordagem, coloque o identificador do elemento <script> neste parâmetro e o controle o retirará dali.

sourceURL: este é o local de um arquivo XAML externo.

isWindowless: isto é booleano. Defina-o como True se desejar que o controle "WPF/E" não tenha janelas. Isso significa que em uma página HTML, o controle "WPF/E" será embutido no HTML, e, por exemplo, se você defini-lo para ser transparente, o HTML será exibido "atrás" dele. Se não for sem janelas (ou seja, se for definido como False), o conteúdo "WPF/E" ficará em uma área distinta da página e a marcação HTML fluirá ao redor.

maxFrameRate: este é um número que especifica a taxa máxima de quadros em que o "WPF/E" processará o conteúdo animado.

loadHandler: este é o nome de um elemento <script> na página para ser lançado quando o controle for carregado.

errorHandler: este é o nome de um elemento <script> na página para ser lançado quando ocorrer um erro no controle.

Quando você criar uma nova instância de um controle agHost usando esses parâmetros, uma chamada é feita ao agHost.js (portanto, você precisará de uma referência de script para este arquivo em seu HTML), que gera a marca <object> em que reside o controle. Portanto, no caso anterior, a seguinte marca <object> será gerada, se você estiver usando o 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>

Se preferir, você pode sempre usar esse código diretamente na página, mas usar o objeto JavaScript é muito mais detalhado e não sobrecarrega sua página HTML nos detalhes da implementação da marca <object>.

Editando o XAML para adicionar texto

Você pode editar o XAML diretamente no Visual Studio 2005 para adicionar algo. Neste exemplo, você adicionará um controle TextBlock ao XAML para conter um texto básico "Hello, World".

Abra o arquivo XAML no Visual Studio 2005. Se tiver o CTP "Orcas" instalado, conseguirá visualizar o XAML no editor "Cider", conforme mostra a Figura 11. Observe que você não conseguirá usar a caixa de ferramentas para adicionar controles ao "WPF/E" XAML, pois o designer "Cider" é apenas para aplicativos WPF. Caso contrário, você terá apenas o editor XML aberto.

Cc564904.fig11(pt-br,MSDN.10).gif
Figura 11. Usando o Visual Studio 2005 para editar o XAML (clique na imagem para ampliá-la)

Para adicionar um bloco de texto a seu XAML, role até a parte inferior e adicione o código a seguir, logo antes da marca </Canvas> de fechamento.

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

Você pode ver os efeitos disso na sua página na Figura 12.

Cc564904.fig12(pt-br,MSDN.10).gif
Figura 12. XAML contento bloco de texto

Editando o XAML para animação simples

O XAML especifica storyboards para animação. Neste exemplo, você adicionará animação simples à página "WPF/E" que faz com que o texto salte fora da parte superior e inferior da tela. Isso é feito adicionando-se um EventTrigger que é lançado quando Canvas é carregado. Esse Disparador de Eventos pode conter uma ação. A ação especificada é para começar um storyboard que contenha um "DoubleAnimation". Esse tipo de animação é utilizado para manipular um número dentro de um intervalo começando em "From" e terminando em "To". A animação pode ser definida para repetir eternamente e reverter automaticamente. Portanto, você pode especificar que para "saltar" o texto, você anima seu limite de 0 até uma quantidade especificada, revertendo a animação automaticamente quando tiver terminado e repetindo-a eternamente. O storyboard para alcançar esse resultado é o seguinte.

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

E a especificação Canvas completa contendo o texto e os disparadores para lançar a animação é a seguinte:

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

Agora, quando você vir seu site em ação, o texto estará "saltando" para cima e para baixo no lado direito.

Editando o XAML para interação simples

O "WPF/E" permite aos codificadores de JavaScript interagirem com o XAML. Neste exemplo, você verá como manipular um evento que ocorre quando o usuário interage com o arquivo XAML. O texto "saltando" do exemplo anterior será transformado um hiperlink que você usará para vincular uma outra página.

Para isso, você especifica o manipulador de eventos na declaração TextBlock. Você estará capturando um clique do mouse, por isso usará o manipulador de eventos MouseLeftButtonDown para especificar a função JavaScript que tratará do clique. A seguir, veja a aparência do bloco de texto, com uma declaração para um manipulador JavaScript denominado 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>

Agora, você pode manipular esse evento usando JavaScript na página de hospedagem (ou em uma biblioteca externa à qual a página faz referência), da seguinte maneira:

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

Agora, quando você executar a página, terá um hiperlink animado se movendo no qual você clicará para navegar para o site do MSDN Channel 9!

Adicionando mídia à mixagem

O "WPF/E" traz o melhor do Windows Media para o desenvolvedor Web. Você pode facilmente adicionar conteúdo de mídia aos aplicativos "WPF/E" usando a marca <MediaElement< no XAML, do seguinte modo:

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

Observe que você precisará ter um arquivo Butterfly.wmv em seu site raiz para que isso funcione. Esse arquivo WMV é um dos "Vídeos de Exemplo" que vêm com o Windows Vista e pode ser encontrado na sua pasta Documentos. Se você não o tem, substitua-o por qualquer arquivo WMV.

O MediaElement expõe métodos que podem ser usados para iniciar, parar, pausar ou buscar vídeo. Verifique a documentação e os exemplos do "WPF/E" para obter mais informações.

Você pode ver o aplicativo "WPF/E" com vídeo incorporado na Figura 13.

Cc564904.fig13(pt-br,MSDN.10).gif
Figura 13. "WPF/E" com vídeo incorporado

Conclusão

Neste white paper, você obteve uma visão geral de alto nível do "WPF/E" e como ele se adapta à pilha de desenvolvimento para a próxima geração de aplicativos Web. Você viu como o XAML é utilizado como elemento de fixação que une as especificações do designer com as ferramentas do desenvolvedor e a entrega ao usuário. Conheceu o Expression Graphic Designer e como ele pode ser usado para definir gráficos para página da Web, e como eles podem ser exportados para XAML "WPF/E". Depois importou esse XAML em um projeto da Web do Visual Studio 2005 e viu como configurá-lo para implantar o tempo de execução XAML no Internet Explorer e Firefox, para processar o XAML "WPF/E" do designer. Finalmente, você aprendeu como manipular o XAML para adicionar animação, interação e mídia.

O que você fez neste artigo foi apenas uma pequena amostra do que é possível com o "WPF/E". Há uma profusão de funcionalidades nesta tecnologia que pode ser usada hoje para começar a criar a próxima Web. Pode ser muito divertido; portanto, mãos à obra!

Apêndice I: A experiência da instalação

Para exibir páginas da Web com conteúdo "WPF/E", você precisa aprimorar o navegador com "WPF/E". Para isso, é possível usar um método de marca object, que enviará um prompt ao usuário para a instalação, ou pode detectar se o navegador está aprimorado com "WPF/E" e direcionar o usuário à página de download apropriada para obter o módulo:

Com nosso aplicativo, estamos usando uma marca object que envia um prompt ao usuário para instalar o módulo "WPF/E" apropriado se ele ainda não estiver instalado. Desse modo, na primeira vez em que você executar um aplicativo, o navegador detectará se o "WPF/E" está instalado ou não. Se não estiver, quando a página for inicializada, você obterá uma caixa de diálogo perguntado se deseja instalar o "WPF/E". As seções a seguir detalham a experiência do usuário quando segue esse fluxo de trabalho usando o Microsoft Internet Explorer e o Mozilla Firefox, respectivamente.

Executando a página no Internet Explorer

A caixa de diálogo Aviso de Segurança do Internet Explorer exibida na Figura 14 aparecerá. Se você selecionar Instalar, o plug-in será baixado e instalado conforme detalhado nas seções a seguir.

Cc564904.fig14(pt-br,MSDN.10).gif
Figura 14. Aviso de segurança do navegador para instalar o "WPF/E"

Selecione Instalar e o assistente de instalação será inicializado, conforme mostra a Figura 15.

Cc564904.fig15(pt-br,MSDN.10).gif
Figura 15. Iniciando a instalação do "WPF/E"

Leia o Contrato de Licença de Usuário Final cuidadosamente; e, se estiver de acordo, selecione Aceito. A instalação do WPFE será iniciada, conforme mostra a Figura 16.

Cc564904.fig16(pt-br,MSDN.10).gif
Figura 16. Instalando o "WPF/E"

Quando a instalação for concluída com êxito, você verá a caixa de diálogo Instalação Concluída, conforme mostra a Figura 17.

Cc564904.fig17(pt-br,MSDN.10).gif
Figura 17. Instalando o "WPF/E"

Pressione Concluir e estará pronto para começar. De fato, seu XAML será processado imediatamente, conforme mostra a Figura 18.

Cc564904.fig18(pt-br,MSDN.10).gif
Figura 18. Seu XAML, processado no navegador

Na próxima seção, você examinará a experiência de instalação do plug-in no navegador Mozilla Firefox.

Executando a página no Mozilla Firefox

Na seção anterior, você viu como o "WPF/E" aprimorou o Internet Explorer. Mas o "WPF/E" é uma tecnologia de vários navegadores e várias plataformas. Nesta seção, você verá como ele funciona no Mozilla Firefox sendo executado no Microsoft Windows Vista.

Se o "WPF/E" não estiver instalado, você verá algo semelhante à Figura 19 ao executar o Firefox.

Cc564904.fig19(pt-br,MSDN.10).gif
Figura 19. Executando o "WPF/E" no Firefox

Clique em Install Missing Plugins no lado superior direito da tela. O Firefox procurará plug-ins conhecidos que correspondam ao tipo "WPF/E" (application/xcp-plugin), mas não encontrará nenhum. Isso porque o "WPF/E" ainda não é um produto lançado e, como tal, o plug-in não foi publicado no Firefox Plugin Finder Service Directory (mas o será, assim que o produto for lançado). Veja a Figura 20.

Cc564904.fig20(pt-br,MSDN.10).gif
Figura 20. O Firefox Plugin Finder Service

Entretanto, você pode executar uma instalação manual da caixa de diálogo Plugin Finder Service. Isso fará com que você navegue até uma URL que contenha o arquivo MSI que pode ser inicializado para instalar o tempo de execução "WPF/E". A experiência da instalação a partir deste ponto será idêntica à do Internet Explorer, conforme descrito na seção anterior.

Quando tiver terminado, execute sua página; o XAML será processado pelo "WPF/E" no Mozilla Firefox, conforme mostra a Figura 21.

Cc564904.fig21(pt-br,MSDN.10).gif
Figura 21. Processando o XAML no Mozilla Firefox

`

Apêndice II: Configurando tipos de MIME de servidor

Configurando o IIS 6.x

É muito simples configurar o IIS para os tipos de MIME necessários à entrega dos aplicativos "WPF/E". Se você estiver obtendo uma página em branco em vez do XAML processado, talvez seja por não ter configurado o XAML para ser um tipo de XML reconhecível no IIS. Para isso, chame a caixa de diálogo Propriedades do seu site e selecione a guia Cabeçalhos HTTP, conforme mostra a Figura 22.

Cc564904.fig22(pt-br,MSDN.10).gif
Figura 22. Configuração do IIS 6.x

Na parte inferior desta caixa de diálogo há um botão que lhe permite especificar esses tipos. Observe que os arquivos de servidor somente IIS com extensões são registrados nesta lista; portanto, se .xaml não estiver registrado, você não conseguirá servir esses arquivos e não obterá o XAML em seu controle "WPF/E". A Figura 23 mostra como isso pode ser configurado. Use o botão Novo na caixa de diálogo para adicioná-lo, se necessário.

Cc564904.fig23(pt-br,MSDN.10).gif
Figura 23. Configurando o tipo do MIME no IIS

Observe que embora a Figura 23 não mostre, se você quiser que o aplicativo seja instalado no Macintosh, deverá usar application/octet-stream como o tipo de MIME para a extensão de arquivo .DMG.

Configurando o IIS 7.x

Para configurar o IIS 7.x no Windows Vista, primeiro clique com o botão direito do mouse em Computador, no menu Iniciar do Windows e selecione Gerenciar. Isso inicializará o console Gerenciamento do Computador, de onde você pode selecionar o IIS, conforme mostra a Figura 24.

Cc564904.fig24(pt-br,MSDN.10).gif
Figura 24. Console Gerenciamento do Computador no Windows Vista (clique na imagem para ampliá-la)

Role a lista de itens para baixo até ver o miniaplicativo Tipos de MIME. Inicie-o para configurar os tipos de MIME, conforme mostra a Figura 25.

Cc564904.fig25(pt-br,MSDN.10).gif
Figura 25. Configuração de tipos de MIME do IIS 7 (clique na imagem para ampliá-la)

Você pode usar o painel Ação para adicionar os tipos de MIME necessários.

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