Introdução

No Silverlight 4, foi incluído um controle bem interessante chamado WebBrowser. Esse controle é usado para apresentar conteúdo HTML. Note que esse controle funciona somente em aplicações rodando fora do browser. Isso por que não faria muito sentido usar este controle em uma aplicação rodando dentro do Browser, já que é possível interagir com o navegador (para saber mais, leia sobre HtmlPage e HtmlDocument).

Voce pode baixar o código da aplicação desenvolvida para este tutorial no link abaixo:

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

Configurando Out-of-Browser

Primeiramente, crie uma nova aplicação Silverlight no Visual Studio. Como o controle WebBrowser só funciona para aplicações Out-of-Browser, temos que configurar nossa aplicação para funcionar fora do navegador. Para fazer isso, clique com o botão direito no projeto Silverlight e vá em Propriedades.

Feito isso, na guia “Silverlight” marque a opção “Enable running application out of the browser”.

 

Agora, temos que ter certeza que a aplicação irá rodar fora do browser. Para fazermos isso, temos que ter duas “telas” distintas. Uma para quando a aplicação está rodando no browser, que irá pedir para o usuário instala-la em sua máquina, e outra, que irá ter o controle WebBrowser, quando a aplicação estiver fora do browser.

Clique com o botão direito no projeto Silverlight, vá em “Add” > “New Item” e escolha “Silverlight Child Window”.

Dê o nome de InstalaçãoWindow e clique em “Add”. Essa janela irá pedir ao usuário que instale a aplicação em sua máquina.

Adicione o seguinte XAML ao arquivo InstalacaoWindow.xaml:

Snippet 1

Nesse XAML, criamos um um botão (OKButton) que irá verificar se a aplicação está instalada na máquina do usuário. Caso não esteja, irá instala-la.

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

 

Snippet 2

Na linha 3, checamos o InstallState da aplicação, que nos diz se a aplicação está ou não instalada na máquina do usuário. Caso, não esteja (NotInstalled), chamamos o método Install(), que irá mostrar ao usuário o prompt de instalação.

Clique em OK. Agora o runtime do Silverlight irá instalar a aplicação na máquina do usuário, criando atalhos (caso o usuário marque as CheckBoxes) no Menu Iniciar e na Área de Trabalho.

Agora vamos configurar o Visual Studio para executar a aplicação instalada, e não a página que hospeda o controle Silverlight.

Vá nas propriedades do projeto Silverlight, na guia Debug, em “Start Action”, marque a opção “Instaled out-of-browser application”.

Em seguida, clique com o botão direito no projeto Silverlight, e marque a opção “Set as StartUp Project”.

WebBrowser Control

Iremos agora criar o controle que irá mostrar o WebBrowser. Adicione um novo UserControl a solução chamado BrowserControl.

No arquivo BrowserControl.xaml, adicione o seguinte XAML:

Snippet 3

Neste snippet, criamos uma TextBox que onde o usuário irá digitar a URL da página que ele deseja visitar, um botão que irá navegar para a página desejada.

Na linha 21, criamos o controle WebBrowser, demos a ele um nome (browser) e setamos sua largura, altura e sua posição no Grid.

No arquivo BrowserControl.xaml.cs, edite o EventHandler navBtn_Click, adicionando o seguinte código:

Snippet 4

O controle WebBrowser possui 2 métodos que podem ser usados para mostrar o conteúdo HTML.

• Navigate(URI source): esse método recebe uma URI que irá apontar para o site que deseja-se mostrar no WebBrowser. Entretanto, há um porém. Devido a restrições de segurança, o WebBrowser só renderiza páginas no mesmo domínio da sua aplicação. Uma maneira de contornar essa situação é usando o método abaixo.
• NavigateToString(String text): esse método recebe como parâmetro uma string com qualquer conteúdo HTML e o WebBrowser control irá renderizá-lo. Então podemos usar este método para mostrar páginas que sejam de outro domínio que não seja o nosso. Basta criamos um <iframe> e setarmos o atributo src para a página que desejamos abrir.

Na linha 4, verificamos se o usuário está tentando abrir uma página, verificando se o enderço começa com “http://”. Se sim, criamos o <iframe> e setamos o atributo src com o enderço digitado pelo usuário.

O usuário também pode digitar qualquer conteúdo HTML na TextBox que o WebBrowser irá interpretar e  rederizar na tela.

 

Aperte F5, e execute a aplicação.

Na imagem abaixo, vemos o WebBrowser mostrando a página do Bing.

E na imagem abaixo, vemos o WebBrowser mostrando um conteúdo HTML referente a um vídeo do YouTube.

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