Getting Started with Visual Components Projects (Original Version)

Introduction

There are many good demonstrations of the use of components in the folder named "A Smart Book Demos" provided with Smart Mobile Studio. We include two demonstrations so that you can see how easy it is to reuse code in the Oxygene tutorial. The first is based on the Android EditText Demonstration and the second on the Graphics2D Julia Set Applet.

The code of the edit box demonstration follows a screenshot.

Demo in use

The Code of EditForm.pas

unit EditForm;

interface

uses 
  w3system, w3graphics, w3components, w3forms, w3fonts, w3borders, w3application,
  w3button, w3label, w3editbox, w3layout;

type
  TForm1=class(TW3form)
  private
    {$I 'EditForm:intf'}
    FLayout: TLayout;
  protected
    procedure InitializeObject; override;
    procedure Resize; override;
    procedure Clear(sender : TObject);
    procedure Copy(sender : TObject);
  end;

implementation

procedure TForm1.InitializeObject;
begin
  inherited;
  {$I 'EditForm:impl'}
  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)
  ]);
  lblTitle.Font.Size := 18;
  lblOutput.Font.Color := clRed;
  btnClear.onClick := Clear;
  edtName.OnChanged := Copy;
end;
 
procedure TForm1.Resize;
begin
  inherited;
  FLayout.Resize(Self);
end;

procedure TForm1.Clear(sender : TObject);
begin
  lblOutput.caption := '';
  edtName.text := '';
end;

procedure TForm1.Copy(sender : TObject);
begin
  lblOutput.caption := 'Hello, ' + edtName.text + '!';
end;

end.

The code of EditForm.sfm

<?xml version="1.0" encoding="utf-16"?>
<SFM>
  <W3Form clsid="TW3Form">
    <name>EditForm</name>
    <left>0</left>
    <top>0</top>
    <width>200</width>
    <height>64</height>
    <enabled>1</enabled>
    <visible>1</visible>
    <angle>0</angle>
    <border.radius>0</border.radius>
    <alpha.blend>0</alpha.blend>
    <opacity>255</opacity>
    <zoom>1</zoom>
    <style.name>TW3Form</style.name>
    <tag.value>0</tag.value>
    <color>clNone</color>
    <transparent>0</transparent>
    <children>
      <W3Button clsid="TW3Button">
        <name>btnClear</name>
        <left>0</left>
        <top>32</top>
        <width>200</width>
        <height>24</height>
        <enabled>1</enabled>
        <visible>1</visible>
        <angle>0</angle>
        <border.radius>0</border.radius>
        <alpha.blend>0</alpha.blend>
        <opacity>255</opacity>
        <zoom>1</zoom>
        <style.name>TW3Button</style.name>
        <tag.value>0</tag.value>
        <color>clNone</color>
        <transparent>0</transparent>
        <caption>Clear</caption>
      </W3Button>
      <W3Label clsid="TW3Label">
        <name>lblTitle</name>
        <left>0</left>
        <top>0</top>
        <width>256</width>
        <height>24</height>
        <enabled>1</enabled>
        <visible>1</visible>
        <angle>0</angle>
        <border.radius>0</border.radius>
        <alpha.blend>0</alpha.blend>
        <opacity>255</opacity>
        <zoom>1</zoom>
        <style.name>TW3Label</style.name>
        <tag.value>0</tag.value>
        <color>clNone</color>
        <transparent>0</transparent>
        <text>Using button, labels and edit box</text>
      </W3Label>
      <W3Label clsid="TW3Label">
        <name>lblForename</name>
        <left>0</left>
        <top>80</top>
        <width>200</width>
        <height>24</height>
        <enabled>1</enabled>
        <visible>1</visible>
        <angle>0</angle>
        <border.radius>0</border.radius>
        <alpha.blend>0</alpha.blend>
        <opacity>255</opacity>
        <zoom>1</zoom>
        <style.name>TW3Label</style.name>
        <tag.value>0</tag.value>
        <color>clNone</color>
        <transparent>0</transparent>
        <text>First name</text>
      </W3Label>
      <W3EditBox clsid="TW3EditBox">
        <name>edtName</name>
        <left>0</left>
        <top>128</top>
        <width>200</width>
        <height>24</height>
        <enabled>1</enabled>
        <visible>1</visible>
        <angle>0</angle>
        <border.radius>0</border.radius>
        <alpha.blend>0</alpha.blend>
        <opacity>255</opacity>
        <zoom>1</zoom>
        <style.name>TW3EditBox</style.name>
        <tag.value>0</tag.value>
        <color>clNone</color>
        <transparent>0</transparent>
        <text></text>
      </W3EditBox>
      <W3Label clsid="TW3Label">
        <name>lblOutput</name>
        <left>0</left>
        <top>160</top>
        <width>200</width>
        <height>24</height>
        <enabled>1</enabled>
        <visible>1</visible>
        <angle>0</angle>
        <border.radius>0</border.radius>
        <alpha.blend>0</alpha.blend>
        <opacity>255</opacity>
        <zoom>1</zoom>
        <style.name>TW3Label</style.name>
        <tag.value>0</tag.value>
        <color>clNone</color>
        <transparent>0</transparent>
        <text></text>
      </W3Label>
    </children>
  </W3Form>
</SFM>

Julia Set Fractal

This demonstration shows how you can draw graphics. We added to the form only a W3PaintBox and named it pb. The source code of Form1 follows a screenshot.

Julia Fractal

unit Form1;

interface

uses 
  w3system, w3graphics, w3components, w3forms, w3fonts, w3borders, w3application, W3PaintBox;

type
  TForm1=class(TW3form)
  private
    {$I 'Form1:intf'}
    xcorner, y2corner, x2corner, ycorner, ca, cb, za2, za1, za, zb : real;
    count, xsize, ysize, xgap, ygap, max : integer;
  protected
    procedure InitializeObject; override;
    procedure StyleTagObject; reintroduce; virtual;
    procedure Resize; override;
    procedure iterate;
  end;

implementation

procedure TForm1.InitializeObject;
begin
  inherited;
  {$I 'Form1:impl'}
  pb.Left := 0;
  pb.Top := 0;
  pb.Width := 500;
  pb.Height := 500;
  xsize := pb.Canvas.Context.Width;
  ysize := pb.Canvas.Context.Height;
  xcorner := -1.5;
  ycorner := -1.5;
  x2corner := 1.5;
  y2corner := 1.5;
  max := 50;
  xgap := 10;
  ygap := 10;
  ca := 0.360284; //Try ca := 0.365;
  cb := 0.100376; //Try cb := 0.095;
  pb.OnPaint :=
    procedure (Sender: TObject; Canvas: TW3Canvas)
    var
      i, k : integer;
    begin
      for k := ysize downTo 1 do
        for i := 1 to xsize do
          begin
            za := (i / xsize) * (x2corner - xcorner) + xcorner;
            zb := (k / ysize) * (y2corner - ycorner) + ycorner;
            iterate;
            if count > max then
              count := 0;
            case count mod 10  of
              0 : Canvas.FillStyle := 'darkgray';
              1 : Canvas.FillStyle := 'red';
              2 : Canvas.FillStyle := 'orange';
              3 : Canvas.FillStyle := 'yellow';
              4 : Canvas.FillStyle := 'green';
              5 : Canvas.FillStyle := 'blue';
              6 : Canvas.FillStyle := 'indigo';
              7 : Canvas.FillStyle := 'violet';
              8 : Canvas.FillStyle := 'black';
              9 : Canvas.FillStyle := 'white';
            end;
            Canvas.FillRectF(xgap + i, ygap + ysize - k, 1, 1);
          end;
    end;
end;

procedure TForm1.Resize;
begin
  inherited;
end;
 
procedure TForm1.StyleTagObject;
begin
  // Custom styling
end;

procedure TForm1.iterate;
begin
  count := 0;
  za2 := za;
  while true do
    begin
      za1 := za2;
      za2 := (za1 * za1 - zb * zb) + ca;
      zb := za1 * zb * 2 + cb;
      if za2 * za2 + zb * zb > 4 then
        exit;
      count := count + 1;
      if count > max  then
        exit;
    end;
end;
 
end.