Delphi Programming for Beginners - Lesson 3

VCL (Visual Component Library) is a stable part of Delphi. We have two types of components: visual (the ones users can see such as TButton) and non-visual (the ones which users cannot see - such as TOpenDialog). Let’s mention the basic ones.

At the picture you may see several basic components:

Because every single component comes from a general basis, they share some common properties (to be precise, most of them).

• Enabled - enables and disables the component
• Text and Caption - the main text or the caption of the component (depends on the type)
• TabOrder and TabStop - determines whether a component can be selected by TAB key (TabStop) and its position in selection
• ReadOnly - determines whether the data can be edited (compared to Enabled, the text can be selected for example by mouse)
• Font and ParentFont - font for a component, if ParentFont is set, it has a priority over Font
• Align - aligning the component, several options, for example alNone (no aligning)
• Cursor - change the mouse cursor if it's above a component
• BevelInner, BevelOuter, BevelWidth, BevelKind - a frame (line) around the component
• Left, Top, Width, Height - a position and a size of a component
• Visible - a component is visible
• Color - a color of a component (background)
• Font.Color - a color of a component’s font

User can left-click on it or he can select it using TAB key and confirm using Spacebar. Both ways call OnClick event and a programmer can do something.
Cancel and Default set a button as either ESC (Cancel) or Enter (Default). Important in a dialog
ModalResult - after pressing it returns this value to a called dialog

It’s used for inputing a line-long text, for example a password. If you enable PasswordChar, a component will be used for a password input.

This component is - generally - used for showing a text. The text is set in Caption property. Very important property is FocusControl. This property show the component which will get a focus in case of clicking on a label. If & sign is in a caption, the following letter will be used an accelerator (if Windows allows that), that is, after pressing ALT + key, that component will be given a focus. Autosize dynamically determines and sets the width based on the length of a text.

Allows users to choose from 2 options YES or NO (property Checked) or 3 options. That is set via property State.

Allows users to choose one option out of several ones.
Warning: TRadioButton automatically checks that only one is selected. That applies to all TRadioButtons of one owner (for example on a form or on a panel). If we put two panels on a form and on both we put several TRadioButtons, then only the ones within the same panel can influence each other. Ideally use component TGroupBox which has a title and a frame which can be seen in a picture below where you can as well see difference between TRadioButton and TCheckBox (more options can be chosen within a group).

Similar to TEdit but operates with more lines. Lines are saved in a property Lines which allows their saving and loading. Scrollbars sets the visibility of scrollbars. WordWrap sets whether a text will be put on another line if it extends the current line. HideSelection hides selection if a component isn’t active (it doesn’t have a focus).

Looks similar to TMemo but a whole line is always chosen (index of a chosen line is in ItemIndex - only while running). Lines are saved in a property Lines.

This component allows users to pick an option from a scroll list or to input a text (if it’s enabled). Property Style determines whether user can input a text (csDropDown) or not (csDropDownList). Items are saved in property Items A chosen property is set by property ItemIndex where -1 means nothing is selected and 0 means the first item. If csDropDown is set as a style, the inputed text is saved in property Text.

We can now - using these several components - actually create something useful. Let’s create this form:

Into the body of OnClick event insert this code:

procedure TForm1.btnAddClick(Sender: TObject);
 begin
  if rbListBox.Checked then
   lst1.Items.Add(edt1.Text)
  else
   mem1.Lines.Add(edt1.Text);
  edt1.Text := ''; // clear
 end;

After pressing a button, the text will be added into the selected component. Once done that, the text in TEdit will be erased.
Now we just add code for CheckBox which is nothing really difficult:

procedure TForm1.chkReadOnlyMemoClick(Sender: TObject);
 begin
  mem1.ReadOnly := chkReadOnlyMemo.Checked;
 end;

Replace RadioButton with ComboBox with 2 items (insert into listbox, insert into memo - without an option to input a text). Also, make visible only the chosen component and the chosen one will always appear on the same place (that means you'll have to change a value of property Left). Finally, add CheckBox with caption “Bold” which - if checked - makes the text in Memo bold (via property Font).

Sample project regarding homework can be downloaded from here.

About the Author