Artigos .NET Artigo .net Magazine 64 - Introdução ao Silverlight

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

Web

Introdução ao Silverlight

Instalação, criando projetos, trabalhando com layouts, estilos, modelos, gráficos, animações e Data Binding

 

Do que trata o artigo

Criação de aplicações ricas e inteligentes para Web, usando a nova versão 2 do Silverlight, ferramenta da Microsoft para este propósito. São abordados diversos temas, desde a instalação, criação de projetos simples, desenvolvimento com estilos, layout e modelos, criação de gráficos e animações e também vinculação de dados (Data Binding), onde podemos por exemplo ligar um controle a uma fonte de dados, como uma classe.


Para que serve

Conhecer o Silverlight e utilizá-lo para a criação de aplicações ricas, combinando a flexibilidade do desenvolvimento para a Web com a experiência do usuário obtida pelas aplicações desktop.


Em que situação o tema é útil

Criação de aplicações ricas multi-plataformas, que oferecem um ambiente muito semelhante a aplicações desktop, sem sacrificar a portabilidade e a facilidade de execução no browser.

 

Resumo do DevMan

O Silverlight 2.0 é uma plataforma que permite criar aplicações com uma interface bastante rica. Embora estejamos programando para a Web, não abrimos mão da experiência de usuário e da utilização de linguagens de programação já conhecidas. Programar para Silverlight é muito semelhante à programação para Desktop.

 

Em Outubro de 2008 foi lançada a versão final do Silverlight 2.0. Esta tecnologia permite criar aplicações com interface rica, que roda em diversas plataformas. Ela está disponível para Windows e Mac (nos browsers Internet Explorer, Firefox ou Safari), uma versão para mobile está em beta e, em breve, com o projeto Moonlight, poderemos executar programas Silverlight em Linux. No que ela difere de outras tecnologias para a Web? Na realidade, ela é muito diferente das tecnologias existentes para a Web. Usando um subconjunto da plataforma de desenvolvimento criada no .net Framework 3.0, o WPF, o Silverlight se parece mais com uma aplicação desktop que uma aplicação Web.

 

Nota do DevMan

O projeto Moonlight é um projeto open source desenvolvido pela Novell, com o apoio da Microsoft para usar o Silverlight em Linux. Veja mais em http://www.mono-project.com/Moonlight.

 

Isto acontece em diversas áreas do projeto: quando você está programando para Silverlight, está usando a linguagem de markup XAML, que é a mesma usada no WPF. Os controles Silverlight são muito semelhantes aos do WPF e a filosofia de programação é muito parecida. Para o usuário, a sua experiência no uso da aplicação é muito semelhante à de uma aplicação desktop.

 

Nota do DevMan

XAML (eXtensible Application Markup Language) é a linguagem de markup do Silverlight e do WPF. Baseada em XML, ela contém não apenas elementos de design, como também animações e permite a separação entre o código e o design.

 

Para programar, você pode utilizar sua linguagem de programação preferida: você pode criar programas em Silverlight usando não só o C# ou o VB.net. Você também pode usar IronPyton, IronRuby ou mesmo JScript gerenciado. Para aqueles que gostam de Delphi, podem usar o Delphi Prism, a ferramenta da CodeGear/Embarcadero para desenvolvimento de aplicações .net baseadas em linguagem Delphi. Isto quer dizer que você pode criar aplicações para a Web usando o Visual Studio, sem precisar misturar Javascript/Ajax/PHP ou outras linguagens de programação.

As aplicações são executadas inteiramente na máquina do cliente, usando para isso um plugin de aproximadamente 4MB, instalado na máquina do usuário. Este plugin contém um mini .net framework e permite rodar as aplicações Silverlight em múltiplas plataformas, sem necessidade de recompilação. Ao contrário de aplicações Asp.net, nada é executado no servidor. Se você deseja acesso a dados vindos de um banco de dados remoto, precisa criar um serviço que forneça estes dados para a aplicação. Para saber mais sobre isso, dê uma olhada em meu artigo na revista .net Magazine número 60.

Como já foi dito, o Silverlight possui um subconjunto de funções do WPF. Uma de suas principais características em comum é a independência entre o código e a interface da aplicação: a interface da aplicação é colocada num arquivo XML especial, chamado XAML (Extensible Application Markup Language), enquanto o código fica num arquivo separado, escrito em uma linguagem .net, como C#.

Além da independência entre o código e a interface, temos ainda outras vantagens no desenvolvimento:

  • Layouts dinâmicos – ao contrário de uma aplicação tradicional, onde os controles tinham uma posição fixa, que não se altera quando a aplicação é redimensionada ou a resolução se altera, as aplicações Silverlight têm controles de posicionamento dinâmico, permitindo que os objetos sejam reposicionados automaticamente quando a aplicação é redimensionada;
  • Estilos – da mesma maneira que podemos criar um estilo de parágrafo no Word e aplicá-lo a diversos parágrafos no texto, podemos criar estilos para os componentes e aplicá-los aos objetos da interface. Isto faz com que a interface ao usuário seja consistente, além de permitir a mudança do estilo, criando inclusive temas para a aplicação;
  • Templates (modelos) – os controles Silverlight não têm um visual definido previamente. Podemos alterar completamente a aparência dos controles, usando modelos, criando facilmente botões redondos ou listas que não têm a aparência tradicional;
  • Data binding (ligação de dados) – esta característica permite que propriedades de um controle estejam ligadas a fontes de dados externas, sejam elas arquivos, texto ou mesmo propriedades de outros objetos. Esta conexão é feita no markup, independente do código. Podemos conectar as propriedades de um objeto à interface da aplicação, atualizando as informações automaticamente sem código para isso;
  • Gráficos vetoriais com animações – como no WPF, o modelo gráfico do Silverlight é vetorial. Isso traz algumas vantagens como: independência de resolução, alta qualidade e menor tamanho dos arquivos, entre outros. Além dos gráficos usuais em duas dimensões, podemos também criar gráficos animados ou mesmo animar nossos controles quando algo ocorre (por exemplo, podemos aumentar o tamanho do botão quando o mouse está sobre ele).

Instalando o Silverlight

Antes de começar a desenvolver aplicativos , devemos instalar o plugin para o browser. O plugin do Silverlight 2.0 pode ser obtido em http://www.microsoft.com/silverlight/resources/install.aspx. Uma vez instalado o plugin, devemos instalar o SDK do Silverlight. Este SDK, juntamente com as ferramentas para o Visual Studio 2008 SP1 permitem criar aplicações Silverlight no Visual Studio e pode ser obtido em http://go.microsoft.com/fwlink/?LinkId=129043. Após finalizar a instalação do SDK, você pode ainda baixar ferramentas adicionais, que não afetam o desenvolvimento final:

·         Expression Blend 2.0 SP1 – a versão SP1 do Blend 2.0 permite criar o design das aplicações Silverlight de maneira visual . Embora não seja uma aplicação gratuita, é recomendada para quem deseja criar visuais avançados;

·         Deep Zoom Composer – permite criar aplicações Deep Zoom, onde podemos colocar imagens dentro de imagens, para dar a ideia de um zoom infinito;

 

Nota do Editor: Para mais informações sobre Deep Zoom, confira a matéria de Thomas Semple publicada na edição 61.

 

·         Silverlight toolkit – este kit de ferramentas contém novos controles e temas para o Silverlight 2.0. Dentre os controles contidos no toolkit, estão a TreeView Gráficos e o Expander e controles de layout, como o WrapPanel e o DockPanel. Estes componentes trazem mais flexibilidade ao desenvolvimento das aplicações Silverlight.

Os links para estas ferramentas estão disponíveis em http://silverlight.net/GetStarted/

Criando um programa Silverlight

Após instalarmos o plugin e o SDK do Silverlight, podemos criar nossa primeira aplicação. Abrimos o Visual Studio e usamos a opção de menu File/New, escolhendo Silverlight na lista de opções. Devemos ter uma tela como a da Figura 1.

 

Figura 1. Tela do Visual Studio para criar uma aplicação SilverLight

Selecionamos a opção Silverlight Application dando o nome e local onde a aplicação será criada. Clicando em OK, abre-se a tela da Figura 2 para selecionar o tipo de aplicação que queremos criar.

 

Figura 2. Tela para selecionar o tipo de aplicação Silverlight

Podemos criar um projeto Asp.net que hospedará o controle Silverlight. Esta opção é ideal quando você quer criar um controle Silverlight integrado a um projeto Asp.net. Isto é, o controle Silverlight criado irá “conversar” com o projeto Asp.net, tanto no que se refere a ampliar os recursos do Asp.net (como quando temos um projeto que acessa dados do servidor e queremos que parte da aplicação tenha uma interface rica), como acessar dados do servidor (neste caso, criamos um serviço Asp.net ou WCF no projeto Asp.net que fornece os dados ao controle Silverlight). Quando selecionamos esta opção, dois projetos são criados numa única solução: o projeto Asp.net e o controle Silverlight. A Figura 3 mostra os arquivos criados quando se seleciona esta opção. IntroSilverlight1 é o controle Silverlight e IntroSilverlight1.Web é o projeto Asp.net que hospeda o controle.

...

Quer ler esse conteúdo completo? Tenha acesso completo