iniciando com silver light 4 e wcf ria services

2010

Introdução ao Silverlight 4

e WCF RIA Services Uma aproximação básica das tecnologias

Alliston Carlos

Introdução ao Silverlight 4 e WCF RIA Services

1

Sumário Requisitos ...................................................................................................................................... 2

História da Web (HTML, Web 2.0 e AJAX, RIA) ............................................................................. 3

Silverlight 4 .................................................................................................................................... 4

O que é Silverlight? ................................................................................................................... 4

O que é XAML? .......................................................................................................................... 4

Criando o primeiro projeto com Silverlight ............................................................................... 4

Criando um projeto Navigation Application ............................................................................. 9

Iniciando com WCF Ria Services .................................................................................................. 13

Criando um projeto Business Application com Silverlight ..........Error! Bookmark not defined.


2


Requisitos Visual Studio 2010 (Para desenvolvimento com Silverlight 4) – Versão

Ultimate

http://www.microsoft.com/downloads/details.aspx?FamilyID=06a32b1c -

80e9-41df-ba0c-79d56cb823f7&displaylang=en

* Observação: Quem possui cadastro no CIEE pode baixar o Visual Studio 2010 Professional de

graça e FULL!

Silverlight 4 Developer Tools , Toolkit e WCF RIA Services

http://www.silverlight.net/getstarted/

* A partir deste ponto, assumo que as ferramentas de suporte e desenvolvimento estejam

devidamente instaladas e configuradas

http://www.microsoft.com/downloads/details.aspx?FamilyID=06a32b1c-80e9-41df-ba0c-79d56cb823f7&displaylang=en

http://www.microsoft.com/downloads/details.aspx?FamilyID=06a32b1c-80e9-41df-ba0c-79d56cb823f7&displaylang=en

http://www.silverlight.net/getstarted/


3

História da Web (HTML, Web 2.0 e AJAX, RIA) No início da década de 90, surgiu a World Wide Web, conhecida por páginas estáticas, HTML

puro e quase nenhum dinamismo nos browsers.

A medida que a Web foi se popularizando, a necessidade de recursos mais dinâmicos foi

crescendo, o que permitiu o surgimento de novos paradigmas e a aproximação dos sistemas

desktop.

Tal cenário favoreceu o surgimento do AJAX, o chamado Asynchronous Javascript And XML,

onde uma função Javascript executava uma operação, e por meio de callback os dados eram

manipulados.

Mas esse tipo de programação não era muito trivial, por isso surgiram controles como o

UpdatePanel e ScriptManager do ASP.Net 2.0, que mais tarde foram incorporados ao .Net 3.5

(anteriormente, estes componentes eram distribuídos através de um toolkit a parte para o

Visual Studio).

Mesmo com a aproximação da web com o desktop, através de AJAX, os programadores

buscavam algo mais próximo ainda da programação para ambientes desktop. Esta necessidade

favoreceu o surgimento do conceito chamado RIA – Rich Internet Applications.

Este conceito ganhou vários frameworks de desenvolvimento, entre eles o Adobe Flex e o

Microsoft Silverlight. São basicamente plugins da página onde executam, objetos dentro do

HTML.


4

Silverlight 4

O que é Silverlight? É a plataforma de RIA desenvolvida pela Microsoft. Trabalha com XAML e linguagens .Net (VB,

C# e F#), assim como o ASP.Net trabalha com HTML e linguagens .Net

O que é XAML? É a linguagem de marcação utilizada pelo Silverlight, a qual lembra as linguagens XML e HTML.

É responsável pelo design dos controles que irão aparecer na tela. Sigla de eXtended

Application Markup Language (Linguagem de Marcação Extendida para Aplicações). Pronuncia-

se “Zammel” e foi introduzida com o WPF – Windows Presentation Foundation

Criando o primeiro projeto com Silverlight Primeiro, devemos abrir o Visual Studio e selecionar a criação de um novo projeto Silverlight.

Teremos a tela a seguir:

Figura 1. Novo Projeto Silverlight

Podemos notar que temos vários templates de projetos, todos referentes ao Silverlight:

Silverlight Application: Uma aplicação comum, sem facilidades para acesso a dados,

nem navegação. Recomendada para animações, aplicações simples, etc.

Silverlight Class Library: Biblioteca de classes para o Silverlight, onde é possível criar

somente controles customizados, sem execução direta (F5)


5

Silverlight Business Application: Aplicação Line of Business (LOB), onde temos páginas

navegáveis e uma aplicação mais voltada para acesso a dados do Banco

Silverlight Navigation Application: Mesmo que o Business Application, somente

diferenciando pela falta de configurações voltadas para acesso a Dados

WCF RIA Services Class Library: Biblioteca para criação de controles de expansão do

WCF RIA Services

Escolhendo o primeiro tipo, teremos então a janela a seguir:

Figura 2. New Silverlight Application

Como o Silverlight é apenas um objeto dentro de uma página Web, nos é solicitado a criação

de um novo Web Site, para hospedagem. Temos as opções de configuração, incluindo se

desejamos habilitar o RIA Services. Selecionando as opções padrão e clicando OK, teremos

nosso primeiro contato com o Silverlight:


6

Figura 3. MainPage.xaml

Reparando na imagem acima, veremos duas áreas distintas: Uma de Design (superior) e outra

de XAML (inferior).

Nesta tela é possível customizar a aparência da nossa janela (chamada MainPage.xaml), seja

arrastando controles para ela, ou digitando-os diretamente no XAML.

Olhando na parte XAML, verifiquem que teremos as seguintes declarações:

Figura 4. XML Namespaces

Estes são os XML Namespaces, onde declaramos os namespaces que iremos utilizar na tela. É

um recurso praticamente igual ao using do C#.

Para que possamos adicionar um controle (TextBox) na tela, além de arrastar da Toolbox para

a tela, podemos escrever sua Tag diretamente no XAML. Esta Tag ficaria assim:

<TextBox/>

Figura 5. Tag TextBox

Mas como esta Tag cobriria toda a superfície da tela, devemos ajustá-la para o tamanho

desejado. Para isso, redimensionamos a TextBox como qualquer outro controle, em qualquer


7

tecnologia (ASP.Net, WPF, WindowsForms) e podemos posicioná-la em qualquer lugar, como

aplicações Windows Client (a principal vantagem das aplicações RIA) XAML

Após o redimensionamento, podemos reparar que existem certas linhas ligando a TextBox às

bordas do elemento Grid. Eles servem para indicar qual será o comportamento do controle em

caso de redimensionamento da página (alteração de resolução ou tamanho do navegador, por

exemplo). Clicando em cima das linhas, elas serão apagadas, indicando que não existirá mais

vinculo entre aquele lado e sua borda respectiva:

Figura 6. TextBox alinhada à esquerda e no canto superior.

Não esquecendo do XAML, o resultado da TextBox acima será parecido com o seguinte:

Figura 7. XAML da TextBox anterior

Vale notar também que suas propriedades podem ser customizadas através da janela de

Propriedades do Visual Studio:


8

Figura 8. Propriedades da TextBox

Verificando que esta TextBox não possui nome, podemos clicar no local onde está escrito

<no name> e dar um nome à nossa TextBox, além de definir outras propriedades à escolha.


9

Criando um projeto Navigation Application O Navigation Application é um novo tipo de projeto, que foi incluido no Silverlight 3. É um

template parecido com o que temos para o ASP.Net Web Forms, onde existem páginas ao

invés de janelas.

De cara, após sua criação (exatamente igual à criação do projeto anterior), nos deparamos com

uma tela, parecida com um Web site qualquer. Executando-a, temos a seguinte tela:

Figura 9. Navigation Application rodando

Realmente é um Web site comum, apenas difere por ser criado em Silverlight!

Repare também no endereço da página, mais precisamente na parte SilverlightApplication2TestPage.aspx#/Home. Esta URL significa que:

O Silverlight está hospedado na página (ASP.Net) SilverlightApplication2TestPage.aspx

Dentro desta página, o Silverlight aponta para a página (Silverlight) Home Desta forma, é possível, por exemplo, enviar um link para alguém apontando diretamente para

a página de About (Sobre), ao invés de enviar o link raiz do Web site e o usuário ir procurando

onde certa informação está contida.

Mas e esta página SilverlightApplication2TestPage.aspx? Ela está contida no projeto Web, que

no nosso caso se chama SilverlightApplication2.Web.

Navegando por ele, dentro da pasta ClientBin, iremos encontrar o nosso pacote Silverlight compilado, chamado SilverlightApplication2.xap. E como eu disse anteriormente que o Silverlight é um objeto inserido dentro de qualquer página HTML, vejam como ele está na página aspx:


10

Figura 10. Silverlight hospedado no ASP.Net/HTML

Mesmo que este seja o código do projeto ASP.Net, no HTML será exibido o mesmo código.

Voltando ao projeto Silverlight, vamos analisar o XAML da MainPage.xaml:

Figura 11. Trecho da MainPage.xaml no Navigation Application

Neste trecho, temos os controles responsáveis pelo menu de navegação da nossa aplicação,

mais especificamente os controles HyperlinkButton. Eles funcionam exatamente como links do

HTML/ASP.Net, e neste caso são separados por um retângulo simples.

O mais intrigante é a propriedade NavigateUrl, onde definimos cada página que estará

vinculada ao HyperlinkButton. Caso criemos a página Contato, é através desta propriedade que

iremos criar um link para ela. Lembrando que as páginas criadas devem estar dentro da pasta

Views do projeto Silverlight, para que sejam reconhecidas da maneira acima.

Exercício: Criar uma página Silverlight e referencia-lá no menu

A página deve se chamar Contato

Deve conter um Label com conteúdo “E-mail”

Deve conter um TextBox chamado txtEmail


11

As capacidades do Silverlight

Silverlight 3

Antes de iniciarmos com o WCF Ria Services, é interessante mostrarmos o que o Silverlight

pode fazer. Temos uma aplicação de exemplo (demo) que o pessoal de dentro da Microsoft

desenvolveu, voltada para hospitais. Teoricamente, é uma aplicação simples, não fosse sua UI

(User Interface) amplamente customizada.

Foi criada ainda na versão 3 do Silverlight, mas já mostra o poder que o Silverlight tem de

customizar interfaces (acessível pelo endereço:

http://www.mscui.net/patientjourneydemonstrator/PrimaryCare.htm)

Figura 12. Microsoft Health CUI

http://www.mscui.net/patientjourneydemonstrator/PrimaryCare.htm


12

Silverlight 4

Com o Silverlight 4, temos o exemplo de uma aplicação acessando a Webcam local, aplicação

que o ScottGu (http://weblogs.asp.net/scottgu) apresentou no MIX10, em Las Vegas. A

aplicação inteira (com código-fonte) pode ser baixada em

http://weblogs.asp.net/scottgu/archive/2009/12/16/silverlight-4-demos-from-my-pdc-

keynote-now-available.aspx, contando com outras aplicações também interessantes

Figura 13. Live Web Cam (por ScottGu)

http://weblogs.asp.net/scottgu

http://weblogs.asp.net/scottgu/archive/2009/12/16/silverlight-4-demos-from-my-pdc-keynote-now-available.aspx

http://weblogs.asp.net/scottgu/archive/2009/12/16/silverlight-4-demos-from-my-pdc-keynote-now-available.aspx


13

Iniciando com WCF Ria Services

Primeiro: O que é WCF RIA Services? É um framework a parte que disponibiliza alguns itens novos ao template do Silverlight,

permitindo que o acesso a dados seja melhor aproveitado. Antes conhecido como .Net RIA

Services, na versão para Silverlight 4 começou a ser chamado de WCF Ria Services (também

chamado de RIA Services)

Como utilizar o RIA Services com o Silverlight 4 Existem várias maneiras, mas a mais fácil e simples é utilizando o template de projeto Business

Application.

Para isso, vamos no menu File -> New -> Project, e selecionamos a opção Silverlight Business

Application

Figura 14. Novo projeto Business Application (RIAExample)

Este template, diferente dos outros que vimos, não mostra nenhuma janela de opções antes

da sua criação, e já vem com a estrutura a seguir:


14

Figura 15. Estrutura do Business Application

Por outro lado, este template é muito parecido com o Navigation Application. Uma diferença

significante esta na inclusão da pasta Assets, que irá cuidar dos recursos (mensagens e estilos

de layout) do sistema. Dentro desta pasta, está a pasta Resources, que por sua vez contém um

arquivo importante: ApplicationStrings.resx. Será este arquivo quem irá cuidar das nossas

strings.


15

Figura 16. Arquivo de strings

Na linha do recurso ApplicationName, vamos substituir o valor “Application Name” para “RIA

Example”, e executar nossa aplicação. Veremos que na barra do menu, onde anteriormente

estava “Application Name”, agora contém “RIA Example”

Figura 17. Janela após a mudança de nome

Além de mudar os valores já existentes, podemos armazenar qualquer string que será utilizada

em nosso sistema neste arquivo, seguindo assim boas práticas de programação (evitando ao

máximo a inclusão de strings diretamente no código). Para utilizarmos tal recurso via código

(C#), devemos apenas utilizar o código a seguir (lembrando que é necessária uma referência ao

namespace RIAExample no nosso caso):

Figura 18. Utilizando o ApplicationName diretamente no código


16

Criando a camada de Dados Neste caso, utilizaremos o Entity Framework 4 como mapeamento objeto-relacional (ORM). De

longe, ele é o que mais se adapta ao RIA Services.

Como o Silverlight não acessa o banco de dados diretamente (dai a necessidade do RIA

Services), o nosso modelo do banco será criado no projeto Web, dentro da pasta Models.

Para isto, iremos criar um novo item (Add/New Item) do tipo ADO.Net Entity Data Model

(chamado Compras.edmx):

Figura 19. Novo Entity Data Model

Na primeira tela do assistente, teremos duas opções: Generate From Database e Empty Model.

Escolhendo a opção Generate From Database, já iremos ter o modelo do nosso banco já criado

(banco Compras). Caso quiséssemos criar o banco diretamente pelo Visual Studio, isto seria

possível através da segunda opção (Empty Model)


17

Figura 20. Escolhendo o conteúdo do modelo

Na próxima tela, escolheremos a string de conexão que iremos utilizar. Temos a opção de

armazená-la no Web.config ou não, e ainda especificar o nome da string de conexão, caso eu

deseje mudar. O nome varia de acordo com o banco selecionado, mas geralmente fica

“<Nome_do_banco>Entities”. No meu caso, ficará assim:


18

Figura 21. String de conexão

Seguindo com o assistente, é hora de escolhermos as tabelas, views e stored procedures que

iremos utilizar no modelo. Além destas escolhas, temos outras propriedades:

Pluralize ou Singularize generated object names: Esta propriedade define como será o

nome de cada entidade gerada. Caso a tabela mapeada se chame Produto, e esta

opção esteja marcada, a entidade resultante será chamada Produtos. Caso a tabela já

esteja chamada de Produtos, com esta opção marcada a entidade será chamada

Produto.

Include Foreign Key columns in the model: Define se as chaves estrangeiras serão

incluídas na entidade filha.

Model Namespace: Namespace do modelo

Deixando as propriedades como estão, e selecionando apenas as tabelas, teremos o resultado

a seguir:


19

Figura 22. Escolhendo os objetos do banco

Após o Finish, o modelo será gerado como um espelho do banco (note que não há associações,

pois este comportamento é proposital neste caso. Caso hajam associações, elas aparecerão

normalmente no modelo:

Figura 23. Entidades geradas a partir do banco


20

Criando o DomainService Com o modelo gerado, podemos encarar de verdade o RIA Services! Para isto devemos

obrigatoriamente efetuar um Build/Rebuild da solução, e em seguida, iremos adicionar um

novo item no nosso projeto Web, desta vez na pasta Services. O item será o Domain Service

Class.

Figura 24. Domain Service Class

Chamando-o de ComprasDS.cs, teremos a seguinte tela de configuração:


21

Figura 25. Adicionando um novo DomainService

Nesta tela, temos algumas propriedades que devemos ficar atentos:

Enable Client Access: Deve ficar marcado, caso um cliente web (Silverlight ou ASP.Net)

precise acessá-lo

Available DataContext/ObjectContext classes: Mapeamentos disponíveis para acesso

Generate associated classes for metadata: Cria classes de metadados referentes ao

mapeamento

Enable editing: define se as propriedades da entidade serão somente leitura

(desmarcado) ou não (marcado)


22

Figura 26. Código gerado após a criação do DomainService

Na figura acima, temos o código que foi gerado pelo DomainService. Notem que são as

operações CRUD (Create-Read-Update-Delete) básicas. Vamos trabalhar com estas operações

padrão, mas é importante ressaltar que elas são amplamente customizáveis.


23

Acessando dados com Silverlight

Listagem

Voltando ao XAML, devemos criar uma nova tela de Produto no nosso projeto Silverlight.

Adicionamos um novo item dentro da pasta Views, chamando-a de ProdutoListar.xaml. Ela

será criada sem nenhum controle, apenas com um contâiner Grid, onde iremos inserir nossos

controles desejados.

Após a criação da página, é importante adicionarmos um link no menu principal que possa

chamá-la. Abrindo a página MainPage.xaml, teremos, como no template de projeto Navigation

Application, os menus que serão exibidos.

Para facilitar o trabalho de inserção do menu, basta copiarmos um link já existente e substituir

as propriedades já criadas pelas que queremos exibir, de maneira que a tela fique da seguinte

forma:

Figura 27. Links para navegação através das páginas

Vejam vocês que, no Link3, referente à página ProcessoList, eu tenho na propriedade Content o vínculo com o valor da propriedade ApplicationStrings.ProcessoListarPageTitle. Mas dentro

deste arquivo de recursos (lembram dele?) não há nenhuma propriedade assim. Por isto, ela

deve ser definida dentro deste arquivo, que está contido em

Assets/Resources/ApplicationStrings.resx


24

Figura 28. Propriedade do nome da página

Com isto, a referência à tela está concluida. Porém, antes da inserção dos controles, devemos

adicionar as referencias para que sejam utilizados. Primeiro, as DLLs no projeto, e em seguida,

o código XAML que deverá ser aplicado no topo da página:

Figura 29. DLLs que deverão ser adicionadas


25

Figura 30. Código final de referências no XAML

Feito isto, podemos adicionar os controles que irão fazer o acesso a dados para a nossa tela.

O primeiro deles será o DataGrid. É possível arrastá-lo para a tela de maneira a criar o controle

diretamente da toolbox, embora ele já gere várias propriedades que são desnecessárias. Por

enquanto, deveremos deixar a tag do DataGrid o mais simples possível, da seguinte maneira:

Figura 31. DataGrid dtgListagem

Para associarmos o controle aos dados que serão retornados para a tela, devemos ter um

controle do tipo DomainDataSource. Ele não é um elemento visual, e não é exibido na Toolbox

por padrão. Por isso, vamos adicioná-lo diretamente no XAML, ficando da seguinte maneira

(DETALHE: é importante que o DomainDataSource fique imediatamente acima do DataGrid):

Figura 32. DomainDataSource


26

Feito isto, basta adicionar e definir a propriedade ItemsSource no DataGrid referenciando o

DomainDataSource e o bind (vinculação)será feito:

Figura 33. Novo DataGrid

E assim a tela de Listar estará pronta para exibir registros no DataGrid! Basta executar a aplicação, clicar na tela Produtos e os dados serão exibidos conforme o banco de dados:

Figura 34. Listagem de dados no Silverlight

Ordenação

Da maneira que fizemos, o Grid vai exibir todas as colunas que estão na tabela do banco. Mas suponhamos que o ProdutoID não seja desejado, podemos configurá-lo para que exiba somente as colunas desejadas. Adicionamos a propriedade AutoGenerateColumns="False" No DataGrid, e em seguida, as colunas que devemos exibir, de acordo com o código abaixo:

Figura 35. DataGrid mostrando somente as colunas desejadas

Com esta parte concluída, podemos seguir para a ordenação, caso tivéssemos várias colunas.

Mas ao contrário do que se pensa, estes dados não serão ordenados no grid, e sim

diretamente da fonte: o DataSource.

O objeto DomainDataSource contém uma propriedade chamada SortDescriptors, responsável

justamente pela ordenação dos registros. Ela é uma coleção de objetos, por isso aceita mais do

que uma ordenação, respeitando a ordem com que foram inseridos.

Para adicionar um SortDescriptor no DomainDataSource, devemos fazê-lo da seguinte forma:


27

Figura 36. SortDescriptor de Nome

Desta forma, os dados aparecerão ordenados de forma crescente em relação à coluna Nome.

Paginação

Temos também uma forma de aplicar paginação no nosso DataGrid, de maneira simples. Para

conseguirmos esta abordagem, devemos incluir um controle do tipo DataPager, abaixo do grid

(este pode ficar em qualquer lugar da tela, mas por questões estéticas, vou colocá-la abaixo do

grid).

Apenas adicionando a tag <sdk:DataPager Name="dtPager"/> no código XAML, o controle já

fica na tela, porém ocupando o espaço inteiro, o que irá atrapalhar a interação do usuário com

o grid, já que o DataPager está por cima dele. Para resolvermos esta situação, basta

redimensionarmos, tanto o DataGrid quanto o DataPager, deixando-os da seguinte forma:


28

Figura 37. DataPage e DataGrid

Visualmente, o controle já está pronto. Mas se executarmos a aplicação neste ponto, os dados

virão da mesma maneira. Para que a paginação seja concluída com sucesso, devemos executar

mais algumas refatorações de código.

Primeiro: o DataPager precisa de dados para paginar. Isto é conseguido através do bind na Tag

Source="{Binding Data, ElementName=ProdutosDataSource}", o que faz com que o

DataPager se comunique com nosso DataSource.

Segundo: o DataPager precisa saber quantos dados vai exibir de cada vez. Utilizando a tag PageSize="2" podemos definí-lo para que exiba somente dois registros de cada vez, ou outro valor à escolha. Assim, chegamos ao código final do DataPager:

Figura 38. Resultado do DataPager

Dica: para que o Serviço carregue somente a quantidade de registros especificada no DataPager por vez, é importante definirmos também esta propriedade no ProdutosDataSource, com o seguinte binding: LoadSize="{Binding Path=PageSize, ElementName=dtPager}"


29

Filtro

Outro recurso que podemos aplicar na hora da listagem de dados, é o filtro. Cada filtro é

aplicado diretamente no DataSource, assim como SortDescriptor, embora no caso do filtro seja

o FilterDescriptor. Podem haver vários FilterDescriptors no DataSource, sendo fixos ou

variáveis. No caso dos variáveis, eles dependerão de controles na tela, ou de operações

realizadas pela lógica de negócio. Neste tutorial, vou abordar somente os filtros através de

controle.

Com isso, é importante adicionarmos uma TextBox no topo da nossa tela, chamando-a de

txtNome:

Figura 39. Layout final da tela de Listar

No ProdutosDataSource, abaixo da tag </riaControls:DomainDataSource.SortDescriptors> adicionamos o seguinte código:

Figura 40. Trecho de FilterDescriptors


30

Notem que o valor recebe um bind do tipo TwoWay, que diz ao ProdutosDataSource que onde

houver uma mudança, será refletida em outro lugar. Estes tipos de bind e outras propriedades

são mais complexas, então vou passar por esta parte. Caso queiram conhecer a fundo como é

o bind do XAML, recomendo a leitura do Traning Kit da certificação 70-502 de WPF 3.5. Não se

preocupem, é XAML, o que significa ser comum a WPF e Silverlight.

Na hora da execução da aplicação, podemos notar que, ao digitar a letra “b”, por exemplo, os

registros Bola e Notebook serão retornados, pois no FilterDescriptor temos a propriedade

Operator, definida como “Contains”. Outros valores terão resultados diferentes na busca.

Figura 41. Filtro de Nome em ação


31

Inserindo um registro com Silverlight

Apresentando a ChildWindow

Com o Silverlight 3, foi implementado um novo tipo de tela, a ChildWindow. Com ela, é

possível criar uma tela de aviso esmaeçendo o fundo que ela não ocupa, por exemplo. E é com

ela que iremos implementar a operação de inserção de um registro no banco de dados.

Para isto, adicionamos um novo item na pasta Views do tipo ChildWindow. Iremos chamá-la de

ProdutoEditar.xaml:

Figura 42. Nova ChildWindow

E claro que, para chamarmos esta nova tela, devemos implementar algum controle na tela de

listar que faça esta chamada. E pela primeira vez neste tutorial, iremos utilizar algum código

C#. Basta implementarmos um botão, e no evento Click, adicionarmos o código a seguir: new ProdutoEditar().Show();

Mais uma vez iremos adicionar referências na tela. Serão elas:

Figura 43. Referências da tela de Edição

A diferença é que desta vez não iremos adicionar referências físicas ao projeto, pois elas já

estão adicionadas.


32

Seguindo com o desenvolvimento da tela, iremos adicionar um controle do tipo DataForm à

tela. Este controle será responsável pela inserção de um novo objeto no banco, pois ele se

comunica diretamente com o DataSource.

A tag do DataForm ficará desta forma:

Figura 44. DataForm resultante

Na propriedade CurrentItem temos o binding vinculando o objeto Produto da classe

pgProdutoEditar. Isto se faz necessário para que vinculemos o objeto Produto ao DataForm, de

maneira que ele exiba os dados.

Como ainda não criamos este objeto, vamos definí-lo no code-behind. Primeiro é necessário

dar nome à classe XAML, adicionando a propriedade x:Name="pgProdutoEditar" na

declaração da classe em XAML, resultando na imagem a seguir:

Figura 45. Definição da classe em XAML

Indo para o code-behind, devemos criar a propriedade Produto no arquivo .cs, e inicializá-la no

construtor:

Figura 46. Criando o objeto de inserção no code-behind

Agora, ao executarmos a aplicação e clicarmos no botão Novo, a tela de edição será aberta

com os campos da tabela prontos para a edição, da maneira mais simples:


33

Figura 47. Child Window com os controles de edição

Vale notar duas coisas:

O ProdutoID está sendo exibido, mesmo sendo uma coluna do tipo auto-incremento.

Não é possível editar o campo ProdutoID

Estes comportamentos ocorrem pois o DataForm possui a propriedade AutoGenerateFields

como true. Caso quiséssemos customizar os itens a exibir, esta propriedade viria como false e

editaríamos o template de edição do controle. Mas fica pra depois :)

Para concluirmos o processo de inclusão, peço também que alterem o construtor da janela de

Edição para o código abaixo, inserindo ainda uma nova propriedade. A explicação virá um

pouquinho mais a frente:

Figura 48. Novo construtor/propriedade


34

Além disto, na classe de listagem, para lidarmos com o novo construtor, devemos passar um

objeto do tipo DomainDataSource para a tela de edição, já que ele será utilizado lá na frente,

ficando como a seguir:

Figura 49. Nova chamada da janela ProdutoEditar

Mas porquê eu pediria uma alteração tão importante nessa altura do campeonato???

Simplesmente porque é o DomainDataSource quem faz todas as operações com o banco,

através do serviço WCF oculto no arquivo ComprasDS! E desde que não existe um

ProdutosDataSource na janela de edição, devemos vincular o existente na tela de listagem.

Até funcionaria se criássemos um novo na própria tela, mas os dados não seriam mostrados de

imediato no Grid. Teria que ser feita uma nova consulta no banco.


35

Fazendo a inserção

Primeiro, devemos remover os botões da tela. O DataForm trará ambos para nós, então não

há necessidade de duplicarmos estes botões. Basta remover as duas tags Button presentes no

final da tela. Terminada esta parte, adicionamos a propriedade AutoCommit="False" no

DataForm. Criada a “casca” da tela, partiremos pra implementar sua funcionalidade de

inclusão.

Para isto, vamos adicionar um evento no DataForm, do tipo EditEnded. Como o nome já diz,

ele será disparado quando o DataForm sair do modo de edição, ao clicarmos no botão OK.

Como este evento também é dispado no botão Cancel, deveremos fazer uma validação nele

pelo code-behind, verificando qual dos dois botões foi acionado:

Figura 50. Validação de operações no EditEnded

Caso a EditAction do DataForm seja Commit, devemos incluir o registro no banco. O que se faz

de maneira fácil através do código:

Figura 51. Inserindo o registro no banco

Com isto, podemos procurar o novo registro na tela de Listar e ele será exibido, sem que haja

alguma outra consulta explícita no banco neste tempo.


36

Considerações finais Embora este tutorial tenha tido o objetivo de ensinar as operações de Select e Insert através

do Silverlight e RIA Services, as duas outras operações (Delete e Update) não são tão difíceis

assim. No Update, ao invés de criar uma nova entidade no construtor, seria passada a entidade

selecionada da grid. Já no Delete, apenas um

ComprasDomainContext.Produtos.Remove(produto); seguido do SubmitChanges seria

suficiente.

Recomendo que a operação de delete seja efetuada já na tela de listar, de modo a facilitar a

navegabilidade do usuário. E também o código que será feito.

Espero que futuramente eu possa escrever a sequência deste tutorial, ensinando também

estas duas operações restantes.

iniciando com silver light 4 e wcf ria services

Documents