View source for Object Properties

Clomosy offers a wide range of features for controlling object properties in user interface design and programming. Each object has a specific set of properties that define its behavior and appearance. Object properties allow us to customize the functionality of the application by configuring values used during interaction with the object.<br>

<div class="alert alert-danger" role="alert" data-bs-theme="light">
The object must be created before using its properties.
</div>

<div class="alert alert-ligth border border-3 border-warning rounded-5 p-4 shadow-sm" role="alert">
<strong>Did You Know? - With Statements </strong><br>
The with statement in Clomosy can make your code more readable when working with nested objects or components. This statement allows direct access to the properties or methods of an object without having to repeatedly write the object's name. However, if used carelessly, it can be confusing, especially when dealing with objects of similar types.<br>

<b>Example:</b><br>
Let’s assign width, height, and align properties to a button. First, we need to create the object:<br>
<pre>
Button1 = Form1.AddNewButton(Form1, 'Button1', 'Click');
Button1.Align = alCenter;
Button1.Height = 50;
Button1.Width = 100;
</pre>
As seen above, we assign values by specifying the object name. Now, let’s use with to access the properties without repeatedly typing the object's name:<br>
<pre>
Button1 = Form1.AddNewButton(Form1, 'Button1', 'Click');
With Button1 do { 
   Height = 70;
   Align = alRight;
   Margins.Right = 50;
}
</pre>
In this example, the with statement allows direct access to the properties of Button1 without having to write Button1 each time.
</div>

Typically, an object's properties can be categorized as follows:<br>

<h2>Positioning and Alignment</h2>
These are properties that determine the position and alignment of components on the form.<br>

<h3> Align </h3>
The Align property of a component's base class is used to align objects to one or more sides at their location. These alignment types position components on the form or a similar container object. When this property is assigned to an object, it automatically aligns to the right, left, top, bottom, center, or fully within the containing control.<br>

Below are the most commonly used types of the Align property.<br>

[[File:AlignScreenV1.0.png|frameless|650px]]<br>

Example usage;<br>
Specifying where to align a button. You can do this in other components.<br>

<div class="alert alert-secondary" role="alert" data-bs-theme="light">
buton1 = Form1.AddNewButton(Form1,'buton1','Scan Barcode...');<br>
buton1<b><span style="color:green">.Align = alCenter;</span></b><br>
buton1.Height = 100;<br>
buton1.Width = 200;
</div>

Definition in JSON Structure:<br>
<div class="alert alert-secondary" role="alert" data-bs-theme="light">
buton1 = Form1.AddNewProButton(Form1,'buton1','Go');<br>
clComponent.SetupComponent(buton1,'{<b><span style="color:green">"Align":"Center"</span></b>}');<br>
Form1.AddNewEvent(buton1,tbeOnClick,'ShowMessage(<nowiki>''Go!''</nowiki>)');
</div>

<div class="table-responsive">
{| class="wikitable" style="border: 2px solid #c3d7e0"
! style="background-color: #c3d7e0"| Properties  !!style="background-color: #c3d7e0"| Explanation
|-
| <b>alNone</b> || It means that a component stays where it is positioned on a form or panel.
|-
| <b>alTop</b> || It aligns at the top of the form to  left and right based on.
|-
| <b>alLeft</b> || Remains on the left side of the form and always ensures that the form is equal to client height.
|-
| <b>alRight</b> || Remains on the right side of the form and always ensures that the form is equal to client height.
|-
| <b>alBottom</b> || It stays at the bottom of the form and always ensures that the form is equal to the client's width setting.
|-
| <b>alMostTop</b> || It aligns at the top of the form to  left and right based on.
|-
| <b>alMostLeft</b> || Remains on the left side of the form and always ensures that the form is equal to client height.
|-
| <b>alMostRight</b> || Remains on the right side of the form and always ensures that the form is equal to client height.
|-
| <b>alMostBottom</b> || It stays at the bottom of the form and always ensures that the form is equal to the client's width setting.
|-
| <b>alClient</b> || It takes up the entire form and always ensures that the form is equal to the client's width and height setting.
|-
| <b>alContents</b> || It occupies the entire project page.
|-
| <b>alCenter</b> || It is aligned in the middle of the page. As the client changes the page width, it is center aligned accordingly.
|-
| <b>alVertCenter</b> || It is aligned based in right left in the middle of the form.
|-
| <b>alHorzCenter</b> || It is aligned based in down on top the middle of the form.
|-
| <b>alHorizontal</b> || Just like alVertCenter, it is right left justified. It is not centered as the client changes the height of the screen.
|-
| <b>alVertical</b> || Just like alHorzCenter, it is down is on top justified. It is not centered when the client changes the width of the screen.
|-
| <b>alScale</b> || The height and width of the button will cause change as the size of the form changes.
|-
| <b>alFit</b> || The component is based on top and bottom. The size changes as the client plays with the size.
|-
| <b>alFitLeft</b> || It is vertically justified to the left of the form.  The size changes as the client plays with the size.
|-
| <b>alFitRight</b> || It is vertically justified to the right of the form. The size changes as the client plays with the size.
|}
</div>

<h3> Position </h3>

This determines the horizontal and vertical position of the component on the form. Position.X specifies the distance, in pixels, from the left edge of the component to the left edge of the form, while Position.Y specifies the distance, in pixels, from the top edge of the component to the top edge of the form.<br>

<div class="alert alert-danger" role="alert" data-bs-theme="light">
<b> NOTE:</b><br>
In Clomosy, when setting a component's position using the Position.X and Position.Y properties, the Align property must be set to alNone. If the Align property is not set to alNone, the component's position will be automatically adjusted, making the Position.X and Position.Y values ineffective.
</div>

Use of;<br>

<div class="alert alert-secondary" role="alert" data-bs-theme="light">
TCLComponent.<span style="color:green"><b>Position.X</b></span> = 50;<br>
TCLComponent.<span style="color:green"><b>Position.Y</b></span> = 100;
</div>

For example, let's assume the x position is set to 50 and the y position is set to 100.<br>

[[File:PositionScreenV1.0.png|frameless|300px]]<br>


<h3> Locked </h3>
It is a property that prevents the component from being moved or resized during design time. The default value is False. When this property is set to True, the component is locked on the form, preventing accidental repositioning or resizing.<br>

Use of;<br>

<div class="alert alert-secondary" role="alert" data-bs-theme="light">
TCLComponent.<span style="color:green"><b>Locked</b></span> = True;<br>
</div>

<h3> Margins </h3>
It is used to define the space around the component. This property determines how far the component will be from the edges of its container. The distance between the two objects is in pixels.<br>

The Margins property allows separate values to be set for each of the four edges: Left, Top, Right, and Bottom.<br>

[[File:MarginsScreenV1.0.png|frameless|250px]]<br>

Use of;<br>

<div class="alert alert-secondary" role="alert" data-bs-theme="light">
TCLComponent.<span style="color:green"><b>Margins.Left</b></span> = 30;<br>
TCLComponent.<span style="color:green"><b>Margins.Right</b></span> = 30;<br>
TCLComponent.<span style="color:green"><b>Margins.Top</b></span> = 30;<br>
TCLComponent.<span style="color:green"><b>Margins.Bottom</b></span> = 30;<br>
</div>


<h3> Padding </h3>
It is used to determine the distance between two nested objects, just like the Margins property. While in the Margins property, the inner object determines the distance, in the Padding property, the outer object determines the distance to the edges. The distance between the two objects is in pixels.<br>

<div class="alert alert-danger" role="alert" data-bs-theme="light">
The Padding property is used only in components. It is not a property used on forms.
</div>

The Margins property allows separate values to be set for each of the four edges: Left, Top, Right, and Bottom.<br>

Use of;<br>
<div class="alert alert-secondary" role="alert" data-bs-theme="light">
TCLComponent.<span style="color:green"><b>Padding.Left</b></span> = 30;<br>
TCLComponent.<span style="color:green"><b>Padding.Right</b></span> = 30;<br>
TCLComponent.<span style="color:green"><b>Padding.Top</b></span> = 30;<br>
TCLComponent.<span style="color:green"><b>Padding.Bottom</b></span> = 30;<br>
</div>

<h3> RotationAngle </h3>
Specifies how much the component will rotate clockwise, in degrees. With this property, a component can be rotated at a specified angle. For example, if the RotationAngle of a button is set to 45 degrees, the button rotates 45 degrees clockwise.<br>

[[File:RotationAngleExample.png|frameless|400px]]<br>

When the RotationAngle value is positive, it rotates clockwise; when it is negative, it rotates counterclockwise.<br>

Use of;<br>
<div class="alert alert-secondary" role="alert" data-bs-theme="light">
TCLComponent.<span style="color:green"><b>RotationAngle</b></span> = 20;
</div>

<h3> RotationCenter </h3>
Specifies the rotation center of the object on the X and Y axes. X and Y take values between 0 and 1. If X=0 and Y=0, the top-left corner will be the rotation center, while if X=1 and Y=1, the bottom-right corner will be the rotation center.<br>

<div class="alert alert-warning" role="alert" data-bs-theme="light">
It defines the rotation center. Then, the object should be rotated using the <b>RotationAngle</b> property.
</div>

Use of;<br>
<div class="alert alert-secondary" role="alert" data-bs-theme="light">
TCLComponent.<span style="color:green"><b>RotationCenter.X</b></span> = 1;
TCLComponent.<span style="color:green"><b>RotationCenter.Y</b></span> = 1;
</div>

<h2> Sizing </h2>

<h3> Height </h3>
Specifies the component's height in pixels. This property allows adjusting the vertical dimension of the component.<br>

<div class="alert alert-danger" role="alert" data-bs-theme="light">
When the Align property is set to alRight or alLeft, the Height property cannot be used.
</div>

Use of;<br>
<div class="alert alert-secondary" role="alert" data-bs-theme="light">
TCLComponent.<span style="color:green"><b>Height</b></span> = 100;
</div>

<h3> Width </h3>
Specifies the component's width in pixels. This property allows adjusting the horizontal dimension of the component.<br>

<div class="alert alert-danger" role="alert" data-bs-theme="light">
When the Align property is set to alTop or alBottom, the Width property cannot be used.
</div>

Use of;<br>
<div class="alert alert-secondary" role="alert" data-bs-theme="light">
TCLComponent.<span style="color:green"><b>Width</b></span> = 100;
</div>

<h3> Scale </h3>
Used to scale the component's horizontal and vertical dimensions proportionally. The Scale.X property multiplies the component's width, while the Scale.Y property multiplies its height by a specific scale factor. The default value for X and Y is 1. When set to 2, the component size doubles.<br>

Use of;<br>
<div class="alert alert-secondary" role="alert" data-bs-theme="light">
TCLComponent.<span style="color:green"><b>Scale.X</b></span> = 2;<br>
TCLComponent.<span style="color:green"><b>Scale.Y</b></span> = 2;
</div>

<h2> Visibility and Interaction </h2>

<h3> Visible </h3>
Controls whether the component is visible on the screen. When this property is set to True, the component is visible; when set to False, the component is hidden. The default value is True.<br>

Use of;<br>
<div class="alert alert-secondary" role="alert" data-bs-theme="light">
TCLComponent.<span style="color:green"><b>Visible</b></span> = False;<br>
</div>

<h3> Enabled </h3>
Determines whether the component is active. When this property is set to True, the component is available for user interactions and can be used; when set to False, the component is disabled and cannot be clicked, selected, or interacted with in any way. The default value is True.<br>

[[File:EnabledExample.png|frameless|250px]]<br>

Use of;<br>
<div class="alert alert-secondary" role="alert" data-bs-theme="light">
TCLComponent.<span style="color:green"><b>Enabled</b></span> = False;<br>
</div>

<h3> HitTest </h3>
The HitTest property determines whether a component will capture touch or click events. When this property is set to True, the component detects events such as clicks and movements and responds to them. When set to False, the component ignores click events and does not respond to them.<br>

For example, if a button's HitTest property is set to False, nothing will happen when the user clicks the button.<br>

Use of;<br>
<div class="alert alert-secondary" role="alert" data-bs-theme="light">
TCLComponent.<span style="color:green"><b>HitTest</b></span> = False;<br>
</div>

<h3> EnableDragHighlight </h3>
At runtime, when one object is dragged over another, a highlighted area appears at the edges to emphasize the drop target. The default value is True. If set to False, no highlighting occurs when the dragged object is over the target.<br>

Use of;<br>
<div class="alert alert-secondary" role="alert" data-bs-theme="light">
TCLComponent.<span style="color:green"><b>EnableDragHighlight</b></span> = False;<br>
</div>

<h3> Opacity </h3>
The Opacity property determines how transparent a component is, setting its opacity level as a value between 0 and 1. Here, 0 means the component is completely transparent (invisible), and 1 means the component is completely opaque (visible). The default value is 1.<br>

Use of;<br>
<div class="alert alert-secondary" role="alert" data-bs-theme="light">
TCLComponent.<span style="color:green"><b>Opacity</b></span> = 0.5;<br>
</div>

<h3> SetFocus </h3>
It is a method that allows an object to gain focus. Focus typically indicates the area where a user is located in a form, such as a control (e.g., an edit box or a button). Specifically, it is used to automatically set focus to a control when a form is loaded or a certain event occurs.<br>
This can handle situations where the user doesn't need to manually select a control, such as starting to type directly in an edit box.<br>

Use of;<br>
<div class="alert alert-secondary" role="alert" data-bs-theme="light">
TCLComponent.<span style="color:green"><b>SetFocus </b></span>;<br>
</div>

<h3> Autosize </h3>
This property determines whether the component's size will automatically adjust based on its content. It is commonly used in visual components (such as TclLabel, TclMemo, etc.). When set to True, the component's size will automatically adjust to fit its content (for example, the text of a label or the caption of a button). When set to False, the component's size remains fixed, and the content will attempt to fit within this fixed size.<br>

Use of;<br>
<div class="alert alert-secondary" role="alert" data-bs-theme="light">
TCLComponent.<span style="color:green"><b>AutoSize</b></span> = True;
</div>

<h3> WordWrap </h3>
WordWrap is a property commonly used in text display components (such as TclLabel, TclMemo, etc.). This property allows the text to automatically wrap to the next line if it doesn't fit within the current line. In other words, if a long text doesn't fit within the component, and WordWrap is enabled, the text will automatically move to the next line.<br>

When set to True, the text component will move the text to the next line whenever it encounters text that exceeds its boundaries. This ensures that the text is properly spread across multiple lines. When set to False, if the text exceeds the width of the component, it will remain on a single line, and the overflowed part will either be visually cut off or hidden.<br>

Use of;<br>
<div class="alert alert-secondary" role="alert" data-bs-theme="light">
TCLComponent.<span style="color:green"><b>WordWrap</b></span> = True;
</div>


<h2>Text and Content Settings </h2>

<h3> Text </h3>
By using the Text property, you can typically retrieve or set the text entered by the user or the text contained within the component. The Text property is commonly found in text-based components (such as TclEdit, TclMemo, TclLabel, etc.).<br>

Use of;<br>
<div class="alert alert-secondary" role="alert" data-bs-theme="light">
TCLComponent.<span style="color:green"><b>Text</b></span> = ' Hello! ';<br>
ShowMessage(TCLComponent.<span style="color:green"><b>Text</b></span>);
</div>

<h3> Caption </h3>
The Caption property specifies the title or label text (the text visible on the screen) of the component. It is primarily used in visual components and typically represents the text displayed on user interface elements.<br>

Use of;<br>
<div class="alert alert-secondary" role="alert" data-bs-theme="light">
TCLComponent.<span style="color:green"><b>Caption</b></span> = ' Hello! ';<br>
ShowMessage(TCLComponent.<span style="color:green"><b>Caption</b></span>);
</div>

<h3> TextSettings </h3>
It is used to adjust the component's text display properties. This property determines the text's style, size, and color.<br>
To activate these settings, the StyledSettings property must first be set.<br>

<div class="alert alert-secondary" role="alert" data-bs-theme="light">
TCLComponent.<span style="color:green"><b>StyledSettings</b></span> = ssFamily;<br>
</div>

The ssFamily value indicates that the component should use family-based style settings. This allows the component to use style properties defined by its family. Once the StyledSettings property is configured, these properties can be applied.<br>


:<b>Font Size</b>
The text size is adjusted using the "Font.Size" property.<br>

<div class="alert alert-secondary" role="alert" data-bs-theme="light">
TCLComponent.<span style="color:green"><b>TextSettings.Font.Size</b></span> =  20;<br>
</div>

:<b>Font Color</b>
The component's text color is set using the "FontColor" property.<br>

<div class="alert alert-secondary" role="alert" data-bs-theme="light">
TCLComponent.<span style="color:green"><b>TextSettings.FontColor</b></span> = clAlphaColor.clHexToColor('#8a067c');<br>
</div>
or<br>

<div class="alert alert-secondary" role="alert" data-bs-theme="light">
TCLComponent.<span style="color:green"><b>TextSettings.FontColor</b></span> = clAlphaColor.clblue;<br>
</div>

<div class="alert alert-warning" role="alert" data-bs-theme="light">
To access other color constants, please visit the <b>[[Color Constants]]</b> page.
</div>

:<b>Font Style</b>
The text style is adjusted using the Font.Style property. This property allows you to set three different style attributes for the text:<br>

* fsBold: Makes the text bold.
* fsItalic: Makes the text italic (slanted).
* fsUnderline: Underlines the text.

Use of;<br>
<div class="alert alert-secondary" role="alert" data-bs-theme="light">
TCLComponent.<span style="color:green"><b>TextSettings.Font.Style</b></span> =  [fsItalic]; // [fsItalic,fsUnderline];
</div>

:<b>Text Horizontal Align</b>
The horizontal alignment of text is set using the HorzAlign property. This property allows you to set three different alignment attributes for text:<br>

* taCenter: Centers the text.
* taLeading: Aligns the text to the left.
* taTrailing: Aligns the text to the right.

Use of;<br>
<div class="alert alert-secondary" role="alert" data-bs-theme="light">
TCLComponent.<span style="color:green"><b>TextSettings.HorzAlign</b></span> =  taCenter; 
</div>

:<b>Text Vertical Align</b>
The vertical alignment of text is set using the VertAlign property. This property allows you to set three different alignment attributes for text:<br>

* taCenter: Centers the text.
* taLeading: Aligns the text to the top.
* taTrailing: Aligns the text to the bottom.

Use of;<br>
<div class="alert alert-secondary" role="alert" data-bs-theme="light">
TCLComponent.<span style="color:green"><b>TextSettings.VertAlign</b></span> =  taCenter; 
</div>

<h3> KeyboardType </h3>
KeyboardType is a property used in mobile application development to specify the type of virtual keyboard. It automatically opens the appropriate keyboard type when users enter data in a specific field, enhancing the user experience.<br>

Use of;<br>
<div class="alert alert-secondary" role="alert" data-bs-theme="light">
TCLComponent.<span style="color:green"><b>KeyboardType</b></span> =  [fsItalic]; // [fsItalic,fsUnderline];
</div>

The values used in the KeyboardType property are:<br>

<div class="table-responsive">
{| class="wikitable" style="border: 2px solid #c3d7e0"
! style="background-color: #c3d7e0"| Type  !!style="background-color: #c3d7e0"| Purpose of Use
|-
| <b>vktDefault</b> || Default keyboard type
|-
| <b>vktNumsAndPunctuation</b> || Keyboard for numbers and punctuation marks
|-
| <b>vktNumberPad</b> || Numeric keypad for numbers only
|-
| <b>vktPhonePad</b> || Keyboard for phone number input
|-
| <b>vktAlphabet</b> || Keyboard for alphabetical characters
|-
| <b>vktURL</b> || Keyboard for URL input
|-
| <b>vktNamePhonePad</b> || Keyboard for numbers and alphabetical characters
|-
| <b>vktDecimalNumberPad</b> || Numeric keyboard for decimal numbers 
|}
</div>

<h2> Data and User Input Settings </h2>

<h3> ClTypeOfField </h3>

In text input components, any character can be entered. When a character limit is desired, this feature is used.<br>

<div class="table-responsive">
{| class="wikitable" style="border: 2px solid #c3d7e0"
! style="background-color: #c3d7e0"| Type  !!style="background-color: #c3d7e0"| Purpose of Use
|-
| <b>taFloat</b> || Only numbers and the comma character can be entered.
|-
| <b>taString</b> || All characters can be entered (numbers, symbols, letters).
|}
</div>

Use of;<br>
<div class="alert alert-secondary" role="alert" data-bs-theme="light">
TCLComponent.<span style="color:green"><b>clTypeOfField</b></span> =  taFloat;
</div>

<h3> ReadOnly </h3>

This property makes the component read-only. When set to True, the text or data within the component can be displayed but cannot be changed by the user. This property is used for data-entry components like TclEdit and TclMemo.<br>

Use of;<br>
<div class="alert alert-secondary" role="alert" data-bs-theme="light">
TCLComponent.<span style="color:green"><b>ReadOnly</b></span> =  True;
</div>

<h3> MaxLength </h3>
This property determines the maximum number of characters that can be entered into a text input component (such as TclEdit, TclMemo, etc.). It is used to maintain data integrity by enforcing a character limit during data entry and preventing users from entering excessively long text.<br>

Use of;<br>
<div class="alert alert-secondary" role="alert" data-bs-theme="light">
TCLComponent.<span style="color:green"><b>MaxLength</b></span> =  2;
</div>

<h3> Tag </h3>
Each object holds a separate integer value. The default value is zero (0). This value is used as a label during runtime or design time.<br>

Use of;<br>
<div class="alert alert-secondary" role="alert" data-bs-theme="light">
TCLComponent.<span style="color:green"><b>Tag</b></span> =  12;
</div>

<h3> Hint </h3>
Sets the tooltip or hint text that appears when the mouse hovers over the component. This property provides additional information to the user about the function or usage of the component.<br>

Use of;<br>
<div class="alert alert-secondary" role="alert" data-bs-theme="light">
TCLComponent.<span style="color:green"><b>Hint</b></span> =  'Test';
</div>

[[File:HintExample.png|frameless|250px]]<br>

<h2> See Also </h2>
* [[Components]]
{{#seo:|description=Explore Object Properties in Clomosy. A comprehensive guide to defining, using, and managing object properties in your mobile apps.}}