O que é Silverlight

Silverlight é uma solução da Microsoft para a criação de Rich Internet Applications. Mas o que são exatamente essas RIAs? Bem, são aplicações web (que rodam no browser) que apresentam para o usuário conteúdo multimídia, mas principalmente, de forma interativa, rica e fácil de usar. São aplicações que unem o melhor dos mundos: Web (mobilidade) e Desktop (interface rica).
O Silverlight possui um framework bem abrangente para criação de RIAs, que incluem:

• Vídeo (inclusive de alta definição)
• Imagens
• Animações
• Gráficos vetoriais
• APIs de rede (Web-Services, REST, Sockets, …)
• e váriozs outros recursos

É importante saber que, para o Silverlight rodar na máquina cliente (ou seja, no browser do usuário), ele terá que instalar o plug-in do Silverlight, que é um download de aproximadamente 4MB. Esse plug-in é multi-browser e multi-plataforma. Funciona tanto no IE, Firefox (e na versão 4 já tem suporte oficial ao Chrome), e roda tanto em Windows quanto no Mac OS X.

O que é preciso para começar

Para começar a desenvolver suas aplicações em Silverlight, voce terá que baixar algumas coisas primeiro. São elas:

IDE: Voce provavelmente não vai querer escrever o seu programa no Notepad. Existem ferramentas que auxiliam (e muito!) no desenvolvimento de aplicações. E para Silverlight não é diferente. Eu recomendo o Visual Studio 2010 Beta 2. Voce pode baixá-lo aqui: http://www.microsoft.com/visualstudio/en-us/try/default.mspx#download

Obs: caso voce não queira, ou não possa, instalar produtos beta no seu computador, também há a opção de baixar a Trial do Visual Studio 2008 (no mesmo link acima) ou instalar o Visual Web Developer 2008 Express (gratuito) aqui: http://www.microsoft.com/express/download/

SDK: Voce também precisará baixar o SDK do Silverlight. Eu recomento baixar a Beta do Silverlight 4, que possui vários recursos novos (que irei abordar em posts futuros). Voce pode baixar o Silverlight 4 Beta Tools for Visual Studio 2010 aqui.

Obs: caso voce tenha optado pelo Visual Studio 2008, voce pode baixar o Silverlight 3 for Visual Studio 2008 SP1 aqui.

Expression Blend: apesar de não ser necessário, é altamente recomendado. Essa ferramenta irá ajudar muito na hora de criar as interfaces e animar os objetos nas suas aplicações. Se voce pretende usar o Visual Studio 2010, baixe o Expression Blend Preview for .NET 4 aqui. Se voce escolheu o Visual Studio 2008, baixe o Expression Blend 3 Trial aqui.

Começando

Quando voce terminar os downloads, abra o Visual Studio (qualquer seja a versão que voce tenha escolhido). Para esse tutorial, utilizarei o Visual Studio 2010 Beta 2 com o Silverlight 4.

Com o Visual Studio aberto, vá em File – New – Project.

Escolha a linguagem que voce deseja (eu tenho C# como minha preferência, mas voce também pode escolher Visual Basic), vá na guia Silverlight e escolha “Silverlight Application” e clique em OK.

O Visual Studio irá mostrar uma tela onde voce poderá escolher se deseja criar um projeto “ASP.NET Web Application” que irá hospedar a aplicação Silverlight. Se voce marcar a checkbox, ele irá criar um projeto ASP.NET com uma pasta chamada ClientBin que irá conter o arquivo .xap, que nada mais é do que um zip contendo os arquivos da aplicação Silverlight compilados. Se voce nao marcar, o Visual Studio irá criar automaticamente uma página HTML que irá referenciar esse .xap na página e mostrar a aplicação no Browser.

Indo ao Solution Explorer, voce verá a seguinte lista de arquivos:

XAML para Leigos

Arquivos .xaml (pronunciado zemel), em Silverlight (e também em Windows Presentation Foundation), são arquivos xml que declarativamente descrevem a interface da aplicação.

O arquivo App.xaml é geralmente utilizado para guardar recursos como estilos de controles, imagens e Brushes que são utilizados em toda a aplicação. O arquivo App.xaml.cs descreve funcionalidades que são utilizadas por toda a aplicação, eventos como Startup e Exit.

O arquivo MainPage.xaml é a tela principal da aplicação. Nesse arquivo, voce irá adicionar os controles que serão mostrados na tela, como textbox, botões, vídeos, imagens, etc.. Já o arquivo MainPage.xaml.cs é o code-behind, que irá tratar eventos como Click do botão e funcionalidades que irão controlar como a aplicação irá se comportar em tempo de execução.

Abra o arquivo MainPage.xaml e voce verá o seguinte conteúdo:

Snippet 1

Toda aplicação Silverlight possui um ou mais UserControls, que definem a interface que é mostrada ao usuário. Nos arquivos .xaml desses UserControls voce encontrará:

XML Namespaces: são esses xmlns que voce ve nas linhas 2-5. Esses namespaces são utilizados pelo interpretador para saber onde encontrar o conteúdo referenciado no arquivo XAML. Por exemplo:

Na linha 2, declaramos o namespace que referencia os controles padrões do Silverlight, como Button, TextBox, Grid, etc.. Por isso, na linha 9, não usamos nenhum prefixo para referenciar o controle Grid. Se tivessemos usado algum prefixo no namespace, teriamos que utilizar esse prefixo também na hora de declarar o controle. Por exemplo:

Snippet 2

Já o namespace delcarado na linha 3 do snippet 1, referencia algumas funcionalidades específicas do XAML, como a capacidade de declarar nomes para controles, para que eles possam ser referenciados no code-behind. Por exemplo, o Grid na linha 9, tem o nome “LayoutRoot”.

Adicionando Controles à Interface

Irei apresentar um exemplo bem simples, que irá ilustrar algumas funcionalidades do Silverlight interessantes. Iremos fazer uma pequena aplicação, onde o usuário irá escolher um site que ele deseja visitar, e nossa aplicação irá mostrar o link para a página escolhida.

Abra o arquivo MainPage.xaml e adicione o seguinte conteúdo:

Snippet 3

O que exatamente isso faz? Bem, explicando passo-a-passo:

Na primeira linha, temos um Grid com o nome “LayoutRoot” e com Branco de cor de fundo. O Grid é um Panel usado para mostrar conteúdo de forma tabular, com linhas e colunas. No nosso caso, só temos uma linha e uma coluna, que ocupam a tela inteira. Esses Panels são utilizados para mostrar, agrupar e organizar controles dentro de uma aplicação Silverlight. No nosso caso, o Grid possui um filho, um StackPanel.

O StackPanel é um outro tipo de Panel, mas esse, em vez de mostrar o conteúdo em linhas e colunas, funciona como uma pilha (daí o nome StackPanel). Ele vai “empilhando” os controles filhos um embaixo do outro. Também é possível mostrar os controles um do lado do outro, alterando-se a propriedade Orientation para Horizontal. O padrão é Vertical.

Dentro do StackPanel, temos 3 controles:

TextBlock: é um controle bem simples, que mostra apenas texto. É possível alterar sua formatação. Nesse exemplo, temos o texto em negrito (Bold), com a cor azul escuro (DarkBlue).

ComboBox: ComboBox tradicional. Mostra várias informações para o usuário escolher uma. No nosso exemplo, alteramos seu nome para siteCmbBox, sua largura para 100 pixels e seu alinhamento horizontal para “Left”, assim ele ficará alinhado no canto esquerdo em relação ao seu pai (StackPanel). Adicionamos também um EventHandler (siteCmbBox_SelectionChanged) que irá tratar o evento SelectionChanged (quando o usuário seleciona um item diferente na ComboBox).

     ComboBoxItem: temos várias ComboBoxItems, que são mostradas quando o usuário clica na ComboBox. Setamos seu conteúdo com o nome do site (Bing, MSDN, …) e temos a propriedade Tag guardando a URL do site.

HyperLinkButton: simplesmente um HyperLink, que irá abrir uma nova janela do browser quando o usuário selecionar o site que ele deseja visitar e clicar no link. Note que sua propriedade Opacity está com o valor 0 (zero), ou seja ele está invisível. Iremos adicionar uma animação que irá gradualmente aumentar esse valor para 1 (visível).

Adicionando funcionalidades

No arquivo MainPage.xaml, clique com o botão direito no nome do EventHandler (no nosso exemplo, siteCmbBox_SelectionChanged), e clique em “Navigate To Event Handler”:

No arquivo MainPage.xaml.cs, adicione o seguinte código:

Snnipet 4

Nesse snippet, a variável siteURL irá pegar o valor da propriedade Tag (nós guardamos a URL do site na propriedade Tag das ComboBoxItems lembra?) e aí setamos a propriedade NavigateUri do HyperLinkButton com o valor da URL. Também pegamos o valor da propriedade Content (que armazena o nome do site), e setamos o valor da propriedade Content do HyperLinkButton com o valor do nome do site.

Ok, mas se voce rodar a aplicação agora, voce verá que o link não aparece. Isso por que nós setamos a Opacity do HyperLinkButton para 0. Vamos então, criar uma animação bem simples, que irá gradualmente aumentar a Opacity de 0, para 1, dando um efeito bem bacana.

De volta no arquivo MainPage.xaml, adicione o seguinte trecho de XAML logo antes da declaração do Grid:

Snippet 5

Aqui nos criamos uma StoryBoard, que é uma espécie de repositório de animações. A Storyboard irá guardar várias animações, essas então, irão alterar as propriedades de algum elemento da interface. Nesse exemplo temos uma Storyboard com o nome OpacityAnimation.

Nessa Storyboard, possuimos apenas uma animação. Essa animação é do tipo DoubleAnimation, isso quer dizer que ela irá animar o valor de uma propriedade do tipo Double entre 2 valores (iniciais e finais) usando interpolação linear sobre um determinado tempo (http://msdn.microsoft.com/en-us/library/system.windows.media.animation.doubleanimation(VS.95).aspx). Resumindo, ela irá alterar os valores da propriedade (no nosso caso Opacity), calculando os valores medianos entre os valores iniciais e finais (0 e 1) baseado no tempo especificado (no nosso caso, 0.3 segundos).

Tudo que nós temos que fazer agora, é iniciar essa animação quando o usuário escolhe um valor na ComboBox. Volte ao MainPage.xaml.cs e altere-o conforme o snippet abaixo:

Snippet 6

Nesse snippet, chamamos o método Begin() da Storyboard, que inicia a animação.

Considerações finais

Bem pessoal, é isso. Espero que esse tutorial tenha ajudado os iniciantes, que talvez estivessem perdidos e não sabiam por onde começar seus estudos em Silverlight. Espero ter sido claro o suficiente e não ter deixado dúvidas. Mas, caso este não seja o caso, não exite em entrar em contato comigo ou deixar um comentário neste post. Tenha certeza que é com seu feedback é muito importante para garantir a qualidade do conteúdo deste site.

Caso queira baixar o código da aplicação escrita para este tutorial, acesse o link abaixo:

http://cid-1498c467c14dc20b.skydrive.live.com/self.aspx/BrSilverlight/Tutoriais/IntroducaoSilverlight.zip

Breno Ferreira