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:

Select menu item File > New > New project... then double click on Visual Components Project.
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.
Use the Property inspector to change the names to lblTitle, btnClear, lblForename, edtName and lblOutput.
Change the caption properties of the labels to (1) Using button, labels and edit box, (2) First name and (3) a single space
Increase the width of the top label to 350.
Change the Caption property of the button to Clear and clear the text from the Text property of the EditBox.
Double click on the button and enter this code into the btnClearClick procedure:
```
lblOutput.Caption := '';
edtName.Text := '';
```
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 + '!';
```
Add System.Colors to the uses clause and append this code to the InitializeObject procedure:
```
lblTitle.Font.Size := 18;
lblOutput.Font.Color := clRed;	
```

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

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>

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)
  ]);

Append this code to the Resize procedure:
FLayout.Resize(Self);
Make this declaration of a private variable (field):
FLayout: TLayout;
Add SmartCL.Layout to the uses clause.
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).