BrSilverlight

Tutoriais e dicas sobre Silverlight

Sobre o autor

Sou Breno Ferreira, desenvolvedor em um Centro de Tecnologia em Petrópolis especializado em Silverlight. Criei este site com o objetivo de postar dicas, tutoriais e artigos sobre Silverlight, WPF e tecnologias Microsoft.

 

Novidades do Silverlight 4 – Parte IV: o Pattern MVVM (Model-View-ViewModel)

Introdução

Nos posts anteriores, iniciei uma série de tutoriais que cobre algumas das novas features do Silverlight 4, e escrevi especificamente sobre Elevated Trust em aplicações Out-of-Browser, como ler o feed RSS dos webcasts no MSDN, e utilizar a interface COM do Outlook para adicionar um item ao calendário.

Hoje, irei explicar como criar a UI da aplicação e utilizar o Pattern MVVM para fazer a separação do XAML (interface) e do código utilizando Bindings e a nova Interface do Silverlight 4, ICommand.

Voce pode baixar o código deste tutorial no link abaixo:

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

Como funciona o MVVM?

MVVM é um Pattern Arquitetural que tem como objetivo promover uma separação de responsabilidades. A camada de apresentação (View) fica responsável somente por receber os dados (Model), e apresentá-los ao usuário, enquanto há uma camada intermediária (ViewModel) que fica responsável por toda a lógica de negócio, e expor os dados para a respectiva View. Resumindo:

  • Model: é a estrutura de dados que expõe as informações sobre o que desejamos apresentar ao usuário
  • View: define a interface de usuário (XAML)
  • ViewModel: trata as ações do usuário, como por exemplo o click de um botão, e expõe os Models a View

Quando se aplica o Pattern a aplicações Silverlight ou WPF, a ligação dos Models é feita com a utilização de DataBinding e os eventos podem ser tratados utilizando-se Commands ou a API de Triggers do Expression Blend.

Analise a figura abaixo para visualizar melhor os tres elementos do Pattern:

image

Figura 1

 

MVVM na prática

Até aqui, já criamos algumas classes que possuem algumas funcionalidades como:

RssReader: lê os feeds RSS dos webcasts MSDN;

OutlookApplication: chama a API COM do Outlook para criar um item no calendário.

Essas classes farão parte da nossa lógica de negócio.

Agora, iremos criar os tres elementos que compoem o Pattern MVVM.

Model

Nós já criamos o Model da nossa aplicação na parte II. O Model da nossa aplicação será a classe FeedItemModel. Ela irá guardar as informações lidas do XML do RSS dos webcasts. Abaixo, o código da classe FeedItemModel:

Code Snippet
  1. public class FeedItemModel
  2. {
  3.     public String Title { get; set; }
  4.     public Uri Link { get; set; }
  5.     public DateTime Date { get; set; }
  6.     public Int32 Duration { get; set; }
  7.     public String Creator { get; set; }
  8.     public String Description { get; set; }
  9. }

Snippet 1

ViewModel

Code Snippet
  1. public class FeedViewModel : INotifyPropertyChanged
  2. {
  3.     public FeedViewModel ( )
  4.     {
  5.         this.ReadRssFeeds ( );
  6.     }
  7.  
  8.     public ObservableCollection<FeedItemModel> Feeds { get; private set; }
  9.     public ICommand OutlookApplicationCommand { get { return new OutlookCommand ( ); } }
  10.  
  11.     private void ReadRssFeeds ( )
  12.     {
  13.         RssReader reader = new RssReader ( );
  14.         reader.RssFeedReadCompleted += new EventHandler<RssFeedReadCompletedEventArgs> ( reader_RssFeedReadCompleted );
  15.         reader.ReadRssFeedAsync ( new Uri ( "http://www.msdnbrasil.com.br/Microsoft.NewRSS/RssItems.aspx?segment=Arquiteto%20de%20Solu%C3%A7%C3%B5es--and--Desenvolvedores&type=WebCasts%20Online&futureitems=S&auth=747dab31-42e3-69f3-7765-618e61722d9a" ) );
  16.     }
  17.  
  18.     void reader_RssFeedReadCompleted ( object sender, RssFeedReadCompletedEventArgs e )
  19.     {
  20.         if ( this.Feeds == null )
  21.             this.Feeds = new ObservableCollection<FeedItemModel> ( );
  22.  
  23.         Array.ForEach ( e.Feeds.ToArray ( ), ( feed ) => this.Feeds.Add ( feed ) );
  24.         OnPropertyChanged ( "Feeds" );
  25.     }
  26.  
  27.     #region INotifyPropertyChanged Members
  28.  
  29.     public event PropertyChangedEventHandler PropertyChanged;
  30.  
  31.     private void OnPropertyChanged ( string propertyName )
  32.     {
  33.         if ( PropertyChanged != null )
  34.         {
  35.             PropertyChanged ( this, new PropertyChangedEventArgs ( propertyName ) );
  36.         }
  37.     }
  38.  
  39.     #endregion

Snippet 2

Como um dos objetivos do ViewModel é expor os dados do Model para a View, temos a propriedade Feeds, que é uma ObservableCollection de FeedItemModels.

No construtor da classe, chamamos o método ReadRssFeeds, que por sua vez irá utilizar um objeto do tipo RssReader, que irá ler os feeds RSS. Quando a leitura dos feeds RSS terminar, o método reader_RssFeedReadCompleted será chamado, onde iremos adicionar todos os itens lidos a nossa coleção de FeeditemModels (Feeds).

Importante!

Nosso ViewModel implementa a Interface INotifyPropertyChanged. Temos implementar essa interface para notificar a View que nossa propriedade Feeds sofreu modificações (quando adicionamos os feeds a ela). Assim a engine de Databinding poderá atualizar os valores dos controles na nossa View. Internamente, a engine de Databinding irá associar o evento PropertyChanged, que irá atualizar os controles que fazem Binding com as propriedades dos objetos da classe FeedItemModel. Experimente comentar a parte onde chamamos o método OnPropertyChanged (linha 24) e voce verá que não irá aparecer nada na tela.

No nosso ViewModel, temos uma propriedade chamada OutlookApplicationCommand do tipo ICommand. Commands são uma nova feature do Silverlight 4 (que já existia em WPF), que facilita a implementação do Pattern MVVM.

Crie uma classe chamada OutlookCommand e adicione o código abaixo:

Code Snippet
  1. public class OutlookCommand : ICommand
  2. {
  3.     #region ICommand Members
  4.  
  5.     public event EventHandler CanExecuteChanged;
  6.  
  7.     public bool CanExecute ( object parameter )
  8.     {
  9.         return OutlookApplication.IsAvailable;
  10.     }
  11.  
  12.     public void Execute ( object parameter )
  13.     {
  14.         FeedItemModel model;
  15.         if(parameter is FeedItemModel)
  16.             model = parameter as FeedItemModel;
  17.         else
  18.             throw new ArgumentException("Invalid argument", "parameter");
  19.  
  20.         try
  21.         {
  22.             OutlookApplication.CreateCalendarItem ( model );
  23.             MessageBox.Show("Webcast added to your Outlook Calendar");
  24.         }
  25.         catch ( Exception )
  26.         {
  27.             MessageBox.Show ( "An error ocurred when trying to open Outlook resources.\nMake sure you have Microsoft Outlook for Windows installed and properly configured." );
  28.         }
  29.     }
  30.  
  31.     #endregion
  32. }

Snippet 3

A classe OutlookCommand implementa a interface ICommand, que possui os seguintes métodos:

CanExecute: esse método é responsável por dizer se o Command pode ou não ser executado. Assim, quando associarmos esse Command com um botão na nossa View, caso este método retorne false, o botão ficará desabilitado. No nosso caso, retornamos o valor da propriedade “IsAvailable” da classe OutlookApplication (ver a Parte III desta série de tutoriais).

Execute: esse método executa a ação (neste caso, inserir o item no calendário do Outlook com as informações do Webcast). Note que esse método, assim como o método CanExecute, recebe um parâmetro. Veremos abaixo como passar esse parâmetro pelo XAML. Esse parâmetro deve ser do tipo do nosso Model (FeedItemModel). Caso não seja, lançamos uma Exception.

View

Nossa View será representada pelo UserControl MainPage, que terá o seguinte XAML:

Code Snippet
  1. <UserControl x:Class="MsdnWebcastsCalendar.MainPage"
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  5.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  6.     xmlns:vm="clr-namespace:MsdnWebcastsCalendar.ViewModel"
  7.     mc:Ignorable="d"
  8.     Width="800" Height="600">
  9.  
  10.     <UserControl.Resources>
  11.         <vm:FeedViewModel x:Key="FeedViewModelDataContext" />
  12.         <Style x:Key="ListBoxItemTemplate" TargetType="ListBox">
  13.             <Setter Property="ItemTemplate">
  14.                 <Setter.Value>
  15.                     <DataTemplate>
  16.                         <StackPanel Width="{Binding ElementName=LayoutRoot, Path=ActualWidth}">
  17.                             <StackPanel.Background>
  18.                                 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
  19.                                     <GradientStop Color="#FF36295E" Offset="0"/>
  20.                                     <GradientStop Color="#FFA2DCF3" Offset="1"/>
  21.                                 </LinearGradientBrush>
  22.                             </StackPanel.Background>
  23.                             <StackPanel Orientation="Horizontal">
  24.                                 <Button Command="{Binding ElementName=LayoutRoot, Path=DataContext.OutlookApplicationCommand}"
  25.                                         CommandParameter="{Binding}"
  26.                                         ToolTipService.ToolTip="Adicionar webcast ao calendário do Outlook">
  27.                                     <Image Source="/MsdnWebcastsCalendar;component/Microsoft_Outlook.png" />
  28.                                 </Button>
  29.                                 <HyperlinkButton Margin="0, 11, 0, 0" Content="{Binding Path=Title}" NavigateUri="{Binding Path=Link}" />
  30.                             </StackPanel>
  31.                             <TextBox Text="{Binding Path=Description}" IsReadOnly="True" TextWrapping="Wrap" />
  32.                             <StackPanel Orientation="Horizontal">
  33.                                 <TextBlock Text="Data: " FontStyle="Italic" />
  34.                                 <TextBlock Text="{Binding Path=Date}" FontStyle="Italic" />
  35.                                 <TextBlock Text="-" />
  36.                                 <TextBlock Text="{Binding Path=Creator}" FontWeight="Bold" />
  37.                             </StackPanel>
  38.                         </StackPanel>
  39.                     </DataTemplate>
  40.                 </Setter.Value>
  41.             </Setter>
  42.         </Style>
  43.     </UserControl.Resources>
  44.  
  45.     <Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource FeedViewModelDataContext}}">
  46.         <ListBox x:Name="feedsListBox" Style="{StaticResource ListBoxItemTemplate}" ItemsSource="{Binding Path=Feeds}" />
  47.     </Grid>
  48. </UserControl>

Snippet 4

Aqui, nós temos uma ListBox que irá mostrar as informações dos feeds RSS dos Webcasts MSDN. Para explicar os detalhes do XAML acima, decidi separar em alguns tópicos.

Referenciando o ViewModel na View

Para unir o ViewModel a View da aplicação, iremos criar um objeto do tipo do nosso ViewModel (FeedViewModel) no XAML. Isso pode ser feito adicionando o XML Namespace com referencia ao namespace do nosso ViewModel (veja linha 6), e guardando o ViewModel como uma resource do UserControl, criando-se uma Key, para que possamos referenciá-lo mais tarde (linha 11).

Configurando os Bindings

No Grid LayoutRoot, definimos a propriedade DataContext, que irá guardar a referência para o ViewModel. Assim poderemos usar DataBinding para mostrar os valores dos Feeds RSS nos controles.

Logo abaixo, na Listbox (linha 46), a propriedade ItemsSource recebe o valor da propriedade Feeds do ViewModel (a propriedade Path do Binding recebe o nome da propriedade do objeto que é usado como fonte de dados no DataBinding, no nosso caso, o ViewModel).

No style dos Items da ListBox, também utilizamos DataBinding para setar os valores dos controles que irão mostrar os dados do Webcast. Por exemplo, na linha 31, temos uma TextBox que recebe o valor da propriedade Description, um HyperLinkButton que recebe o valor da propriedade Link, etc…

Importante!

No estilo definido para nossa ListBox, o objeto que é a fonte de DataBinding é um dos items da ObservableCollection Feeds do FeedViewModel. Isso por que a propriedade ItemsSource da ListBox, recebe a referência da propriedade Feeds, e os controles definidos no estilo são usados para cada ListBoxItem criada.

Resumindo: a propriedade ItemsSource recebe o valor da propriedade Feeds do nosso ViewModel. Isso irá criar vários ListBoxItems. E cada ListBoxItem terá como fonte de dados para o DataBinding, um elemento da ObservableCollection Feeds.

Configurando o Command

Cada ListBoxItem terá um botão que terá como Command, o Command definido no nosso ViewModel (OutlookApplicationCommand). Para definirmos isso no XAML, utilizamos Binding de elemento para elemento. Na linha 24, onde criamos o botão, definimos a propriedade Command utilizando Binding, e definimos a fonte como a propriedade OutlookApplicationCommand do DataContext (FeedViewModel) do controle LayoutRoot. Também passamos como parâmetro (que é passado para o método Execute do Command), a fonte de Binding do ListBoxItem (FeedItemModel).

Quando rodarmos nossa aplicação, teremos o seguinte resultado (lembre-se que para utilizarmos a API do Outlook, temos que rodar Out-of-Browser com Elevated Permissions):

image

Quando clicarmos no botão com o ícone do Outlook, ele irá chamar o método Execute do OutlookCommand, adicionando um item no calendário do Outlook com as informações do Webcast, conforme as imagens abaixo.

image

image

Bem, chegamos ao final dessa série de tutoriais. Espero que o conteúdo tenha ficado claro para todos. Caso alguma coisa não tenha ficado clara, ou alguma dúvida não foi respondida, não exite em deixar um comentário ou entre em contato comigo (http://brsilverlight.com/contact.aspx) ou mande uma mensagem para mim no Twitter (http://twitter.com/breno_ferreira).


Tags: , , ,
Categories: Silverlight
Posted by breno on domingo, 7 de fevereiro de 2010 23:40
E-mail | Kick it! | DZone it! | del.icio.us
Permalink | Comentários (0) | Post RSSRSS comment feed

Usando o Silverlight WebBrowser Control

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.

image

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

image 

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”.

image

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:

Code Snippet
  1. <controls:ChildWindow x:Class="SilverlightBrowser.InstalacaoWindow"
  2.            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.            xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
  5.            Width="400" Height="110"
  6.            Title="InstalacaoWindow">
  7.     <Grid x:Name="LayoutRoot" Margin="2">
  8.         <Grid.RowDefinitions>
  9.             <RowDefinition />
  10.             <RowDefinition Height="Auto" />
  11.         </Grid.RowDefinitions>
  12.  
  13.         <TextBlock x:Name="notificacaoTxt" Text="Esta aplicação precisa rodar Out-of-Browser" HorizontalAlignment="Center" Margin="10" />
  14.         <Button x:Name="CancelButton" Content="Cancelar" Click="CancelButton_Click" Width="75" Height="23" HorizontalAlignment="Right" Margin="0,12,0,0" Grid.Row="1" />
  15.         <Button x:Name="OKButton" Content="Instalar" Click="OKButton_Click" Width="75" Height="23" HorizontalAlignment="Right" Margin="0,12,79,0" Grid.Row="1" />
  16.     </Grid>
  17. </controls:ChildWindow>

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:

Code Snippet
  1. private void OKButton_Click ( object sender, RoutedEventArgs e )
  2. {
  3.     if ( Application.Current.InstallState == InstallState.NotInstalled )
  4.         Application.Current.Install ( );
  5.     else
  6.         MessageBox.Show ( "Aplicação já instalada" );
  7.     this.DialogResult = true;
  8. }

 

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.

image

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”.

image

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

image

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:

Code Snippet
  1. <UserControl x:Class="SilverlightBrowser.BrowserControl"
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  5.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  6.     mc:Ignorable="d">
  7.  
  8.     <Grid x:Name="LayoutRoot" Background="White">
  9.         <Grid.RowDefinitions>
  10.             <RowDefinition Height="23" />
  11.             <RowDefinition Height="*" />
  12.         </Grid.RowDefinitions>
  13.         <Grid.ColumnDefinitions>
  14.             <ColumnDefinition Width="*" />
  15.             <ColumnDefinition Width="25" />
  16.         </Grid.ColumnDefinitions>
  17.         
  18.         <TextBox x:Name="urlTxt" Text="http://www.bing.com" />
  19.         <Button x:Name="navBtn" Content="Go" Grid.Column="1" Click="navBtn_Click" />
  20.         
  21.         <WebBrowser x:Name="browser" Grid.Row="1" Grid.ColumnSpan="2" Width="1000" Height="700" />
  22.     </Grid>
  23. </UserControl>

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:

Code Snippet
  1. private void navBtn_Click ( object sender, RoutedEventArgs e )
  2. {           
  3.     String html = String.Empty;
  4.     if ( urlTxt.Text.StartsWith ( "http://" ) )
  5.         html = "<iframe src=\"" + this.urlTxt.Text + "\" style=\"width:100%;height:100%;\" />";
  6.     else
  7.         html = this.urlTxt.Text;
  8.  
  9.     this.browser.NavigateToString ( html );
  10. }

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.

image

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

image


Tags: , ,
Categories: Silverlight
Posted by breno on domingo, 24 de janeiro de 2010 11:41
E-mail | Kick it! | DZone it! | del.icio.us
Permalink | Comentários (0) | Post RSSRSS comment feed

Introdução ao Silverlight

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.

image

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.

image

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.

image

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

image

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:

Code Snippet
  1. <UserControl x:Class="IntroducaoSilverlight.MainPage"
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  5.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  6.     mc:Ignorable="d"
  7.     d:DesignHeight="300" d:DesignWidth="400">
  8.  
  9.     <Grid x:Name="LayoutRoot" Background="White">
  10.  
  11.     </Grid>
  12. </UserControl>

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:

Code Snippet
  1. xmlns:teste="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  2. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  3. ...
  4. >
  5.  
  6.  <teste:Grid x:Name="LayoutRoot" Background="White">
  7.  
  8.  </teste:Grid>

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:

Code Snippet
  1. <Grid x:Name="LayoutRoot" Background="White">
  2.     <StackPanel>
  3.         <TextBlock Text="Escolha um site" FontWeight="Bold" Foreground="DarkBlue"/>
  4.         <ComboBox x:Name="siteCmbBox" Width="100" HorizontalAlignment="Left" SelectionChanged="siteCmbBox_SelectionChanged">
  5.                 <ComboBoxItem Tag="http://www.bing.com" Content="Bing" />
  6.                 <ComboBoxItem Tag="http://silverlight.net" Content="Silverlight" />
  7.                 <ComboBoxItem Tag="http://www.msdn.com.br" Content="MSDN" />
  8.                 <ComboBoxItem Tag="http://www.microsoft.com" Content="Microsoft" />
  9.         </ComboBox>
  10.         <HyperlinkButton x:Name="linkBtn" TargetName="_blank" Opacity="0" />
  11.     </StackPanel>
  12. </Grid>

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”:

image

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

Code Snippet
  1. private void siteCmbBox_SelectionChanged ( object sender, SelectionChangedEventArgs e )
  2. {
  3.     String siteURL = ( ( ComboBoxItem ) this.siteCmbBox.SelectedItem ).Tag.ToString ( );
  4.     String site = ( ( ComboBoxItem ) this.siteCmbBox.SelectedItem ).Content.ToString ( );
  5.     this.linkBtn.NavigateUri = new Uri ( siteURL );
  6.     this.linkBtn.Content = "Clique aqui para acessar: " + site;
  7. }

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:

Code Snippet
  1. <UserControl.Resources>
  2.     <Storyboard x:Name="OpacityAnimation" >
  3.         <DoubleAnimation Storyboard.TargetName="linkBtn" Storyboard.TargetProperty="Opacity"
  4.                          Duration="0:0:0.3" From="0" To="1" />
  5.     </Storyboard>
  6. </UserControl.Resources>

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:

Code Snippet
  1. private void siteCmbBox_SelectionChanged ( object sender, SelectionChangedEventArgs e )
  2. {
  3.     String siteURL = ( ( ComboBoxItem ) this.siteCmbBox.SelectedItem ).Tag.ToString ( );
  4.     String site = ( ( ComboBoxItem ) this.siteCmbBox.SelectedItem ).Content.ToString ( );
  5.     this.linkBtn.NavigateUri = new Uri ( siteURL );
  6.     this.linkBtn.Content = "Clique aqui para acessar: " + site;
  7.  
  8.     this.OpacityAnimation.Begin ( );
  9. }

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


Tags: ,
Categories: Silverlight
Posted by breno on domingo, 17 de janeiro de 2010 22:30
E-mail | Kick it! | DZone it! | del.icio.us
Permalink | Comentários (4) | Post RSSRSS comment feed