En nuestro primer artículo hablamos sobre los distintos tipos de Wizards, entre ellos hay uno llamado “Wizard de Componentes”, que consiste en crear “accesos” a opciones añadidas dentro de los componentes que nosotros mismos hacemos, como por ejemplo cuando un programador hace clic en el botón contrario a su habitual (normalmente el botón derecho del ratón).

Con el artículo anterior iniciamos con la serie Wizard de Componentes y hemos creado un componente llamado TMilabel muy sencillo, dicho componente no hace nada más que ser heredado de TLabel.

En esta ocasión haremos nuestro “Hola Mundo” de los Wizzard, agregándole un menú contextual a TMiLabel, para que aparezca una especie de “Acerca de…” por si nuestro usuario programador quiere saber la versión del componente que está utilizando.

Continuando desde donde quedamos

Si creaste el TMiLabel, debe aparecer en pantalla el grupo de proyectos más o menos como la siguiente imagen:

Particularmente me gusta trabajar con el grupo de proyectos porque es mucho más cómodo cuando vamos a tener varios paquetes o aplicaciones complementarias (Como por ejemplo en el caso de un backend y un frontend), en este caso vamos a tener varios paquetes, así que el uso del grupo de proyectos se hace casi que necesario, pues estaremos pasando de uno al otro seguramente.

Como se puede apreciar en la imagen anterior, ya tenemos un paquete vinculado al grupo de proyectos llamado pkgMiLabel.bpl, dicha bpl contiene el componente que hicimos.

Creando el paquete para el Wizard

Para crear nuestro Wizard “hola Mundo”, agregamos un paquete nuevo al que llamaremos dclMiLabel.bpl, para lograr esto, basta con ir al grupo de proyectos (Que en este momento se llama ProjectGroup1), hacer click contrario (normalmente derecho) e ir a la opción Add New Project… asi:

Y buscar Package:

Luego hacer click en Ok y ya debemos tener en nuestro grupo de proyectos un nuevo paquete llamado por ahora Package1.bpl, hacemos click contrario sobre él y luego rename, es ahí donde podremos cambiar el nombre del paquete por dclMiLabel.

El paso siguiente sería guardar el grupo de proyectos, para esto presionamos Shift+CTRL+S y Delphi nos preguntará por el nombre que queremos darle, yo le he puesto grpEjemplo.

Creando la unidad del Wizard

Y bueno, ya tenemos nuestro nuevo paquete, en el cual programaremos el wizard, para lograrlo debemos realizar los siguientes pasos…

  1. En la sección require del paquete que hemos creado debemos agregar el dcp llamado designide, esto lo hacemos con “clic contrario” sobre “require”, luego clic sobre “Add reference” , escribimos “designide” y confirmamos en “Ok”.
  2. Lo anterior nos permitirá acceder a una serie de unidades necesarias para crear los Wizards.
  3. Agreguemos una nueva unidad al paquete, a esta unidad la llamaré uMiLabelEditor y la he agregado por la opción mostrada en la siguiente imagen
  4. Agregar en el uses de su sección interface las unidades DesignEditors y DesignIntf.

Creando la clase del Wizard

Recordemos que estamos creando un Wizard de componentes, para este caso debemos tener una clase heredada de TDefaultEditor, de manera que he creado la clase TMiLabelEditor, de la siguiente manera:

type
     TMiLabelEditor = class(TDefaultEditor)
private
    procedure ShowDesigner;
public
    function GetVerbCount: Integer; override;
    function GetVerb(Index: Integer): string; override;

    procedure Edit; override;

    procedure ExecuteVerb(Index: Integer); override;
end;

TDefaultEditor es una clase que a su vez hereda de una interface, de la cual debemos satisfacer sus requisitos, dándole cuerpo a su definición de métodos. GetVerbCount, GetVerb, Edit y ExecuteVerb.

Definiendo el cuerpo de la clase

  • GetVerbCount se ejecuta cuando Delphi pide la cantidad de items de menú que vamos a crear en nuestro contextual, de momento sólo crearemos 1, así que en el cuerpo de dicha función debería ir lo siguiente:
function TMiLabelEditor.GetVerbCount: Integer;
begin
    Result := 1;
end;
  • GetVerb se ejecuta cuando Delphi nos pregunta por el string que debería dibujar en el item de menú indicado por medio del parámetro Index, de manera que su definición para nuestro caso, debería ser:
function TMiLabelEditor.GetVerb(Index: Integer): string;
begin
    case Index of
    0:
     Result := '&Acerca de';
    else
       raise ENotImplemented.Create('TMiLabelEditor solamente tiene un verb (index = 0) soportado.');
     end;
end;

El “ampersand” (&) es para que en el menú contextual que dibujará Delphi aparezca la letra siguiente (En este caso la A) seleccionable por medio del teclado, en todo caso cuando Delphi nos pregunte por el “string” que debe dibujar en el menú, aparecerá a nuestro usuario programador el “item” “Acerca de”.

  • Edit ExecuteVerb, se ejecutan cuando nuestro usuario hace clic sobre los “items” que se despliegan en el menú contextual, aquí Delphi nos pregunta sobre la acción que debería realizar, para este ejemplo podemos hacer lo siguiente:
procedure TMiLabelEditor.Edit;
begin
    ExecuteVerb(0);
end;

procedure TMiLabelEditor.ExecuteVerb(Index: Integer);
begin
    case Index of
    0:
       ShowDesigner;
    else
       raise ENotImplemented.Create('TMiLabelEditor solamente tiene un verb (index = 0) soportado.');
    end;

end;

He declarado un procedimiento llamado ShowDesigner; este es un procedimiento que podemos llamar como queramos y se trata del que he destinado para ser el que ejecute la acción “Hola mundo”, de manera que su definición es:

procedure TMiLabelEditor.ShowDesigner;
begin
    ShowMessage('Hola Mundo');
end;

Nota: Recordar que ShowMessage requiere poner en el uses la unidad VCL.Dialogs .

Enlazando el Wizard con el componente TMiLabel

Hasta ahora, le hemos dicho a nuestro Wizard lo que debe hacer, sin embargo aún no le hemos dicho sobre qué componente debe ejecutar el “Hola Mundo”, ni tampoco le hemos dicho sobre cuál debería mostrar dicho “Item” dentro de su menú contextual.

Lograr esto es muy sencillo, basta con seguir estos pasos:

  1. Agregar el pkgMiLabel en el require del dclMiLabel
  2. Agregar en el uses de nuestra unidad uMiLabelEditor, la unidad uMilabel, que es la unidad que tiene nuestro componente TMiLabel comentado en el artículo anterior.
  3. En la unidad uMiLabelEditor, justo antes de la sección Implementation, registrar nuestro wizard y despues de implementation el cuerpo del procedimiento para registrar, de la siguiente manera:
procedure Register;

implementation

procedure Register;
begin
     RegisterComponentEditor(TMiLabel, TMiLabelEditor);
end;

Sólo resta compilar nuestro dclMiLabel, e instalar, al abrir un nuevo proyecto (en mi caso de FMX), podemos poner en un formulario el componente TMiLabel que hemos creado y al mostrar su menú contextual veremos ahí nuestro “Acerca de”, al hacer clic sale el “Hola Mundo”:

Y bueno, eso es todo por ahora, sé que seguramente vendrán dudas sobre este ejercicio, así que estaré atento a responderlas.

Hasta la próxima.

Acerca de Jhonny Suarez

Amante de la simplificación a la hora de programar, utilizando paradigmas como el de la programación orientada a objetos e incluyendo las características de los lenguajes modernos como los genéricos, métodos anónimos, helpers y uso de técnicas acordes para un manejo adecuado de los recursos multi-plataforma como la cantidad de procesadores y memoria (Usando técnicas de hilos como Threads, Task, compilando a 64bits y el correcto uso de ARC). Creador de aplicaciones amigables, con excelente experiencia de usuario, estables y con escalabilidad.

Pero no todo es FrontEnd, también me he especializado en el Backend con RadServer, DataSnap, WebBroker, para REST y/o SOAP, Serialización/Deserialización JSON y/o XML. Con el mismo manejo de adecuado de los recursos del servidor. Push Notification, Callback, Cloud Computing con Amazon AWS, Google Cloud y sus API, Microsoft Azure... o incluso con servidores propios.

El estudio, la capacitación y la auto motivación en estos frentes tecnológicos deben ser siempre constantes, para estar a la vanguardia.

Reader Interactions

Comments

  1. Buen artículo Jhonny.
    Buena explicación, interesante y clara.
    Sólo como comentario tal vez te diría que las imágenes en la página se ven pequeñas y al intentar agrandarlas la resolución no permite que se vean muy bien.

    Por lo demás, felicidades por el artículo.

    • Hola Germán, muchas gracias por el comentario. Espero que sea de ayuda.

      He corregido la resolución de las imágenes, colocando la que tenían originalmente y esto ha solucionado el tema.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad

Responsable: ABATIC SOLUCIONES TECNOLOGICAS SLU
Finalidad: gestionar los comentarios.
Legitimación: tu consentimiento.
Destinatarios: los datos que me facilitas estarán ubicados en los servidores de Nicalia dentro de la UE. Ver política de privacidad de Nicalia.
Derechos: podrás ejercer tus derechos, entre otros, a acceder, rectificar, limitar, suprimir, portabilidad y olvido de tus datos.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies