From Clomosy Docs

No edit summary
No edit summary
Line 1: Line 1:
In Clomosy applications, individual objects are defined and special methods and properties are provided for various operations on these objects (receiving object data, aligning, adjusting height, etc.). These are properties and methods available in the source code of the application under test, as well as custom properties and methods implemented by application developers.<br>
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>


= Align =
<div class="alert alert-danger" role="alert" data-bs-theme="light">
Determines how a component is aligned. Use Align to align to the top, bottom, left, or right of a form or panel and keep the control there even if the size of the form, panel, or component containing the control changes. When the parent is resized, an aligned control is also resized to span the top, bottom, left, or right edge of the parent.<br>
The object must be created before using its properties.
</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>


For example, to use a panel component with various controls as a tool palette, change the panel's Align value to alLeft. The alLeft value for the panel's Align property ensures that the tool palette stays on the left side of the form and is always equal to the form's client height.<br>
Example usage;<br>
Example usage;<br>
Specifying where to align a button. You can do this in other components.<br>
Specifying where to align a button. You can do this in other components.<br>
testBtn := MyForm.AddNewButton(MyForm,'testBtn','Scan Barcode...');
 
testBtn'''<span style="color:red">.Align := alCenter;</span>'''
<div class="alert alert-secondary" role="alert" data-bs-theme="light">
testBtn.Height := 100;
buton1 = Form1.AddNewButton(Form1,'buton1','Scan Barcode...');<br>
testBtn.Width := 200;
buton1'''<span style="color:red">.Align = alCenter;</span>'''<br>
buton1.Height = 100;<br>
buton1.Width = 200;
</div>


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


{| class="wikitable"  
<div class="table-responsive">
! Properties !! Explanation
{| class="wikitable" style="border: 2px solid #c3d7e0"
! style="background-color: #c3d7e0"| Properties !!style="background-color: #c3d7e0"| Explanation
|-
|-
| '''alNone''' || It means that a component stays where it is positioned on a form or panel.
| <b>alNone</b> || 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.
| <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.
| '''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.
| <b>alRight</b> || 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.
| <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.
|-
|-
| '''alMostTop''' || It aligns at the top of the form to  left and right based on.
| <b>alMostTop</b> || 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.
| <b>alMostLeft</b> || 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.
| <b>alMostRight</b> || 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.
| <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.
|-
|-
| '''alClient''' || It takes up the entire form and always ensures that the form is equal to the client's width and height 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.
|-
|-
| '''alContents''' || It occupies the entire project page.
| <b>alContents</b> || 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.
| <b>alCenter</b> || 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.
| <b>alVertCenter</b> || 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.
| <b>alHorzCenter</b> || 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.
| <b>alHorizontal</b> || 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.
| <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.
|-
|-
| '''alScale''' || The height and width of the button will cause change as the size of the form changes.
| <b>alScale</b> || 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.
| <b>alFit</b> || 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.
| <b>alFitLeft</b> || 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.
| <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>


= Alignment Settings =
= Alignment Settings =

Revision as of 13:31, 8 November 2024

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.

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.

AlignScreenV1.0.png

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

Definition in JSON Structure:

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








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.