Introdução ao Silverlight.

  • Artigo

Publicado em: 2 de maio de 2007

Por Laurence Moroney

Microsoft Corporation

Aplica-se ao:

Silverlight (anteriormente "WPF/E")

Microsoft Visual Studio 2005

Conteúdo

Nesta página

O que é "WPF/E"?
A evolução do desenvolvimento na 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
Conclusão
Apêndice I: A experiência da instalação
Figura 20. Processando o XAML no Mozilla Firefox

Resumo: este white paper fornece uma visão geral de alto nível do Silverlight, anteriormente conhecido como "WPF/E", e de como ele se adapta à pilha de desenvolvimento da próxima geração de aplicativos Web. O white paper ainda se refere ao Silverlight com o codinome "WPF/E". (28 páginas impressas)

 

O que é "WPF/E"?

"WPF/E" é o nome de uma nova tecnologia de apresentação na Web criada para ser executada em diversas plataformas. Ele permite a criação de experiências elaboradas, interativas e visualmente impressionantes que podem ser executadas em qualquer lugar; em navegadores ou em vários dispositivos e sistemas operacionais de desktop (como o Apple Macintosh). De acordo com o WPF (Windows Presentation Foundation), o XAML (eXtensible Application Markup Language) é a base do recurso de apresentação "WPF/E". O XAML é uma tecnologia de apresentação do Microsoft .NET Framework 3.0 (infra-estrutura de programação Windows).

Este white paper orientará você nos fundamentos do "WPF/E" e em como usar a pilha de ferramentas da Microsoft, incluindo o Microsoft Expression Graphic Designer, o Microsoft Visual Studio 2005 e o 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 na Web: migrando para Web.Next

Quando a Web moderna foi inventada por Tim Berners-Lee na CERN, a intenção era permitir o armazenamento e a vinculação de documentos estáticos em um sistema baseado em rede. A próxima etapa lógica era documentos "ativos" gerados no momento em que eram solicitados com informações específicas ao tempo ou ao 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.

A experiência do usuário revelou-se 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 em 2000 — tornou-se uma função importante para a técnica AJAX (Asynchronous JavaScript and XML). Utilizando o AJAX, os aplicativos Web proporcionaram uma resposta mais dinâmica à entrada de usuário; atualizando pequenas partes de uma página da Web sem exigir um recarregamento completo do conteúdo. Soluções inovadoras criadas em AJAX levaram os aplicativos Web um passo adiante para tornar a experiência do usuário mais parecida com a que ele tinha no cliente.

Tanto para desenvolvedores como para designers de aplicativos, o "WPF/E" é a próxima etapa para a criação de uma experiência de usuário potencialmente valiosa. Ele permite que os designers expressem sua criatividade e salvem seu trabalho em um formato que funcionará diretamente na Web. No passado, um designer projetaria um site e uma experiência usando ferramentas que forneciam uma saída elaborada, mas o desenvolvedor encontraria limitações na plataforma Web ao implementar o projeto. No modelo "WPF/E", os designers podem criar a experiência de usuário que desejarem usando o XAML. Um desenvolvedor pode então incorporar diretamente o documento XAML 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 alto nível.

Como o XAML é XML, ele se baseia em texto e fornece uma descrição que pode ser compreendida pelo firewall e de fácil inspeção do conteúdo elaborado. Embora outras tecnologias — como miniaplicativos Java, ActiveX e Flash — possam ser usadas para implantar conteúdo mais elaborado do que DHTML, CSS e JavaScript, todas enviam conteúdo binário ao navegador. O envio de conteúdo binário ao navegador não é apenas difícil de auditar para fins de segurança, mas também de atualizar. Quaisquer alterações requerem a reinstalação de todo o aplicativo, o que não é a experiência mais amigável e pode levar à estagnação nas páginas. Quando o "WPF/E" é usado para alterar o conteúdo, um novo arquivo XAML é gerado no lado do servidor. Na próxima vez que o usuário exibir a página, esse XAML será baixado e a experiência será atualizada sem qualquer reinstalação.

No núcleo do "WPF/E" está o módulo de aprimoramento de navegador que processa o XAML e desenha os elementos 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 chega de teoria! Vamos colocar a mão na massa e examinar nosso primeiro projeto "WPF/E".

Criando um aplicativo "WPF/E" simples

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

Cc580591.Bb404300_startingwithsilverlight01(pt-br,MSDN.10).gif

Bb404300_startingwithsilverlight01.gif

O Expression Graphic Designer é uma nova ferramenta da Microsoft que reúne o melhor das ferramentas de design gráfico com base em vetores e em pixels, permitindo aos designers explorarem novas possibilidades criativas. Ele permite que elementos gráficos de outros aplicativos e elementos de design de exportação sejam incorporados em uma variedade de ferramentas de software, incluindo XAML para WPF e "WPF/E".

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

Com o Expression Graphic Designer, abra o arquivo Popcan.xpr. Ele está localizado em Arquivos de Programas\Microsoft Expression\Design Beta 1\Samples. (O Popcan.xpr é o arquivo gráfico usado na Figura 1.)

Ao abrir o arquivo, você verá que — quando medido em pixels — ele é bem grande. Usando as réguas verticais e horizontais, é possível ver que ele tem 1280 por 1024 pixels. A Figura 2 mostra a régua horizontal demonstrando a largura da imagem.

Cc580591.Bb404300_startingwithsilverlight02(pt-br,MSDN.10).gif

Figura 2. Régua horizontal no Expression Graphic Designer

Isso também pode ser visto na caixa de diálogo Document Size (Tamanho do documento), localizada no menu File (Arquivo), como mostra a Figura 3.

Cc580591.Bb404300_startingwithsilverlight03(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 por 150 pixels. Para isso, digite 300 na caixa de texto Width (Largura) e 150 na caixa de texto Height (Altura) na caixa de diálogo Document Size, como mostra a Figura 4.

Cc580591.Bb404300_startingwithsilverlight04(pt-br,MSDN.10).gif

Figura 4. Configurando as dimensões para 300 por 150 pixels

Quando você clicar em OK nessa caixa de diálogo, a imagem será redimensionada. A lata agora está distorcida, parecendo pequena e bojuda, como mostra a Figura 5.

Cc580591.Bb404300_startingwithsilverlight05(pt-br,MSDN.10).gif

Figura 5. O documento redimensionado para 300 por 150 pixels

Como o elemento gráfico é baseado em vetor, você pode redimensioná-lo sem perder a fidelidade. Quando estiver na superfície do design, pressione CTRL+A para selecionar todos os elementos da imagem. Um contorno verde será exibido mostrando os elementos selecionados, como mostra a Figura 6.

Cc580591.Bb404300_StartingWithSilverlight06S(pt-br,MSDN.10).gif

Figura 6. Todos os elementos da imagem selecionados

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

Cc580591.Bb404300_startingwithsilverlight07(pt-br,MSDN.10).gif

Figura 7. Redimensionando a lata para obter uma proporção de melhor aspecto

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

No menu File, clique em Export (Exportar) e em XAML. Você também poderá digitar CTRL+ALT+X. A caixa de diálogo Common Save (Gravação comum) será exibida, permitindo que você especifique onde deseja exportar o arquivo XAML. Nomeie o arquivo como Popcan.xaml e selecione Save (Salvar). A caixa de diálogo Xaml Export (Exportação de Xaml) será exibida. Essa caixa de diálogo permite que você faça algumas outras especificações no arquivo de exportação, inclusive especificar a saída do "WPF/E", como mostra a Figura 8.

Cc580591.Bb404300_startingwithsilverlight08(pt-br,MSDN.10).gif

Figura 8. Exportando XAML "WPF/E"

O lado direito da tela tem um painel Preview (Visualização), no qual você pode inspecionar a imagem para confirmar se ela está correta antes de continuar. Do lado direito, as guias permitem que você alterne entre a inspeção da imagem e do código XAML que a representa. Se você é inexperiente em XAML, é uma boa idéia examinar a guia XAML Code (Código XAML), para poder correlacionar como o código se aplica à imagem.

As opções suspensas à direita permitem a especificação de atributos da exportação, incluindo a forma como as imagens rasterizadas devem ser tratadas, se devem ser vetorizadas ou apenas enviadas a um diretório específico. Por ora, não há problema manter os padrões, mas verifique se "WPF/E" está selecionado em Document Format (Formato do documento), 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 configurar 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 usar esse modelo no Visual Studio 2005, você precisará do service pack 1 do Visual Studio 2005.

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

O Visual Studio agora está pronto para criar projetos "WPF/E". Inicie o Visual Studio IDE. Em seguida, selecione o menu File e clique em New Project (Novo projeto). Selecione WPFE na caixa Project Types (Tipos de projetos) à esquerda. Em Templates (Modelos), à direita, você verá o modelo JavaScript Application (Aplicativo JavaScript) WPF/E que é usado para criar um novo aplicativo "WPF/E" (Figura 9).

Cc580591.Bb404300_startingwithsilverlight09(pt-br,MSDN.10).gif

Figura 9. Usando o modelo do Visual Studio

Clique em OK e será aberto 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 o JavaScript para configurar o controle "WPF/E" (veja detalhes mais adiante) e também como o XAML expõe um evento que pode ser interceptado e manipulado no 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 é interessante entender como o "WPF/E" funciona e é entregue. Você pode ver com que facilidade um site existente pode ser configurado 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 do Orcas". Você não precisa do "Orcas", mas, se o tiver instalado, será muito mais fácil digitar o código XAML, devido ao IntelliSense e à possibilidade de visualizar o XAML concluído no designer XAML "Cider".

Observação O 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, inicie o Visual Studio 2005 e crie um novo site usando a caixa de diálogo New Web Site (Novo site) em File, como mostra a Figura 10.

Cc580591.Bb404300_startingwithsilverlight10(pt-br,MSDN.10).gif

Figura 10. Criando um novo site no Visual Studio 2005

O uso da caixa de diálogo New Web Site 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".

Em seguida, você deve adicionar o arquivo aghost.js ao seu site. Novamente, você pode fazer isso arrastando-o do Windows Explorer e soltando-o em sua solução. É recomendável mantê-lo (e todos os outros arquivos JavaScript) em uma pasta separada.

Finalmente, crie uma nova 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"

Em seguida, você editará sua página da Web para manipular o conteúdo "WPF/E" incorporado. Isso é muito simples, 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 de forma que ela se assemelhe à Listagem 1: O título foi alterado de Untitled Page (Página sem título) para My first WPF/E Page! (Minha primeira página WPF/E); uma referência JavaScript a aghost.js foi adicionada ao cabeçalho; e um novo div contendo a chamada ao objeto agHost foi adicionado ao corpo da página.

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,0,8,5);
            </script>
        </div>
    </form>
</body>
</html>

Observação A chamada JavaScript a "new AgHost" pode parecer um pouco obscura, mas não se preocupe: Você examinará isso mais adiante.

Agora você está pronto para executar o aplicativo e fazer 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 que você executar um aplicativo, o navegador detectará se o "WPF/E" está instalado. Se não estiver instalado, quando a página for iniciada, 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.

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 o "WPF/E", além de adicionar animação à sua imagem.

Compreendendo o JavaScript

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

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

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

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

controlID

É o identificador do próprio plug-in.

height

É a altura desejada do controle em pixels.

width

É a largura desejada do controle em pixels.

backgroundColor

É a cor do plano de fundo desejada para o controle.

sourceElement

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

sourceURL

É a localização de um arquivo XAML externo.

isWindowless

Isso é 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ê o definir 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

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

loadHandler

É o nome de um elemento <script> na página a ser lançado quando o controle for carregado.

errorHandler

É o nome de um elemento <script> na página a ser lançado quando ocorrer um erro no controle.

Quando você cria uma nova instância de um controle agHost usando esses parâmetros, é feita uma chamada a 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 marca <object> seguinte 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ê poderá sempre usar esse código diretamente em sua página. Entretanto, o uso do 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 fazer acréscimos. 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 você tiver o CTP do "Orcas" instalado, poderá visualizar o XAML no editor "Cider", como mostra a Figura 11.

Observação Você não poderá usar a caixa de ferramentas para adicionar controles ao XAML "WPF/E", pois o designer "Cider" é somente para aplicativos WPF. Caso contrário, você terá apenas o editor XML aberto.

Cc580591.Bb404300_StartingWithSilverlight11S(pt-br,MSDN.10).gif

Figura 11. Usando o Visual Studio 2005 para editar o XAML

Para adicionar um bloco de texto ao 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.

Cc580591.Bb404300_startingwithsilverlight12(pt-br,MSDN.10).gif

Figura 12. XAML contento bloco de texto

Editando o XAML para animação simples

O XAML especifica storyboards de animação. Neste exemplo, você adicionará animação simples à página "WPF/E", que faz com que o texto salte nas partes superior e inferior da tela. Isso é habilitado adicionando-se um evento que é disparado quando a tela é carregada. Esse evento pode conter uma ação. A ação especificada para este exemplo começa com um storyboard que contém um DoubleAnimation. Esse tipo de animação é usado para manipular um intervalo de números começando com From e terminando com To. A animação pode ser definida para repetição infinita e auto-reversão automática, permitindo que você especifique que ela "salte" o texto. Você anima sua parte superior (Top) de 0 até um valor especificado, automaticamente revertendo a animação quando tiver terminado e repetindo-a infinitamente. 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 acionar 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 Silverlight 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 "saltitante" do exemplo anterior será transformado em um hiperlink que você usará para vincular uma outra página.

Para isso, você especificará 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. 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("https://channel9.msdn.com");
    }
</script>

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

Adicionando mídia

O "WPF/E" traz o melhor do Windows Media para o desenvolvedor Web. Você poderá adicionar conteúdo de mídia aos aplicativos "WPF/E" com facilidade usando a marca <MediaElement> no XAML, da seguinte forma:

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

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

A Figura 13 demonstra o exemplo acima do aplicativo "WPF/E" com vídeo incorporado.

Cc580591.Bb404300_startingwithsilverlight13(pt-br,MSDN.10).gif

Figura 13. "WPF/E" com vídeo incorporado

Observação Você precisará ter o arquivo Butterfly.wmv no seu site raiz para que o exemplo acima 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.

Conclusão

Neste white paper, você obteve uma visão geral de alto nível do "WPF/E" e de 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 união entre as especificações do designer e as ferramentas do desenvolvedor e a entrega ao usuário. Você conheceu o Expression Graphic Designer e como ele pode ser usado para definir elementos gráficos para sua página da Web, além de como esses elementos podem ser exportados para o XAML "WPF/E". Em seguida, importou esse XAML para 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 no Firefox, para processar o XAML "WPF/E" no designer. Finalmente, você examinou como pode 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 fazer com o "WPF/E". Há uma profusão de funcionalidades nessa tecnologia que você pode usar hoje para começar a criar a próxima Web. A diversão é garantida; 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". É possível usar um método de marca object, que enviará um prompt ao usuário para a instalação, ou detectar se o navegador está aprimorado com "WPF/E" e indicar ao usuário a página de download apropriada:

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 que um usuário executar um aplicativo, o navegador detectará se o "WPF/E" está instalado ou não. Se não estiver, quando o usuário iniciar a página, será exibida uma caixa de diálogo perguntando se você deseja instalá-lo. 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

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

    Cc580591.Bb404300_startingwithsilverlight14(pt-br,MSDN.10).gif

    Figura 14. Aviso de segurança do navegador para instalação do "WPF/E"

  2. Selecione Instalar, e o assistente de instalação será iniciado, como mostra a Figura 15.

    Cc580591.Bb404300_startingwithsilverlight15(pt-br,MSDN.10).gif

    Figura 15. Iniciando a instalação do "WPF/E"

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

    Cc580591.Bb404300_startingwithsilverlight16(pt-br,MSDN.10).gif

    Figura 16. Instalando o "WPF/E"

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

    Cc580591.Bb404300_startingwithsilverlight17(pt-br,MSDN.10).gif

    Figura 17. Instalando o "WPF/E"

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

  6. Selecione Instalar, e o assistente de instalação será iniciado, como mostra a Figura 15.

    Cc580591.Bb404300_startingwithsilverlight15(pt-br,MSDN.10).gif

    Figura 15. Iniciando a instalação do "WPF/E"

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

    Cc580591.Bb404300_startingwithsilverlight16(pt-br,MSDN.10).gif

    Figura 16. Instalando o "WPF/E"

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

    Cc580591.Bb404300_startingwithsilverlight17(pt-br,MSDN.10).gif

    Figura 17. Instalando o "WPF/E"

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

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

    Cc580591.Bb404300_startingwithsilverlight16(pt-br,MSDN.10).gif

    Figura 16. Instalando o "WPF/E"

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

    Cc580591.Bb404300_startingwithsilverlight17(pt-br,MSDN.10).gif

    Figura 17. Instalando o "WPF/E"

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

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

    Cc580591.Bb404300_startingwithsilverlight17(pt-br,MSDN.10).gif

    Figura 17. Instalando o "WPF/E"

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

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

  16. Cc580591.Bb404300_startingwithsilverlight18(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

  1. Se o "WPF/E" não estiver instalado, e você estiver usando o FireFox, será solicitado a baixar o arquivo ‘install.msi’ no site da Microsoft.

    Cc580591.Bb404300_startingwithsilverlight19(pt-br,MSDN.10).gif

    Figura 19. Baixando o Instalador do "WPF/E" no Firefox

  2. Após o download, você poderá executá-lo e seguir a mesma experiência de instalação que o usuário do IE.

  3. Quando terminar, execute sua página; o XAML será processado pelo "WPF/E" no Mozilla Firefox, como mostra a Figura 20.

    Cc580591.Bb404300_startingwithsilverlight20(pt-br,MSDN.10).gif

    Figura 20. Processando o XAML no Mozilla Firefox

Figura 20. Processando o XAML no Mozilla Firefox

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, como mostra a Figura 21.

Cc580591.Bb404300_startingwithsilverlight21(pt-br,MSDN.10).gif

Figura 21. Configuração do IIS 6.x

Na parte inferior desta caixa de diálogo há um botão que lhe permite especificar esses tipos.

Observação 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 22 mostra como isso deve ser configurado. Use o botão Novo na caixa de diálogo para adicioná-lo, se necessário.

Cc580591.Bb404300_startingwithsilverlight22(pt-br,MSDN.10).gif

Figura 22. Configurando o tipo de MIME no IIS

Observação 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, e selecione Gerenciar. Isso inicializará o console Gerenciamento do Computador, de onde você pode selecionar o IIS, conforme mostra a Figura 23.

Cc580591.Bb404300_StartingWithSilverlight23S(pt-br,MSDN.10).gif

Figura 23. Console Gerenciamento do Computador no Windows Vista

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

Cc580591.Bb404300_StartingWithSilverlight24S(pt-br,MSDN.10).gif

Figura 24. Configuração de tipos de MIME do IIS 7

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

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