FireMonkey introduction

FireMonkey is a new multi-platform Delphi component library from Delphi XE2. It's VCL alternative. VCL will be still improved and maintained in future, but is fixed to Windows only. FireMonkey exists for Windows, Mac OSX and iOS, Linux and Android will be added in future (with other mobile platforms).

Unlike CLX (QT based), is FireMonkey created in Object Pascal (based on KSDEV) and use GPU hardware - on Windows Direct2D or GDI+, on MAC OpenGL (for Linux maybe too), for iOS OpenGL_ES (for Android in future probably too).

All is "CustomDraw" and Windows management operations (or mouse and so on) are handled with Platform instance and passed to OS. So about 90% of source code is OS independed.

FireMonkey HD is project for 2D app.

Style is basic

When compare FireMonkey and VCL: VCL is more complex, but during XE2 livetime is expected several updates (first one in end of September as Michael Swindell said).

FireMonkey is created with different idea - nothing is fixed. This means (for example) that difference between TButton and TCheckBox is in graphic representation (and setting some property) - both is painted, but differently. Of course - style can be changed.

For example: you can draw TCheckBox as button or something complete different (U admit that there is a problem for me to think this way, but I try to) - everything is vector based. All is dynamic - checkbox can be checkbox until mouse over, in this moment simple change "Style". Every control has property StyleLookup, which is can be used for alternate normal style. "Normal style" is different for different OS.

Please look at important extension to Align - there is drop down combo box on screenshot.

Style is important part of FireMonkey. For example this definition of TListBox item. Style is defined in TStyleBook component.

In designeru can be defined tree of item from screenshot (CustomItem). Please look at selected item - it is checkbox with special style. Style can be defined per control, eg. TCheckBox can look normal, but next checkbox can look completely different.

Definition of style for checkbox.

And how can look this at the runtime?

Create one item.

    1procedure TfrmCustomList.Button2Click(Sender: TObject);
    2var
    3  Item: TListBoxItem;
    4begin
    5  // create custom item
    6  Item := TListBoxItem.Create(nil);
    7  Item.Parent := ListBox1;
    8  // this code set event - when we need to setup item
    9  Item.OnApplyStyleLookup := DoApplyStyleLookup;
   10  // this set our style to new item
   11  Item.StyleLookup := 'CustomItem';
   12end;
   13
   14procedure TfrmCustomList.DoApplyStyleLookup(Sender: TObject);
   15var
   16  B: TBitmap;
   17  Item: TListboxItem;
   18begin
   19  Item := TListBoxItem(Sender);
   20  // create thumbnail
   21  B := TBitmap.Create(10 + random(50), 10 + random(50));
   22  B.Clear($FF000000 or TAlphaColor(random($FFFFFF)));
   23  // use this to set our child controls value - this code use BindingName in style to search
   24  Item.Binding['image'] := ObjectToVariant(B); // set thumbnail
   25  Item.Binding['text'] := 'item ' + IntToStr(Item.Index); // set filename
   26  Item.Binding['resolution'] := IntToStr(B.Width) + 'x' + IntToStr(B.Height) + ' px'; // set size
   27  Item.Binding['depth'] := '32 bit';
   28  Item.Binding['visible'] := true; // set Checkbox value
   29  Item.Binding['visible'] := EventToVariant(DoVisibleChange); // set OnChange value
   30  Item.Binding['info'] := EventToVariant(DoInfoClick); // set OnClick value
   31  // free thumbnail
   32  B.Free;
   33end;
   34
   35procedure TfrmCustomList.DoInfoClick(Sender: TObject);
   36begin
   37  InfoLabel.Text := 'Info Button click on ' + IntToStr(ListBox1.ItemIndex) + ' listbox item';
   38end;
   39
   40procedure TfrmCustomList.DoVisibleChange(Sender: TObject);
   41begin
   42  InfoLabel.Text := 'Checkbox changed ' + IntToStr(ListBox1.ItemIndex) + ' listbox item to ' + BoolToStr(Listbox1.Selected.Binding['visible'], true);
   43end;

Grouping components

With this as FireMonkey conceived, can be quite easily compose components on form.

There is in one button another button with checkbox. User (for example) can click on outer button or inner button, position of inner button is relative to bounds. This works exactly for another components.

Some variables

In FMX.Types is defined

  // On low-end hardware or mobile bitmap effects are slowly
  GlobalDisableFocusEffect: Boolean = False;
  // Use Direct2D in Windows Vista or Windows 7 by default
  GlobalUseDirect2D: Boolean = True;
  // Use Direct2D in Windows Vista or Windows 7 in software mode
  GlobalUseDirect2DSoftware: Boolean = False;
  // Use HW accelerated effect if possible
  GlobalUseHWEffects: Boolean = True;

VCL and FMX

You can show FMX dialog from VCL app (another direction can be a problem). From another IDE instance create new FMX form and from VCL project simple add this unit (please warning ignore).

Last remark: There is big EXE size difference between debug and release version of your program (10MB x 3MB).