Selection by a ComboBox

A combo box used to consist of a drop-down list and an edit box for typing a value which might not be in the list. Nowadays (as in HTML5 and Smart Pascal) a combo box is merely a drop-down list. Our first example simply allows the user to select a colour for the label. The second, more interesting, demonstration uses an EditBox in conjunction with a ComboBox so that you can either type or select your chosen colour. If the colour you type is in our strColours array but not in the ComboBox list it will be added to the list and selected. Try the demonstration below and see the code beneath it.

The Smart Pascal code and XML code of the form of the straightforward example follow.

Smart Pascal Code of Simple Example

unit Form1;

interface

uses 
  SmartCL.System, SmartCL.Graphics, SmartCL.Components, SmartCL.Forms, 
  SmartCL.Fonts, SmartCL.Borders, SmartCL.Application, SmartCL.Controls.ComboBox,
  System.Colors, SmartCL.Controls.Label;

type
  TForm1 = class(TW3Form)
  private
    {$I 'Form1:intf'}
  protected
    procedure InitializeObject; override;
  end;

implementation

procedure TForm1.InitializeObject;
begin
  inherited;
  {$I 'Form1:impl'}
  cboColours.Add('Red');
  cboColours.Add('Green');
  cboColours.Add('Blue');
  cboColours.OnChanged := procedure(Sender: TObject)
    begin
      case cboColours.SelectedIndex of
        0: W3Label1.Font.Color := clRed;
        1: W3Label1.Font.Color := clGreen;
        2: W3Label1.Font.Color := clBlue;
      end;
    end;
  W3Label1.Caption := 'Please select a colour.';
  W3Label1.Font.Color := clRed;
end;
 
initialization
  Forms.RegisterForm({$I %FILE%}, TForm1);
end.    

XML Code of Form of Simple Example

<SMART>
  <Form version="2" subversion="1">
    <Created>2014-10-24T17:33:27.116</Created>
    <Modified>2014-10-25T17:30:59.214</Modified>
    <object type="TW3Form">
      <Caption>W3Form</Caption>
      <Name>Form1</Name>
      <object type="TW3ComboBox">
        <Width>224</Width>
        <Top>40</Top>
        <Left>8</Left>
        <Height>24</Height>
        <Name>cboColours</Name>
      </object>
      <object type="TW3Label">
        <Caption>W3Label</Caption>
        <Width>224</Width>
        <Top>8</Top>
        <Left>8</Left>
        <Height>32</Height>
        <Name>W3Label1</Name>
      </object>
    </object>
  </Form>
</SMART>

Demonstration of Editable Combo Box

This demo, developed using Version 2.2 of Smart Mobile Studio, also works with Version 3.0.

If the demo does not work in your current browser, try another such as Chrome. If you see no display at school, the security system might have blocked it. You can try instead this direct link to the program running on its own page.

Smart Pascal Code of the "Editable ComboBox" Example

unit Form1;

interface

uses 
  SmartCL.System, SmartCL.Graphics, SmartCL.Components, SmartCL.Forms, 
  SmartCL.Fonts, SmartCL.Borders, SmartCL.Application, SmartCL.Controls.ComboBox,
  System.Colors, System.Types, SmartCL.Controls.Label, SmartCL.Controls.EditBox;

type
  TForm1 = class(TW3Form)
    procedure edtColourChanged(Sender: TObject);
  private
    {$I 'Form1:intf'}
  const strColours: array [1 .. 24] of string = ('maroon', 'olive', 'navy', 'purple',
                                                 'teal', 'green', 'gray', 'silver',
                                                 'lime', 'yellow', 'fuchsia', 'red',
                                                 'aqua', 'lightgray', 'darkgray', 'white',
                                                 'moneygreen', 'blue', 'skyblue', 'cream',
                                                 'mediumgray', 'black', 'orange', 'pink');

  const intColours: array [1 .. 24] of TColor = (clMaroon, clOlive, clNavy, clPurple,
                                                 clTeal, clGreen, clGray, clSilver,
                                                 clLime, clYellow, clFuchsia, clRed,
                                                 clAqua, clLightGray, clDarkGray, clWhite,
                                                 clMoneyGreen, clBlue, clSkyBlue, clCream,
                                                 clMedGray, clBlack, clOrange, clPink);
  protected
    procedure InitializeObject; override;
    function ColourValue(Colour: string): integer;
  end;

implementation

function TForm1.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 = 24) or Found;
  if not Found then
    result := -1;
end;

procedure TForm1.edtColourChanged(Sender: TObject);
begin
  var intColour := ColourValue(edtColour.text);
  if  intColour <> -1 then  // If it is one of our allowed colours
    begin
      W3Label1.Font.Color := TColor(intColour);
      var idx := cboColours.indexOf(lowerCase(edtColour.text));
      if idx = -1 then // not already present so add it
        begin
          cboColours.Add(lowerCase(edtColour.text));
          cboColours.Values[cboColours.Count - 1] := intColour;
          cboColours.SelectedIndex := cboColours.Count - 1;
        end
      else //is present so set it to be selected
        cboColours.SelectedIndex := idx;
    end;
end;

procedure TForm1.InitializeObject;
begin
  inherited;
  {$I 'Form1:impl'}
  cboColours.Add('red');
  cboColours.Values[0] := clRed;
  cboColours.Add('green');
  cboColours.Values[1] := clGreen;
  cboColours.Add('blue');
  cboColours.Values[2] := clBlue;
  cboColours.OnChanged := procedure(Sender: TObject)
    begin
      W3Label1.Font.Color := cboColours.Values[cboColours.SelectedIndex];
    end;
  W3Label1.Caption := 'Please select or type a colour.';
  W3Label1.Font.Color := clRed;
end;
 
initialization
  Forms.RegisterForm({$I %FILE%}, TForm1);
end.

XML Code of the Form of the "Editable ComboBox" Example

<SMART>
  <Form version="2" subversion="2">
    <Created>2014-10-24T17:33:27.116</Created>
    <Modified>2019-10-17T19:48:08.841</Modified>
    <object type="TW3Form">
      <Caption>W3Form</Caption>
      <Name>Form1</Name>
      <object type="TW3ComboBox">
        <Width>224</Width>
        <Top>72</Top>
        <Left>8</Left>
        <Height>24</Height>
        <Name>cboColours</Name>
      </object>
      <object type="TW3Label">
        <Caption>W3Label</Caption>
        <Width>224</Width>
        <Top>8</Top>
        <Left>8</Left>
        <Height>24</Height>
        <Name>W3Label1</Name>
      </object>
      <object type="TW3EditBox">
        <Value></Value>
        <Range></Range>
        <Width>224</Width>
        <Top>48</Top>
        <Left>8</Left>
        <Height>24</Height>
        <Name>edtColour</Name>
        <OnChanged>edtColourChanged</OnChanged>
      </object>
    </object>
  </Form>
</SMART>