POST 0001: Componentes Visuales

Post 0001


Como primer post les traigo una aplicación  en la que participe hace mucho tiempo fue en el 2009 mas o menos, fue en los años en los que estudiaba en la universidad, fue hacer software educativo sobre la tabla periódica. cabe mencionar que el primer problema a resolver fue el dilema de la muestra de información. 


Tabla periodica de los elementos

Son muchos elementos de la tabla periódica, esto se traduce en la aplicación, por cada elemento  que seleccionemos nos mostrara su información correspondiente.


Antes hay que entender un componente visual en los IDE, estos son objetos con propiedades, eventos y funciones que vienen heredados de la clase principal llamada TObject (no importa el lenguaje puede ser Pascal, C#, C / C++, etc...), también hereda de la clase winapi del sistema operativo, es decir, tienen propiedades como Name, Hint, y Size que son propias de los objetos para abarcar un espacio en pantalla. 

Siempre en los entornos de desarrollo encontraremos un inspector de objetos, en ese mismo lugar estarán las propiedades y funciones. 







También la ventana o pestaña llamada palette estarán los componentes visuales y no visuales disponibles por el IDE (la ubicación dependerá de cada IDE). Estos componentes son de arrastrar y soltar, los podemos editar para darle su tamaño proporcional a la pantalla por ejemplo.  



Para esta aplicación fue requerido los TSpeedButtons para dar forma a la tabla periódica de los elementos, pero la pregunta seria ¿Por que?, esto se debe, a que son componentes con propiedades con la capacidad de manejar Letras, imágenes, eventos comunes como OnClick, cabe mencionar al codificar, normalmente un programador escribiría las sentencias para cada botón de los 121 aprox. que componen la aplicación, Lo cual reduciremos en pocas líneas.


procedure TForm1.CallElementos(Sender: TObject);
begin
    if Sender is TSpeedButton then begin
      {Instructions...}
    end;
end;

Primero escribimos la instrucción principal pero si se fijan configuramos que se Sender (Método heredado de TEvenNotify ) podemos saber cuando ocurrió un evento dentro de la ejecución de la aplicación al saber si ocurrió un Click dentro de los componentes y estos son SpeedButtons entonces damos una sentencia en la aplicación.

Con eso resolvemos la mitad del problema ahora escribiremos los enlaces de los eventos de los botones con el método escrito previamente. 

 for I := 1 to 121 do begin
      TSpeedButton(FindComponent('SpeedButton'+IntToStr(i))).OnClick:=CallElementos;
      TSpeedButton(FindComponent('SpeedButton'+IntToStr(i))).
      Glyph.LoadFromFile(
        'elements\' + TSpeedButton(FindComponent('SpeedButton'+IntToStr(i))).Caption + '.bmp'
      );
      TSpeedButton(FindComponent('SpeedButton'+IntToStr(i))).Hint:=
        TSpeedButton(FindComponent('SpeedButton'+IntToStr(i))).Caption;
  end;

En este caso como se que son 121 botones se utiliza un ciclo para hacer los enlaces a cada botón, en cualquier lenguaje se puede utilizar (en cuanto a lógica y algunas funciones compatibles). con la clase principal TSpeedButton hacemos una generalización de los objetos en la aplicación que sean componentes del mismo tipo, esto para que se prepare la misma aplicación.

ahora con FindComponent hacemos una búsqueda de los componentes SpeedButton que se llamen igual mas un numero concatenado que es del ciclo for.

'SpeedButton'+IntToStr(i)) = SpeedbuttonConcatenado(SpeedButton + N)

finalmente podemos acezar a todas las propiedades y eventos gracias a FindComponent y asignamos el en el evento Onclick el método creado previamente. cave mencionar que con eso nos ahorramos tiempo de escritura y código repetitivo.

      TSpeedButton(FindComponent('SpeedButton'+IntToStr(i))).OnClick:=CallElementos;


Nota: Si queremos dividir todos los botones en grupos la lógica es la misma solo condiciónalo en mismo ciclo, inclusive puedes hacerlo a tu propio criterio siempre y cuando no olvides la referencias FindComponent y su clase Raíz como TSpeedButton, para generalizar las búsquedas en el sistema.












Comentarios

Entradas más populares de este blog

Introducción al diario