From Clomosy Docs

No edit summary
 
(46 intermediate revisions by 2 users not shown)
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>


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>
<div class="alert alert-ligth border border-3 border-warning rounded-5 p-4 shadow-sm" role="alert">
Example usage; Specifying where to align a button. You can do this in other components.<br>
<strong>Did You Know? - With Statements </strong><br>
testBtn := MyForm.AddNewButton(MyForm,'testBtn','Scan Barcode...');
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>
testBtn'''<span style="color:red">.Align := alCenter;</span>'''
testBtn.Height := 100;
testBtn.Width := 200;


{| class="wikitable"  
<b>Example:</b><br>
! Properties !! Explanation
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>
 
 
<div class="table-responsive">
{| 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.
|-
|-
| '''alLeft''' || Remains on the left side of the form and always ensures that the form is equal to client height.
| <b>alLeft</b> || 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''' || Example
| <b>alMostTop</b> || It aligns at the top of the form to  left and right based on.
|-
|-
| '''alMostBottom''' || Example
| <b>alMostLeft</b> || Remains on the left side of the form and always ensures that the form is equal to client height.
|-
|-
| '''alMostLeft''' || Example
| <b>alMostRight</b> || Remains on the right side of the form and always ensures that the form is equal to client height.
|-
|-
| '''alMostRight''' || Example
| <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>
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>
<h3> SetBounds </h3>
It is a method used to set both the position and size of a component with a single command. This method simultaneously defines the horizontal and vertical position (Left (X) and Top (Y)) of the component within its container (such as a form), along with its width (Width) and height (Height).<br>
<div class="alert alert-warning" role="alert" data-bs-theme="light">
<b>NOTE:</b> In order to set the position using SetBounds, the component's Align property must be set to alNone; otherwise, the Align property will override the positioning and SetBounds may not have any effect.
</div>
<div class="alert alert-secondary" role="alert" data-bs-theme="light">
TCLComponent.<b><span style="color:green">SetBounds(Position.X, Position.Y, Width, Height: Integer)</span></b>;
</div>
Use of;<br>
<div class="alert alert-secondary" role="alert" data-bs-theme="light">
TCLComponent.SetBounds(50, 100, 250, 100);
</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.


= Font Styles =
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>


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


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


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


= Form Templates =
<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>


* ftItems
Use of;<br>
* ftProducts
<div class="alert alert-secondary" role="alert" data-bs-theme="light">
* ftCustomers
TCLComponent.<span style="color:green"><b>KeyboardType</b></span> =  vktNumsAndPunctuation;
* ftTasks
</div>
* ftEmployees
* ftThreads
* ftMembers
* ftTypes
* ftGroups
* ftMasters
* ftActivities
* ftBaseCustoms
* ftThreadsView


= Form Display Types =
The values used in the KeyboardType property are:<br>


{| class="wikitable"
<div class="table-responsive">
! Types !! Explanation
{| 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
|-
|-
| fdtNone || When clicked, it is not possible to switch to another page.
| <b>vktNumsAndPunctuation</b> || Keyboard for numbers and punctuation marks
|-
|-
| fdtSingle || Clicking it will switch to another page.
| <b>vktNumberPad</b> || Numeric keypad for numbers only
|-
|-
| fdtBasket ||  
| <b>vktPhonePad</b> || Keyboard for phone number input
|-
|-
| fdtBasketPopup ||  
| <b>vktAlphabet</b> || Keyboard for alphabetical characters
|-
|-
| fdtGuide || Clicking on an area will exit the application.
| <b>vktURL</b> || Keyboard for URL input
|-
|-
| fdtBasketCheckList ||  
| <b>vktNamePhonePad</b> || Keyboard for numbers and alphabetical characters
|-
|-
| fdtBasketWithMaster ||  
| <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>


Example Usage:<br>
Use of;<br>
begin
<div class="alert alert-secondary" role="alert" data-bs-theme="light">
Clomosy.OpenForm(ftProducts,'''<span style="color:red">fdtNone</span>''',froAddNew,ffoNoFilter);
TCLComponent.<span style="color:green"><b>MaxLength</b></span> =  2;
end;
</div>


= Form List Objects =
<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>


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


= Form Record Options =
<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>


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


= Form Filter Options =
[[File:HintExample.png|frameless|250px]]<br>


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

Latest revision as of 11:44, 24 April 2025

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.


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.

Use of;

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

PositionScreenV1.0.png


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;

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.

MarginsScreenV1.0.png

Use of;


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 Margins property allows separate values to be set for each of the four edges: Left, Top, Right, and Bottom.

Use of;

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.

RotationAngleExample.png

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

Use of;

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.

Use of;

SetBounds

It is a method used to set both the position and size of a component with a single command. This method simultaneously defines the horizontal and vertical position (Left (X) and Top (Y)) of the component within its container (such as a form), along with its width (Width) and height (Height).

Use of;

Sizing

Height

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

Use of;

Width

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

Use of;

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;

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;

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.

EnabledExample.png

Use of;

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;

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;

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;

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;

Autosize

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.

Use of;

WordWrap

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.

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.

Use of;


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;

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;

TextSettings

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

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.


Font Size

The text size is adjusted using the "Font.Size" property.

Font Color

The component's text color is set using the "FontColor" property.

or

Font Style

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

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

Use of;

Text Horizontal Align

The horizontal alignment of text is set using the HorzAlign property. This property allows you to set three different alignment attributes for text:

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

Use of;

Text Vertical Align

The vertical alignment of text is set using the VertAlign property. This property allows you to set three different alignment attributes for text:

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

Use of;

KeyboardType

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.

Use of;

The values used in the KeyboardType property are:

Type Purpose of Use
vktDefault Default keyboard type
vktNumsAndPunctuation Keyboard for numbers and punctuation marks
vktNumberPad Numeric keypad for numbers only
vktPhonePad Keyboard for phone number input
vktAlphabet Keyboard for alphabetical characters
vktURL Keyboard for URL input
vktNamePhonePad Keyboard for numbers and alphabetical characters
vktDecimalNumberPad Numeric keyboard for decimal numbers

Data and User Input Settings

ClTypeOfField

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

Type Purpose of Use
taFloat Only numbers and the comma character can be entered.
taString All characters can be entered (numbers, symbols, letters).

Use of;

ReadOnly

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.

Use of;

MaxLength

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.

Use of;

Tag

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.

Use of;

Hint

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.

Use of;

HintExample.png

See Also