Artigo Clube Delphi 71 - Criação de componentes

Criando um componente visual estilo ranking 5 estrelas com suporte à imagens, recursos e tratamento de eventos de mouse.

Esse artigo faz parte da revista Clube Delphi Edição 71. Clique aqui para ler todos os artigos desta edição

Clique aqui para ler esse artigo em PDF.

Criação de componentes

Criando um componente visual estilo “ranking 5 estrelas” com suporte à imagens, recursos e tratamento de eventos de mouse

 

Como todos sabem, componentes são classes especiais que descendem de TComponent e podem ser instaladas no IDE. Um componente bem escrito serve como base para códigos maiores e mais complexos. Neste artigo, vamos nos aprofundar num assunto pouco conhecido: a criação de componentes visuais, com pintura personalizada, destacando técnicas de encapsulamento de código.

Para destacar as técnicas apresentadas, preparei um exemplo interessante. Você deve lembrar que alguns players possuem um sistema de ranking e classificação de músicas usando figuras, o que causa um ótimo apelo visual. Neste artigo, criaremos um componente semelhante para suas aplicações Delphi, atribuindo estrelas quando o mouse é passado sobre ele.

 

Criação das imagens

Usando o Paint do Windows ou equivalente, crie uma imagem contendo cinco estrelas vazias e outra contendo cinco preenchidas. Crie também uma imagem a ser usada como ícone na paleta do Delphi. As dimensões das estrelas ficam a seu critério. O importante é que o desenho seja uniforme.

Neste exemplo cada estrela tem 15 pixels de altura e 16 de largura. A imagem com cinco estrelas tem 80 pixels (Figura 1).

 

Figura 1. Estrelas criadas no Paint

 

Caso queira seguir o exemplo sem desenhar sua própria imagem, basta baixar o arquivo no endereço para download deste artigo.

 

O arquivo de recursos

Abra o Image Editor do Delphi e crie um novo arquivo de recursos acessando File>New>Component Resource File. Clique com o botão direito sobre Contents, acesse New>Bitmap e insira três imagens usando os dados da Tabela 1.

Name

Width

Height

Colors

ESTRELAS_VAZIAS

80

15

SVGA

ESTRELAS_CHEIAS

"
[...] continue lendo...
Ebook exclusivo
Dê um upgrade no início da sua jornada. Crie sua conta grátis e baixe o e-book

Artigos relacionados