Introducción.

En una serie de artículos, que hoy empezamos, voy a explicar la creación de un componente (el componente es el que podéis encontrar en esta dirección web como SelPanel). Nosotros vamos a llamarlo PanelSel para que no interfiera con el que podemos tener ya instalado.

Objetivo.

En primer lugar debemos definir como queremos que se comporte nuestro nuevo componente.

Queremos un componente que cambie de color según posea o no el foco de la ventana o cuando el cursor del ratón se coloca sobre él. También debe responder a la pulsación del ratón o a la pulsación de la tecla Return o Barra Espaciadora con un evento OnClick.

Este componente podrá contener una imagen y dos tipos de texto, uno superior de una sola línea y otro posterior de varias líneas que se ajustará al tamaño del control en la ventana. En definitiva lo que queremos gráficamente es lo siguiente :

Creando la estructura

Lo primero que debemos hacer es crear la estructura de nuestro componente, para ello podemos heredar de cualquier otro de los ya definidos en delphi dependiendo de lo que queremos que nuestro componente realice, en nuestro caso vamos a partir de TCustomControl puesto que este componente puede responder a la pulsaciones de teclado y además posee un Canvas (lienzo), que vamos a necesitar para dibujar todo el contenido del componente (imagen, textos,..)

Nuestro componente vamos a crearlo dentro de un paquete (en el que más adelante podremos introducir otras definiciones de nuevos componentes). Para ello vamos al menú File--->New--->Other--->Package. Esto abrirá una ventana que representa nuestro paquete, lo guardamos en un directorio de disco (C:\ejemplo).

Figura 1

Pasamos entonces a la creación propia del componente :

Figura(s) 2

En la ventana que aparece (la figura anterior) cambiamos los valores que aparecen por defecto por los mostrados en la figura. Pulsamos OK. y aparecerá el siguiente texto :

unit PanelSel;

interface

uses
  Windows, Messages, SysUtils, Classes, Controls;

type
  TPanelSel = class(TCustomControl)
  private
    { Private declarations }
  protected
    { Protected declarations }
  public
    { Public declarations }
  published
    { Published declarations }
  end;

procedure Register;

implementation

procedure Register;
begin
  RegisterComponents('Ejemplo', [TPanelSel]);
end;

end.

Este es el esqueleto básico de nuestro componente. Si pulsamos instalar (figura 1) veremos que aparece una carpeta nueva en la zona de componentes (al final) en la que hay un icono nuevo.

Si seleccionamos este icono y dibujamos sobre un form aparecerá un recuadro que se puede seleccionar Si se ejecuta el form veremos que en el mismo no aparece nada.

Dibujo

El primer paso será entonces mostrar algo en ese recuadro, para ello vamos a sobreescribir el procedimiento Paint (este procedimiento se encuentra el alguno de los ancestros de los cuales nuestro componente hereda propiedades y métodos. Sobreescribir significa volver a definir el comportamiento):

procedure Paint; override;

Simplemente vamos a hacer que dibuje un rectángulo que ocupe todo el área del control. El resultado del código es :

unit PanelSel;

interface

uses
  Windows, Messages, SysUtils, Classes, Controls;

type
  TPanelSel = class(TCustomControl)
  private
    { Private declarations }
  protected
    procedure Paint; override;
    { Protected declarations }
  public
    { Public declarations }
  published
    { Published declarations }
  end;

procedure Register;

implementation

procedure TPanelSel.Paint;
begin
   Canvas.Rectangle(ClientRect);
end;

procedure Register;
begin
  RegisterComponents('Ejemplo', [TPanelSel]);
end;

end.

Hasta aquí el primer artículo, en el siguiente empezaremos a definir propiedades que modifiquen la visualización de nuestro componente.