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.