From Clomosy Docs

(Created page with " 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.<br> * caption * Width * Height * PositionX * PositionY * Align * TextColor * BackgroundColor * TextSize * TextVerticalAlign * TextHorizontalAlign * TextBold * MarginTop * MarginBottom * MarginRight * MarginLeft * RoundHeight * RoundWidth...")
 
No edit summary
 
(9 intermediate revisions by 2 users not shown)
Line 1: Line 1:
AddNewProEdit(TComponent, xName, xPromptText): TclProEdit
<div class="alert alert-ligth border border-3 border-primary-subtle rounded-5 p-4 shadow-sm" role="alert">
function AddNewProEdit(AComponent: TCLComponent; xName, xPromptText: string): TclProEdit;
</div>


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.<br>
<span style="color:blue"><b>AComponent</b></span> : Specifies the parent of the object to be defined.<br>
* 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.<br>
<span style="color:blue"><b>xName</b></span> : The name of the defined TclProEdit object must be written.<br>
<blockquote style="background-color:#F7F5EB">
'''Var'''<br>
testEdit: TClProEdit;
</blockquote>
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.<br>


<blockquote style="background-color:#F7F5EB">
<span style="color:blue"><b>xPromptText</b></span> : A hint or message to be displayed when the Text property is empty.<br>
  testEdit := MyForm.AddNewProEdit(MyForm,'testEdit','Phone Number');<br>
 
  clComponent.SetupComponent(testEdit,'{"Align" : "Center","MarginBottom":135,"Width" :180, "Height":45,"RoundHeight":10,"RoundWidth":10,"BorderColor":"#fabd2",<br>
The TclProEdit component is a text box used to allow users to enter or edit text on a form. When placed on the form, the TclProEdit component creates an area where users can input the required information. <br>
  "BorderWidth":2,"MarginLeft":30}');<br>
 
  testImg := MyForm.AddNewProImage(testEdit,'testImg');<br>
<div class="alert alert-info" role="alert" data-bs-theme="light">
  clComponent.SetupComponent(testImg,'{"Align":"Left","MarginLeft" : 5,"MarginTop":5, "MarginBottom":5,"Width" :25,<br>
Refer to the [[TclEdit]] page for standard edit object usage.
  "ImgUrl":"https://img.icons8.com/external-febrian-hidayat-gradient-febrian-hidayat/512/external-telephone-ui-essential-febrian-hidayat-gradient-febrian-hidayat.png","ImgFit":"yes" }');
</div>
</blockquote>
 
'''Code:'''<br>
<div class="table-responsive">
  '''Var'''    
{| class="wikitable" style="border: 2px solid #c3d7e0"
MyForm:TclForm;
! style="background-color: #c3d7e0"| Feature  !!style="background-color: #c3d7e0"| Use of !!style="background-color: #c3d7e0"| Definition
testEdit: TClProEdit;
|-
testImg : TCProImage;<br>
|TclProEdit ||ProEdit1 : TclProEdit; ||A variable belonging to the TclProEdit class is created.
  '''procedure''' SetEdit;
|-
  '''begin'''
|AddNewProEdit||ProEdit1 = Form1.AddNewProEdit(Form1,'ProEdit1','Test ProEdit Message'); || A new edit component is added to the form.
   testEdit := MyForm.AddNewProEdit(MyForm,'testEdit','Phone Number');
|}
   clComponent.SetupComponent(testEdit,'{"Align" : "Center","MarginBottom":135,"Width" :180, "Height":45,"RoundHeight":10,"RoundWidth":10,"BorderColor":"#fabd2",
</div>
   "BorderWidth":2,"MarginLeft":30}');
 
   testImg := MyForm.AddNewProImage(testEdit,'testImg');
In addition to the features of a standard edit, TclProEDİT offers new and advanced features, which we will explain in detail below.<br>
   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" }');
<div class="row">
  '''end;'''<br>
<div class="col-lg-6">
  '''begin'''
<div  class="card d-flex flex-column justify-content-start gap-1 mb-3 h-100" style="padding: 3;">
   MyForm := TclForm.Create(Self);
<div style="font-size: 16px;font-weight: bold;text-align:left;">
   SetEdit;
  clProSettings Properties
   MyForm.Run;
</div>
  '''end;'''
<div style="font-size: 14px;font-weight: normal;text-align:justify; max-width: 350px;">
'''Output:'''<br>
<li>TextSettings</li>
[[File:ProEdit.png|frameless|450px]]
<li>FontColor</li>
<li> FontName </li>
<li>FontSize</li>
<li>FontVertAlign</li>
<li>FontHorzAlign</li>
<li>BackgroundColor</li>
<li>BorderColor</li>
<li>IsTransparent</li>
<li>IsFill</li>
<li>RoundHeight</li>
<li>RoundWidth</li>
<li>IsRound</li>
<li>BorderWidth</li>
<li>PictureAutoFit</li>
<li>PictureStretch</li>
<li>PictureSource</li>
</div>
</div>
</div>
</div>
<br>
 
<div class="alert alert-warning" role="alert" data-bs-theme="light">
To learn the purpose and usage of the <b>clProSettings</b> properties, please refer to [[Pro Object Properties| the page]].
</div>
 
<b>Example</b><br>
 
<pre>
  Var   
  Form1:TclForm;
  Edit1: TClProEdit;
  Img1 : TCProImage;
   
void SetEditAndImg;
  {
   Edit1 = Form1.AddNewProEdit(Form1,'Edit1','Phone Number');
   Edit1.Align = alCenter;
  Edit1.Width = 180;
  Edit1.Height = 45;
  Edit1.clProSettings.BorderColor = clAlphaColor.clHexToColor('#fabd2');
  Edit1.clProSettings.FontColor = clAlphaColor.clHexToColor('#000000');
  Edit1.clProSettings.RoundHeight = 15;
  Edit1.clProSettings.RoundWidth = 15;
  Edit1.clProSettings.BorderWidth = 3;
  Edit1.clProSettings.FontSize = 12;
  Edit1.clProSettings.FontVertAlign = palcenter;//palLeading , palCenter , palTrailing
  Edit1.clProSettings.FontHorzAlign = palCenter;
   Edit1.clProSettings.TextSettings.Font.Style = [fsBold,fsItalic];
  Edit1.clProSettings.IsFill = True;
  Edit1.clProSettings.IsRound = True;
  Edit1.SetclProSettings(Edit1.clProSettings);
    
  Img1 = Form1.AddNewProImage(Edit1,'Img1');
   Img1.Align = AlLeft;
  Img1.Width = 25;
  Img1.Margins.Left = 5;
  Img1.Margins.Top = 5;
  Img1.Margins.Bottom = 5;
   Form1.SetImage(Img1,'https://clomosy.com/demos/phone.png');
  }
  {
   Form1 = TclForm.Create(Self);
   SetEditAndImg;
   Form1.Run;
  }
</pre>
 
<b>Output:</b><br>
[[File:ProEdit.png|frameless|350px]]
 
<h2> See Also </h2>
* [[Components]]
* [[Pro Object Properties]]
* [[Object Properties]]
{{#seo:|title=TClProEdit Using in Clomosy - Clomosy Docs}}
{{#seo:|description=Learn how the TclProEdit component in Clomosy is used to create editable text boxes with customizable properties like font color, size, and more.}}

Latest revision as of 08:42, 16 April 2025

AComponent : Specifies the parent of the object to be defined.

xName : The name of the defined TclProEdit object must be written.

xPromptText : A hint or message to be displayed when the Text property is empty.

The TclProEdit component is a text box used to allow users to enter or edit text on a form. When placed on the form, the TclProEdit component creates an area where users can input the required information.

Feature Use of Definition
TclProEdit ProEdit1 : TclProEdit; A variable belonging to the TclProEdit class is created.
AddNewProEdit ProEdit1 = Form1.AddNewProEdit(Form1,'ProEdit1','Test ProEdit Message'); A new edit component is added to the form.

In addition to the features of a standard edit, TclProEDİT offers new and advanced features, which we will explain in detail below.

clProSettings Properties

  • TextSettings
  • FontColor
  • FontName
  • FontSize
  • FontVertAlign
  • FontHorzAlign
  • BackgroundColor
  • BorderColor
  • IsTransparent
  • IsFill
  • RoundHeight
  • RoundWidth
  • IsRound
  • BorderWidth
  • PictureAutoFit
  • PictureStretch
  • PictureSource

  • Example

     Var   
       Form1:TclForm;
       Edit1: TClProEdit;
       Img1 : TCProImage;
     
     void SetEditAndImg;
     {
       Edit1 = Form1.AddNewProEdit(Form1,'Edit1','Phone Number');
       Edit1.Align = alCenter;
       Edit1.Width = 180;
       Edit1.Height = 45;
       Edit1.clProSettings.BorderColor = clAlphaColor.clHexToColor('#fabd2');
       Edit1.clProSettings.FontColor = clAlphaColor.clHexToColor('#000000');
       Edit1.clProSettings.RoundHeight = 15;
       Edit1.clProSettings.RoundWidth = 15;
       Edit1.clProSettings.BorderWidth = 3;
       Edit1.clProSettings.FontSize = 12;
       Edit1.clProSettings.FontVertAlign = palcenter;//palLeading , palCenter , palTrailing
       Edit1.clProSettings.FontHorzAlign = palCenter;
       Edit1.clProSettings.TextSettings.Font.Style = [fsBold,fsItalic];
       Edit1.clProSettings.IsFill = True; 
       Edit1.clProSettings.IsRound = True;
       Edit1.SetclProSettings(Edit1.clProSettings);
       
       Img1 = Form1.AddNewProImage(Edit1,'Img1');
       Img1.Align = AlLeft;
       Img1.Width = 25;
       Img1.Margins.Left = 5;
       Img1.Margins.Top = 5;
       Img1.Margins.Bottom = 5;
       Form1.SetImage(Img1,'https://clomosy.com/demos/phone.png');
     }
     
     {
       Form1 = TclForm.Create(Self);
       SetEditAndImg;
       Form1.Run;
     }
    

    Output:
    ProEdit.png

    See Also