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!

16 thoughts on “RAD Studio XE2 – VCL and FireMonkey (FMX) first glance comparison

  1. Very nice article.Taking a look a the code and the designer is very instructive. In fact, the integration of FireMonkey within the IDE is much better than with DXScene.And FireMonkey code, even if different, just looks familiar. It's well designed Delphi code.In all cases, I prefer the DFM approach to the more verbose XAML attributes jungle.Can't wait for XE2!

    Like

  2. Yes, TLabel in VGScene have such property like .Text, so the decided not to change it))I have a question: on a Mac, do they have any binding to native frameworks, like UIKit or Core Data, etc.

    Like

  3. Hi Lars,Thanks for the post. I noticed a BiDiMode property in the FMX form, does the property have any effect? Recently I wrote a blog post about BiDi support based on VGScene, and concluded VGScene had no BiDi support. I was wondering if FMX would be the same, and Andreano Lanusse told me BiDi support for FMX is in their roadmap:http://vcldeveloper.com/news/firemonkey-and-support-for-bi-directional-text/Now I am seeing a BiDiMode property in your code, and I am interested to know if it has any effect on FMX controls, or if it brings at least some basic BiDi support or not.Best Regards,Ali

    Like

  4. @Ali – The settings appears to have an effect, but I haven't looked into BiDi for FMX in detail, and unfortunately I am unable to offer further commentary on the status of specific features until XE2 is released.

    Like

  5. Thank you Lars!That is interesting that it has some effect. I hope at least it fixes BiDi text reading.It is possible to somehow use FMX in a right-to-left language user interface, if at least it provides BiDi text reading, and no BiDi layout. Anyways, I gotta wait a few more weeks and see it in the final version of XE2 myself 🙂

    Like

  6. @Maziar Navahan1. Please see reply to Ali2. FireMonkey does not support Linux in the XE2 release, but I do believe it is on the roadmap for future releases.@Wilfred OluochI agree that it sounds nice with a converter, but I am afraid that it would be very difficult to create one. How would it deal with 3rd party components?

    Like

  7. Why the text is blurred on fmx? Compare the vcl and fmx forms in the last 2 pics. The button and the 'label' text on the fmx is not so easy to read as on the vcl. Why's that?

    Like

  8. @ahmed – It is in there, but I really can't tell if it is working correctly as I have never used it, and I don't know anything about selecting the right font, the right locale, and the right text to see if it works or not.

    Like

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.