Leaderboard

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.

I want to know what to do, too. But I don't have JS.

Hello, I'm trying to setup the following lay-out. I have frame, alignment client, layout: border. It contains a header (region: top), body panel (unicontainerpanel - region center) that hosts a unidbgrid. Below the 2 is a unipanel with region south, it is collapsible. This all works fine, but I would like to add a splitter betwee the body panel and the panel at the bottom so that when the panel is not collapsed the user can make it bigger or smaller. I can't get it to work, the splitter first showed at the wrong position, I've been able to fix this using the createorder but it behaves completely wrong. Does anybody have an idea? Thx, Dominique

Remove with radius border on the corners use code below function window.afterrender(sender, eOpts) { Ext.get(sender.id).el.setStyle("padding", 0); Ext.get(sender.id).el.setStyle("border-width", 0); Ext.get(sender.id).el.setStyle("-webkit-border-radius", 0); Ext.get(sender.id).el.setStyle("-moz-border-radius", 0); Ext.get(sender.id).el.setStyle("border-radius", 0); }