Visual Programming is a method where the user interface (UI) is designed graphically by dragging and dropping elements (Components) onto a form, and then writing code to define the behavior of those components. This is the cornerstone of the Delphi (VCL/FMX) and Lazarus (LCL) frameworks.
1. The Component Model
At the heart of visual programming is the Component Model.
TComponent: This is the ultimate ancestor class for all visual and non-visual reusable elements.- Components: Components are objects designed to be installed into an IDE’s Component Palette and manipulated visually at design time.
A. Key Component Properties
Every component, inheriting from TComponent, has three primary ways to interact with it: Properties, Events, and Methods.
| Feature | Description | Example |
| Properties | Define the state or appearance of the component (what it is). These are usually set visually in the Object Inspector. | Button1.Caption := 'Click Me'; |
| Events | Define points where the component notifies the application that something has happened (what it does). | Button1.OnClick (when the user clicks the button). |
| Methods | Define the component’s actions (what it can do). | Form1.Close; or Edit1.Clear; |
2. Forms and Application Structure
In a visual application, the main entry point is typically a Project File (.lpr or .dpr), but the visible part of the application is built on Forms.
TForm: The base class for all windows or dialogs. When you create a new form, the IDE creates two files:- Unit File (
Unit1.pas): Contains the class definition for the form (TForm1 = class(TForm)) and all the code (event handlers) you write. - Form File (
Unit1.lfmor.dfm): A text/binary file that stores the persistent properties of all components on the form (e.g., button position, captions, etc.).
- Unit File (
3. The Event-Driven Paradigm
Unlike console applications which execute sequentially from begin to end, GUI applications are event-driven. The program starts, initializes the UI, and then enters a loop, waiting for an event (a mouse click, key press, timer expiration, etc.) to trigger a specific piece of code (Event Handler).
A. Creating an Event Handler
When you double-click a button in the IDE, the IDE automatically generates a procedure header for you:
procedure TForm1.Button1Click(Sender: TObject);
begin
// This is the Event Handler
Writeln('Button was clicked!'); // Console writeln still works, but usually you change the UI
Label1.Caption := 'Clicked!';
end;
Sender: TObject: This parameter is a reference to the component object that triggered the event. This allows one handler to be assigned to multiple buttons/components.
4. Key Visual Components
While hundreds of components exist, a few are fundamental for almost every application:
| Component | Class | Purpose | Key Property Example |
| Button | TButton | Executes code when clicked. | OnClick (Event) |
| Label | TLabel | Displays static text. | Caption (String) |
| Edit Box | TEdit | Accepts single-line user text input. | Text (String) |
| Memo Box | TMemo | Accepts multi-line user text input. | Lines (TStrings) |
| Check Box | TCheckBox | Toggles a boolean (Yes/No) state. | Checked (Boolean) |
| Timer | TTimer | Non-visual component that triggers an OnTimer event at set intervals. | Interval (Integer ms) |
5. Transitioning from Console to GUI
When moving to the GUI, you typically replace console I/O commands (P1.4) with component property manipulation:
| Console I/O | GUI Interaction (Example) |
Readln(Variable) | Variable := Edit1.Text; (Reading input) |
Writeln('Message') | Label1.Caption := 'Message'; (Displaying output) |
Readln; (Pause) | Use a component like TTimer or wait for a button click event. |
