INFOWD: Tutorial - Introdução ao Silverlight 2 (Olá Mundo)

Últimamente muito se tem falado sobre Silverlight, a aposta da Microsoft para concorrer com o flash da Macromedia. A primeira versão do Silverlight baseava-se muito na utilização de javascript e era muito complexo implementar aplicações que fossem relativamente complicadas. A versão 2 do Silverlight veio alterar todo este paradigma, pois foram aproveitadas as capacidades do .NET para desenvolver as aplicações Silverlight 2. Agora podemos utilizar C# para desenvolver Silverlight, e dispomos de um conjunto alargados de controlos que nos facilitam em muito o desenvolvimento. Neste tutorial vou explicar como criar uma aplicação muito simples em Silverlight 2, para se ambientarem a esta nova plataforma.

O que é o Silverlight 2.0

O Silverlight 2.0 é uma plataforma que nos permite desenvolver aplicações ricas para a internet (RIAS - Rich Internet Applications). Tal como o flash, também é necessário instalar um plugin no browser para correr aplicações Silverlight. Este pequeno plugin, contém uma versão reduzida da plataforma .NET.

As capacidades do Silverlight 2.0 são enormes e vão desde reproduzir vídeos de alta qualidade até à construção de aplicações complexas, como por exemplo uma aplicação de análise do mercado bolsista. As aplicações Silverlight usam uma linguagem denominada de XAML. É com esta linguagem que nós vamos definir a interface da nossa aplicação Silverlight. A lógica da aplicação (code-behind) pode ser construída utilizando C# ou VB.

Tutorial - Olá Silverlight 2.0

Agora que já temos uma ideia do que é o Silverlight 2.0, vamos prosseguir com o tutorial, onde vamos criar uma aplicação do tipo "Olá Mundo!".

Antes de começarmos com o tutorial propriamente dito, necessitamos de ter o nosso ambiente de desenvolvimento preparado para desenvolvermos aplicações Silverlight 2.0. Para isso existem alguns pré-requisitos:

Para desenvolvermos aplicações Silverlight 2.0 necessitamos de um computador com o Visual Studio 2008 e as Silverlight Tools instaladas. Podem consultar este artigo para saberem como instalar as Silverlight Tools:

http://www.istomesmo.com/2008/03/19/tutorial-instalar-as-silverlight-tools-beta-1-for-visual-studio-2008/

O Microsoft Expression Blend e o Deep Zoom Composer são componentes opcionais, não são necessários para o âmbito deste tutorial, mas poderão investigá-los se quiserem construir aplicações mais complexas.

Assumindo que já têm todos os componentes instalados vamos iniciar o tutorial, abrindo o Visual Studio 2008 e criando um novo projecto do tipo Silverlight.

Quando criamos um novo projecto do tipo Silverlight 2.0, somos questionados se desejamos criar um projecto web para alojar/testar o projecto Silverligth. Para este tutorial vamos dizer que sim, e que queremos um projecto web do tipo "Web Application".

Como podemos ver pela imagem seguinte, a nossa solução é constituída por uma aplicação web, onde será alojado o nosso projecto Silverlight, e pelo projecto Silverlight propriamente dito. O projecto Silverlight é consituído por duas página XAML, a App.xaml e a Page.xaml.

Para este tutorial vamos apenas focar-nos na Page.xaml, que é a que é aberta por omissão na área de trabalho quando criamos a solução.

Na parte de baixo do Visual Studio, temos o código XAML da nossa página Silverlight, que inicialmente é constituída por um usercontrol e um layout do tipo Grid. Dentro da Grid vamos criar um botão adicionando o código seguinte:

O atributo x:Name indica o nome do botão, o Width indica a largura, o Height a altura e o Content é o texto que aparece no botão.

Neste momento temos o nosso botão criado. Se quiserem podem correr a solução, e já vão conseguir ver o botão. Já temos o botão, agora vamos adicionar o evento click, para alterar o seu texto quando lhe clicarmos. Para isso vamos adicionar mais um atributo ao botão:

Quando adicionamos o atributo click, o Visual Studio 2008 dá-nos logo a opção de associarmos um Event Handler ao evento Click, bastando para isso clicar na tecla Enter. Quando clicamos no Enter, o Visual Studio cria o Event Handler no codeBehind da Page.xaml.

Vamos então passar para o codeBehind da página, clicando com o botão direito do rato sobre a área de design e escolhendo a opção "View Code". No codeBehind, já temos a função btnHello_Click.

Na função do click do botão, vamos criar a lógica para alterar o texto do mesmo, cada vez que este é clicado. adicionando o código seguinte:

Se corrermos a aplicação, quando clicamos no botão, o seu texto vai alternar entre "Clica aqui" e "Olá Silverlight 2!".

Construímos a nossa primeira aplicação Silverlight de forma fácil e rápida, incluindo a utilização de eventos, com toda a comodidade da plataforma .NET C#.