How to make my own dialog component from Firemonkey TPopUp?

  

[Delphi XE5 Up2]

I am trying to use TPopUp to inherit and create a component, following the same idea as exposed on the Flyouts demo for the CalendarFlyout. I will be not using the Calendar, but I want that space free so that I can place any other FMX component that I want.

I have made the component using the new component wizard and added some controls:

unit PopupTest;

interface

uses
System.SysUtils, System.Classes, FMX.Types, FMX.Controls,
FMX.Layouts, FMX.StdCtrls;

type
TPopupTest = class(TPopup)
private
FPanel : TPanel;
FLayoutButton : TLayout;
FCloseButton : TButton;
FSaveButton : TButton;
FClientArea : TLayout;
protected
procedure OnClose(Sender: TObject);
procedure OnSave(Sender: TObject);
public
constructor Create(AOwner: TComponent); override;
destructor Destroy; override;
published
{ Published declarations }
end;

procedure Register;

implementation

procedure Register;
begin
RegisterComponents(‘Samples’, [TPopupTest]);
end;

{ TPopupTest }

constructor TPopupTest.Create(AOwner: TComponent);
begin
inherited;

FPanel := TPanel.Create(self);
FPanel.Position.X := 0;
FPanel.Position.Y := 0;
FPanel.Margins.Left := 10;
FPanel.Margins.Right := 10;
FPanel.Margins.Top := 10;
FPanel.Margins.Bottom := 10;
FPanel.StyleLookup := ‘flyoutpanel’;
FPanel.Align := TAlignLayout.alClient;
FPanel.Visible := True;

FLayoutButton := TLayout.Create(FPanel);
FLayoutButton.Align := TAlignLayout.alBottom;
FLayoutButton.Height := 22;

FCloseButton := TButton.Create(FLayoutButton);
FCloseButton.Align := TAlignLayout.alLeft;
FCloseButton.StyleLookup := ‘flyoutbutton’;
FCloseButton.Text := ‘Fechar’;
FCloseButton.OnClick := OnClose;

FSaveButton := TButton.Create(FLayoutButton);
FSaveButton.Align := TAlignLayout.alLeft;
FSaveButton.StyleLookup := ‘flyoutbutton’;
FSaveButton.Text := ‘Salvar’;
FSaveButton.OnClick := OnSave;

FClientArea := TLayout.Create(FPanel);
FClientArea.Align := TAlignLayout.alClient;

Width := 100;
Height := 100;
end;

destructor TPopupTest.Destroy;
begin
FClientArea.Free;
FCloseButton.Free;
FSaveButton.Free;
FLayoutButton.Free;
FPanel.Free;

inherited;
end;

procedure TPopupTest.OnClose(Sender: TObject);
begin

end;

procedure TPopupTest.OnSave(Sender: TObject);
begin

end;

end.

I have made several tests and nothing appears, just the popup itself, nothing inside. I am using the MetropoliUI style and the Styles on the component for the inner controls are based on that style.

For simplicity I have remove everything else and compiled and tested.

I am using the TPopUp for several reasons, but the main one is that my “dialog” will be inserted on the form, and I will add to it some TEdits that will be connected by LiveBinding to the same DataSet etc on the form. So no need to create another form with everything else, and preserve all the context (at least I believe this is the right thing to do)

What I am looking for:

What is missing to make all the internal controls appear
How to make sure that the FClientArea, that is a TLayout will be available for the user to add other controls on it?

The final result would like this:

Where in the middle area is a TLayout where I could drop other controls like TEdit.

Comments are closed.