Guia Delphi

Live Bindings no Firemonkey: ligando dados visualmente

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (3)  (0)

Veja neste artigo como criar um aplicativo com FireMonkey e Live Bindings. Com isso você poderá fazer quase tudo sem necessidade de utilizar código, apenas usando os assistente visuais.

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_Contato 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, veja abaixo.

Assistente para escolher o tipo de FireMonkey Aplication

Figura 1: Assistente para escolher o tipo de FireMonkey Aplication

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 assim:

Formulário organizado

Figura 2: Formulário organizado

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 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.

Assistente LiveBindings

Figura 3: Assistente LiveBindings

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

Selecionando base de dados existente

Figura 4: Selecionando base de dados existente

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

Selecionando o campo desejado

Figura 5: Selecionando o campo desejado

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 .

Formulário com as ligações feitas

Figura 6: Formulário com as ligações feitas

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.

LiveBindings Designer

Figura 7: LiveBindings Designer

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 abaixo.

Ligando componentes aos campos do BD

Figura 8: Ligando componentes aos campos do BD

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á assim .

Ligações feitas

Figura 9: Ligações feitas

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

Formulário pronto com barra de navegação

Figura 10: Formulário pronto com barra de navegação

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 abaixo.

Pasta de estilos

Figura 11: Pasta de estilos

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.

Form com estilo modificado

Figura 12: Form com estilo modificado

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.

Até a próxima e um abraço a todos.

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?