Gerando dados para testar Live Bindings com TPrototypeBindSource

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
 (1)  (0)

Veja neste artigo como gerar dados para testar as ligações de dados (Live Bindings) da sua aplicação, sem que seja necessário conectar-se a uma base de dados ou criar tabelas temporárias para testar funcionalidades.

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

Escolhendo tipo de FireMonkey a utilizar

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.

Ativando LiveBindings com o botão direto do mouse

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.

LiveBindings Designer

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:

Ligação da Propriedade Text do edit com o Text do Label

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.

Ligando objetos

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.

Janela de propriedades do TMemo no LiveBindings

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:

Ligando Edit e TMemo

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.

Antes de inserir o valor dentro do Edit

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.

Alterando tamanho do Componente TMemo

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.

Assistente LiveBindings

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.

PrototypeBindSource

Figura 11: PrototypeBindSource

Nessa terceira parte do assistente é onde vamos inserir os campos que nossa nova fonte de dados vai possuir. Clicamos em Add.

Adicionado campos à fonte de dados

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.

Selecionando campos para fonte de dados

Figura 13: Selecionando campos para fonte de dados

Vamos selecionar alguns desses campos e em seguida clicar em ok para finalizarmos nossa escolha.

Campos selecionados para adicionar

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.

Selecionando opção de ligamento  no LiveBindings Wizard

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.

Selecionando TGrid para ligação com PrototypeBindSource1

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.

Aplicação testada e funcionando

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.

Link property of image1 to field

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.

Ligando TImage a um Field da fonte de dados existente

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.

Passo 4 de 4 da ligação de componentes

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 .

Aplicação concluída

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.


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