Using a ComboBox

In our Lazarus demonstration we show you how to use a ComboBox with style csDropDownList to allow the user to select the type of shape to display from a fixed list. We demonstrate also the use of a standard ComboBox to set colours using its list and to enable the user to add more colours to the list by typing them into its edit box.

In the Object Inspector we clicked on the ellipsis button for the Items property of cboShape to obtain the Strings Editor Dialog then typed in the shapes. The cboShapeSelect procedure changes the type of shape according to the zero-based ItemIndex (the index of the selected item in the list).

Similarly, we clicked on the ellipsis button for the Items property of cboColour to obtain the Strings Editor Dialog then typed in the initial colour names (black, green and red). The cboColourSelect procedure changes the colour of the shape according to the selected text. The cboColourEditingDone procedure adds the typed colour to the list if it is not already present and if it is in the array of colours (strColours). For these we have numbers representing the amounts of red, green and blue light making up the colour stored in a parallel array (intColours). This procedure also sets the colour of the shape.

As a final refinement, we changed the AutoComplete property to True so that the user does not need to type many letters to obtain a colour already in the list.

The screenshot shows the result of typing in a new colour.

Output from program ComboBoxDemo

Output from program ComboBoxDemo

Our code of the files needed for program ComboBoxDemo follows. You can copy the code if necessary, but a you should be able to adapt it for your own use of ComboBoxes by inspecting the code.

uComboBoxDemo.pas

unit uComboBoxDemo;

interface

uses
  Classes, SysUtils, FileUtil, Forms, Controls, Graphics, Dialogs, StdCtrls,
  ExtCtrls;

type
  TfrmComboBox = class(TForm)
    cboShape: TComboBox;
    cboColour: TComboBox;
    Shape1: TShape;
    StaticText1: TStaticText;
    StaticText2: TStaticText;
    StaticText3: TStaticText;
    StaticText4: TStaticText;
    procedure cboColourEditingDone(Sender: TObject);
    procedure cboColourSelect(Sender: TObject);
    procedure cboShapeSelect(Sender: TObject);
  end;

var
  frmComboBox: TfrmComboBox;

implementation

{$R *.lfm}

var
  strColours : array [1 .. 19] of string = ('maroon', 'olive', 'navy', 'purple', 'teal',
                                             'gray', 'silver', 'lime', 'yellow', 'fuchsia',
                                             'aqua', 'ltgray', 'dkgray', 'white', 'moneygreen',
                                             'blue', 'skyblue', 'cream', 'medgray');

  intColours : array [1 .. 19] of integer = ($000080, $008080, $800000, $800080, $808000,
                                             $808080, $C0C0C0, $00FF00, $00FFFF, $FF00FF,
                                             $FFFF00, $C0C0C0, $808080, $FFFFFF, $C0DCC0,
                                             $FF0000, $F0CAA6, $F0FBFF, $A4A0A0);

function ColourValue (Colour : string) : integer;
var
  i : integer;
  Found : Boolean;
begin
  i := 0;
  Found := False;
  repeat
    inc(i);
    if Colour = strColours[i] then
      begin
        Found := True;
        result := intColours[i];
      end;
  until (i = 19) or Found;
  if not Found then
    result := -1;
end;

procedure TfrmComboBox.cboShapeSelect(Sender: TObject);
begin
  case cboShape.ItemIndex of
    0 : Shape1.Shape:= stCircle;
    1 : Shape1.Shape:= stDiamond;
    2 : Shape1.Shape:= stEllipse;
    3 : Shape1.Shape:= stRectangle;
    4 : Shape1.Shape:= stSquare;
    5 : Shape1.Shape:= stTriangle;
  end;
end;

procedure TfrmComboBox.cboColourSelect(Sender: TObject);
var
  SelectedColour : string;
begin
  SelectedColour := cboColour.Text;
  if SelectedColour = 'black' then
    Shape1.Brush.Color := $000000
  else if SelectedColour = 'red' then
    Shape1.Brush.Color:= $0000FF
  else if SelectedColour = 'green' then
    Shape1.Brush.Color:= $008000
  else
    Shape1.Brush.Color := ColourValue(SelectedColour);
end;

procedure TfrmComboBox.cboColourEditingDone(Sender: TObject);
var
  intColour, intIndex : integer;
  strColour : string;
begin
  strColour := LowerCase(CboColour.Text);
  intIndex := cboColour.items.indexof(strColour);
  if intIndex <  0 then
    begin  //Typed colour is not an item.
      intColour := ColourValue(strColour);
      if intColour > 0 then //Colour is in array
        begin
          Shape1.Brush.Color := intColour;
          cboColour.Items.Add(strColour);
        end
      else
        ShowMessage(CboColour.Text + ' unavailable');
    end
  else
    begin  //Typed colour is already an item.
      cboColour.ItemIndex := intIndex;
      cboColourSelect(Sender);
    end;   
end;

end.
      

uComboBoxDemo.lfm

object frmComboBox: TfrmComboBox
  Left = 557
  Height = 143
  Top = 184
  Width = 425
  Caption = 'Shapes'
  ClientHeight = 143
  ClientWidth = 425
  LCLVersion = '0.9.30'
  object cboShape: TComboBox
    Left = 8
    Height = 28
    Top = 56
    Width = 121
    ItemHeight = 20
    Items.Strings = (
      'Circle'
      'Diamond'
      'Ellipse'
      'Rectangle'
      'Square'
      'Triangle'
    )
    OnSelect = cboShapeSelect
    Style = csDropDownList
    TabOrder = 0
  end
  object Shape1: TShape
    Left = 132
    Height = 121
    Top = 7
    Width = 176
    Shape = stTriangle
  end
  object cboColour: TComboBox
    Left = 312
    Height = 28
    Top = 56
    Width = 104
    AutoComplete = True
    AutoCompleteText = [cbactEnabled, cbactEndOfLineComplete, cbactSearchAscending]
    ItemHeight = 20
    Items.Strings = (
      'black'
      'green'
      'red'
    )
    OnEditingDone = cboColourEditingDone
    OnSelect = cboColourSelect
    TabOrder = 1
  end
  object StaticText1: TStaticText
    Left = 8
    Height = 23
    Top = 24
    Width = 120
    Caption = 'Select a shape.'
    TabOrder = 2
  end
  object StaticText2: TStaticText
    Left = 312
    Height = 17
    Top = 28
    Width = 104
    Caption = 'Select a colour'
    TabOrder = 3
  end
  object StaticText3: TStaticText
    Left = 312
    Height = 18
    Top = 84
    Width = 104
    Caption = 'or type it then'
    TabOrder = 4
  end
  object StaticText4: TStaticText
    Left = 312
    Height = 17
    Top = 103
    Width = 96
    Caption = 'click in shape.'
    TabOrder = 5
  end
end

ComboBoxDemo.lpr

program ComboBoxDemo;

uses
  Interfaces,  Forms, uComboBoxDemo;

{$R *.res}

begin
  Application.Initialize;
  Application.CreateForm(TfrmComboBox, frmComboBox);
  Application.Run;
end. 

Programming - a skill for life!

Using widgets (such as list boxes, combo boxes, string grids, DBgrids, charts and maps) and drawing on the canvas