Novidades RAD Studio XE3 – Visual LiveBindings – #2

Salve, salve amigos antes de tudo, gostaria de agradecer pelos e-mails com as dúvidas e elogios recebidos referente ao artigo Metropolis UI. Obrigado.

Dando continuidade às novidades do Delphi XE3, trago neste segundo artigo #2, Visual LiveBindings, que foi uma das novidades da versão Delphi XE2.

Marcos, mas o que é Visual LiveBindings? LiveBindings é uma característica de realizar a ligação de dados no Delphi que é suportada tanto pela VCL como pelo FireMonkey. LiveBindings é baseado em expressões relacionais, chamados de expressões de ligação, que podem ser unidirecionais ou bidirecionais. Por meio de expressões de ligação, qualquer objeto pode ser ligado a qualquer outro objeto, simplesmente definindo uma expressão de ligação envolvendo uma ou mais propriedades dos objetos que deseja ligar, podendo realizar as ligações entre objetos ou DataSet Fields. Tudo bem Marcos, mas isso eu já faço no Delphi algum tempo através dos componentes de acesso a dados e como os famosos “DataAware” mais conhecidos como DBEdit, DBText, DBGrids entre outros. Certo, nesta nova versão é possível por exemplo, se conectar a quaisquer objetos dos mais variados tipos a controles em tela, um controle a outro, ou mesmo uma propriedade a outra propriedade do mesmo controle. Como informado acima, toda “mágica” é baseada em expressões. Tais expressões são tratadas como Binding Expressions, e são utilizadas durante o processo de “Binding” entre os objetos. Essas “expressões de ligação” irão conter por exemplo as propriedades ou valores envolvidos no Binding.

Veja este exemplo, você pode vincular um controle TEdit a um TLabel para que quando as alterações digitadas no texto do TEdit, sejam refletidas para o componente TLabel de forma automática através do uso da binding expression sem quelquer código digitado. Outro exemplo é a vinculação de um controle Trackbar para um componente ProgressBar para que o progresso seja mostrado no componente ProgressBar a medida que o valor seja alterado no controle TrackBar.

Tudo acontece de forma visual como mostrado na imagem abaixo.

09-03-2013 16-49-43

Na versão do Delphi XE2, havia a necessidade do desenvolvedor escrever algum código, seja para a definição das expressões ou pela notificação manual ocorrida aos mecanismos, tendo o desenvolvedor um certo trabalho na codificação. Agora, o trabalho ficou mais simplificado e muito mais fácil de ser realizado com a utilização do novo recurso denominado Visual LiveBindings. Como o próprio nome indica, este recurso provê uma forma totalmente visual de se criar e estabelecer as ligações entre os objetos. Nesta nova versão do Delphi XE3, existe duas formas de se definir LiveBindings, que são através do uso do LiveBindings Designer e LiveBindings Wizard.


LiveBindings Designer

A forma mais simples de LiveBindings é usando o LiveBindings Designer. Você pode usar o LiveBindings tanto em aplicações VCL ou FMX. Com ele você pode:

  • Criar novos LiveBindings entre vários componentes visuais utilizados em seu formulário.
  • Edite os LiveBindings existentes.
  • Gerenciar todos todas as LiveBindings que você criou.
  • Exportar o diagrama de ligação como um arquivo de imagem.

Isto porque, através da superfície de sua estrutura é possível criar, editar, excluir e visualizar os LiveBindings existentes em um formulário, de uma forma totalmente visual a intuitiva. Na IDE, ele está disponível no menu View. Adicionalmente, ele pode ser acionado de forma automática durante a criação de um novo LiveBinding em formulários de projetos VCL e FMX, através da opção Bind Visually dos componentes.

O LiveBindings Designer consiste em uma janela que você pode usar para criar, editar ou visualizar os LiveBindings em sua aplicação. No lado esquerdo, você tem um conjunto de botões que correspondem a várias funções listadas abaixo. Há duas caixas de combinação na parte superior que contêm, respectivamente, todas as formas e todos os controles que estão presentes no form especificado pela primeira caixa de combinação. O designer tem três menus de contexto que podem ser utilizado.

LiveBindingsDesigner

Veja no diagrama acima como podemos visualizar as ligações entre componentes no Form Designer. Absolutamente nenhum código está escrito no arquivo fonte, tudo está sendo realizado através de ligações.

09-03-2013 16-53-45

No exemplo acima, foi estabelecida uma ligação entre os controles Edit1 e Label1, de forma que o que for digitado na caixa de texto é refletido no texto do Label, assim que o cursor sai do Edit. Para nos certificarmos da praticidade do recurso, a partir de uma aplicação VCL comum, basta arrastar para o formulário os controles mencionados que ao pressionar a tecla Tab será mostrado no TLabel o memso texto digitado no TEdit. Para realizar este processo, através do LiveBindings Designer, já em seu editor, através do simples movimento de arrastar-e-soltar do mouse da propriedade Text do Edit1 em direção à propriedade Caption do Label, para que seja definido um novo LiveBinding. Mesmo se tratando de um exemplo totalmente simples, podemos notar claramente as diferenças de usabilidade impostas pelo novo Visual LiveBindings. Na prática, por um simples movimento de mouse foi definido um novo LiveBinding, sem a necessidade de se codificar qualquer expressão envolvida. É importante observar que todas as operações e configurações realizadas no diagrama exposto no Designer são persistidas, ficando salvas na mesma pasta do projeto, em um arquivo de extensão .vbl.

LiveBindings Wizard

O botão LiveBindings Wizard está sempre disponível no LiveBindings Designer. Use LiveBindings Wizard perfeitamente para criar novas expressões LiveBindings e as conexões entre os vários componentes. Usando o LiveBindings Wizard, você pode criar uma ligação entre os componentes existentes, ou você pode gerar novos componentes diretamente dentro do Wizard, já ligado como você quer. Você pode usar o LiveBindings Wizard ao desenvolver aplicações tanto VCL ou firemonkey.

Para acessá-lo, você pode usar o próprio LiveBindings Designer ou através do botão direito do mouse em qualquer parte do formulário. Uma vez acionado, o Wizard é mostrado conforme imagem abaixo.

LBWBindingTask

O LiveBindings Wizard pode ser dividido em duas partes principais. Do lado esquerdo, estão os passos envolvidos no assistente, enquanto que do lado direito estão às opções disponíveis naquele momento. Sendo assim, os passos envolvidos no assistente podem variar de acordo com a opção escolhida ainda no passo inicial. Preste muito atenção, pois esta primeira tela é peça-chave para a continuidade do processo.

  • Vincular um controle a um campo (Field);
  • Vincular um Grid a uma fonte de dados (Data Source);
  • Vincular a propriedade de um componente a um controle;
  • Vincular a propriedade de um componente a um campo (Field).

LBWControl

EXEMPLO PRÁTICO

Agora, vamos realizar um exemplo simples e didático, mas de forma prática para que o entendimento fique mais claro.

Antes é importante realizar uma rápida configuração para que fique disponível a opção LiveBindings Wizard através do clique do botão direito do mouse no formulário. Clique na opção do menu Tools–>Options–>LiveBindings e em seguida marque a opção Display LiveBindings Wizard in right-click menu.

Veja na imagem abaixo, a opção que deve ser configurada.

09-03-2013 16-12-26

Pronto, agora, inicie uma nova aplicação através do menu File à New à FireMonkey Desktop Application – Delphi

09-03-2013 16-00-34

Depois selecione a opção conforme imagem abaixo.

09-03-2013 17-00-15

Insira no formulário os seguintes componentes: Um TEdit, três TLabel e um TButton.

09-03-2013 16-25-26

Agora, com o clique de direita do botão do mouse acione a opção Bind Visually… ou através da opção do menu View à LiveBindings Designer.

09-03-2013 16-27-11

LiveBindings Designer em ação.

09-03-2013 17-03-07

Clique com o mouse e segure na propriedade do componente Edit1 e leve e solte em cima da propriedade Text do Label1. Repita este procedimento para os demais Label’s.

09-03-2013 16-33-33

09-03-2013 16-36-47

Compile e digite algum texto no componente Edit e em seguida clique no botão.

09-03-2013 16-38-29

Bom, este foi um exemplo trivial e bastante simples para que você pudesse entender o que venha ser este novo recurso denominado Visual LiveBindings e suas funcionalidade. Em breve irei gravar uma vídeo aula mostrando a outra forma de se definir LiveBindings, que é a opção LiveBindings Wizard. Não perca.

Caso queira saber mais detalhes deste novo recurso, acesse os links abaixo.

http://docwiki.embarcadero.com/RADStudio/XE3/en/LiveBindings_Designer
http://docwiki.embarcadero.com/RADStudio/XE3/en/LiveBindings_Wizard

Ah, deixe o seu comentário, sugestão ou dica.

Até mais.

Take care