TClProEdit

AddNewProEdit(TComponent, xName, xPromptText): TclProEdit

The text is the input field. Apart from the features in the standard Edit component, we can add features such as background color, border formatting. Below are all the features.

• caption
• Width
• Height
• PositionX
• PositionY
• Align
• TextColor
• BackgroundColor
• TextSize
• TextVerticalAlign
• TextHorizontalAlign
• TextBold
• MarginTop
• MarginBottom
• MarginRight
• MarginLeft
• RoundHeight
• RoundWidth
• BorderColor
• BorderWidth
• PromptText

Let's see how it is used with an example. First of all, let's define ProEdit.

Var
testEdit: TClProEdit;

Let's add a proEdit to MyForm. Let's design for editing with json structure. Let's add a picture inside. In this way, we have demonstrated it with a simple application. After that, you can create the design you want.

testEdit := MyForm.AddNewProEdit(MyForm,'testEdit','Phone Number');
clComponent.SetupComponent(testEdit,'{"Align" : "Center","MarginBottom":135,"Width" :180, "Height":45,"RoundHeight":10,"RoundWidth":10,"BorderColor":"#fabd2",
"BorderWidth":2,"MarginLeft":30}');
testImg := MyForm.AddNewProImage(testEdit,'testImg');
clComponent.SetupComponent(testImg,'{"Align":"Left","MarginLeft" : 5,"MarginTop":5, "MarginBottom":5,"Width" :25,
"ImgUrl":"https://img.icons8.com/external-febrian-hidayat-gradient-febrian-hidayat/512/external-telephone-ui-essential-febrian-hidayat-gradient-febrian-hidayat.png","ImgFit":"yes" }');

Code:

Var   
MyForm:TclForm;
testEdit: TClProEdit;
testImg : TCProImage;

procedure SetEdit;
begin
  testEdit := MyForm.AddNewProEdit(MyForm,'testEdit','Phone Number');
  clComponent.SetupComponent(testEdit,'{"Align" : "Center","MarginBottom":135,"Width" :180, "Height":45,"RoundHeight":10,"RoundWidth":10,"BorderColor":"#fabd2",
  "BorderWidth":2,"MarginLeft":30}');
  testImg := MyForm.AddNewProImage(testEdit,'testImg');
  clComponent.SetupComponent(testImg,'{"Align":"Left","MarginLeft" : 5,"MarginTop":5, "MarginBottom":5,"Width" :25,
  "ImgUrl":"https://img.icons8.com/external-febrian-hidayat-gradient-febrian-hidayat/512/external-telephone-ui-essential-febrian-hidayat-gradient-febrian-hidayat.png","ImgFit":"yes" }');
end;

begin
  MyForm := TclForm.Create(Self);
  SetEdit;
  MyForm.Run;
end;

Output: