Comunicação entre Silverlight e SQL Server

Introdução

Com a popularização da internet, está crescendo o número de empresas que procuram uma interface rica para enfrentar a concorrência digital. Os internautas estão cada vez mais críticos e exigentes. Por isto, ao se desenvolver uma aplicação rica, devemos tentar criar uma usabilidade interessante, mas sem esquecer das funcionalidades e os valores das informações.

Atualmente, existem duas grandes massas de aplicações web:

1- “Feia, porém rica” – Neste grupo encontramos uma tonelada de sites que investem em informações interessantes, rápidas e claras. Porém a interface não agrada. Isto faz com que a experiência do usuário seja frustrante.

2- “Bonita, porém pobre” – Aqui, encontramos as aplicações que chamam atenção do usuário. Possui uma interface bonita e uma usabilidade atratativa. O que deixa a desejar é o conteúdo. Muitas vezes parece complicado fazer uma aplicação rica e que seja fácil de se atualizar através de um gerenciador de conteúdo, fazendo que o site se torne “sempre a mesma coisa” para o usuário.

Neste artigo abordaremos o segundo caso. Faremos uma aplicação Silverlight se comunicar facilmente com o banco de dados, para as informações serem facilmente alteradas pelo administrador da aplicação (e não vinculada ao desenvolvedor).

Estrutura do banco de dados

Para poder seguir com o nosso artigo, devemos criar um novo banco de dados no SQL Server 2005. O script apresentado no Quadro 1, implementa a tabela necessária para funcionar nosso exemplo:

create table Produto

(

ProdutoId int identity(1,1) not null,

Nome varchar(50) not null,

Descricao varchar(5000)

);

alter table Produto

add constraint PK_Produto_Id primary key (ProdutoId);

Quadro 1: Script SQL da Tabela Produto

A estrutura de nosso banco de dados de exemplo é apresentada na Figura 1.

Figura 1: Estrutua do Banco de Dados do Exemplo

Criando a nossa Aplicação Silverlight

Depois de criado o banco, abra o VisualStudio 2008 e adicione um novo projeto do tipo Silverlight Application. Para este exemplo nomearei o projeto como SilverlightDataBase.

Automaticamente o Visual Studio criará dois projetos: o primeiro será a aplicação Silverlight e o outro a aplicação Web. Para acessar os dados utilizaremos o LINQ-to-SQL. No projeto web, insira um novo item do tipo Linq to SQL Classes. Deixaremos o nome do arquivo como DataClasses.dbml. Devemos, então, expandir a aba Server Explorer e arrastar nossa tabela para a tela, como mostra a Figura 2:

Figura 2: Linq-to-SQL Classes (*.dbml).

Importante: é necessário mudar a propriedade Serialization Mode para Unidirectional (Figura 3).

Figura 3: Propriedade Serialization Mode

Criando a comunicação (WCF Service)

Agora precisamos de um arquivo que faça um papel intermediário entre nossa aplicação Silverlight e o nosso banco de dados. Para isto utilizaremos o WCF Service. Vamos adicionar um novo item em nosso projeto Web do tipo Silverlight-enable WCF Service e vamos chamá-lo de ServiceSilverlight.svc. Neste arquivo criaremos duas funções que serão consumidas pelo Silverlight: inserir dados e receber dados. O Quadro 2 apresenta o código necessário para esta implementação.

public class ServiceSilverlight

{

DataClassesDataContext db = new DataClassesDataContext();

[OperationContract]

public void InserirDados(string strNome, string strDescricao)

{

Produto objProduto = new Produto

{

Nome = strNome, Descricao = strDescricao

};

db.Produtos.InsertOnSubmit(objProduto);

db.SubmitChanges();

}

[OperationContract]

public List<Produto> SelecionarDados()

{

var Selecionar = from dados in db.Produtos select dados;

return Selecionar.ToList();

}

Quadro 2: O código para o ServiceSilverlight.svc

Construindo o Layout em nosso Silverlight
Agora, em nosso projeto Silverlight, vamos abrir o arquivo Page.xaml e montar o layout. A distribução dos campos na tela devá ser feita como apresentado no Quadro 3:

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<data:DataGrid x:Name="dgrProdutos" Grid.Row="3" Margin="5"></data:DataGrid>

</Grid>

Quadro 3: Código XAML para o layout do exemplo

A interface deste exemplo deverá ficar semelhante a Figura 4.

Figura 4: Interface do Exemplo

Nota: Caso seuVisual Studio não reconheça o Tag <data:DataGrid>, basta você acrescentarno UserControl principal esta tag dereferência: xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"

Referenciando nosso WCF Service.
Vamos adicionar uma referência ao nosso serviço WCF. Clique com o botão direito em cima da pasta References em nosso projeto Silverlight e escolha a opção “Add Service Reference”. Clicando em Discover, serão listados os Services criados em nossa aplicação Web. Selecione o ServiceSilverlight.svc e nomeie Namespace como “ServicoWCF” (Figura 5).

Figura 5: Adicionando referência ao ServiceSilverlight.svc

Vamos referenciar este serviço em nossa Page.xaml.cs para poder acessar os dois métodos contidos dentro do WCF. Em seguida vamos criar as funções para inserir dados no banco. Depois verificaremos se o nosso textbox txtNome não está vazio. E, por último, criaremos uma função que verifique quando o nosso método InserirDados estiver finalizado.

Quando estiver finalizado vamos limpar nossos campos (txtNome e txtDescricao). E chamaremos ao método InserirDados passando como parâmetro o texto de nossos TextBoxes. Ver Quadro 4.

ServicoWCF.ServiceSilverlightClient WebService = new SilverlightDataBase.ServicoWCF.ServiceSilverlightClient();

private void Cadastrar_Click(object sender, RoutedEventArgs e)

{

InserirDados();

}

public void InserirDados()

{

if (txtNome.Text != string.Empty)

{

WebService.InserirDadosCompleted +=

new EventHandler<System.ComponentModel.AsyncCompletedEventArgs>(WebService_InserirDadosCompleted);

WebService.InserirDadosAsync(txtNome.Text, txtDescricao.Text);

}

void WebService_InserirDadosCompleted(object sender, System.ComponentModel.AsyncCompletedEventArgs e)

{

txtNome.Text = string.Empty;

txtDescricao.Text = string.Empty;

}

Quadro 4: Código para Inserir Dados

Para popular nosso grid, criaremos um método chamado PopulaGrid(). Neste método vamos criar a função completed para o SelecionarDados (criado no WCF). Dentro do completed vamos atribuir a propriedade ItemSource de nosso DataGrid com o valor contido dentro do e.Result. No método PopulaGrid(), vamos chamar a função criada dentro de nosso WCF novamente pelo Async (Quadro 5).

public Page()

{

InitializeComponent();

PopulaGrid();

}

public void PopulaGrid()

{

WebService.SelecionarDadosCompleted += new

EventHandler<SilverlightDataBase.ServicoWCF.SelecionarDadosCompletedEventArgs>

(WebService_SelecionarDadosCompleted);

WebService.SelecionarDadosAsync();

}

void WebService_SelecionarDadosCompleted(object sender, SilverlightDataBase.ServicoWCF.SelecionarDadosCompletedEventArgs e)

{

dgrProdutos.ItemsSource = e.Result;

}

Quadro 5: Carregando o Grid

Nota: Ao final do método encarregado de inserir dados no banco, devemos chamar a função PopulaGrid() para poder atualizar nosso DataGrid sempre que novos dados forem inseridos.

Conclusão

O grande segredo para criar uma aplicação diferenciada na web é utilizar recursos para torná-la rica (neste caso, Silverlight) e alimentá-la, facilmente, com dados úteis, claros e, principalmente, atualizados. Com este tutorial poderemos interagir com banco de dados facilmente e fazer com que nossa aplicação RIA não fique vinculada ao desenvolvedor, e sim ao administrador.

Desenvolvimento - Silverlight

Leia também