When you start out a new simplistic GUI project in VCL or FireMonkey (FMX) in XE2, you will notice a few differences from older Delphi versions. XE2 introduce consistent use of unit scope prefixes. The Windows related units are grouped under the Winapi prefix, and the VCL units under VCL. FireMonkey has been given the short prefix FMX.
As you can see - the basic generated skeleton code is quite similar between the two frameworks.
Apart from referring different framework units, the resource include statement is also different: "*.dfm" vs "*.fmx".
The skeleton code
unit MainUnitVCL;
interface
uses
Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System.Classes, Vcl.Graphics,
Vcl.Controls, Vcl.Forms, Vcl.Dialogs;
type
TFormVCL = class(TForm)
private
{ Private declarations }
public
{ Public declarations }
end;
var
FormVCL: TFormVCL;
implementation
{$R *.dfm}
end.
This is a FireMonkey HD project.
unit MainUnitFM;
interface
uses
System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants,
FMX.Types, FMX.Controls, FMX.Forms, FMX.Dialogs;
type
TFormFM = class(TForm)
private
{ Private declarations }
public
{ Public declarations }
end;
var
FormFM: TFormFM;
implementation
{$R *.fmx}
end.
The designer
The designers are fairly similar between the frameworks, but there are differences.The good old VCL
The new FireMonkey designer:
If you are wondering what's up with the drab grey look, you can relax. This is the designer look, not the run time look. FMX adopts to the theme of the OS it is running on - so it will look like a Windows app on Windows, and as a OSX app on OSX.
The form properties
Let's take a quick look at the properties of the standard form.
We are clearly not in Kansas anymore. FMX is a completely different framework, and it has been designed with cross platform in mind, unlike VCL which was designed to wrap Windows controls. This means we can look forward to learning new tricks, which some of us will view as a plus, while others will sigh and mutter something about things being better before.
Porting a project from VCL to FMX is more work than recreating the form in the FMX designer, hooking up the new event handlers, and pasting in code from the VCL project.
I added some standard controls to both forms.
Design time
VCL
FMX
Run time
VCL
FMX
Source code
VCLunit MainUnitVCL;
interface
uses
Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System.Classes, Vcl.Graphics,
Vcl.Controls, Vcl.Forms, Vcl.Dialogs, Vcl.StdCtrls;
type
TFormVCL = class(TForm)
Button1: TButton;
Memo1: TMemo;
Label1: TLabel;
Edit1: TEdit;
procedure Button1Click(Sender: TObject);
private
{ Private declarations }
public
{ Public declarations }
end;
var
FormVCL: TFormVCL;
implementation
{$R *.dfm}
procedure TFormVCL.Button1Click(Sender: TObject);
begin
Memo1.Lines.Add(Edit1.Text);
Label1.Caption := IntToStr(Memo1.Lines.Count);
end;
end.
FMX
unit MainUnitFM;
interface
uses
System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants,
FMX.Types, FMX.Controls, FMX.Forms, FMX.Dialogs, FMX.Edit, FMX.Layouts,
FMX.Memo;
type
TFormFM = class(TForm)
Button1: TButton;
Memo1: TMemo;
Label1: TLabel;
Edit1: TEdit;
procedure Button1Click(Sender: TObject);
private
{ Private declarations }
public
{ Public declarations }
end;
var
FormFM: TFormFM;
implementation
{$R *.fmx}
procedure TFormFM.Button1Click(Sender: TObject);
begin
Memo1.Lines.Add(Edit1.Text);
Label1.Text := IntToStr(Memo1.Lines.Count);
end;
end.
As you can see - although similar in many ways - there are many differences between VCL and FMX. One example: TLabel.Caption is no more. TLabel.Text is the correct property under FMX.
Then there is the glaring fact that FMX HD will build for OSX as well as both 32 and 64-bit Windows :) Alas - since I don't have a Mac, I can't show you the OSX version.
How do the form resources look?
VCLobject FormVCL: TFormVCL
Left = 0
Top = 0
Caption = 'FormVCL'
ClientHeight = 337
ClientWidth = 635
Color = clBtnFace
Font.Charset = DEFAULT_CHARSET
Font.Color = clWindowText
Font.Height = -11
Font.Name = 'Tahoma'
Font.Style = []
OldCreateOrder = False
PixelsPerInch = 96
TextHeight = 13
object Label1: TLabel
Left = 8
Top = 8
Width = 31
Height = 13
Caption = 'Label1'
end
object Button1: TButton
Left = 536
Top = 294
Width = 75
Height = 25
Caption = 'Button1'
Default = True
TabOrder = 0
OnClick = Button1Click
end
object Memo1: TMemo
Left = 8
Top = 24
Width = 498
Height = 265
Lines.Strings = (
'Memo1')
TabOrder = 1
end
object Edit1: TEdit
Left = 8
Top = 296
Width = 498
Height = 21
TabOrder = 2
Text = 'Edit1'
end
endFMX
object FormFM: TFormFM
BiDiMode = bdLeftToRight
Caption = 'FormFM'
ClientHeight = 400
ClientWidth = 600
Left = 0
Top = 0
Transparency = False
Visible = False
StyleLookup = 'backgroundstyle'
object Button1: TButton
Position.Point = '(496,363)'
Width = 80.000000000000000000
Height = 22.000000000000000000
OnClick = Button1Click
TabOrder = 1
StaysPressed = False
IsPressed = False
Text = 'Button1'
Default = True
end
object Memo1: TMemo
Position.Point = '(8,24)'
Width = 473.000000000000000000
Height = 321.000000000000000000
TabOrder = 10
WordWrap = False
end
object Label1: TLabel
Position.Point = '(8,8)'
Width = 120.000000000000000000
Height = 15.000000000000000000
TabOrder = 11
Text = 'Label1'
end
object Edit1: TEdit
Position.Point = '(8,360)'
Width = 473.000000000000000000
Height = 22.000000000000000000
TabOrder = 12
ReadOnly = False
Password = False
end
end
FMX is made for scaling, and it also have numerous other nifty features such as rotation.
Summary
This was just a very shallow outline of some of the differences between VCL and FMX, but it is perhaps enough food for thought to make you realize that you most likely will have to put some effort into moving from VCL to FMX. In some cases, you can get away with minor adjustments, but when it comes to sophisticated GUI - or stuff that is based on Windows functions - you will need to rewrite parts of your code.
Don't forget to visit http://www.embarcadero.com/world-tour to register for the RAD Studio XE2 World Tour event near you!
