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.

The object must be created before using its properties.

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

Positioning and Alignment

These are properties that determine the position and alignment of components on the form.

Align

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.

Below are the most commonly used types of the Align property.

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

buton1 = Form1.AddNewButton(Form1,'buton1','Scan Barcode...');
buton1.Align = alCenter;
buton1.Height = 100;
buton1.Width = 200;

Definition in JSON Structure:

buton1 = Form1.AddNewProButton(Form1,'buton1','Go');
clComponent.SetupComponent(buton1,'{"Align":"Center"}');
Form1.AddNewEvent(buton1,tbeOnClick,'ShowMessage(''Go!'')');

Properties	Explanation
alNone	It means that a component stays where it is positioned on a form or panel.
alTop	It aligns at the top of the form to left and right based on.
alLeft	Remains on the left side of the form and always ensures that the form is equal to client height.
alRight	Remains on the right side of the form and always ensures that the form is equal to client height.
alBottom	It stays at the bottom of the form and always ensures that the form is equal to the client's width setting.
alMostTop	It aligns at the top of the form to left and right based on.
alMostLeft	Remains on the left side of the form and always ensures that the form is equal to client height.
alMostRight	Remains on the right side of the form and always ensures that the form is equal to client height.
alMostBottom	It stays at the bottom of the form and always ensures that the form is equal to the client's width setting.
alClient	It takes up the entire form and always ensures that the form is equal to the client's width and height setting.
alContents	It occupies the entire project page.
alCenter	It is aligned in the middle of the page. As the client changes the page width, it is center aligned accordingly.
alVertCenter	It is aligned based in right left in the middle of the form.
alHorzCenter	It is aligned based in down on top the middle of the form.
alHorizontal	Just like alVertCenter, it is right left justified. It is not centered as the client changes the height of the screen.
alVertical	Just like alHorzCenter, it is down is on top justified. It is not centered when the client changes the width of the screen.
alScale	The height and width of the button will cause change as the size of the form changes.
alFit	The component is based on top and bottom. The size changes as the client plays with the size.
alFitLeft	It is vertically justified to the left of the form. The size changes as the client plays with the size.
alFitRight	It is vertically justified to the right of the form. The size changes as the client plays with the size.

Position

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.

NOTE:
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.

Use of;

TCLComponent.Position.X = 50;
TCLComponent.Position.Y = 100;

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

Locked

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.

Use of;

TCLComponent.Locked = True;

Margins

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.

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

Use of;

TCLComponent.Margins.Left = 30;
TCLComponent.Margins.Right = 30;
TCLComponent.Margins.Top = 30;
TCLComponent.Margins.Bottom = 30;

Padding

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.

The Padding property is used only in components. It is not a property used on forms.

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

Use of;

TCLComponent.Padding.Left = 30;
TCLComponent.Padding.Right = 30;
TCLComponent.Padding.Top = 30;
TCLComponent.Padding.Bottom = 30;

RotationAngle

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.

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

Use of;

TCLComponent.RotationAngle = 20;

RotationCenter

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.

It defines the rotation center. Then, the object should be rotated using the RotationAngle property.

Use of;

TCLComponent.RotationCenter.X = 1; TCLComponent.RotationCenter.Y = 1;

Sizing

Height

Specifies the component's height in pixels. This property allows adjusting the vertical dimension of the component.

When the Align property is set to alRight or alLeft, the Height property cannot be used.

Use of;

TCLComponent.Height = 100;

Width

Specifies the component's width in pixels. This property allows adjusting the horizontal dimension of the component.

When the Align property is set to alTop or alBottom, the Width property cannot be used.

Use of;

TCLComponent.Width = 100;

Scale

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.

Use of;

TCLComponent.Scale.X = 2;
TCLComponent.Scale.Y = 2;

Visibility and Interaction

Visible

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.

Use of;

TCLComponent.Visible = False;

Enabled

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.

Use of;

TCLComponent.Enabled = False;

HitTest

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.

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

Use of;

TCLComponent.HitTest = False;

EnableDragHighlight

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.

Use of;

TCLComponent.EnableDragHighlight = False;

Opacity

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.

Use of;

TCLComponent.Opacity = 0.5;

SetFocus

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.
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.

Use of;

TCLComponent.SetFocus ;

Text and Content Settings

Text

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.).

Use of;

TCLComponent.Text = ' Hello! ';
ShowMessage(TCLComponent.Text);

Caption

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.

Use of;

TCLComponent.Caption = ' Hello! ';
ShowMessage(TCLComponent.Caption);

Alignment Settings

Margins : It is the process of giving margins around the component.

Left : Leaves a space of the specified length from the left edge.

Right : Leaves a space of the specified length from the right edge.

Top : Leaves a space of the specified length from the top edge.

Bottom : Leaves a space of the specified length from the bottom edge.

Use of:

TComponent.Margins.Left:= 10;
TComponent.Margins.Top:= 10; 
TComponent.Margins.Right := 300;
TComponent.Margins.Bottom := 20;

Text Settings

The text in the component is formatted.

FontColor: Set the text color.

Font.Size: Set the text size.

Font.Style: Set the text style. It is explained in detail below.

Font Styles

Header text	Header text
fsBold	Makes text bold.
fsItalic	Makes text italic.
fsUnderline	Draws a line under the text.

Use Of:

TComponent.StyledSettings := ssFamily;
TComponent.TextSettings.FontColor := clAlphaColor.clHexToColor('#8a067c');
TComponent.TextSettings.Font.Size := 20;
TComponent.TextSettings.Font.Style := [fsBold]; //[fsItalic,fsUnderline]

BasisEvent

Use Of:

MainForm.AddNewEvent(EventControl:TControl; BasisEvent:TBasisEvent; xCode:String);

Example usage;

MyForm.AddNewEvent(testButton,tbeOnClick, 'ShowMessage(''Hello'')');

Feature	Definition
tbeOnClick	This event occurs when a button click action is triggered. This is usually the most basic event and allows the user to initiate an action.
tbeOnEnter	This event is triggered when a component is focused (selected with the keyboard or clicked with the mouse). This is especially important for keyboard navigation and interaction.
tbeOnExit	This event is commonly used for actions that need to be performed when exiting a input field, such as when transitioning from one component to another.
tbeOnItemClick	This event is typically used to make a selection between items listed, or to perform a specific action when an item is clicked. See page for more information.
tbeOnChange	This event is triggered when the value of a component changes. It is commonly used in components that can be modified by the user, such as input fields.
tbeOnGetQRCode	This is used when hovering over or clicking on a component that generates a QRCode. In situations where a QR code needs to be generated, this event is triggered.
tbeOnTimer	This event occurs when a timer component (usually TClTimer) is triggered. It is used to perform tasks that are repeated at specific intervals.
tbeOnFormActivate	This is an event that will be triggered when the form becomes active.
tbeOnFormClose	This is an event that will be triggered when the form is closed.
tbeOnFormCloseQuery	This is an event that will be triggered when the form is closed.
tbeOnFormDeactivate	This is an event that occurs when a form is disabled. When a form is disabled, it typically means that the controls belonging to that form are not responsive to user interactions.
tbeOnFormHide	The tbeOnFormHide event is triggered when the form is hidden, and the procedure assigned to this event is executed. In this procedure, tasks that need to be performed when the form is hidden are carried out.
tbeOnFormShow	The tbeOnFormShow event is triggered when the form becomes visible.
tbeOnMotionSensorChoosing
tbeOnMotionSensorStateChanged
tbeOnMQTTStatusChanged	The tbeOnMQTTStatusChanged event is triggered when the MQTT status is changed.
tbeOnMQTTPublishReceived	This is the trigger event used when a received status over MQTT is intended to be published.
tbeOnVirtualKeyboardShown	This is an event that will be triggered when the keyboard is opened.
tbeOnVirtualKeyboardHidden	This is an event that will be triggered when the keyboard is hidden.
tbeOnGridCellClick	This is the event triggered when you click on the TclStringGrid component.
tbeOnGesture	This is the event triggered when you click on the TclStringGrid component. It refers to the event triggered by a specific movement or action on a particular component (such as an image or a form). See page for more information.
tbeOnMouseDown	It is an event triggered when a component (such as a button or an image) is clicked with the mouse. This event occurs when the mouse button is pressed. See page for more information.
tbeOnMouseUp	It is an event triggered when a component is released after being clicked with the mouse. This event represents the moment when the mouse button is released. See page for more information.
tbeOnMouseMove	It is an event triggered when you move the mouse pointer over a component. This event occurs when you move the mouse pointer. See page for more information.
tbeOnKeyDown	The event triggered when a key is pressed on the keyboard. See page for more information.
tbeOnKeyUp	The event triggered when a key press operation is completed on the keyboard. See page for more information.