LiveBindings no Firemonkey: ligando dados visualmente

Nesse artigo vamos ver como criar um aplicativo com FireMonkey e LiveBingins, com isso você pode fazer quase tudo sem necessidade de utilizar codificações .

Inicialmente, vejamos algumas definições importantes para a compreensão do artigo:

• FireMonkey: É o Framework da Embarcadero, voltado para o desenvolvimento de aplicações com visual mais detalhado e com suporte a multiplataforma, ou seja, o mesmo código pode ser utilizado para aplicações Windows, OS X e iOS. Se você deseja criar aplicações com interface bem elaborada, atraentes e com suporte a multiplataforma, o caminho é usar FireMonkey.
• LiveBindings: É uma tecnologia de ligação de dados introduzida no Delphi em versão XE2, que ajuda a desenvolver aplicações que realizem manipulação de dados. O LiveBindings foi adicionado devido a inclusão do FireMonkey, onde não há os chamados componentes Data-Aware. Ao invés da criação desses componentes optou-se por criar um novo mecanismo de data-binding, o que foi uma decisão muito feliz. No caso do FireMonkey, os componentes podem ser ligados ao DataSource de maneira relativamente simples e de forma visual.

Veja as formas de como é possível fazer as ligações:

• Vincular um controle como TEdit a um campo em uma fonte de dados;
• Vincular um controle, como um TGrid a uma fonte de dados;
• Vincular um controle como TEdit para uma propriedade de componente
• (como TLabel.Text);
• Vincular uma propriedade de componente a um campo em uma fonte de dados;

Vamos usar o Banco de Dados Banco_Artigo_LiveBindings.cds, esse se encontra disponível junto com o código fonte deste artigo. Este banco é na verdade uma tabela e possui apenas três campos, Codigo_Contato, Nome_ContatoM e Email_contato, apenas para podemos usar como exemplo.

Vamos iniciar criando um novo projeto FireMonkey Desktop Aplication – Delphi. Para isso vamos em File > New > FireMonkey Desktop Aplication – Delphi. A seguinte janela vai abrir com duas opções:

• HD FireMonkey Aplication
• 3D FireMonkey Aplication

Vamos usar HD FireMonkey Aplication, como mostra a Figura 1.

Clique em Ok para confirmar nossa escolha. Agora com o Form criado, vamos adicionar os seguintes componentes nele:

• 3 TEdit
• 1 ClientDataSet
• 1 DataSource

Organize os TEdits no Form, deixando-os conforme a Figura 2.

Vamos precisar especificar um arquivo de banco de dados para o componente ClientDataSet. Use a propriedade FileName  para especificar um ClientDataSet (*. Cds”). Selecione o caminho do banco de dados, Banco_Artigo_LiveBindings.cds. Coloque a propriedade Active como True.

Vamos ligar o ClientDataSet ao DataSource: na propriedade DataSet do DataSource selecione ClientDataSet1. Vamos também ligar os TEdits aos campos do banco de dados. Para isso vamos clicar com o botão direito encima do primeiro TEdit e vamos em “LiveBindings Wizard”. No assistente que abriu, selecione “Link Edit1 With a Field”, e avance clicando em Next, como mostra a Figura 3.

Vamos selecionar agora a base de dados existente, ClientDataSet1, e clicar em Next para avançar, como mostra a Figura 4.

Agora sim vamos selecionar o campo desejado para esse primeiro TEdit. Clique no campo Codigo_Contato e novamente pressione Next para continuar (Figura 5).

Nessa ultima janela do Assistente do LiveBindings é perguntado se você deseja adicionar uma barra de navegação , essa barra será adicionada mais para frente, apenas clique em Finish.

Agora para o Edit2 e Edit3 vamos fazer o mesmo processo realizado para o Edit1, a única diferença é que ao invés de selecionar o campo Codigo_Contato, você vai selecionar Nome_Contato para o Edit2, e para o Edit3 selecionamos Email_Contato.

No final das ligações dos componentes com os campos do banco de dados, aparecerá mais dois componentes no Form, BindingsList1 e BindSourceDB1 (Figura 6).

Vamos ver uma outra maneira de efetuar as ligações entre os componentes e o banco de dados: usando LiveBindings Designer. Para abrir o LiveBindings Designer vamos no menu View > LiveBindings Designer.

Na janela do LiveBindings Designer vai aparecer o banco de dados e os 3 Edits colocados no Form,veja na Figura 7.

Vamos agora ligar os componentes aos campos através do LiveBindings Designer, para fazer essa ligação basta você puxar uma linha da propriedade Text do Edit até o campo desejado. Vamos então puxar do Edit1 para o campo Codigo_Contato, veja na Figura 8.

Ligamos então o Edit2 ao campo NomeContato e, para finalizar, puxar a linha do Edit3 para o campo Email_Contato. Agora com todas as ligações feitas ficará como a Figura 9.

Vamos adicionar agora um navigator no Form. Clique no BindSourceBD1 com o botão direito e vamos em Add Navigator, veja como ficou na Figura 9:

Vamos executar agora, efetuar alguns cadastros e testar clicando nos botões “seguinte” e “anterior” para ver que podemos navegar pelos registros normalmente.

Assim terminamos nosso aplicativo de cadastro sem precisar inserir nenhuma linha de código, mas já que estamos trabalhando com FireMonkey, vamos dar uma mudada no estilo do nosso aplicativo usando o componente TStyleBook.

Vamos adicionar o componente TStyleBook no form e dar um duplo clique encima dele. Vai abrir a janela de modificação de estilos. Clique em Load e vá até pasta Documentos, provavelmente terá duas pastas chamada RAD Studio. Em uma dessas duas pastas vai ter uma outra pasta chamada 10.0 e dentro desta tem a pasta Styles. Dentro você encontrará vários arquivos de estilos, veja a pasta na Figura 11.

Os arquivos que tem a extensão .Style são os que podem ser usados. Vamos usar o arquivo Transparent.style. Para finalizar clique em “Apply and Close” para aplicar e sair da tela de escolha do estilo. Veja como ficou na Figura 12.

Assim terminamos mais um artigo, espero que seja do agrado de vocês leitores. Deixem suas opiniões, dicas e pedidos de conteúdo para novos artigos.