Fala Radizeiro e Radizeira, tudo bem com vocês?
Você que tem acompanhado a série de posts aqui no blog sobre criação de componentes visuais, deve está se perguntando como pode trabalhar dentro desse componente.
Até o momento só criamos todo o layout desse nosso componente.
Mas e agora?
Precisamos alterar os textos e a progressão que desenhamos no componente.
E é aí que iremos colocar a mão no código.
Mas precisamos ter uma observação.
Quando criamos um componente utilizando frame ele vem com as propriedades do frame.
Com isso eu não irei conseguir mexer nos textos, na barra de progresso, na imagem, não consigo mexer em nada.
Quando eu adiciono o componente em uma formulário e mexo ele em tempo de design, eu estou mexendo nele todo, ou seja, em todo o frame.
Ele está todo engessado.
Eu não consigo mexer em nada.
E para que possamos mexer no nosso componente iremos ter que criar propriedades, ou seja, propertys.
Essas propertys são necessárias para que possamos mexer nos atributos do nosso componente.
Então vamos em nosso componente e criar essas propriedades.
A primeira property a ser criada é do texto superior.
E esse nosso label está nomeado como lbTextTitle, é o label de títulos.
E dentro da classe do nosso componente iremos adicionar a sessão published.
Esta sessão published é responsável por tudo que aparece no Object Inspector.
Então se você quer criar uma nova propriedade para que apareça o Object Inspector, tem que criar uma property na sessão published.
private FTextTitle : String; procedure SetTextTitle(const Value : String); ... published property TextTitle : String read FTextTitle write SetTextTitle; end; ... procedure TLTECard.SetTextTitle(const Value: String); begin FTextTitle := Value; end;
Observe que já criamos a propriedade para o texto do título.
Já foi criado a variável privada, que será trabalhada dentro da classe, e o método que recebe o valor dessa propriedade.
E para que apareça no texto o que foi passado para essa property basta adicionarmos dentro do método SetTextTitle o label do título recebendo esse valor passado.
procedure TLTECard.SetTextTitle(const Value: String); begin FTextTitle := Value; lbTextTitle.Caption := FTextTitle; end;
Ao passar um valor para essa propriedade, ele irá receber esse valor passar para a variável e atribuir o valor dessa variável para o label de título.
Desta forma compilamos novamente esse nosso componente, e pronto, a propriedade está lá no Object Inspector.
E agora ao adicionarmos qualquer valor nessa propriedade, como por exemplo, INVENTARIO DE VENDAS, iremos ver a alteração dentro do texto do nosso componente.
Agora iremos criar outras propriedades para esse nosso componente.
Onde iremos criar um TextValue do tipo currency, para o texto monetário que possuímos dentro desse nosso card.
private
FTextValue : Currency;
procedure SetTextValue(const Value : Currency);
published
...
property TextValue : Currency read FTextValue write SetTextValue;
...
procedure TLTECard.SetTextValue(const Value : Currency);
begin
FTextValue := Value;
lbTextValue.Caption := FormatCurr('#,##0.00', FTextValue);
end;
Dessa forma temos também uma outra propriedade dentro do Object Inspector.
E após atribuirmos um valor para essa nova propriedade, veremos que no visual do componente é alterado também.
E agora vamos criar uma outra propriedade chamada ProgressValue, para que possamos mexer na nossa barra de progresso.
private FProgressValue : Integer; procedure SetProgressValue(const Value : Integer); published ... property ProgressValue : Integer read FProgressValue write SetProgressValue; ... procedure TLTECard.SetProgressValue(const Value : Currency); begin FProgressValue := Value; Shape2.Width := Round(Value * (Shape1.Width / 100)); end;
Observe que nessa nossa barra pegamos o shape que está sobre o shape escuro, pois é ele que irá se mover, ou seja, terá uma progressão.
E para isso eu tive que realizar um cálculo, onde eu pego o tamanho do shape principal, que é o shape1, e cálculo para que ele possa chegar a 100%.
E a cada alteração que formos fazendo o nosso progress altera de tamanho, onde agora ele está com 10% do seu tamanho principal.
E para ficar melhor essa visualização, irei adicionar um botão na tela e programar essa progressão.
procedure TForm1.ButtonClick(Sender: TObject); var i:integer; begin for i := 0 to 100 do begin LTECard1.ProgressValue := I; Application.ProgressMessages; sleep(200); end; end;
Com isso teremos uma visualização melhor de como o nosso progress está sendo processado.
De uma forma simples já temos um componente visual bonito, e com ações.
Agora você pode criar seus próprios componentes visuais e não ficar tendo retrabalho.
O componente template do Delphi só cria a casca para você, ele não guarda código.
E para que você possa guardar código, tem que fazer isso o que fizemos aqui nessa nossa série.
Nós criamos um componente através de um frame.
E aí você cria as propriedades que precisar para trabalhar esses seus componentes.
Muito legal, né?
Tai uma dica para que você possa criar seus componentes visuais e personalizar sua aplicação.
E caso você tenha interesse de conhecer mais sobre Componentes Visuais acesse o nosso portal do CLUBE DE PROGRAMADORES EM DELPHI, onde você não terá só conteúdos relacionados ao Design , mas uma quantidade enorme de conteúdos que poderá lhe ajudar muito no seu dia a dia, é uma verdadeira NETFLIX para os programadores Delphi.
CLIQUE AQUI E SAIBA MAIS SOBRE O CLUBE DOS PROGRAMADORES DELPHI
