From Clomosy Docs

No edit summary
No edit summary
 
(16 intermediate revisions by 2 users not shown)
Line 1: Line 1:
You can add text input field with "TclEdit". Let's see how it is defined.<br>
<div class="alert alert-ligth border border-3 border-primary-subtle rounded-5 p-4 shadow-sm" role="alert">
function AddNewEdit(AComponent: TCLComponent; xName, xPromptText: string): TclEdit;
</div>


AddNewEdit(TComponent, xName, xPromptText)
<span style="color:blue"><b>AComponent</b></span> : The parent object of the defined component must be specified.<br>


<span style="color:blue">''TComponent''</span> : The variable name of the defined component is written. Here you should write the component variable name of whatever your component will be in.
<span style="color:blue"><b>xName</b></span> : The name of the defined TclEdit object must be written.<br>


<span style="color:blue">''xName''</span> : The name of the defined edit should be written.
<span style="color:blue"><b>xPromptText</b></span> : A hint or message to be displayed when the Text property is empty.<br>


<span style="color:blue">''xPromptText''</span> : A hint or message to be displayed when the Text property is empty.
The TclEdit component is a text box used to allow users to enter or edit text on a form. When placed on the form, the TclEdit component creates an area where users can input the required information. For example, it can be used as a field for entering a username or password.<br>


Let's create a edit.<br>
The features and usage are provided in the table below.<br>


1. Create a new project.<br>
<div class="table-responsive">
{| class="wikitable" style="border: 2px solid #c3d7e0"
! style="background-color: #c3d7e0"| Feature  !!style="background-color: #c3d7e0"| Use of !!style="background-color: #c3d7e0"| Definition
|-
|TclEdit || Edit1 : TclEdit; || A variable belonging to the TclEdit class is created.
|-
|AddNewEdit ||Edit1 = Form1.AddNewEdit(Form1,'Edit1','Test Edit Message'); || A new Edit component is added to the form.
|-
|Width || Edit1.Width = 150; ||Allows adjusting the width of the edit component.
|-
|Height || Edit1.Height = 50; ||Allows adjusting the height of the edit component.
|-
|Align  || Edit1.Align = alTop; ||With the Align parameter, you can specify where you want our component to be aligned in the form. This parameter has multiple positioning properties. See the [[Object_Properties#Align | page]] to learn about these features.
|-
|Margins || Edit1.Margins.Left= 100; // Right, Top, Bottom ||With the Margins parameter, you can give margins at any scale from the right, left, bottom, top.<br>[[File:TclEditMargins.png|frameless|200px]]
|-
|StyledSettings  || Edit1.StyledSettings = ssFamily; || You may want to change the appearance of the text on the label. In order to make these changes, it is necessary to activate the feature.
|-
|Size ||Edit1.TextSettings.Font.Size = 20; || It is used to adjust the text size.
|-
|FontColor || Edit1.TextSettings.FontColor = clAlphaColor.clHexToColor('#8a067c'); || It is used to set the text color.
|-
|clTypeOfField || Edit1.clTypeOfField = taFloat; (taString) ||When you click Edit, you can type all the characters (such as numbers, symbols, letters) you want in a text. You can restrict the characters you can write in the text. You can do this with the "clTypeOfField" command. You can define this command as "taFloat - taString".
taFloat; Only numbers and comma characters can be written. taString; All characters can be written. (numbers, symbols, letters)
|-
|ReadOnly ||Edit1.ReadOnly = True; || It can be used if you want to prevent writing on the edit component.
|-
|Password ||Edit1.Password = False; || It is used to hide the text entered by the user.
|-
| MaxLength ||Edit1.MaxLength = 5; || To allow the user to restrict the character input for an edit component, you can use the MaxLength property. In the example, only 5 characters can be entered into the component.
|}
</div>


2. You need to define TclEdit on the form. To do this, you should add under the ''var'' parameter on the ide as follows. It is the name of your variable you typed at the beginning. You should define this as you want and add it as TclEdit.<br>
<b>Example</b><br>
'''var'''
<pre>
testEdit : TclEdit;  
var
MyForm:TclForm;
testEdit : TclEdit;


3. Add the TclEdit to the form. For this, you must add the begin end block and add it inside the form after the form is defined. By saying MyForm.AddNewEdit, we actually add to the form we have defined. Here, you need to add your form definition as whatever you wrote it.<br>
{
MyForm = TclForm.Create(Self);
testEdit= MyForm.AddNewEdit(MyForm,'testEdit','Write something');
testEdit.TextSettings.Font.Size=70;
testEdit.Align = alTop;
testEdit.Margins.Top= 10;
testEdit.Height = 50;


testEdit := ''MyForm''.AddNewEdit(MyForm,'testEdit','Test Edit Message');
MyForm.Run;


4. If you do not want to define it in the form, you can add it in another component (such as Layout, Panel). Of course, before that, that component must be defined.
}
<span style="color:blue">testLayout</span> := MyForm.AddNewLayout(MyForm,'testLayout');
</pre>
testEdit := MyForm.AddNewEdit(<span style="color:blue">testLayout</span>,'testEdit','Test Edit Message');


5. While defining the component, you can define it manually by typing. Another method is to write its shortcut. If you type "AddNewLabel" while the shortcut is in the code block, a pop-up menu will appear.<br>
<b>Output:</b><br>
[[File:Edit.png|frameless|450px]]<br>
[[File:TclEditShortcut.png|frameless|400px]]<br><br>


As soon as you click, the following block will come automatically.<br>
<h2> See Also </h2>
 
* [[Components]]
AddNewEdit(xOwner:TComponent; xName,xPromptText:String);
* [[Object Properties]]
 
{{#seo:|title=TclEdit in Clomosy - Clomosy Docs}}
6. We gave the variable name while defining the TclEdit in var. Now when you add this in begin end you should use this variable name in all definitions. Your code will throw an error when you write these variable names incorrectly.
{{#seo:|description=Discover TclEdit in Clomosy for customizable text input fields with adjustable alignment, font, and input restrictions.}}
 
7. You can print a message to your Edit component as the last parameter when defining your project. This title is the text that will appear on the screen when the application is run. You may not want to write when defining this title. An empty edit will appear on the screen.
 
testEdit := MyForm.AddNewEdit(MyForm,'testEdit',<nowiki>''</nowiki>);
 
10. Now let's design our TclEdit component. Let's set the width and height first. For this, you must make the following definitions.
 
testEdit.Height := 50;
testEdit.Width := 150;
 
11. With the Align parameter, you can specify where you want our component to be aligned in the form. This parameter has multiple positioning properties. See the [https://www.docs.clomosy.com/index.php/Object_Properties#Align page] to learn about these features. We're going to call it the top part here. So we have to write "AlTop".
testEdit.Align := alTop;
 
12. With the Margins parameter, you can give margins at any scale from the right, left, bottom, top.
 
testEdit.Margins.Left:= 100;
testEdit.Margins.Right:= 100;
testEdit.Margins.Top:= 100;
testEdit.Margins.Bottom:= 10;
 
[[File:TclEditMargins.png|frameless|500px]]<br><br>
 
13. You may want to change the appearance of the text in the tag. We will use the TextSettings parameter for this.In order to use this parameter, you have to make the following definition. Otherwise your commands will not work.<br>
testEdit.StyledSettings := ssFamily;
To adjust the text size;<br>
testEdit.TextSettings.Font.Size := 20;
To set the text color;<br>
testEdit.TextSettings.FontColor := clAlphaColor.clHexToColor('#8a067c');
 
14. When you click on Edit, you can write all the characters you want in a text (such as numbers, symbols, letters). You can restrict the characters you can write in the text. So how will you do this?<br>
You can do this with the "clTypeOfField" command below. You can define this command as "taFloat - taDate - taString".<br>
testEdit.clTypeOfField := taFloat;
What do these mean?<br>
 
<span style="color:blue">''taFloat''</span> : Only numbers and comma characters can be written.
 
<span style="color:blue">''taString''</span> : All characters can be written. (numbers, symbols, letters)
 
 
15. To tell you the truth, you have created a simple application that does nothing yet. Let's save and start using our project. You can save in one of two ways:<br>
Click the save icon (the button in the upper right corner) or press Ctrl + S to save the project and see what you've done on the platforms now.
 
'''Example:'''<br>
'''var'''
MyForm:TFrmClomosyBasisForm;
testEdit : TclEdit;<br>
'''begin'''
MyForm := TFrmClomosyBasisForm.Create(Self);
testEdit:= MyForm.AddNewEdit(MyForm,'testEdit','Write something');
testEdit.TextSettings.Font.Size:=70;
testEdit.Align := alTop;
testEdit.Margins.Top:= 10;
testEdit.Height := 50;
testEdit.Width := 150;<br>
MyForm.Run;<br>
'''end;'''
'''Output:'''<br>
[[File:Edit.png|frameless|450px]]

Latest revision as of 11:23, 15 April 2025

AComponent : The parent object of the defined component must be specified.

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

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

The TclEdit component is a text box used to allow users to enter or edit text on a form. When placed on the form, the TclEdit component creates an area where users can input the required information. For example, it can be used as a field for entering a username or password.

The features and usage are provided in the table below.

Feature Use of Definition
TclEdit Edit1 : TclEdit; A variable belonging to the TclEdit class is created.
AddNewEdit Edit1 = Form1.AddNewEdit(Form1,'Edit1','Test Edit Message'); A new Edit component is added to the form.
Width Edit1.Width = 150; Allows adjusting the width of the edit component.
Height Edit1.Height = 50; Allows adjusting the height of the edit component.
Align Edit1.Align = alTop; With the Align parameter, you can specify where you want our component to be aligned in the form. This parameter has multiple positioning properties. See the page to learn about these features.
Margins Edit1.Margins.Left= 100; // Right, Top, Bottom With the Margins parameter, you can give margins at any scale from the right, left, bottom, top.
TclEditMargins.png
StyledSettings Edit1.StyledSettings = ssFamily; You may want to change the appearance of the text on the label. In order to make these changes, it is necessary to activate the feature.
Size Edit1.TextSettings.Font.Size = 20; It is used to adjust the text size.
FontColor Edit1.TextSettings.FontColor = clAlphaColor.clHexToColor('#8a067c'); It is used to set the text color.
clTypeOfField Edit1.clTypeOfField = taFloat; (taString) When you click Edit, you can type all the characters (such as numbers, symbols, letters) you want in a text. You can restrict the characters you can write in the text. You can do this with the "clTypeOfField" command. You can define this command as "taFloat - taString".

taFloat; Only numbers and comma characters can be written. taString; All characters can be written. (numbers, symbols, letters)

ReadOnly Edit1.ReadOnly = True; It can be used if you want to prevent writing on the edit component.
Password Edit1.Password = False; It is used to hide the text entered by the user.
MaxLength Edit1.MaxLength = 5; To allow the user to restrict the character input for an edit component, you can use the MaxLength property. In the example, only 5 characters can be entered into the component.

Example

var
MyForm:TclForm;
testEdit : TclEdit;

{
MyForm = TclForm.Create(Self);
testEdit= MyForm.AddNewEdit(MyForm,'testEdit','Write something');
testEdit.TextSettings.Font.Size=70;
testEdit.Align = alTop;
testEdit.Margins.Top= 10; 
testEdit.Height = 50;

MyForm.Run;

}

Output:
Edit.png

See Also

Retrieved from "http:///index.php?title=TclEdit&oldid=3935"