From Clomosy Docs
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;
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. |