Nesse artigo vamos ver um pouco sobre LiveBindings. Vamos falar principalmente sobre Protótipos, para isso vamos utilizar um componente chamado “TPrototypeBindSource”, que simula dados para sua aplicação, para que se possa montar e simular formulários com dados vivos, sem ter que estar fazendo ligações com bancos de dados ou até mesmo carregar tabelas temporárias para demonstrar uma certa função em questão. Esse componente é extremamente útil para criação de aplicações como modelo, que no futuro você pode substituir por base de dados reais.
Mas antes de vermos essa funcionalidade, vejamos primeiro como ligar as propriedades de dois controles, de forma que ao atualizar um, o outro seja automaticamente modificado.
Para esta aplicação vamos usar “FireMonkey Desktop Application – Delphi” do tipo “HD FireMonkey Application”. Se você não souber chegar nessa opção, basta ir no menu New > FireMonkey Desktop Application – Delphi e o seguinte assistente aparecerá.
Figura 1: Escolhendo tipo de FireMonkey a utilizar
Vamos por apenas dois componentes simples no Form, só para que através deles possamos fazer algumas observações interessantes sobre LiveBindings.
- 1 TEdit
- 1 TLabel
Temos duas maneiras de estar usando o LiveBindings, a primeira é clicando com o botão direito do mouse em cima do componente e indo em “LiveBindings Wizard”, e a segunda maneira é ir no menu View > LiveBindings Designer. Vamos usar essa segunda opção para que possamos notar melhor as ligações.
Observação: Caso você clique com o botão direito do mouse no objeto e não encontre a opção LiveBindings Wizard, você pode estar ativando através do menu Tools > Opitions e no assistente que abrir, ir em LiveBindings no menu esquerdo. Veja abaixo.
Figura 2: Ativando LiveBindings com o botão direto do mouse
Notamos que no LiveBindings Designer já aparecem nossos dois componentes com seus campos representados. Observamos ainda que por padrão são mostradas apenas algumas propriedades do componente, normalmente as que são mais utilizadas.
Nesse nosso caso elas são o Text do Edit e também o Text do Label. Veja na figura 3.
Figura 3: LiveBindings Designer
Vamos agora ligar o text do edit ao text do label . Basta clicar em cima de um dos Text e arrastar até o outro, ficando da seguinte forma:
Figura 4: Ligação da Propriedade Text do edit com o Text do Label
Agora com essa ligação que fizemos, tudo que digitarmos no Edit aparecerá no Label. Ao executarmos nosso aplicativo, o Label não aparecerá, mas não aparecera pelo seguinte motivo: do mesmo jeito que o edit está vazio, o label também fica. Agora faça o teste e digite algo no Edit, veja que o que digitou foi mostrado no label. Veja na figura 5.
Figura 5: Ligando objetos
Vamos supor agora que queremos ligar um componente ao outro, mas a propriedade que queremos ligar não esteja aparecendo. Vamos por um TMemo no nosso Form.
Com esse TMemo no nosso form, gostaríamos de ligar a propriedade Width ao edit para quando digitarmos um valor nele mudasse o tamanho do TMemo, só que a propriedade Width não aparece no LiveBindings Designer. Veja abaixo que a única propriedade que fica disponível é a Text, da mesma forma que o Edit.
Abaixo da propriedade text do TMemo tem três pontinhos, clique neles e uma janela com todas as propriedades disponíveis do TMemo aparecerão. Basta você selecionar qual deseja poder usar e dar ok. Nesse caso vamos marcar a penúltima da lista que é Width.
Figura 6: Janela de propriedades do TMemo no LiveBindings
Agora a propriedade Width já aparece junto com a propriedade Text do TImage. Ligue a propriedade Width do TMemo ao Text do TEdit, ficando da seguinte forma:
Figura 7: Ligando Edit e TMemo
Vamos executar nossa aplicação (por exemplo usando o atalho F9), e digitar um valor numérico dentro do edit. Veja que o TMemo mudará de tamanho.
Figura 8: Antes de inserir o valor dentro do Edit
Na figura acima você pode ver o TMemo normal, como inserimos no form. Agora vamos por um valor de 300 dentro do edit, veja na figura abaixo como o TMemo aumentou.
Figura 9: Alterando tamanho do Componente TMemo
Devemos observar que tudo que fizemos até agora, não precisamos utilizar nenhuma liga de código.
Vamos agora fazer uma fonte de dados usando o Live Bindings
Para isso vamos iniciar uma nova aplicação em FireMonkey Desktop Application – Delphi, do tipo HD FireMonkey Application.
Agora com o Form já criado, clicamos com o botão direito do mouse no Form e em seguida vamos em LiveBindings Wizard. No assistente LiveBindings, selecionamos a opção “Create a data source”, veja na figura abaixo.
Figura 10: Assistente LiveBindings
Vamos confirmar nossa escolha, clicando em Next. Na segunda parte do assistente vamos selecionar o tipo da base de dados, TPrototypeBindSource , e Next para prosseguirmos.
Figura 11: PrototypeBindSource
Nessa terceira parte do assistente é onde vamos inserir os campos que nossa nova fonte de dados vai possuir. Clicamos em Add.
Figura 12: Adicionado campos à fonte de dados
Ao clicarmos em add abrirá uma janela com várias opções de campos que permitem gerar dados aleatórios através de alguns padrões conhecidos como generations . Com isso você consegue criar uma pequena amostra de dados para demonstrar funcionalidades no seu sistema.
Figura 13: Selecionando campos para fonte de dados
Vamos selecionar alguns desses campos e em seguida clicar em ok para finalizarmos nossa escolha.
Figura 14: Campos selecionados para adicionar
Agora com os campos já adicionados à nossa lista de Field Names, clicamos em Next.
Nessa última parte do assistente ele nos pergunta se desejamos adicionar um Data Source Navigator. Marque essa opção e clique em Finish.
O componente “PrototypeBindSource” foi adicionado ao nosso Form e também o Navigator.
Vamos então clicar no Navigator e, no Object Inspector, na propriedade Align colocamos “AlMostTop”.
Agora com o Navigator já alinhado na parte de cima do nosso Form, vamos ligar essa fonte de dados que criamos com um Grid.
Para isso basta clicar com o botão direto novamente no componente PrototypeBindSource e ir em LiveBindings Wizard.
Agora no assistente apareceram três opções para você escolher qual tipo de ligações deseja fazer, nós vamos utilizar a opção
Link PrototypeBindSource1 with a Grid Control. Clicamos em Next para confirmar a nossa escolha.
Figura 15: Selecionando opção de ligamento no LiveBindings Wizard
Agora vamos selecionar o componente que queremos usar, que pode ser o TGrid ou então o TStringGrid, mas nesse caso vamos selecionar o TGrid e clicar em Finish.
Figura 16: Selecionando TGrid para ligação com PrototypeBindSource1
O TGrid já apareceu no nosso Form, vamos clicar nele e no Objetc Inspector alterar a propriedade Align para AlMostTop, para que assim possamos visualizar melhor os dados. Para deixar com uma aparência melhor aumente sua altura até preencher o Form.
Podemos agora pressionar F9 para executarmos nossa aplicação e ver o resultado do que fizemos até agora.
Figura 17: Aplicação testada e funcionando
Usando as opções do Navigator você pode navegar entre os registros normalmente.
Vamos fazer uma melhoria nessa nossa aplicação. Que tal colocarmos uma TImage para receber a cor ao navegarmos pelos registros?
Vamos por então o TImage no nosso Form. Diminuímos o tamanho do nosso Grid para que tenha espaço para nosso novo componente e organizamos eles.
Para fazer a ligação do TImage com o campo das cores na nossa fonte de dados basta clicar com o botão direito em cima do TImage e ir em LiveBindings Wizard.
Agora a opção que vamos usar não é a mesma que usamos para o TGrid, dessa vez usaremos Link property of image1 to field. Selecione essa opção e pressione Next para continuar.
Figura 18: Link property of image1 to field
Nessa segunda parte vamos selecionar a qual propriedade do TImage desejamos ligar o Field. No caso, Property = Bitmap.
Pressione novamente Next para continuar.
Agora vamos selecionar a base de dados onde se encontra esse field que queremos ligar. Para isso vamos selecionar PrototypeBindSource1 e clicar em Next.
Figura 19: Ligando TImage a um Field da fonte de dados existente
Agora para finalizar basta selecionar o field ao qual o TImage vai se ligar, que nesse caso é a Bitmap1. Enfim, pressione Finish para concluir o processo.
Figura 20: Passo 4 de 4 da ligação de componentes
Nosso TImage já recebeu a primeira cor da nossa fonte de dados , agora para testar como ficou, pressione F9 para executar nossa aplicação e navegue pelos dados cadastradod para ver como a cor do TImage mudará automaticamente em cada registro que for passado .
Figura 21: Aplicação concluída
Com isso terminamos mais um artigo sobre LiveBindings, espero que tenha sido do agrado de todos os leitores.
Abraços a todos e até o próximo artigo.
