>
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
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
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
100% à 420px;
35% à Xpx;
...