Gerando Gráficos com Silverlight, WCF e LINQ

Desenvolvendo uma aplicação utilizando SILVERLIGHT, WCF, LINQ e Silverlight 3 ToolKit.

por Antonio Lucas Finotti Pereira

Neste artigo será desenvolvido um gráfico de acompanhamento de valores. As tecnologias utilizadas serão SIlverlight, Wcf e Linq. Abaixo segue o motivo da utilização destas tecnologias.

Silverlight: Foi escolhido pois nossa aplicação será executada por uma aplicação web, caso a aplicação fosse para Windows Forms, poderíamos utilizar o WPF.

WCF: No Silverlight não conseguimos conectar diretamente ao banco de dados, por isso, vamos precisar de um serviço que disponibilize os dados necessários.

LINQ: Será utilizado para buscar as informações do banco de dados, que serão disponibilizadas pelo WCF.

Tecnologias envolvidas:

Microsoft Visual Studio 2010 C# .Net, SIlverlight, WCF, SQL Server e LINQ.

Iniciaremos um novo projeto, com o nome de SilverlightWcf.

Após selecionar um novo projeto, é necessário selecionar qual é o tipo de aplicação que será desenvolvida, também podemos selecionar qual linguagem e framework será utilizado, neste caso será o C#, framework 4.0 e a aplicação Silverlight Application.

A próxima janela pergunta se vamos querer utilizar uma pagina para testar a aplicação Silverlight, o Visual Studio cria uma pagina (.html e .aspx) que contem os códigos necessários para rodar a aplicação Silverlight, caso seja necessário utilizar essa aplicação em algum site, podemos utilizar essas paginas como exemplo. Em nosso caso apenas vamos clicar em Ok.

Abaixo segue um exemplo de como ficará janela de desenvolvimento do Visual Studio. Note no Solution Explorer que o Visual Studio criou duas aplicações, sendo uma para Silverlight e a outra uma aplicação Web com a classe javascript necessária para rodar o silverlight.

Agora vamos criar o banco de dados. Para isso vamos acessar a janela Server Explorer, clicar no ícone ou o botão direito do mouse em Data Connections e selecionar Add Connection...

Será exibida uma janela solicitando as informações:

Server Name: Nome do Servidor. Apenas clique na seta do combo que ele irá mostrar as instancias do SQL Server que estão instaladas na maquina.

Log on to the server: Selecionar a opção User a Windows Authentication.

Connect to a database: Nome do banco de dados que será utilizado. Aqui vamos selecionar a opção Select or enter a database name. Você poderá utilizar um banco de dados que já está criado ou informar o nome de um novo banco de dados, ele faz a criação do mesmo automaticamente, mas antes ele exibirá uma janela fazendo está pergunta.

Após seguir estes passos o banco de dados será inserido na janela do Server Explorer, abaixo segue um exemplo de como ficaria a janela.

Agora vamos criar a tabela (Dados) e Incluir os campos (MÊS, DEBITO e CRÉDITO). Abaixo segue a estrutura da mesma.

CAMPO	TIPO
MES	VARCHAR(15)
CREDITO	DECIMAL(18,0)
DEBITO	DECIMAL(18,0)

Para criar a tabela, primeiro vamos expandir as opções do banco de dados que selecionamos, depois vamos clicar o botão direito do mouse no banco de dados selecionado e clicar em Add New Table.

O Visual Studio exibirá uma tela para informar o nome do campo e o tipo, após informar os dados você deverá salvar os dados, depois que você clicar em salvar o Visual Studio exibirá uma janela solicitando o nome da tabela. Abaixo sele o exemplo.

Depois de criar a tabela, vamos inserir algumas informações para isso vamos expandir as opções do nosso banco de dados, expandir a pasta Tables e clicar o botão direito do mouse na tabela que criamos (Dados) e selecionar a opção Show Table Data.

Abaixo segue a janela exibida pelo Visual Studio, os dados você pode preencher normalmente, todas as colunas são editáveis.

Agora vamos criar o serviço que vai retornar os dados para o montarmos o gráfico. Vamos para a janela Solution Explorer, clicar o botão direito do mouse no projeto SilverlightWcf.Web, selecionar a opção Add e clicar em New Item...

Na janela Add New Item, vamos selecionar os Templates do Silverlight e escolher a opção Silverlight-enabled Wcf Service. Vamos colocar o nome de WcfExemplo.svc e clicar em Add.

Abaixo segue o conteúdo do arquivo WcfExemplo.svc que foi incluído no projeto:

using System;

using System.Linq;

using System.Runtime.Serialization;

using System.ServiceModel;

using System.ServiceModel.Activation;

namespace SilverlightWcf.Web

{

[ServiceContract(Namespace = "")]

[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]

public class WcfExemplo

{

[OperationContract]

public void DoWork()

{

// Add your operation implementation here

return;

}

// Add more operations here and mark them with [OperationContract]

}

}

Note que o Método DoWork() está com o atributo [OperationContract], isso significa que esse metodo poderá ser invocado pelo WCF, você pode ter vários métodos mas somente os que estão com o [OperationContract] serão invocados.

Agora vamos utilizar o LINQ to SQL para trabalhar com as informações do banco de dados, para isso vamos adicionar um novo item no projeto: Add New Item, selecionar os Templates do Data e escolher a opção LINQ to SQL Classes. Vamos colocar o nome de BancoDados.dbml e clicar em Add.

Depois de incluir este novo item, o arquivo BancoDados.dbml já é aberto automaticamente, caso não seja é só clicar duas vezes no mesmo que se encontra na janela Solution Explorer. Agora vamos mapear a tabela do nosso banco de dados, para isso vamos na janela Server Explorer clicar na tabela Dados e arrastar para o conteúdo do arquivo BancoDados.dbml, com isso o Visual Studio já faz o mapeamento mostrando os campos da tabela com seus tipos de dados.

Agora vamos voltar para o arquivo WcfExemplo.svc e codificar o método que retornara os dados para nosso gráfico. Vamos criar uma classe com o nome Dados e criar as propriedades iguais estão na tabela do banco de dados, a classe poderá ser criada no próprio arquivo.

No Inicio da classe, onde informamos as namespaces que estamos utilizando, vamos incluir System.Collections.Generic, para utilizarmos o List<> e a System.Data.Linq para usarmos o Linq para acessar os dados.

Abaixo segue um exemplo de como a classe deverá ficar.

using System;

using System.Linq;

using System.Runtime.Serialization;

using System.ServiceModel;

using System.ServiceModel.Activation;

using System.Collections.Generic;

using System.Data.Linq;

namespace SilverlightWcf.Web

{

[ServiceContract(Namespace = "")]

[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]

public class WcfExemplo

{

[OperationContract]

public void DoWork()

{

// Add your operation implementation here

return;

}

}

public class Dados

{

public string Mes { get; set; }

public decimal Credito { get; set; }

public decimal Debito { get; set; }

}

}

Depois disso vamos criar o método RetornaDados() que vai retornar um List<> com a dados da classe Dados. O método vai acessar a tabela Dados, depois vamos fazer um foreach para varrer todas as linhas retornadas, alimentar os dados da classe Dados e depois incluir esses dados em uma lista da classe Dados. Abaixo segue o código do método.

[OperationContract]

public List<Dados> RetornaDados()

{

List<Dados> dados = new List<Dados>();

using (BancoDadosDataContext ctx = new BancoDadosDataContext())

{

var obj_dados = from d in ctx.Dados select d;

foreach (var item in obj_dados)

{

Dados dado = new Dados();

dado.Mes = item.Mes;

dado.Credito = item.Credito.Value;

dado.Debito = item.Debito.Value;

dados.Add(dado);

}

}

return dados;

}

Agora que o método está codificado vamos testar o mesmo, para isso primeiro devemos verificar se o projeto SilverlightWcf.Web está setado para ser o primeiro a ser executado quando pressionarmos o F5, sabemos disso se o projeto estiver em negrito, caso não esteja, clique o botão direito do mouse no mesmo e selecione a opção Set as StartUp Project, devemos fazer a mesma coisa para o arquivo WcfExemplo.svc.

Para testar o serviço pressione F5, se a janela do Internet Explorer for aberta, copie o link que esta sendo carregado, no meu caso o link é http://localhost:22269/WcfExemplo.svc. Abaixo segue um exemplo da janela.

Depois de copiar o link vamos executar o Programa Wcf Test Cliente, você pode encontrá-lo na pasta: C:\Program Files\Microsoft Visual Studio 10.0\Common7\IDE\ WcfTestClient.exe. Depois de carregado vamos clicar no menu File e em seguida clicar em Add Service.

Após clicar em Add Service, cole o link no único campo da janela e clique em Ok.

Depois de colocar o link e clicar em ok, você deverá clicar duas vezes no método que será testado e clicar no botão Invoke, note que o serviço retornará os dados que estão gravados na tabela.

Agora vamos para o arquivo MainPage.xaml que está no projeto SilverlightWcf para montar o gráfico. Primeiro procure a ferramenta Chart na toolbox, quando encontra-la clique e arraste para dentro da janela de design. Abaixo segue o modelo.

Agora vamos para a pagina de código XAML, abaixo segue o conteúdo do arquivo.

<UserControl x:Class="SilverlightWcf.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d"

d:DesignHeight="300" d:DesignWidth="400"
xmlns:chartingToolkit="
clr-namespace:System.Windows.Controls.DataVisualization.Charting;
assembly=System.Windows.Controls.DataVisualization.Toolkit">

<chartingToolkit:Chart Name="chart1" />

</UserControl>

Agora vamos fazer algumas modificações no código, a tag <chartingToolkit:Chart Name="chart1" /> Deverá ficar igual o código abaixo:

<chartingToolkit:Chart Name="Grafico" >

<chartingToolkit:BarSeries Title="Credito"

DependentValueBinding = "{Binding Credito}"

IndependentValueBinding = "{Binding Mes}"

IsSelectionEnabled="True" AnimationSequence="FirstToLast"

ItemsSource="{Binding}" />

<chartingToolkit:BarSeries Title="Debito"

DependentValueBinding = "{Binding Debito}"

IndependentValueBinding = "{Binding Mes}"

IsSelectionEnabled="True" AnimationSequence="FirstToLast"

ItemsSource="{Binding}" />

</chartingToolkit:Chart>

Notem que estamos utilizando o tipo de gráfico BarSeries, um para o Credito e o outro para Débito, em ambos temos que informar as propriedades DependentValueBinding(Campo Valor), IndependentValueBinding(Campo Texto) e ItemsSource(Fonte de dados), as outras propriedades são para colocar alguns efeitos no gráfico.

Agora vamos acessar o serviço que criamos no outro projeto, acesse a janela Solution Explorer, clique o botão direito do mouse no projeto SilverlightWcf e selecione a opção Add Service Reference. Será exibida uma janela para informarmos o caminho do serviço que vamos utilizar e colocar o nome (wcfDados)da namespace. Como o serviço que criamos está na mesma solução, vamos clicar no botão Discover. Note que os serviços que estão na mesma solução serão exibidos na janela, após selecionar o serviço desejado clique em OK.

Agora vamos para o CodeBegind do arquivo MainPage.xaml “Na Janela Solution Explorer, clique o botão direito do mouse encima do arquivo e escolha a opção View Corde”, para acessar os serviços que adicionamos no projeto. O Código abaixo é o código necessário para acessar o wcf, primeiro devemos instanciar o serviço depois criaremos dois métodos, um para chamar o serviço e o outro para retornar os dados quando a chamada for completada.

private SilverlightWcf.wcfDados.WcfExemploClient wcfDados = new SilverlightWcf.wcfDados.WcfExemploClient();

void AtualizaGrafico()

{

wcfDados.RetornaDadosCompleted += new EventHandler<SilverlightWcf.wcfDados.RetornaDadosCompletedEventArgs>(wcfDados_BuscaSaldosCompleted);

wcfDados.RetornaDadosAsync();

}

void wcfDados_BuscaSaldosCompleted(object sender, SilverlightWcf.wcfDados.RetornaDadosCompletedEventArgs e)

{

GraficoDados.DataContext = e.Result;

}

Abaixo segue como ficaria a classe com toda codificação.

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

namespace SilverlightWcf

{

public partial class MainPage : UserControl

{

public MainPage()

{

InitializeComponent();

}

private SilverlightWcf.wcfDados.WcfExemploClient wcfDados = new SilverlightWcf.wcfDados.WcfExemploClient();

void AtualizaGrafico()

{

wcfDados.RetornaDadosCompleted += new EventHandler<SilverlightWcf.wcfDados.RetornaDadosCompletedEventArgs>(wcfDados_BuscaSaldosCompleted);

wcfDados.RetornaDadosAsync();

}

void wcfDados_BuscaSaldosCompleted(object sender, SilverlightWcf.wcfDados.RetornaDadosCompletedEventArgs e)

{

GraficoDados.DataContext = e.Result;

}

}

}

Voltamos para o arquivo MainPage.xaml do projeto SilverlightWcf para codificar mos o evento Load da ferramenta de gráfico, adicione o evento Loaded dentro da tag <chartingToolkit>.

Depois de clicar duas vezes no evento Loaded exibido pelo Intelicense, seja exibida uma outra opção para que o proprio Visual Studio Crie o método para você, apenas clique duas vezes na opção <New Event Handler>.

Agora vamos voltar para o CodeBegind (MainPage.xaml.cs ) do arquivo MainPage.xaml, e note que um novo método foi criado na pagina de códigos (GraficoDados_Loaded(object sender, RoutedEventArgs e)). Agora dentro desse novo método vamos chamar o método que Busca os dados e exibe no gráfico (AtualizaGrafico()). Abaixo segue o Método codificado.

private void GraficoDados_Loaded(object sender, RoutedEventArgs e)

{

AtualizaGrafico();

}

Código Completo da Classe MainPage.xaml.cs.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

namespace SilverlightWcf

{

public partial class MainPage : UserControl

{

public MainPage()

{

InitializeComponent();

}

private static SilverlightWcf.wcfDados.WcfExemploClient wcfDados = new SilverlightWcf.wcfDados.WcfExemploClient();

private void AtualizaGrafico()

{

wcfDados.RetornaDadosCompleted += new EventHandler<SilverlightWcf.wcfDados.RetornaDadosCompletedEventArgs>(wcfDados_BuscaSaldosCompleted);

wcfDados.RetornaDadosAsync();

}

void wcfDados_BuscaSaldosCompleted(object sender, SilverlightWcf.wcfDados.RetornaDadosCompletedEventArgs e)

{

GraficoDados.DataContext = e.Result;

}

private void GraficoDados_Loaded(object sender, RoutedEventArgs e)

{

AtualizaGrafico();

}

}

}

Código Completo da Classe MainPage.xaml.

<UserControl x:Class="SilverlightWcf.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d"

d:DesignHeight="300" d:DesignWidth="400"

xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;
assembly=System.Windows.Controls.DataVisualization.Toolkit"

xmlns:controlsToolkit="clr-namespace:System.Windows.Controls;
assembly=System.Windows.Controls.Toolkit">

<chartingToolkit:Chart Name="GraficoDados" Loaded="GraficoDados_Loaded">

<chartingToolkit:BarSeries Title="Credito"

DependentValueBinding = "{Binding Credito}"

IndependentValueBinding = "{Binding Mes}"

IsSelectionEnabled="True" AnimationSequence="FirstToLast"

ItemsSource="{Binding}" />

<chartingToolkit:BarSeries Title="Debito"

DependentValueBinding = "{Binding Debito}"

IndependentValueBinding = "{Binding Mes}"

IsSelectionEnabled="True" AnimationSequence="FirstToLast"

ItemsSource="{Binding}" />

</chartingToolkit:Chart>

</UserControl>

Para testar o Projeto, vamos configurar para que o projeto SilverlightWcf.Web seja o primeiro a ser carregado(Janela Solution Explorer, clicar o botão direito do mouse e selecionar Set as StartUp Project). Depois vamos fazer a mesma coisa para o arquivo SilverlightWcfTestPage.html ou SilverlightWcfTestPage.aspx, vamos podem ser utilizados para testar a aplicação. Depois disso pressione F5 para executar o projeto, o gráfico exibido será igual ou parecido com o gráfico abaixo.

Abraços!