Getting Started with Visual Components Projects

Before doing this exercise you must first have version 2.1 of Smart Mobile Studio installed on your PC.

The steps to develop a little greeting application are as follows:

  1. Select menu item File > New > New project... then double click on Visual Components Project.
  2. Add these five components arranged vertically in the order TW3Label, TW3Button, TW3Label, TW3EditBox and TW3Label.
    To add a component, click on its icon then click in the form.
  3. Use the Property inspector to change the names to lblTitle, btnClear, lblForename, edtName and lblOutput.
  4. Change the caption properties of the labels to (1) Using button, labels and edit box, (2) First name and (3) a single space
  5. Increase the width of the top label to 350.
  6. Change the Caption property of the button to Clear and clear the text from the Text property of the EditBox.
  7. Double click on the button and enter this code into the btnClearClick procedure:
    lblOutput.Caption := '';
    edtName.Text := '';
  8. In the Property inspector, double click in the edit box of the OnChanged event of edtName and enter this code into the edtNameChanged procedure:
    lblOutput.caption := 'Hello, ' + edtName.text + '!';
  9. Add System.Colors to the uses clause and append this code to the InitializeObject procedure:
    lblTitle.Font.Size := 18;
    lblOutput.Font.Color := clRed;	
  10. Execute the program and enter the name Jessica. Our Smart Pascal code, the XML code (of the form) and layout instructions follow a screenshot.
    Screenshot

    Screenshot

    unit Form1;
    
    interface
    
    uses 
      SmartCL.System, SmartCL.Graphics, SmartCL.Components, SmartCL.Forms, 
      SmartCL.Fonts, SmartCL.Borders, SmartCL.Application, SmartCL.Controls.Label,
      SmartCL.Controls.EditBox, SmartCL.Controls.Button, System.Colors;
    
    type
      TForm1 = class(TW3Form)
        procedure edtNameChanged(Sender: TObject);
        procedure btnClearClick(Sender: TObject);
      private
        {$I 'Form1:intf'}
      protected
        procedure InitializeForm; override;
        procedure InitializeObject; override;
        procedure Resize; override;
      end;
    
    implementation
    
    { TForm1 }
    
    procedure TForm1.btnClearClick(Sender: TObject);
    begin
      lblOutput.Caption := '';
      edtName.Text := '';
    end;
    
    procedure TForm1.edtNameChanged(Sender: TObject);
    begin
      lblOutput.caption := 'Hello, ' + edtName.text + '!';
    end;
    
    procedure TForm1.InitializeForm;
    begin
      inherited;
      // this is a good place to initialize components
    end;
    
    procedure TForm1.InitializeObject;
    begin
      inherited;
      {$I 'Form1:impl'}
      lblTitle.Font.Size := 18;
      lblOutput.Font.Color := clRed;
    end;
     
    procedure TForm1.Resize;
    begin
      inherited;
    end;
     
    initialization
      Forms.RegisterForm({$I %FILE%}, TForm1);
    end.
    
    
    <SMART>
      <Form version="2" subversion="1">
        <Created>2015-03-23T13:31:19.931</Created>
        <Modified>2015-03-23T13:31:19.933</Modified>
        <object type="TW3Form">
          <Caption>W3Form</Caption>
          <Name>Form1</Name>
          <object type="TW3Label">
            <Caption>Using button, labels and edit box</Caption>
            <Width>350</Width>
            <Top>8</Top>
            <Left>16</Left>
            <Height>32</Height>
            <Name>lblTitle</Name>
          </object>
          <object type="TW3EditBox">
            <Value></Value>
            <Range></Range>
            <Width>128</Width>
            <Top>120</Top>
            <Left>16</Left>
            <Height>32</Height>
            <Name>edtName</Name>
            <OnChanged>edtNameChanged</OnChanged>
          </object>
          <object type="TW3Button">
            <Caption>Clear</Caption>
            <Width>128</Width>
            <Top>48</Top>
            <Left>16</Left>
            <Height>32</Height>
            <Name>btnClear</Name>
            <OnClick>btnClearClick</OnClick>
          </object>
          <object type="TW3Label">
            <Caption>First name</Caption>
            <Width>128</Width>
            <Top>88</Top>
            <Left>16</Left>
            <Height>32</Height>
            <Name>lblForename</Name>
          </object>
          <object type="TW3Label">
            <Caption> </Caption>
            <Width>128</Width>
            <Top>159</Top>
            <Left>16</Left>
            <Height>32</Height>
            <Name>lblOutput</Name>
          </object>
        </object>
      </Form>
    </SMART>
    
  11. To improve the layout, start by appending this code to the InitializeObject procedure:
    FLayout := Layout.Client(Layout{1}.Margins(20).Spacing(5), [
        Layout{2}.Top(lblTitle),
        Layout{3}.Top(btnClear),
        Layout{4}.Top(lblForename),
        Layout{5}.Top(edtName),
        Layout{6}.Top(lblOutput)
      ]);
    
  12. Append this code to the Resize procedure:
    FLayout.Resize(Self);
  13. Make this declaration of a private variable (field):
    FLayout: TLayout;
  14. Add SmartCL.Layout to the uses clause.
  15. Execute the program and enter the name Jessica.
    The output should look like the screenshot on the following page (which contains equivalent code for previous versions of Smart Mobile Studio).
Programming - a skill for life!

How to write programs in Smart Pascal