Getting Started with Visual Components Projects
Before doing this exercise you must first have version 2.1 or later of Smart Mobile Studio installed on your PC. (The example will compile with Version 3.0 but when starting from scratch with this newest version you may see a slightly different uses section of Form1).
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. Save the project with a name such as Greeting.
-
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).
- Getting Started with Visual Components Projects (Original Version)
How to develop visual components projects with early versions of Smart Mobile Studio