Introdução ao Silverlight - Parte 1

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"

Por | @oficinadanet Programação

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.

Introdução ao Silverlight - Parte 1
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 ProgramasMicrosoft ExpressionDesign Beta 1Samples. (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.

Introdução ao Silverlight - Parte 1
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.

Introdução ao Silverlight - Parte 1
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.

Introdução ao Silverlight - Parte 1
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.

Introdução ao Silverlight - Parte 1
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.

Introdução ao Silverlight - Parte 1
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.

Introdução ao Silverlight - Parte 1
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.

Introdução ao Silverlight - Parte 1
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.

Fonte: MSDN

Mais sobre: silverlight
Share Tweet
Recomendado
Comentários
Carregar comentários
Destaquesver tudo