Presentación de la interfaz al abrir Lazarus por primera vez
Ventana principal (ventana global superior), zona 1 de la imagen anterior
A diferencia de otros programas que usamos habitualmente, al arrancar Lazarus se abren varias ventanas flotantes independientes. La franja superior larga corresponde a la ventana principal del IDE, con este formato de título: project1 - Lazarus IDE vnúmerodeversión. Al abrir otros proyectos, el título se actualiza automáticamente con el nombre del proyecto actual. Funciones: ventana de control general del IDE, que incluye el menú principal y la Paleta de Componentes (Component Palette).
- Bajo la barra de título: menú principal Cuenta con los menús habituales: File, Edit, Search, View
- Izquierda bajo el menú: barra de herramientas rápida (Coolbar) Botones con iconos para ejecutar de forma instantánea las funciones más usadas del menú;
- Derecha bajo el menú: Paleta de Componentes Component Palette
Grupos de pestañas integrados
Standard, Additional, Common Controls, Dialogs, Data Controls, Data Access, System, Misc, LazControls, RTTI, SQLdb, Pascal Script, SynEdit, Chart, IPro
Las dos ventanas de edición fundamentales
Bajo el IDE aparecen dos ventanas en paralelo:
- A la izquierda: Inspector de Objetos Object Inspector
A continuación te explico algunas propiedades más frecuentes
| Nombre de propiedad | Descripción de su función |
|---|---|
| Action | Vincula acciones predefinidas, como cerrar o salir del programa |
| Align | Alineación del control respecto al contenedor padre: alTop (arriba), alBottom (abajo), alLeft (izquierda), alRight (derecha), alClient (ocupa todo el espacio restante), alNone (posición libre) |
| Anchor | Fija la distancia entre el control y los bordes al redimensionar la ventana; por ejemplo [akBottom,akRight] mantiene el control en la esquina inferior derecha |
| Caption | Texto visible del control (botones, etiquetas). Se recomienda usar nombres descriptivos, no dejar el valor por defecto Button1 |
| Color | Color de fondo del control |
| Enabled | Valor booleano; si es False, el control se atenúa y no se puede pulsar |
| Font | Fuente, tamaño y color del texto; al expandirlo puedes configurarlo al detalle |
| Hint / ShowHint | Texto que aparece al pasar el cursor por encima; solo se muestra si ShowHint=True |
| Name | Identificador del control en el código. Es buena práctica poner nombres claros (OkBtn, ExitBtn), evitar el nombre genérico Button1 |
| Left / Top | Coordenadas de la esquina superior izquierda del control |
| Width / Height | Ancho y alto del control; con Constraints puedes establecer tamaños máximos y mínimos |
| ReadOnly | El campo de texto solo permite lectura, no se puede modificar su contenido |
| TabOrder / TabStop | Orden de navegación con la tecla Tab; si TabStop=False no se podrá seleccionar con Tab |
| Text / Lines | Text para textos de una sola línea; Lines para múltiples líneas (en TMemo el contenido se almacena en un array que empieza en el índice 0) |
| Visible | Si vale False, el control queda totalmente oculto |
| WordWrap | Salto automático de línea en campos de texto multilínea |
| PopUpMenu | Menú contextual que aparece al hacer clic derecho |
Estos son los eventos que más vas a utilizar
| Evento | Momento en el que se dispara |
|---|---|
| OnClick | Clic izquierdo sobre el control (muy usado en botones) |
| OnChange | Cuando el contenido o estado del control varía (modificar texto en un campo, cambiar opción de lista desplegable) |
| OnEntry | El cursor entra en el control, este recibe el foco |
| OnExit | El cursor sale del control, este pierde el foco |
| OnKeyDown / OnKeyPress / OnKeyUp | Pulsar una tecla, escribir un carácter, soltar la tecla |
| OnMouseMove / OnMouseDown / OnMouseUp | Mover el ratón, pulsar el botón del ratón, soltar el botón del ratón |
| OnDragDrop | Acción de soltar un elemento tras arrastrarlo |
| OnEditingDone | Cuando el usuario termina de editar el texto, ideal para validar entradas |
| OnResize | Al modificar el tamaño del control |
- A la derecha: Editor de Código Source Editor
Ahora vamos a modificar el ejemplo de la lección anterior para cambiar varias propiedades al pulsar el botón
procedure TForm1.Button1Click(Sender: TObject);
begin
// Cambiamos el texto según el valor de Tag
if Button1.Tag = 0 then
begin
Button1.Caption := 'Presiona otra vez';
Button1.Tag := 1;
// Modificamos tamaño y color del botón desde código
Button1.Height := 50;
Button1.Color := clYellow;
end
else
begin
Button1.Caption := 'Presiona';
Button1.Tag := 0;
Button1.Height := 30;
Button1.Color := clBtnFace;
end;
end; Lenguaje del código: JavaScript (javascript)
Encima del editor de código se sitúa la ventana de diseño del formulario Form1
Consejos útiles
- Atajo de teclado
F12: alterna entre la interfaz de diseño de formulario y la ventana de código fuente - Ventana de formulario: arrastra controles para crear la interfaz gráfica de tu software
- Editor de código: redacta el código Pascal con la lógica de tu aplicación
Otras ventanas auxiliares
Ventana de Mensajes Message (parte inferior de la pantalla) Muestra registros de compilación, errores y avisos de ejecución al compilar el programa;
Inspector de Proyectos Project Inspector Muestra todos los archivos que componen el proyecto, permite crear o borrar unidades y formularios;
Ventana de terminal (se mantiene si lanzas Lazarus desde la consola): imprime el registro completo de la compilación.