Jump to content
uniGUI Discussion Forums
sobakava

Tutorial - Creating Custom Compound Components For UniGUI

Recommended Posts

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

 

 

Kawef.jpg

 

 

 

 

 

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

 

 

tIGfE.jpg

 

 

 

 

 

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.

 

 

bDpF2.jpg

 

 

 

 

 

 

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:

 

YZyyV.jpg

 

 

 

 

 

 

 

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.

 

 

vPzeV.jpg

 

 

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

 

MV5Sx.jpg

 

 

 

 

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:

 

HCvAD.jpg

 

 

 

 

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.
 
jyuzM.jpg
 
 
Now you can add this component to your UniGUI projects.
 
 
 
 
8TEX5.jpg
 
 
 
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.
  • Like 1
  • Upvote 6

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

×