Tutorial - Creating Custom Compound Components For UniGUI

[sobakava]

I have created some UniGUI components for my project, in that way I can re-use the visual objects that I have implemented at ease. I just wanted to share my way of doing this with you guys. Any comments, technical critiques are welcome.

 

 

 

 

 

 

1. Creating the Component Package

 

Since I have more than one custom components, I prefer to keep them in a Deplhi Package instead of individual self registering Delphi units. So we start with creating a component package in Delphi.

 

File > New > Other > Delphi Projects > Package

 

 

 

 

 

 

 

2. Adding a TUNIFrame to The Package

 

As the base of the components, I'm using TUNIFrame. We are going to add a TUNIFrame first.

 

File > New > Other > Delphi Projects > uniGUI for Delphi > Frame

 

 

 

 

 

 

 

3. Adding Child Components

 

Decorate your new TUNIFrame with existing UniGUI components as you wish. In this example, my frame looks like the picture below.

 

 

 

 

 

 

 

 

I'm also renaming the frame. In this case the name is 'frame_myunipanel'. Don't forget to save unit files to disk. I named the files as unit_myunipanel.

 

The visual object tree is shown below:

 

 

 

 

 

 

 

 

And this is how the project tree looks like. I saved package with the name 'package_myunipanel'. I have only one unit; unit_myunipanel in the project tree.

 

 

 

 

Our package has some dependencies:

 

Right click on package_myunipanel.bpl > View Source  from the pop-up menu.

 

 

requires
  rtl,
  vcl,
  vclimg,
  dbrtl,
  soaprtl,
  vcldb,
  uIndy22,
  uniTools22,
  uniGUI22Core,
  uniGUI22,
  designide,
  uniGUI22Chart;


contains
  unit_reg in 'unit_reg.pas',
  unit_myunipanel in 'unit_myunipanel.pas' {frame_myunipanel: TUniFrame};

 

4. Adding The Registrar Unit To The Project

 

At some point, we should tell Delphi to register our new component. We can do this in a plain Delphi unit.

 

File > New > Other > Delphi Projects > Delphi Files > Unit

 

 

 

 

 

Now we have a new unit in the package. I'm saving this unit as 'unit_reg.pas'. This is the final appearance of our package tree:

 

 

 

 

 

Here is the tricky part, the registration. This is the unit_reg.pas. 

 

unit unit_reg;


interface
uses uniGUIFrame;


procedure Register;


implementation


uses
  Classes,
  TreeIntf,
  unit_myunipanel;
type
  TFrameClass = class of TUniFrame;


procedure RegisterFramesAsComponents(const Page: string; const FrameClasses: array of TFrameClass);
var
  FrameClass: TFrameClass;
begin
  for FrameClass in FrameClasses do
  begin
    RegisterComponents(Page, [FrameClass]);
    RegisterSprigType(FrameClass, TComponentSprig);
  end;
end;


procedure Register;
begin
  RegisterFramesAsComponents('UniGUI 3rd Party', [Tframe_myunipanel]);


end;


end.

 

 

I did not add any published properties or methods to my panel yet. This is how the unit_myunipanel looks like. You can add properties and methods to your component just like you do with VCL units.

unit unit_myunipanel;


interface


uses
  Windows, Messages, SysUtils, Variants, Classes, Graphics,
  Controls, Forms, Dialogs, uniGUITypes, uniGUIAbstractClasses,
  uniGUIClasses, uniGUIFrame, uniTrackBar, uniLabel, uniEdit, uniGUIBaseClasses, uniPanel;


type
  Tframe_myunipanel = class(TUniFrame)
    UniContainerPanel1: TUniContainerPanel;
    UniEdit1: TUniEdit;
    UniLabel1: TUniLabel;
    UniTrackBar1: TUniTrackBar;
  private
    { Private declarations }
  public
    { Public declarations }
  end;


implementation


{$R *.dfm}


end.

4. Installing the Component

 

 

Right click on package_myunipanel.bpl > Install

 

 

Voila! We are good to go.

 

 

 

Now you can add this component to your UniGUI projects.

 

 

 

 

 

 

 

PS: TreeIntf.pas is located in here:

 

"c:\Program Files (x86)\Embarcadero\Studio\16.0\source\ToolsAPI\TreeIntf.pas" 

 

If your IDE can't find it, you might need to add it to your search path.

[davidizadar]

Thanks!

[sergio_sv]

Thanks.

[ganzqgy]

Thank you!

[billyChou]

Thanks

[Farshad Mohajeri]

Thank you for sharing this guideline.

[valadi]

thanks

but no view image file

plz make movie and upload  youtube

[Abaksoft]

Merci beaucoup Sobakava.

Excellent tuto

[Jancarlos Martins]

Thanks

[asapltda]

TKS

[gpaulino]

as you can add an icon to the component, I've tried but does not show any icon.

[billyChou]

Thanks

[molla2005b]

tnx

[asapltda]

Thanks   Muchas gracias excelente tutorial , sencillo, didactico una joya para para mi y sera que para muchos

 

[mabreu]

in my case , i use delphi 11.3 , but i try compile and ToolsAPI.pas error with DockForm not found , when did add to delphi library c:\Program Files (x86)\Embarcadero\Studio\22.0\source\ToolsAPI\ to use TreeIntf.
Anybody ca help me?

 

[Mircea Cornestian]

in my case , i use delphi 11.3 , but i try compile and ToolsAPI.pas error with DockForm not found , when did add to delphi library c:\Program Files (x86)\Embarcadero\Studio\22.0\source\ToolsAPI\ to use TreeIntf.
Anybody ca help me?

[Sherzod]

Hello,

Can you please specify first, which edition and build of uniGUI are you using? 

[Mircea Cornestian]

RAD Studio 11.3 Version 28.0.48361.3236

uniGUI Trial, uniGUI Complete Trial 

uni-1.90.0.1568

ext 7.5.1

jq 3.6.4

win32 target platform

I want to test: to make a component

when i try to use TreeIntf for method RegisterSprigType

package myWebComponents;

{$R *.res}
{$IFDEF IMPLICITBUILDING This IFDEF should not be used by users}
{$ALIGN 8}
{$ASSERTIONS ON}
{$BOOLEVAL OFF}
{$DEBUGINFO OFF}
{$EXTENDEDSYNTAX ON}
{$IMPORTEDDATA ON}
{$IOCHECKS ON}
{$LOCALSYMBOLS ON}
{$LONGSTRINGS ON}
{$OPENSTRINGS ON}
{$OPTIMIZATION OFF}
{$OVERFLOWCHECKS ON}
{$RANGECHECKS ON}
{$REFERENCEINFO ON}
{$SAFEDIVIDE OFF}
{$STACKFRAMES ON}
{$TYPEDADDRESS OFF}
{$VARSTRINGCHECKS ON}
{$WRITEABLECONST OFF}
{$MINENUMSIZE 1}
{$IMAGEBASE $400000}
{$DEFINE DEBUG}
{$ENDIF IMPLICITBUILDING}
{$IMPLICITBUILD ON}

requires
  rtl,
  vcl,
  uniGUI28,
  dsnap,
  dbrtl,
  uniGUI28Core,
  uniTools28,
  uIndy28,
  soaprtl,
  xmlrtl,
  inet,
  vclimg,
  vcldb,
  vclwinx,
  bindengine;

contains
  myWebMenuButton in 'myWebMenuButton\myWebMenuButton.pas';

end.

unit myWebMenuButton;

interface

uses
  System.SysUtils, System.Classes, Vcl.Controls, Vcl.Forms, uniGUIBaseClasses,
  uniGUIClasses, uniButton, uniBitBtn, uniMenuButton, uniGUIFrame,
  uniGUIDialogs;

  TreeIntf;

type
  TmyWebMenuButton = class(TUniMenuButton)
  private
    { Private declarations }
  protected
    { Protected declarations }

  public
    { Public declarations }
    constructor Create(AOwner: TComponent); override;
    destructor Destroy; override;
    procedure doonClick(Sender: TObject);

  published
    { Published declarations }
  end;

procedure Register;

implementation

constructor TmyWebMenuButton.Create(AOwner: TComponent);
begin
  inherited Create(AOwner);
  //
  onClick := doonClick;
end;

destructor TmyWebMenuButton.Destroy;
begin
  //
  inherited Destroy;
end;

procedure TmyWebMenuButton.doonClick(Sender: TObject);
begin
//Showmessage('test: Clicked');
(Sender as TUniMenuButton).DropdownMenu.PopupBy((Sender as TUniMenuButton))

end;

procedure Register;
begin
  RegisterComponents('myWebESP', [TmyWebMenuButton]);
  RegisterSprigType(TmyWebMenuButton, TComponentSprig);

end;

end.

but I noticed that the component also works without RegisterSprigType()

[Burhorst]

I've also comment out

 RegisterSprigType(TmyWebMenuButton, TComponentSprig);

and

  TreeIntf;

 

But when I run it and open the Form where the Frame ist inside, the following Exception raised:

Im Projekt AirPurifier ist eine Exception der Klasse EClassNotFound mit der Meldung 'Class TUniSimplePanel not found' aufgetreten.