Progress: CIU Designer

[Carldric Clement]

Originally Posted by Razor12911

I am not sure how far you have gone with development however there are some information that could be helpful which I'd like to share as I've created a similar project for installer creator once before.

Colors used by FireMonkey framework are reversed compared to VCL (what Inno uses) so the function RGBtoBGR will be useful to you when you decide to add color picker.

The font sizes are different as well because the DPI used in VCL (72 dpi) is different from FMX (96 dpi) whatever font values used during design mode should be multiplied by the factor 72/96 and by 96/72 when going from inno to fmx.

In order to make the code for paging through the wizard simple (welcome, system, install), introduce TTabControl and make tabs for each one of these pages and to make the tabcontrol itself transparent, you'll need to set its StyleLookup property to "transparentedit", this applies to everything that you want to make transparent in FMX, just set the StyleLookup value to this vale.

To get a list of fonts supported by Fmx you should use Printer from FMX.Printers.Win

var
  Printer: TPrinterWin;
begin
  Printer := TPrinterWin.Create; 
  ComboBox1.BeginUpdate;
  try
    ComboBox1.Items.AddStrings(Printer.Fonts);
  finally
    ComboBox1.EndUpdate;
  end;
  Printer.Free;

It's wise to introduce class objects for things such as buttons because not only does this mean you'll write less code but this way you can consolidate any bugs/issues encountered with one simple fix.

Something like this:

type
  TDesignButton = class(TSelection)
  private
    FRectangle: TRectangle;
    FLabel: TLabel;
    procedure MyMouseEnter(Sender: TObject);
    procedure MyMouseLeave(Sender: TObject);
  public
    constructor Create(AOwner: TComponent); override;
    destructor Destroy; override;
    procedure SetText(AText: String);
    procedure SetFont(AName: String; ASize: Single; AColor: TAlphaColor);
    procedure SetFontStyle(ABold, AItalic: Boolean);
    procedure SetAlignment(AHorzAlign, AVertAlign: TTextAlign;
      AOffsetX, AOffsetY: Single);
    procedure SetImage(AFilename: String);
  end;

constructor TDesignButton.Create(AOwner: TComponent);
begin
  inherited Create(Owner);
  Self.HideSelection := True;
  Self.ShowHandles := False;
  Self.OnMouseEnter := MyMouseEnter;
  Self.OnMouseLeave := MyMouseLeave;
  FRectangle := TRectangle.Create(Self);
  FRectangle.Parent := Self;
  FRectangle.Align := TAlignLayout.Client;
  FRectangle.HitTest := False;
  FRectangle.Fill.Bitmap.WrapMode := TWrapMode.TileStretch;
  FRectangle.Stroke.Thickness := 0;
  FLabel := TLabel.Create(FRectangle);
  FLabel.Parent := FRectangle;
  FLabel.Align := TAlignLayout.Client;
  FLabel.HitTest := False;
  FLabel.Text := '';
  FLabel.StyledSettings := [];
end;

destructor TDesignButton.Destroy;
begin
  inherited Destroy;
end;

procedure TDesignButton.MyMouseEnter(Sender: TObject);
begin
  Self.HideSelection := False;
  Self.ShowHandles := True;
end;

procedure TDesignButton.MyMouseLeave(Sender: TObject);
begin
  Self.HideSelection := True;
  Self.ShowHandles := False;
end;

procedure TDesignButton.SetText(AText: String);
begin
  FLabel.Text := AText;
end;

procedure TDesignButton.SetFont(AName: String; ASize: Single;
  AColor: TAlphaColor);
begin
  FLabel.Font.Family := AName;
  FLabel.Font.Size := ASize;
  FLabel.FontColor := AColor;
end;

procedure TDesignButton.SetFontStyle(ABold, AItalic: Boolean);
begin
  FLabel.Font.Style := [];
  if ABold then
    FLabel.Font.Style := FLabel.Font.Style + [TFontStyle.fsBold];
  if AItalic then
    FLabel.Font.Style := FLabel.Font.Style + [TFontStyle.fsItalic];
end;

procedure TDesignButton.SetAlignment(AHorzAlign, AVertAlign: TTextAlign;
  AOffsetX, AOffsetY: Single);
begin
  FLabel.TextAlign := AHorzAlign;
  FLabel.VertTextAlign := AVertAlign;
  FLabel.Margins.Left := AOffsetX;
  FLabel.Margins.Right := -AOffsetX;
  FLabel.Margins.Top := AOffsetY;
  FLabel.Margins.Bottom := -AOffsetY;
end;

procedure TDesignButton.SetImage(AFilename: String);
begin
  FRectangle.Fill.Kind := TBrushKind.Bitmap;
  FRectangle.Fill.Bitmap.Bitmap.LoadFromFile(AFilename);
end;

with its usage being:

var
  BackButton, NextButton: TDesignButton;

procedure TForm2.FormShow(Sender: TObject);
begin
  BackButton := TDesignButton.Create(Form2);
  BackButton.Parent := Form2;
  BackButton.SetBounds(20, 20, 100, 30);
  BackButton.SetText('Back');
  BackButton.SetFont('Agency FB', 14, claGreen);
  BackButton.SetFontStyle(True, False);
  BackButton.SetAlignment(TTextAlign.Center, TTextAlign.Center, -10, 0);
  BackButton.SetImage('back.png');

  NextButton := TDesignButton.Create(Form2);
  NextButton.Parent := Form2;
  NextButton.SetBounds(140, 20, 100, 30);
  NextButton.SetText('Next');
  NextButton.SetFont('Agency FB', 14, claDeepPink);
  NextButton.SetFontStyle(True, False);
  NextButton.SetAlignment(TTextAlign.Center, TTextAlign.Center, 10, 0);
  NextButton.SetImage('Next.png');
end;

I have uploaded a compiled demo of what to expect as a result, but you can improve upon this by introducing Get* functions, eg. GetText, GetFontName, GetFontSize etc etc....

Thanks for the information bro. Time to change a lot of code where I use the TImage from.