iniciando com silver light 4 e wcf ria services
DESCRIPTION
Iniciando com silverlight 4 e WCF por Alliston CarlosTRANSCRIPT
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.
Introdução ao Silverlight 4 e WCF RIA Services
2
Introdução ao Silverlight 4 e WCF RIA Services
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
Introdução ao Silverlight 4 e WCF RIA Services
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.
Introdução ao Silverlight 4 e WCF RIA Services
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)
Introdução ao Silverlight 4 e WCF RIA Services
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:
Introdução ao Silverlight 4 e WCF RIA Services
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
Introdução ao Silverlight 4 e WCF RIA Services
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:
Introdução ao Silverlight 4 e WCF RIA Services
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.
Introdução ao Silverlight 4 e WCF RIA Services
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:
Introdução ao Silverlight 4 e WCF RIA Services
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
Introdução ao Silverlight 4 e WCF RIA Services
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
Introdução ao Silverlight 4 e WCF RIA Services
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)
Introdução ao Silverlight 4 e WCF RIA Services
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:
Introdução ao Silverlight 4 e WCF RIA Services
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.
Introdução ao Silverlight 4 e WCF RIA Services
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
Introdução ao Silverlight 4 e WCF RIA Services
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)
Introdução ao Silverlight 4 e WCF RIA Services
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:
Introdução ao Silverlight 4 e WCF RIA Services
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:
Introdução ao Silverlight 4 e WCF RIA Services
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
Introdução ao Silverlight 4 e WCF RIA Services
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:
Introdução ao Silverlight 4 e WCF RIA Services
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)
Introdução ao Silverlight 4 e WCF RIA Services
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.
Introdução ao Silverlight 4 e WCF RIA Services
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
Introdução ao Silverlight 4 e WCF RIA Services
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
Introdução ao Silverlight 4 e WCF RIA Services
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
Introdução ao Silverlight 4 e WCF RIA Services
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:
Introdução ao Silverlight 4 e WCF RIA Services
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:
Introdução ao Silverlight 4 e WCF RIA Services
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}"
Introdução ao Silverlight 4 e WCF RIA Services
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
Introdução ao Silverlight 4 e WCF RIA Services
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
Introdução ao Silverlight 4 e WCF RIA Services
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.
Introdução ao Silverlight 4 e WCF RIA Services
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:
Introdução ao Silverlight 4 e WCF RIA Services
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
Introdução ao Silverlight 4 e WCF RIA Services
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.
Introdução ao Silverlight 4 e WCF RIA Services
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.
Introdução ao Silverlight 4 e WCF RIA Services
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.