conceitos e prtica
H algum tempo atrs publiquei um artigo introdutrio sobre o WPF - Windows Presentation
Foundation - e depois me calei a respeito. De l para c a ferramenta amadureceu e eu fiquei de
publicar mais sobre a vinculao de dados com WPF.
Uma aplicao WPF composta por um conjunto de pginas ou janelas XAML, e o seu respectivo
cdigo.
O WPF uma nova tecnologia com foco na apresentao grfica permitindo a criao de interfaces
visuais mais sofisticadas usando recursos de ltima gerao, uma alternativa ao Windows Forms.
(Eu disse alternativa no substituio embora creio que o Windows Forms j deu o que tinha que
dar) .
Nota: Para criar interfaces ricas de alta qualidade usando WPF voc vai precisar conhecer muito
bem XAML e tambm ser um bom design grfico. Alm disso vai precisar conhecer outras
ferramentas como o SilverLight e o Expression Blend da Microsoft para poder estender os
recursos oferecidos pelo Visual Studio. Nas apresentaes sobre WPF so mostrados exemplos de
cubos e paletas de cores mas ningum usa isso no dia a dia. Na prtica se trabalha com aplicaes
com acesso a dados o que requer tambm o conhecimento do databinding.
Recursos e objetivos do WPF:( http://msdn.microsoft.com/pt-br/library/cc564903.aspx )
O WPF veio para integrar Vdeo, Animao, Efeitos em 3D e texto, tanto Web como no
desktop;
O XAML foi criado para facilitar que outras ferramentas criem contedo WPF. Voc
pode usar o XAML ou codificar via cdigo de programa no code-behind;
baseado em composio. (No WPF voc pode inserir controles dentro de controles,
compondo um novo);
A aparncia foi separada da lgica. Quando criamos um controle em WPF ele no tem
aparncia e sim eventos e propriedades de comportamento. A aparncia de um
controle pode ser determinada atravs de Templates e um template pode ser
aplicado a diversos controles.
Flexibilidade da interface, que pode ser independente do cdigo: podemos ter duas
apresentaes completamente diferentes compartilhando o mesmo comportamento;
Neste artigo eu vou mostrar como criar uma aplicao WPF usando a vinculao de dados onde irei
mostrar como acessar e efetuar as tarefas bsicas de manuteno de dados (CRUD); as operaes
para incluir, excluir, alterar, consultar e navegar nos dados. Eu no vou portanto criar um design
grfico elaborado para interface , o que seria um dos motivos para usar o WPF, vou mostrar os
conceitos para que voc possa efetuar a vinculao de dados usando WPF.
Um uso tpico de vinculao de dados colocar o servidor ou a configurao local dos dados em
formulrios ou outros controles. No WPF esse conceito expandido para incluir a vinculao de
uma ampla variedade de propriedades para uma variedade de fontes de dados. No WPF, as
propriedades de dependncia dos elementos podem ser vinculados a objetos (incluindo objetos ou
associados com os servios da Web e propriedades da Web) e aos dados.
Independente de qual elemento voc est associando e a natureza de sua fonte de dados, cada
associao segue o modelo ilustrado na seguinte figura:
Como ilustrado pela figura acima, a vinculao de dados essencialmente a ponte entre a ligao
de destino e a sua ligao de origem. A figura demonstra os seguintes conceitos da vinculao de
dados:
Em geral, cada ligao possui quatro componentes:
1.
2.
3.
4.
Por exemplo, se voc deseja vincular o contedo de um TextBox para a propriedade Name um
objeto Funcionrio, o objeto de destino o TextBox a propriedade de destino a propriedade
Text, o valor a ser usado Name (Nome) e o objeto de origem objeto Funcionrio.
A propriedade de destino deve ser uma propriedade de dependncia. A maioria das propriedades
UIElement (a classe base da WPF para construo e representao de elementos) so propriedades
de dependncia e a maioria das propriedades de dependncia , exceto aquelas somente leitura,
do suporte a vinculao de dados por padro.
Embora no especificado na figura, deve ser observado que o objeto de vinculao de origem no
restrito a ser um objeto CLR. A WPF suporta a associao de dados no formulrio de objetos CLR e
XML .
Afinal, na WPF o que destino e que fonte ?
Na WPF , voc usa o data binding para estabelecer a conexo entre as
propriedades de dois objetos. Neste relacionamento , um objeto
referenciado como sendo a fonte e o outro como sendo o destino. Em um
cenrio tpico, seu objeto fonte o objeto que contm os dados e o seu
objeto fonte o controle que pretende exibir os dados.
e/ou a partir de Ligao de origem para o Ligao de destino;Por exemplo, o seu TextBox obtm e
exibe o contedo atualizado com as alteraes na ligao de origem se a origem de ligao fornece
as notificaes adequadas.
Voc pode querer que sua aplicao permita aos usurios modificar os dados e propag-los de volta
para o objeto fonte; ou voc no quer permitir que usurios atualizem a fonte de dados. Voc pode
controlar isso definindo a propriedade Mode() do seu objeto vinculado. A seguinte figura ilustra os
diferentes tipos de fluxo de dados:
TwoWay: Tanto a origem como o destino (no caso a interface) se atualizam. Ideal para
edies. Caso a origem sofra alterao por alguma rotina interna do sistema, e no
pela interveno do usurio junto interface destino UI), a interface ser atualizada.
Vamos agora definir uma fonte de dados selecionando o menu Data-> Add New Data Source;
Na janela do assistente selecione DataBase e clique em Next>;
Na prxima janela selecione uma conexo com o banco de dados Northwind.mdf e clique em
Next>;
Nota: Se voc no possuir a conexo criada clique no boto New Connection... e defina a
conexo para o Northwind.mdf
Observe que temos duas vises: a do designer e a do arquivo XAML e que por padro o formulrio
WPF apresenta a classe Window1 e o componente Grid que define o leiaute.
Para definir o leiaute vamos criar uma linha (Row) e duas colunas(Column). Para fazer isso voc
apenas posiciona o mouse no Grid onde deseja criar a diviso e clica ajustando o tamanho;
Note que na ToolBox temos os controles WPF que poderemos arrastar e soltar no designer. Note
que temos uma quantidade de menor de controles do que nas aplicaes Windows Forms;
Vamos ento arrastar e soltar oito Button no Designer conforme o leiaute abaixo e definir a sua
propriedade Name e Content (A propriedade Content idntica a propriedade Text dos controles Windows
Forms) conforme a seguir:
1.
2.
3.
4.
5.
6.
7.
8.
Name =
Name =
Name =
Name =
Name =
Name =
Name =
Name =
Observe que quando voc seleciona um controle surgem setas e indicaes de tamanho e altura do
mesmo:
As setas servem para alterar o tamanho e tambm para ancorar o
controle. Para isso arraste o mouse sobre a posio da seta e quando
o cone de uma mo aparecer clique na seta para ancorar o
controle.
Note tambm que a representao esta sendo gerada no arquivo
XAML.
Vamos incluir dois controles StackPanel em cada uma das colunas criadas no Grid e expandir o
controle at o tamanho mximo das colunas;
Agora vamos definir a propriedade Content do controle Label para indicar o nome de cada um dos
campos que vamos exibir ou seja: Cdigo, Nome, Descrio.
Em cada um dos controles TextBox vamos efetua as seguintes definies:
Note que voc pode acompanhar na janela Document Outline a hierarquia de controles no WPF;
Agora temos que efetuar a vinculao de cada um dos controles TextBox com os dados. Para isso
vamos efetuar a definio no arquivo XAML usando notao especial para o binding;
Observe que definimos os nomes dos campos com os quais desejamos vincular os controles e no
caso do TextBox txtCategoryID temos a definio do Mode como OneWay pois o campo somenteleitura.
Text="{Binding Path=nomedocampo, Mode=modofluxodados }"
Agora vamos definir o cdigo para carregar os dados no code-behind. Clique com o boto direito
sobre o designer e selecione View Code;
Usar a propriedade Source a forma mais simples. Porm, se mltiplas propriedades esto
vinculadas a mesma origem, considera utilizar a propriedade DataContext..
A propriedade DataContext fornece uma forma conveniente de estabelecer um escopo de dados
quando voc tem muitos controles e voc quer vincular todos a mesma origem.
Dessa forma j podemos executar a aplicao que veremos o databinding em ao exibindo os
dados da tabela Categorias no TextBox;
Agora s temos que implementar nos eventos dos controles Button para navegao usando os
mtodos para navegao oferecidos pela CollectionView.
Clicando duas vezes no boto de navegao podemos implementar o cdigo para navegao com a
ajuda do intellissense:
Me.view.MoveCurrentToPrevious()
End If
End Sub
Private Sub btnProximo_Click(ByVal sender As System.Object, ByVal e As
System.Windows.RoutedEventArgs) Handles btnProximo.Click
If Me.view.CurrentPosition < Me.view.Count - 1 Then
Me.view.MoveCurrentToNext()
End If
End Sub
Private Sub btnUltimo_Click(ByVal sender As System.Object, ByVal e As
System.Windows.RoutedEventArgs) Handles btnUltimo.Click
Me.view.MoveCurrentToLast()
End Sub
Note que a lgica a mesma usada para navegao com o BindingNavigator pois temos mtodos
parecidos, vejamos os principais:
Na continuao deste artigo vou mostrar a implementao do cdigo para as operaes de Incluir,
alterar e excluir dados.
Acompanhe a continuao em : WPF - Usando a vinculao de dados, conceitos e prtica
II
Eu sei apenas VB .NET mas eu gosto...
Referencias:
http://msdn.microsoft.com/pt-br/library/ms752347.aspx
VB 2008 - TableAdapterManager
Aplicaes WPF
O que temos que fazer agora mostrar como efetuar as operaes para incluir , excluir , cancelar
e salvar os registros da tabela Categories no banco de dados.
Vamos comear com a incluso de um novo registro na tabela. Para isso inclua o seguinte cdigo no
evento Click do boto Novo:
Private Sub btnNovo_Click(ByVal sender As System.Object, ByVal e As
System.Windows.RoutedEventArgs) Handles btnNovo.Click
Dim linha = Me.categoriaDados.Categories.NewCategoriesRow
linha.CategoryName = "[Novo]"
Me.categoriaDados.Categories.AddCategoriesRow(linha)
Me.view.MoveCurrentToLast()
End Sub
Aqui no h segredo algum, Estamos incluindo um novo registro no dataset tipado usando a
instncia da classe CategoriesRow e atribuindo uma nova linha para em seguida preencher com os
dados que viro formulrio e no final inclumos a linha na coleo de linhas. Estamos movendo o
ponteiro para o ltimo registro que ser a linha includa.
Para excluir um registro temos o seguinte cdigo no evento Click do boto Excluir:
Private Sub btnExcluir_Click(ByVal sender As System.Object, ByVal e As
System.Windows.RoutedEventArgs) Handles btnExcluir.Click
If Me.view.CurrentPosition > -1 Then
If MessageBox.Show("Voc deseja excluir estas informaes ? ", Me.Title,
MessageBoxButton.YesNo) = MessageBoxResult.Yes Then
Dim linha = CType(Me.view.CurrentItem, System.Data.DataRowView).Row
linha.Delete()
MsgBox("Os dados foram excludos.")
End If
End If
End Sub
Neste cdigo verificamos se a linha a ser excluda uma linha vlida e exibimos uma mensagem
para confirmao do usurio.
Em seguida fazemos uma coero forada (cast) da linha atual (view.CurrentItem) para
System.Data.DataRowView e em seguida usamos o mtodo Delete para excluir a linha.
Vejamos agora o cdigo para cancelar uma operao que ser includo no evento Click do boto
Cancelar:
Private Sub btnCancelar_Click(ByVal sender As System.Object, ByVal e As
System.Windows.RoutedEventArgs) Handles btnCancelar.Click
If Me.categoriaDados.HasChanges Then
If MessageBox.Show("Voc deseja cancelar as alteraes feitas ? ", Me.Title,
MessageBoxButton.YesNo) = MessageBoxResult.Yes Then
Me.categoriaDados.RejectChanges()
End If
End If
End Sub
Primeiro verificamos se ocorreu uma alterao no DataSet usando o mtodo HasChanges, este
mtodo retorna um valor indicando se o DataSet sofreu alterao pela incluso , excluso ou
modificao das linhas.
Em caso positivo usamos o mtodo RejectChanges() do DataSet tipado que desfaz as mudanas
feitas no dataset desde que ele foi criado ou deste a ltima vez que o mtodo AcceptChanges foi
chamado.
Para concluir temos o cdigo para salvar os dados includo no evento Click do boto Salvar:
Private Sub btnSalvar_Click(ByVal sender As System.Object, ByVal e As
System.Windows.RoutedEventArgs) Handles btnSalvar.Click
Try
If Me.categoriaDados.HasChanges Then
If Me.taManager.UpdateAll(Me.categoriaDados) > 0 Then
MsgBox("Dados salvos com sucesso !")
End If
End If
Catch ex As Exception
MsgBox(ex.ToString)
End Try
End Sub
Aqui novamente verificamos se houve alterao no dataset checando o mtodo HasChanges para
em seguida usar o mtodo UpdateAll do TableAdapterManager.
O TableAdapterManager um novo componente presente no VS 2008 que atua sobre datasets
tipados e TableAdapters e permite a atualizao de dados em tabelas relacionadas(Atualizao
hierrquica) de uma forma mais fcil. Na verso anterior era necessrio a incluso de cdigo para
realizar esta tarefa corretamente.
A atualizao hierrquica o processo de atualizao dos dados modificados em tabelas
relacionadas em um dataset tipado pela utilizao do novo componente TableAdapterManager.
O TableAdapterManager usa o relacionamento da chave primria entre as tabelas para determinar
corretamente a ordem na qual deve enviar os Inserts, Updates e Deletes do DataSet para o banco
de dados sem violar as restries da chave-primria (integridade referencial) no banco de dados.
O TableAdapterManager facilita a atualizao de mltiplas tabelas e reduz o trabalho usando o
mtodo UpdateAll.
Salvar dados de tabelas relacionados uma tarefa mais complexa pois os comandos para incluso,
atualizao e excluso para cada tabela relacionada tem que ser executadas em um ordem
especfica para evitar a violao na integridade referencial definida no banco de dados.
A classe TableAdapterManager gerada quando voc cria um dataset tipado em um projeto. Na
verdade a propriedade Hierarchical Update do dataset que determina se um
TableAdpaterManager ser criado ou no. Se o valor da propriedade for definido como True ele
ser criado e o cdigo para atualizar atualizao hierrquica em tabelas relacionadas gerado
tambm.
Para encerrar quero chamar a sua ateno para a declarao dos eventos Click nos botes de
comando da nossa aplicao. Todos eles tem seguinte sintaxe:
wpf_Dados.zip
Aplicaes WPF
VB 2008 - TableAdapterManager
Abrindo o Visual Basic 2008 Express Beta 2 iremos ver a seguinte tela:
Clicando em Create Project... ou no menu File New Project teremos a janela New Project
tambm mostrada acima onde notamos dois novos templates : WPF Application e WPF Browser
Application.
Como todo bom arquivo XML que se preza um arquivo XAML deve possuir:
Observe que na figura acima temos duas vises: A Design e a XAML , clicando sobre as setas (Swap
Panes) podemos alternar entre as mesmas; No modo de viso Design voc tem um controle que
permite controlar o tamanho da janela Window1.
Se visualizarmos a ToolBox iremos ver dois grupos de controles : Common e Controls
Como primeira aplicao vamos arrastar e soltar um controle Button e um controle ListBox na
janela Window1 conforme figura abaixo:
Vamos alterar o texto exibido no boto. Aqui encontramos a primeira mudana em relao ao
controle Button das verses anteriores. No temos mais a propriedade Text no seu lugar entrou a
propriedade Context:
Se examinarmos a janela de propriedade dos controles iremos notar mais diferenas para a verso
anterior. No caso do controle ListBox no existe mais a propriedade DataSource no seu lugar temos
a propriedade DataContext.
No evento Click do controle Button eu vou copiar e colar um cdigo que faz o acesso ao banco de
dados Northwind.mdb e exibe alguns dados da tabela Categories.
Defina os seguintes imports no formulrio Window1:
Imports System.Data.OleDb
Imports System.Data
A seguir inclua o cdigo abaixo no formulrio WIndow1:
User32 - fornece a aparncia familiar dos elementos Windows como janelas, botes, caixas
de texto, etc.;
GDI/GDI+ - fornece o suporte ao desenho para renderizar formas, texto e imagens ao custo
da tradicional complexidade e desempenho;
Ao longo dos anos essas duas tecnologias tm sido refinadas e as APIs que o desenvolvedores usam
para interagir com elas tem mudado de forma dramtica; mas se voc esta criando uma aplicao
com a plataforma .NET e WIndows Forms, ou ainda esta usando VB6, nos bastidores, os mesmos
recursos do sistema operacional Windows esto sendo usados.
A tecnologia WPF veio para mudar este cenrio ao trazer novos recursos e usar uma nova forma de
trabalho que trabalha diretamente como a tecnologia DirectX.
O Microsoft Windows Presentation Foundation - WPF introduz uma nova maneira de criar
interfaces com o usurio em clientes ricos oferecendo recursos grficos e uma nova linguagem de
marcao chamada XAML que baseada em XML com um novo modelo de desenvolvimento que
inclui um rico modelo para a ligao de dados.
O WPF efetua a separao do design da interface do usurio e do cdigo de uma maneira parecida
com ASP .NET onde temos em um arquivo a linguagem de marcao e em outro o cdigo, o arquivo
code-behind.
Um dos recursos mais poderosos apresentado pelo WPF o databinding que permite efetuar a
ligao com dados de diversas fontes de dados sem ter que utilizar cdigo, permitindo gerenciar a
execuo e edio de dados complexos.
isso mesmo, se voc odeia codificar, vai amar o WPF, pois voc pode atravs da linguagem
declarativa de marcao (XAML) criar toda a interface com o usurio e efetuar a ligao de dados
sem usar cdigo.(Naturalmente tudo que voc pode fazer no XAML voc pode fazer via cdigo).
Alm disso o WPF apresenta as seguintes novas caractersticas na verso 3.5 (service pack1 do VS):
Suporte a aplicaes WEB com FireFox - Voc agora pode rodar aplicaes WPF do tipo web
tanto no FireFox como no IE;
Suporte ao LINQ no databinding - O WPF agora da suporte a utilizao do LINQ na vinculao
de dados;(Sim, o suporte ao LINQ nativo)
Suporte a interface IDataErrorInfo no databinding - Agora a infraestrutura do databinding
pode capturar erros de validaes e exib-los usando esta interface;
Suporte a utilizao interativa de controles em um controle RichtTextBox;
Suporte para a utilizao de elementos 2-D em superfcies 3-D;
Um modelo de Add-In que permite usar componentes de terceiros em um contexto de
segurana;
O que o DataBinding
Para comear a usar o databinding com WPF voc deve sempre definir um destino e uma origem.
O destino da ligao pode ser qualquer propriedade acessvel ou elemento derivado da classe
DependencyProperty. Um exemplo a propriedade Text do controle TextBox.
A classe representa uma propriedade de dependncia que registrada com WPF. Propriedades de dependncia fornecem
para expresses de valor, validao de propriedades e a coero de valores dependentes, valores padro, herana, a liga
dados, animao, notificao e estilo.
A origem da ligao pode ser qualquer propriedade pblica, incluindo propriedades de outros
controles , objetos CLR, elementos XAML, datasets, arquivos XML, etc. A WPF oferece dois
provedores especiais para ajudar na ligao de dados: XmlDataProvider e ObjectDataProvider.
O objeto XmlDataProvider permite Acessar aos dados XML declarativs para associao de dados.
XmlDataProvider expe das seguintes maneiras para acessar dados XML:
No modo unidirecional o valor do campo exibido na TextBox e no permite alterao (isso pode
ser usado para campos do tipo somente-leitura)
No modo bidirecional o valor do campo exibido e quando voc altera o valor da TextBox a
alterao propagada para o banco de dados.
- DataBinding entre controles
Vejamos na prtica como usar sintaxe da linguagem XAML para ligar a propriedade Text de um
controle TextBox e a propriedade Value de um controle Slider:
<Button x:Name="Botao1">
<Button.Template>
<ControlTemplate>
<Ellipse Fill="Red"/>
</ControlTemplate>
</Button.Template>
</Button>
Neste cdigo estamos definindo que o boto fique com o formato de uma elipse atravs da criao
de um template.
Usando a classe DataTemplate
O modelo data templating da WPF fornece a voc uma grande flexibilidade para definir a
apresentao de dados. Os controles WPF possui funcionalidades embutidas para suporta a
personalizao da apresentao dos dados.
Toda a funcionalidade de modelagem do WPF esta baseada na classe FrameworkTemplate.
A classe DataTemplate deriva de FrameworkTemplate como todas as outras classes usadas para o
propsito da modelagem.
muito mais fcil e rpido criar uma DataTemplate via declarao XAML do que usar cdigo de
programa. O cdigo para criao de modelos atualmente um tanto complexo e confuso, enquanto
que a linguagem declarativa XAML simples e limpa.
O DataTemplate pode gerar tantos elementos visuais quantos forem necessrios para exibir o
objeto de dados. Esses elementos usam ligaes de dados para exibir os valores da propriedade do
objeto de dados. Se um elemento no sabe como exibir o objeto que ele deve processar, ele
simplesmente chama o mtodo ToString nele e exibe o resultado em um TextBlock.
Uma outra caracterstica da WPF que usada em conjunto com os modelos conhecido como
'triggers' (gatilhos). Um gatilho algo como um bloco if usado no cdigo procedural e somente
executa o que o bloco contm quando uma condio avaliada for verdadeira.
Os triggers so disparados por condies como por exemplo os valores das propriedades, e
permitem alterar os estilos dos objetos e efetuar diversas aes. H diversos tipos de triggers mas
os dois tipos bsicos so :
Define as propriedades dos controles conforme mostrado no arquivo XAML, segue abaixo o cdigo
usado:
Controle Slider:
Controle TextBlock:
<TextBlock Margin="30,59,16,45"
Name="TextBlock1"
Text="Macoratti.net"
FontSize="{Binding
ElementName=Slider1,
Path=Value}"
/>
Ao executar o projeto e mover o ponteiro do controle Slider o tamanho do texto ir ser alterado
conforme voc move para direita ou para esquerda, conforme a figura abaixo:
Veja que voc no usou cdigo apenas a poderosa linguagem declarativa de marcao XAML. A
declarao responsvel pelo comportamento :
FontSize="{Binding
ElementName=Slider1, Path=Value}"
Com esta pequena introduo espero ter lanado alguma luz sobre o funcionamento do databinding
do WPF. A seguir irei mostrar exemplos mais funcionais com vinculao a fonte de dados.
Eu sei apenas WPF , mas eu gosto...
Referencias:
http://msdn.microsoft.com/en-us/library/system.windows.forms.autocompletemode.aspx
http://msdn.microsoft.com/enus/library/system.windows.forms.textbox.autocompletemode.aspx
http://blogs.zdnet.com/Stewart/?p=320
http://msdn.microsoft.com/pt-br/library/cc564903.aspx