Delphi Programming

and software in general.

Thursday, August 25, 2011

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 comments:

  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!

    ReplyDelete
  2. Any reason why they renamed the TLabel caption property from captio to text?

    ReplyDelete
  3. @Penrodyn - I don't know. Could be that it was named this way in DXScene/VGScene.

    ReplyDelete
  4. 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.

    ReplyDelete
  5. 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

    ReplyDelete
  6. @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.

    ReplyDelete
  7. @deksden - I don't own a Mac, so I haven't really studied how FMX hook up with the native frameworks.

    ReplyDelete
  8. 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 :)

    ReplyDelete
  9. some qustion

    1. full support Right To left ?
    2. support linux x system ?

    ReplyDelete
  10. A VCL to FMX converter for projects would be nice. It doesnt have to do 100% but something like 80% would be nice; to help the process along.

    ReplyDelete
  11. @Maziar Navahan
    1. Please see reply to Ali
    2. FireMonkey does not support Linux in the XE2 release, but I do believe it is on the roadmap for future releases.

    @Wilfred Oluoch
    I 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?

    ReplyDelete
  12. 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?

    ReplyDelete
  13. @Binger - I don't know. I hadn't noticed that until you mentioned it.

    ReplyDelete
  14. what is about bidimode property? is it obsoleted?

    ReplyDelete
  15. @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.

    ReplyDelete
  16. FYI: Ali Keshavarz has posted an informative article on the state of BiDi in FMX. http://vcldeveloper.com/news/firemonkey-and-support-for-bi-directional-text-2/

    ReplyDelete