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
VCLFMX
Run time
VCLFMX
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 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!
Very nice article.
ReplyDeleteTaking 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!
Any reason why they renamed the TLabel caption property from captio to text?
ReplyDelete@Penrodyn - I don't know. Could be that it was named this way in DXScene/VGScene.
ReplyDeleteYes, TLabel in VGScene have such property like .Text, so the decided not to change it))
ReplyDeleteI have a question: on a Mac, do they have any binding to native frameworks, like UIKit or Core Data, etc.
Hi Lars,
ReplyDeleteThanks 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
@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@deksden - I don't own a Mac, so I haven't really studied how FMX hook up with the native frameworks.
ReplyDeleteThank you Lars!
ReplyDeleteThat 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 :)
some qustion
ReplyDelete1. full support Right To left ?
2. support linux x system ?
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@Maziar Navahan
ReplyDelete1. 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?
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@Binger - I don't know. I hadn't noticed that until you mentioned it.
ReplyDeletewhat is about bidimode property? is it obsoleted?
ReplyDelete@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.
ReplyDeleteFYI: 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