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 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/conectar 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. 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.
Por exemplo, você pode vincular um controle TEdit a um TLabel para que, quando as alterações no texto ocorra no TEdit, sejam replicadas para o componente TLabel de forma automática através do uso da binding expression. 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 altere o valor do controle TrackBar.
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 certo trabalho para codificar. 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 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.
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.
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
No botão LiveBindings Wizard ( ) está sempre disponível no LiveBindings Designer. Use LiveBindings Wizard perfeitamente 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 npara ovos 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, a partir de um botão de ação exclusivo. Uma vez acionado, o Wizard é mostrado em tela.
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 variam 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).
EXEMPLO PRÁTICO
Agora, vamos realizar um exemplo simples e didático, mas de forma prática para que o entendimento fique mais claro e o conhecimento fixado.
Antes é importante realizar uma rápida configuração para que esteja seja mostrado 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.
Inicie uma nova aplicação através do menu File -> New -> FireMonkey Desktop Application – Delphi
Depois selecione a opção conforme imagem abaixo.
Insira no formulário os seguintes componentes: Um TEdit, três TLabel e um TButton.
Agora, com o clique de direita do mouse acione a opção ou através da opção menu View -> LiveBindings Designer.
LiveBindings Designer
Clique e segure na propriedade do Edit1 leve e solte em cima da propriedade Text do Label1. Repita este procedimento para os demais Label’s.
Compile e digite algum texto no componente Edit e em seguida clique no botão.
Bom, este foi um exemplo trivial e bastante simples para que você pudesse entender o que venha a 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
