[Pas2js] compound component

[warleyalex]

I believe for simple Pas2JS components, we can use the "group of controls as
one single component" approach, and use subComponents properties to config
the subcomponents, like this:

-------------------
unit EditGroup;

{$mode objfpc}{$H+}

interface

uses
  Classes, SysUtils, Graphics, Controls, LCLIntf, Dialogs, StdCtrls;

type
  TEditGroup = class(TCustomControl)
  private
    FButton: TButton;
    FFirstEdit: TEdit;
    FFirstLabel: TLabel;
    FSecondEdit: TEdit;
    FSecondLabel: TLabel;
  protected
    procedure Paint; override;
  public
    constructor Create(AOwner: TComponent); override;
    destructor Destroy; override;
  published
    property Button: TButton read FButton;
    property FirstEdit: TEdit read FFirstEdit;
    property FirstLabel: TLabel read FFirstLabel;
    property SecondEdit: TEdit read FSecondEdit;
    property SecondLabel: TLabel read FSecondLabel;
  end;

procedure Register;

implementation

{ TEditGroup }

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

  Width := 213;
  Height := 104;
  Color := clWhite;

  FFirstLabel := TLabel.Create(Self);
  FFirstLabel.SetSubComponent(True);
  FFirstLabel.Parent := Self;
  FFirstLabel.Top := 11;
  FFirstLabel.Left := 8;
  FFirstLabel.Name := 'FirstLabel';

  FFirstEdit := TEdit.Create(Self);
  FFirstEdit.SetSubComponent(True);
  FFirstEdit.Parent := Self;
  FFirstEdit.Top := 8;
  FFirstEdit.Left := 84;
  FFirstEdit.Width := 121;
  FFirstEdit.Name := 'FirstEdit';

  FSecondLabel := TLabel.Create(Self);
  FSecondLabel.SetSubComponent(True);
  FSecondLabel.Parent := Self;
  FSecondLabel.Top := 39;
  FSecondLabel.Left := 8;
  FSecondLabel.Name := 'SecondLabel';

  FSecondEdit := TEdit.Create(Self);
  FSecondEdit.SetSubComponent(True);
  FSecondEdit.Parent := Self;
  FSecondEdit.Top := 36;
  FSecondEdit.Left := 84;
  FSecondEdit.Width := 121;
  FSecondEdit.Name := 'SecondEdit';

  FButton := TButton.Create(Self);
  FButton.SetSubComponent(True);
  FButton.Parent := Self;
  FButton.Top := 71;
  FButton.Left := 69;
  FButton.Width := 75;
  FButton.Name := 'Button';
end;

destructor TEditGroup.Destroy;
begin
  FButton.Free;
  FFirstEdit.Free;
  FFirstLabel.Free;
  FSecondEdit.Free;
  FSecondLabel.Free;
  inherited;
end;

procedure TEditGroup.Paint;
begin
  Canvas.Rectangle(ClientRect);
end;

procedure Register;
begin
  RegisterComponents('Stack Overflow', [TEditGroup]);
end;

end.

-------------------
Now, If you want to create more complex and customized widgets, such as
SearchBar, I will prefer the "Component template" approach. You have a
"decoupled group of controls as one single component". Just drag 'n drop a
component template, and config the subcomponents.

This feature "component template" is present in Delphi7.  To create a
component template, select one or more components and issue the Component ->
Create Component Template menu command. 

Component templates are handy when different forms need the same group of
components and associated event handlers. 

Sadly, I have no information about this powerful component templates in
Lazarus.




--
Sent from: http://pas2js.38893.n8.nabble.com/