Esse artigo faz parte da revista .NET Magazine edição 51. Clique aqui para ler todos os artigos desta edição

>

Novidades

Silverlight

Criando gráficos e exibindo vídeos

 

 

O Silverlight é a uma das mais recentes tecnologias da Microsoft e permite desenvolver aplicações com alta interatividade com o usuário. Funciona com um plug-in para diversos navegadores, o qual deverá ser instalado na máquina cliente, de modo similar ao Macromedia Flash. Está disponível desde o lançamento do Framework 3.0, e atualmente já temos disponível o Silverlight 2 Beta 1, que vale a pena conferir. Este artigo foi desenvolvido utilizando a versão estável 1.0.

Neste artigo veremos como desenvolver gráficos em Silverlight, em formato de barra e depois em formato de pizza. Em seguida, criaremos um player de vídeos “.wmv” e áudio “.mp3” e veremos como interagir estes gráficos com o nosso player. O Visual Studio 2008 possui recursos muito interessantes para desenvolvimento com o Silverlight. A Microsoft também disponibiliza o Expression Studio 2 Beta (http://www.microsoft.

com/expression/), o qual possui uma ferramenta amigável para criação de sistemas em Silverlight, como o Expression Blend. Este último contém, entre outras funcionalidades, players de vídeos com skins pré-definidos, botões, animações em 3D, perspectivas e muito mais para fazer a sua aplicação com uma incrível interface com o usuário.

Tudo que será apresentado neste artigo, pode ser desenvolvido utilizando as ferramentas citadas anteriormente. Antes de usarmos qualquer ferramenta de apoio, acho importante entendermos o que está por trás dos bastidores, assim podemos ir além do que as ferramentas nos permitem fazer. Vamos então sujar um pouco nossas mãos de código.

         Para facilitar o desenvolvimento, instale o SKD mais atual através do site http://silverlight.net

/GetStarted/ bem como o plug-in em seu navegador.

Um pouco de teoria antes de começarmos

Assim como o Macromedia Flash, o Silverlight permite trabalhar com imagens vetoriais, ou seja, imagens que possuem pontos de referências e equações matemáticas para ligarem estes pontos. Este recurso nos será muito útil quando trabalharmos com gráficos.

         O Silverlight trabalha com arquivos XAML (eXtensible Application Markup Language), uma linguagem da MS derivada do XML, utilizada para criar interfaces com o usuário. Quem já desenvolve aplicações ASP.Net não terá problemas em utilizar o XAML do Silverlight. O XAML é similar ao OpenLaszlo do mundo Java e ao MXML do mundo Macromedia.

 

Nota do DevMan

OpenLaszlo: é uma plataforma para criação de aplicações ricas para web. É uma implementação da tecnologia Laszlo, e é o produto utilizado no desenvolvimento de aplicações. Tendo como objetivo facilitar a criação de interfaces mais interativas com o usuário, utilizando-se da linguagem declarativa LZX mesclado ao XML e JavaScript. Para maiores informações visite http://www.openlaszlo.org/

 

MXML: (Macromedia Extentible Mark-up Language) é uma linguagem muito parecida com o HTML, mas com a sintaxe do XML onde os elementos da interface são compilados no servidor e é exibido um arquivo SWF (binário) no browser do usuário.

 

 

         A partir do Framework 2.0, a Microsoft introduziu o conceito de Code-behind, ou seja, a lógica fica separada da apresentação. Em asp.net temos o arquivo de apresentação default.aspx  e o arquivo dafault.aspx.cs para C# ou default.aspx.vb em Visual Basic.

Com o Silverlight é possível seguir o mesmo conceito, por exemplo, arquivos .html, podem ter um .html.JS com o código Javascript que contem a lógica da página. Com o XAML não é diferente, podemos ter, por exemplo, um arquivo “vídeo.xaml”, contendo todos os elementos de interface, e o arquivo “vídeo.xaml.js” com o Javascript que fará a interface ganhar vida.

O Silverlight nos permite trabalhar com formas geométricas, como o retângulo, polígonos, elipse entre outros. Podemos definir altura, largura, cor de fundo, caminho de pontos e muito mais.    

 

Mãos à obra

Agora que temos uma base do mundo Silverlight e que instalamos o SDK e o plug-in do Silverlight, abra o Visual Studio. Clique para criar um novo projeto (Figura 1), e selecione o projeto “Silverlight Javascript”, criado na instalação do SDK do Silverlight (Figura 2). Serão criados diversos arquivos, apague todos menos o “Silverlight.js”, este arquivo será necessário para iniciar o plug-in do Silverlight no navegador (Figura 3).

 

Figura 1. Crie um novo projeto

 

Figura 2. Selecione a opção instalada pelo SDK do Silverlight – “Silverlight Javascript”

 

Figura 3. O Projeto é iniciado com diversos arquivos, apague todos e deixe apenas o “Silverlight.js”

 

Caso você não esteja utilizando o Visual Studio, este arquivo “silverlight.js” é padrão do Silverlight, e pode ser baixado facilmente na internet.

 

Gráficos com Silverlight

  Em HTML, quando queremos fazer um gráfico de barra, podemos utilizar uma imagem de 1 px de largura por cerca de 30 px de altura, por exemplo, e na propriedade “width” da tag “img” podemos variar o tamanho da imagem. Assim podemos construir sem muito esforço um gráfico em barra. Supondo que nosso 100% equivalha a 100 px, se quisermos representar 35%, basta definir a largura (width) da imagem com 35px. Se quisermos usar outra escala, basta aplicarmos uma “regra de 3”.

  100%   à 420px;

  35%     à  Xpx;

...

Quer ler esse conteúdo completo? Tenha acesso completo