Hello World SmartMS

Description: Demonstrates the use of components in SMS
Programmer: Unknown
Compiler: Smart Mobile Studio 2.2

Introduction

The idea is develop a little greeting application using Smart Mobile Studio. This application is based on an old Android app.This exercise you must first have version 2.2 of Smart Mobile Studio installed on your PC.
Screenshot of the app

Screenshot of the app running in the Gingerbread emulator

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

  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. Press TAB
    See how the output should looks like.