Using an EditBox as a SpinEdit Control

When its InputType is itNumber, an EditBox becomes a SpinEdit control. The tiny up and down buttons may only show when the edit box has the focus. The up and down buttons change the value of the integer (represented as a string) within the range 12 to 18. The edit box has validation so that it will only accept a digit. Also, any number greater than 18 is changed to 18. The Smart Pascal code of the form unit and the XML code of the form follow the demonstration.

Demonstration

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.

EditBoxDemo.html

Smart Pascal Code of Form

unit Form1;

interface

uses 
  SmartCL.System, SmartCL.Graphics, SmartCL.Components, SmartCL.Forms, 
  SmartCL.Fonts, SmartCL.Borders, SmartCL.Application, SmartCL.Controls.EditBox,
  SmartCL.Controls.Memo, SmartCL.Controls.Label;

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

implementation

procedure TForm1.InitializeObject;
var
  fontSize: integer;

  procedure SetFontSize;
    begin
      fontSize := strToInt(W3EditBox1.Text);
      if fontSize in [12 .. 18] then
        W3Memo1.Font.Size := fontSize;
    end;

begin
  inherited;
  {$I 'Form1:impl'}
  W3Memo1.Text := 'The TW3Edit''s InputType is itNumber and the min and max for control' +
                  '  by the up and down clicks are set to be 12 and 18, respectively.';
  W3EditBox1.InputType := itNumber;
  W3EditBox1.setMax(18);
  W3EditBox1.setMin(12);
  W3EditBox1.Text := '12';
  W3Memo1.Font.Size := 12;
  W3Memo1.ScrollH := soNone;
  W3Memo1.ScrollV := soNone;
  W3EditBox1.OnKeyUp := procedure (Sender: TObject; aKeyCode: integer)
    begin
      if not (aKeyCode in [8, 48 .. 57, 96 .. 105]) then
        showMessage('Digits only!')
      else
        begin
          SetFontSize;
          if fontSize > 18 then
            begin
              W3EditBox1.Text := '18';
              W3Memo1.Font.Size := 18;
            end;
        end;
    end;
  W3EditBox1.OnClick := procedure (Sender: TObject)
    begin
      SetFontSize;
    end;
end;
 
initialization
  Forms.RegisterForm({$I %FILE%}, TForm1);

end.

XML Code of Form

<SMART>
  <Form version="2" subversion="1">
    <Created>2014-10-29T09:58:59.927</Created>
    <Modified>2014-10-29T13:47:09.673</Modified>
    <object type="TW3Form">
      <Caption>W3Form</Caption>
      <Name>Form1</Name>
      <object type="TW3EditBox">
        <Value>12</Value>
        <Text>W3EditBox</Text>
        <Range></Range>
        <Width>56</Width>
        <Top>8</Top>
        <Left>88</Left>
        <Height>32</Height>
        <Name>W3EditBox1</Name>
      </object>
      <object type="TW3Memo">
        <Text>W3Memo</Text>
        <Width>264</Width>
        <Top>48</Top>
        <Left>8</Left>
        <Height>144</Height>
        <Name>W3Memo1</Name>
      </object>
      <object type="TW3Label">
        <Caption>Font Size:</Caption>
        <Width>80</Width>
        <Top>8</Top>
        <Left>8</Left>
        <Height>32</Height>
        <Name>W3Label1</Name>
      </object>
    </object>
  </Form>
</SMART>
Programming - a skill for life!

How to use a range of visual components such as edit boxes, combo boxes, grids and charts on one or multiple forms (including a modal form)