RAD Studio XE2 – VCL and FireMonkey (FMX) first glance comparison

Published with permission from Embarcadero.

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

VCL

unit 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?

VCL

object 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

end

FMX

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!