Criando uma aplicação SilverLight 4 com DataBinding

Tenho escrito pouco sobre a
tecnologia SilverLight, primeiro devido à falta de tempo, e também pelas constantes mudanças e evoluções que o SilverLight tem
passado. Você vai dormir usando a versão 3 e quando acorda já
tem a versão 4!

De qualquer forma, em 2011
pretendo dar um pouco mais de atenção ao SilverLight, e um bom
começo é ter o ambiente corretamente ajustado para poder usar a
tecnologia.

Lembrando que o SilverLight
foi lançado nos meados de 2007 e desde então tem evoluído
muito. E, enquanto o ASP .NET é uma plataforma para
desenvolvimento do lado do servidor, com a chegada do SilverLight
o foco muda para o lado do cliente, visto que uma aplicação
SilverLight roda no navegador do cliente em uma versão
específica da CLR – Common Language Runtime.

Se o SilverLight é algo
totalmente novo para você, mas você conhece o WPF, fique sabendo
que o SilverLight pode ser considerado como uma versão reduzida
do WPF, sendo possível inclusive reutilizar código escrito no
SilverLight 4 no WPF 4 e vice-versa.

Preparando
o terreno

Para iniciar o
desenvolvimento de aplicações SilverLight, precisamos ter
instalados as ferramentas e os SDKs necessários.

Vamos lá…

• Precisamos ter
  instalado o Visual Studio 2010 ou o Visual Web Developer Express 2010 
• Precisamos ter instalado o SilverLight 4 Tools for Visual Studio 2010
• Precisamos ter instalado o Expression Blend 4;

Após baixar e instalar as
ferramentas acima, não ocorrendo nenhum erro, tudo estará
pronto para você dar início à saga de desenvolver aplicações
para o SilverLight.

Criando
sua primeira aplicação SilverLight 4

Nossa primeira aplicação SilverLight 4
será bem simples e terá como objetivo permitir a
visualização de detalhes sobre Restaurantes selecionados em um
controle Combobox, onde a informação do restaurante é retornada
sobre um serviço e usada para preencher a combobox, e os detalhes
serão exibidos em controles TextBlock colocados em um grid na
aplicação SilverLight.

Dando
a partida...

Abra o Visual Web Developer
2010 Express Edition no
menu File selecione New Project.

A seguir, selecione Visual
Basic e o template SilverLight -> SilverLight
Application, informe o nome SilverLightRestaurantes
e clique em OK.

Será apresentada a janela
abaixo, onde vemos o projeto do tipo ASP .NET Web Application
Project selecionado como o tipo de projeto web que será usado
para hospedar a aplicação SilverLight. Note que a versão do
SilverLight escolhida é a versão 4.

Após fazer essas
verificações, clique em OK.

Será criada uma solução
com dois projetos:

• O projeto SilverLight
  – SilverLightRestaurantes;
• O projeto Web –
  SilverLightRestaurantes.web – responsável por hospedar o
  conteúdo SilverLight.

Na figura abaixo vemos a
estrutura do projeto e o editor XAML:

Teremos um serviço que
irá retornar a informação sobre os restaurantes, onde um
restaurante pode ser representado pela instância da classe
Restaurante.

Esta classe deverá ser
criada e incluída no projeto web – SilverLightRestaurantes.Web. Além disso, a classe deverá ter:

• um atributo DataContract
  anexado a ela, onde o atributo é requerido para
  especificar que a classe pode ser serializada quando
  trafegar na rede;
• cada propriedade
  atribuída com o atributo DataMember.
  Quando incluímos esse atributo à propriedade,
  especificamos que ela é parte de um
  contrato e que ele será incluído na resposta serializada
  que será enviada ao cliente;

No menu Project, selecione Add Class e informe o nome
Restaurante.vb para o arquivo da
classe.

A seguir, defina o seguinte
código neste arquivo:

Imports System.Runtime.Serialization<br /><br /><DataContract()> _<br />Public Class Restaurante<br />    <DataMember()> _<br />    Public Property Nome() As String<br />        Get<br />            Return m_Nome<br />        End Get<br />        Set(ByVal value As String)<br />            m_Nome = value<br />        End Set<br />    End Property<br />    Private m_Nome As String<br /><br />    <DataMember()> _<br />    Public Property Local() As String                             <br />        Get<br />            Return m_Local<br />        End Get<br />        Set(ByVal value As String)<br />            m_Local = value<br />        End Set<br />    End Property<br />    Private m_Local As String<br /><br />    <DataMember()> _<br />    Public Property Pais() As String<br />        Get<br />            Return m_Pais<br />        End Get<br />        Set(ByVal value As String)<br />            m_Pais = value<br />        End Set<br />    End Property<br />    Private m_Pais As String<br /><br />    <DataMember()> _<br />    Public Property Preco() As Double<br />        Get<br />            Return m_Preco<br />        End Get<br />        Set(ByVal value As Double)<br />            m_Preco = value<br />        End Set<br />    End Property<br />    Private m_Preco As Double<br />End Class

Para poder usar os
atributos DataContrat e DataMember, talvez
você tenha que incluir uma referência a System.RunTime.Serialization
no projeto web.

A classe
Restaurante possui os seguintes membros:

• Nome
• Local
• Pais
• Preco

Com a classe criada, vamos agora
incluir um serviço WCF no projeto web.

Selecione o projeto web e no menu Project
-> Add New Item.

Em seguida, selecione o template Web
-> WCF Service e informe o nome RestauranteService.svc
e clique em Add.

Deverá ser incluído no projeto um arquivo chamado
RestauranteService.svc:

RestauranteService.svc

Na classe do serviço, devemos
implementar o método da interface definida acima, usando o
seguinte código:

Imports System<br />Imports System.Linq<br />Imports System.Runtime.Serialization<br />Imports System.ServiceModel<br />Imports System.ServiceModel.Activation<br />Imports System.Collections.Generic<br />Imports System.Text<br /><br /><ServiceContract([Namespace]:="")> _<br /><AspNetCompatibilityRequirements(RequirementsMode:=AspNetCompatibilityRequirementsMode.Allowed)> _<br />Public Class RestauranteService<br />    <OperationContract()><br />    Public Function GetRestaurantes()<br />        Return New List(Of Restaurante)() From { _<br />     New Restaurante() With { _<br />       .Nome = "Brussels Restaurante", _<br />       .Preco = 100, _<br />       .Local = "Bruxelas", _<br />       .Pais = "Belgica" _<br />     }, _<br />     New Restaurante() With { _<br />       .Nome = "London Restaurante", _<br />       .Preco = 200, _<br />       .Local = "Londres", _<br />       .Pais = "Reino Unido" _<br />     }, _<br />     New Restaurante() With { _<br />       .Nome = "Paris Restaurante", _<br />       .Preco = 150, _<br />       .Local = "Paris", _<br />       .Pais = "França" _<br />     }, _<br />     New Restaurante() With { _<br />       .Nome = "New York Restaurante", _<br />       .Preco = 230, _<br />       .Local = "New York", _<br />      `Pais = "USA" _<br />     } _<br />    }<br />    End Function<br />End Class

Note os atributos que
usamos nesta classe. O atributo ServiceContract especifica que a
classe contém um contrato de serviço que define qual
funcionalidade o serviço expõe.

O atributo
OperationContract é incluído para operações nas que podem
ser invocadas pelos clientes no serviço. Isso significa que se
você incluir métodos ao serviço sem este atributo ele não
poderá ser invocado pelo cliente.

Agora temos que fazer com
que o serviço conheça a aplicação SilverLight.

Clique com o botão direito
do mouse sobre a aplicação SilverLight e selecione Add Service
Reference.

Na janela de diálogo
abaixo, clique no botão Discover para selecionar
o seu serviço, pois ele está na mesma solução.

Você deverá ver o método GetRestaurante
exibido na caixa Operations.

A seguir, informe RestauranteServiceReference
no campo Namespace.

Clicando no botão OK, o serviço estará disponível a
partir da aplicação SilverLight.

Então, vamos ajeitar a nossa interface, que é a
aplicação SilverLight. Abra a página MainPage.xaml e inclua o código
abaixo:

   <Grid x:Name="LayoutRoot" Width="400" Height="300" Background="Aquamarine"><br />        <Grid.RowDefinitions><br />            <RowDefinition Height="50"></RowDefinition><br />            <RowDefinition></RowDefinition><br />        </Grid.RowDefinitions><br />        <ComboBox x:Name="RestauranteComboBox" Width="250" SelectionChanged="RestauranteComboBox_SelectionChanged" DisplayMemberPath="Nome" VerticalAlignment="Center"><br />        </ComboBox><br /><br />        <Grid x:Name="RestauranteDetailGrid" Grid.Row="1" VerticalAlignment="Top"><br />            <Grid.RowDefinitions><br />                <RowDefinition></RowDefinition><br />                <RowDefinition></RowDefinition><br />                <RowDefinition></RowDefinition><br />                <RowDefinition></RowDefinition><br />            </Grid.RowDefinitions><br /><br />            <Grid.ColumnDefinitions><br />                <ColumnDefinition></ColumnDefinition><br />                <ColumnDefinition></ColumnDefinition><br />            </Grid.ColumnDefinitions><br /><br />            <TextBlock x:Name="NomeTextBlock" Grid.Row="0" Grid.Column="0" FontWeight="Bold" Text="Nome: " HorizontalAlignment="Right"><br />            </TextBlock><br /><br />            <TextBlock x:Name="NomeValueTextBlock" Grid.Row="0" Grid.Column="1" Text="{Binding Nome}"><br />            </TextBlock><br /><br />            <TextBlock x:Name="LocalTextBlock" Grid.Row="1"  Grid.Column="0" FontWeight="Bold" Text="Local: " HorizontalAlignment="Right"><br />            </TextBlock><br /><br />            <TextBlock x:Name="LocalValueTextBlock" Grid.Row="1" Grid.Column="1" Text="{Binding Local}"> <br />            </TextBlock><br /><br />            <TextBlock x:Name="PaisTextBlock" Grid.Row="2" Grid.Column="0" FontWeight="Bold" Text="Pais: " HorizontalAlignment="Right"><br />            </TextBlock><br /><br />            <TextBlock x:Name="PaisValueTextBlock" Grid.Row="2" Grid.Column="1" Text="{Binding Pais}"> <br />            </TextBlock><br /><br />            <TextBlock x:Name="PrecoTextBlock" Grid.Row="3"  Grid.Column="0" FontWeight="Bold" Text="Preço: " HorizontalAlignment="Right"><br />            </TextBlock> <br /><br />            <TextBlock x:Name="PrecoValueTextBlock" Grid.Row="3" Grid.Column="1" Text="{Binding Preco}"><br />            </TextBlock><br /><br />        </Grid><br /><br />    </Grid>

O resultado desse código XAML pode ser visto na
figura abaixo:

Agora, temos que definir o código no arquivo code-behind MainPage.xaml.vb,
pois nós vamos nos conectar com o serviço, e o resultado será usado para a
vinculação de dados usando o databinding.

Partial Public Class MainPage<br /><br />    Inherits UserControl<br /><br />    Public Sub New()<br /><br />        InitializeComponent()<br />        Dim proxy As RestauranteService.RestauranteServiceClient = New SilverlightRestaurantes.RestauranteService.RestauranteServiceClient<br /><br />        proxy.GetRestaurantesCompleted += New EventHandler(Of SilverlightRestaurantes.RestauranteService.GetRestaurantesCompletedEventArgs)(AddressOf proxy_GetRestaurantesCompleted)<br /><br />        proxy.GetRestaurantesAsync()<br /><br />    End Sub<br /><br />    Private Sub proxy_GetRestaurantesCompleted(ByVal sender As Object, ByVal e As SilverlightRestaurantes.RestauranteService.GetRestaurantesCompletedEventArgs)<br /><br />        RestauranteComboBox.ItemsSource = e.Result<br /><br />    End Sub<br /><br />    Private Sub RestauranteComboBox_SelectionChanged(ByVal sender As Object, ByVal e As SelectionChangedEventArgs)<br /><br />        RestauranteDetailGrid.DataContext = TryCast(TryCast(sender, ComboBox).SelectedItem, RestauranteService.Restaurante)<br /><br />    End Sub<br /><br /><br /><br />End Class

Agora é só alegria! Vamos testar pressionando F5…

O resultado é exibido nas figuras abaixo, onde na primeira eu seleciono um
Hotel da combobox e na segunda temos o resultado exibido no formulário
SIlverLight.

Algumas considerações finais para você que está iniciando no SilverLight:

1. Aplicações SilverLigth sempre precisam rodar em um contexto de Navegador.
   Por isso, quando você criar uma aplicação do tipo SilverLight, o Visual Studio
   inicia perguntando como desejamos hospedar o conteúdo SilverLight;
2. A opção Default ASP .NET Web Application Project nos dá um número
   máximo de possibilidades para a configuração do projeto host, e é a opção que
   geralmente usamos;
3. A segunda opção ASP .NET Web Site é um web site baseado em arquivos
   conhecido desde a versão 2.0 sendo mais restrita;
4. Geralmente uma aplicação SilverLight contém dois projetos: o projeto
   SilverLight e aplicação que irá hospedar a aplicação;
5. Uma aplicação SilverLight contém arquivos XAML e VB .NET (C#). Os
   arquivos XAML contém a interface do usuário e são vinculadas em tempo de
   execução a classes partials que geram o code-behind. Por padrão, uma
   página MainPage é incluída quando da criação do projeto (na verdade,
   não é uma página, mas um user control);
6. O arquivo App.xaml é especial: ele é o ponto de entrada de uma
   aplicação, sendo responsável por carregar a instância de MainPage,
   executando a lógica quando algum erro ocorre;
7. Enquanto está construindo uma aplicação SilverLight , o projeto
   SilverLIght é compilado em um assembly e este, juntamente com um arquivo manifest que
   contém informação geral sobre a aplicação e outros recursos, são empacotados
   em um arquivo XAP. O arquivo XAP é então copiado para a
   aplicação hospedeira, e você pode visualizar este arquivo na pasta
   ClientBin do projeto SilverLight.

1. O arquivo XAP é basicamente um arquivo ZIP. Se você renomear o arquivo
   SilverLightRestaurantes.xap para SilverLightRestaurantes.zip,
   poderá ver os arquivos originais (o manifest e o
   assembly);
2. Os dados não estão disponíveis para o SilverLight no lado do cliente, de
   forma que precisamos retorná-los do servidor. No SilverLight, isso é feito
   usando serviços, e os serviços precisam ser acessados de forma assíncrona,
   dai esta declaração no code-behind;
3. Neste exemplo, usamos os recursos de DataBinding para conectar os
   dados com a interface. O DataBinding permite vincular propriedades de objetos
   (os dados) a propriedade de controles. Neste exemplo, vinculamos uma lista de
   instâncias de Restaurantes a um ComboBox usando a propriedade ItemsSource.
   Enquanto for feita uma mudança na seleção deste controle, o evento
   SelectionChanged dispara e seleciona um item – uma
   instância de Restaurante – que é definida como um DataContext
   para o RestauranteDetailGrid. Este grid contém os controles nos quais
   desejamos exibir os detalhes de um Restaurante, e cada controle usa o
   Binding no XAML para especificar com qual propriedade deseja se
   vincular.

Aguarde mais artigos sobre SilverLight e DataBinding…

Pegue o projeto completo aqui: SilverlightRestaurantes.zip

Simples, simples assim…

Eu sei, é apenas SilverLight 4,
mas eu gosto…