Demostración del evento de clic en botón

En esta sección agregaremos eventos a los botones: al hacer clic en un botón, el código ejecutará distintas operaciones. Aquí demostraremos dos funciones: modificar el texto del botón al pulsarlo y cerrar el formulario con otro botón.

Crear un nuevo proyecto de interfaz gráfica

Haga clic en el menú superior principal: Project (Proyecto) → New Project (Nuevo proyecto) → Application (Aplicación) (también puede crearlo desde File (Archivo) → New → Project → Application) para generar un programa GUI completamente nuevo.

O bien

Después de crearlo se abrirán varias ventanas: barra de menú principal arriba, el Inspector de Objetos (Object Inspector) a la izquierda y el Editor de Código (Source Editor) que ocupa la mayor parte de la pantalla.

Agregar dos botones al formulario

Bajo la barra de menú superior se encuentra la barra de pestañas de categorías de controles

El recuadro rojo superior es la barra de categorías de controles, dividida en pestañas: la primera es Standard (Controles estándar), la segunda Additional…

Si no tiene seleccionada la pestaña «Standard (Controles estándar)», haga clic sobre ella para activarla;

Seleccione el icono de botón (rectángulo con la palabra OK), luego haga clic en la zona izquierda del formulario Form1: aparecerá un botón llamado Button1 sobre el formulario;

Vuelva a pulsar el icono de botón de la barra Standard y haga clic en la zona derecha del formulario para crear el segundo botón Button2.

Si no domina los pasos, consulte el vídeo de la lección anterior.

Siga estos pasos para agregar los dos botones

Configurar el texto de Button1 y escribir el evento de clic

Haga clic para seleccionar Button1: el inspector de objetos de la izquierda mostrará todas sus propiedades:

Si este panel de configuración está oculto, pulse el botón de flecha en la barra de controles para mostrarlo (o use la tecla F12 para alternar entre formulario y código).

Al seleccionar el primer botón, la barra izquierda indica arriba que el control activo es Button1, y abajo tiene dos pestañas: Propiedades y Eventos.

La pestaña Propiedades sirve para modificar el aspecto, estilo, tamaño y demás ajustes visuales del botón.

La pestaña Eventos sirve para asociar acciones al botón: clic, pasar el cursor por encima, salir del área del control, etc.

• Busque la propiedad superior Caption (Título), cambie el valor por defecto Button1 por Press, pulse Enter o haga clic en un espacio vacío: el texto del botón se actualizará instantáneamente;
• Cambie a la pestaña «Events (Eventos)» del inspector de objetos: aquí se listan todos los eventos que puede disparar el botón (clic, paso del cursor, salida…);
• Localice OnClick (Evento de clic) y pulse el botón de tres puntos ... a la derecha: el editor pasará automáticamente a la página de código y generará una función vacía de clic:

Haga clic en un espacio vacío para confirmar el cambio, el texto del botón en el formulario se modificará.

Mantenga el botón seleccionado y cambie a la pestaña Events (Eventos)

Esta pestaña muestra todos los eventos nativos del botón, podemos asociarle cualquier acción. Tomemos OnClick: cuando el usuario haga clic izquierdo sobre el botón, se ejecutará el método asociado al evento.

Seleccione la fila OnClick y pulse el botón ... de la derecha para crear una función de evento vacía.

Escriba una línea de código entre begin y end para modificar el texto del botón al hacer clic.

procedure TForm1.Button1Click(Sender: TObject);
begin
  Button1.Caption := 'Press again'; // escriba este código
end;   Lenguaje del código: JavaScript (javascript)

Al ejecutar el programa, al pulsar el botón se ejecutará el código del recuadro, entramos en la sección de lógica Pascal para realizar todo tipo de operaciones. La mayoría de programas GUI siguen este mismo modelo de desarrollo por eventos.

La tecla rápida F12 sirve para volver rápidamente al editor de formularios.

Configurar el texto de Button2 y el evento de cierre del programa

Seleccione Button2 y en el inspector de objetos cambie la propiedad Caption por Exit;

Acceda también al evento OnClick, pulse ... para saltar al código y escriba la instrucción de cierre:

procedure TForm1.Button2Click(Sender: TObject);
begin
  Close; // cierra la ventana y sale del programa
end;Lenguaje del código: JavaScript (javascript)

Guardar el proyecto (guarde frecuentemente)

En el menú superior seleccione Project → Save Project As (Guardar proyecto como), primero guarde el archivo de unidad del formulario (extensión .pas) ;

Después aparecerá una ventana emergente para guardar el archivo de configuración del proyecto (extensión .lpi).

Aviso: el nombre del archivo de unidad y el nombre del proyecto no pueden ser idénticos, sino la compilación dará un error de «identificador duplicado»

Compilar y ejecutar el programa

Dos formas de ejecución:

• Ruta de menú: Run (Ejecutar) → Run ;
• Tecla rápida: pulse directamente F9. El IDE compila y enlaza el código automáticamente, si no hay errores sintácticos arranca el programa terminado.

Al ejecutarlo se abre la ventana final (sin la cuadrícula de diseño), esta es la ventana principal del software:

• Al pulsar el botón Press, su texto cambia a Press again ;
• Al pulsar el botón Exit, la ventana se cierra y el programa finaliza, volviendo automáticamente al editor de formularios con cuadrícula para seguir modificando el código.