From Clomosy Docs

No edit summary
No edit summary
 
(4 intermediate revisions by 2 users not shown)
Line 1: Line 1:
There are two types of structures for using properties for professional components. One is the SetupComponent (with a JSON structure), and the other is the clProSettings structure.<br>
In Clomosy, clProSettings is used to define custom settings for professional components. This structure allows the behavior and appearance of components to be customized.<br>


<div class="alert alert-danger" role="alert" data-bs-theme="light">
<h2> clProSettings </h2>
The recommended type of usage is clProSettings.
For pro components, there is an alternative usage for utilizing enhanced features apart from the properties of standard components. This usage is available through the clProSetting property. Through this, the following properties can be utilized:<br>
 
<div class="alert alert-primary" role="alert" data-bs-theme="light">
 
<b> Transferring Properties to Professional Components: <span style="color:#f00505">SetclProSettings</span> </b>
 
SetclProSettings allows advanced settings or custom configurations of a component to be either applied to itself or transferred to another component.<br>
 
In the example, to apply the clProSettings of the "button1" component to itself:<br>
<pre>
button1.SetclProSettings(button1.clProSettings);
</pre>
 
To transfer the properties of "button1" to another component, such as "edit1", the following is used:<br>
<pre>
edit1.SetclProSettings(button1.clProSettings);
</pre>
 
This approach enables the reuse of the same properties without redefining them. It is an effective method to ensure consistent configuration across components.<br>
 
SetclProSettings also ensures that the defined clProSettings properties are applied to all relevant professional components. This structure is a practical solution for applying the same settings to multiple components. After the properties are defined, SetclProSettings must be used for the changes to take effect; otherwise, the components will not reflect the updated settings.<br>
 
Apply the following properties to the created component, and then apply the clProSettings structure.
</div>
</div>


<h2> clProSettings (RECOMMENDED) </h2>
For pro components, there is an alternative usage for utilizing enhanced features apart from the properties of standard components. This usage is available through the clProSetting property. Through this, the following properties can be utilized:<br>


<div class="table-responsive">
<div class="table-responsive">
Line 12: Line 32:
! style="background-color: #c3d7e0"| Feature  !!style="background-color: #c3d7e0"| Use of !!style="background-color: #c3d7e0"| Definition !!style="background-color: #c3d7e0"| Components Using  
! style="background-color: #c3d7e0"| Feature  !!style="background-color: #c3d7e0"| Use of !!style="background-color: #c3d7e0"| Definition !!style="background-color: #c3d7e0"| Components Using  
|-
|-
|SetclProSettings || button1.SetclProSettings(button1.clProSettings); edit1.SetclProSettings(button1.clProSettings); || The method SetclProSettings is used to access enhanced features or custom configurations for an object. In the example, the properties of the "button1" object are accessed. If the same properties are desired to be used on another object, they can be assigned using the clProSettings property of the "button1" object. In the other example, the "button1" property is defined for the "edit1" object. || -
|TextSettings ||button1.clProSettings.TextSettings.Font.Style = [fsBold,fsItalic,fsUnderline]; ||A property that determines the text appearance of a text component. This property controls attributes such as the font's weight (fsBold), slant (fsItalic), and underline (fsUnderline). || TclProLabel, TclProButton,  TclProEdit, TclProDateEdit, TClProSearchEdit
|-
|FontColor || button1.clProSettings.FontColor = clAlphaColor.clHexToColor('#ff00ac'); button1.clProSettings.FontColor = clAlphaColor.clRed; || It is a property that specifies the color of the text displayed on a text component. If you want to use clAlphaColor, please visit the [[Color Constants]] page.|| TclProLabel, TclProButton, TclProEdit, TclProDateEdit, TClProSearchEdit
|-
|-
|FontColor || button1.clProSettings.FontColor = clAlphaColor.clHexToColor('#ff00ac'); button1.clProSettings.FontColor = clAlphaColor.clRed; || It is a property that specifies the color of the text displayed on a text component.|| TclProButton, TclProLabel, TclProEdit, TclProDateEdit, TClProSearchEdit
|FontName ||button1.clProSettings.FontName = 'Algerian'; //for Windows || It is used to customize the text font of a component. However, font selection varies depending on the platform. || TclProLabel, TclProButton, TclProEdit, TclProDateEdit, TClProSearchEdit
|-
|-
|FontSize ||button1.clProSettings.FontSize = 20; || a property that specifies the size of the text font used in a text component.|| TclProButton, TclProLabel, TclProEdit,TclProDateEdit, TClProSearchEdit
|FontSize ||button1.clProSettings.FontSize = 20; || a property that specifies the size of the text font used in a text component.|| TclProLabel, TclProButton, TclProEdit, TclProDateEdit, TClProSearchEdit
|-
|-
|FontVertAlign || button1.clProSettings.FontVertAlign = palcenter; //palLeading, palCenter, palTrailing || A property that specifies the vertical alignment of the text used in a text component.<br>
|FontVertAlign || button1.clProSettings.FontVertAlign = palcenter; //palLeading, palCenter, palTrailing || A property that specifies the vertical alignment of the text used in a text component.<br>
Line 22: Line 44:
*<b>palCenter</b>: Aligns the text to the center of the component.
*<b>palCenter</b>: Aligns the text to the center of the component.
*<b>palTrailing</b>: Aligns the text to the bottom of the component.<br>
*<b>palTrailing</b>: Aligns the text to the bottom of the component.<br>
|| TclProButton, TclProLabel, TclProEdit,TclProDateEdit, TClProSearchEdit
|| TclProLabel, TclProButton, TclProEdit, TclProDateEdit, TClProSearchEdit
|-
|-
|FontHorzAlign || button1.clProSettings.FontHorzAlign = palLeading;//palLeading, palCenter, palTrailing || A property that specifies the horizontal alignment of the text used in a text component.<br>
|FontHorzAlign || button1.clProSettings.FontHorzAlign = palLeading;//palLeading, palCenter, palTrailing || A property that specifies the horizontal alignment of the text used in a text component.<br>
Line 28: Line 50:
*<b>palCenter</b>: Aligns the text to the center of the component.
*<b>palCenter</b>: Aligns the text to the center of the component.
*<b>palTrailing</b>: Aligns the text to the right side of the component.
*<b>palTrailing</b>: Aligns the text to the right side of the component.
||TclProButton, TclProLabel, TclProEdit, TclProDateEdit, TClProSearchEdit
||TclProLabel, TclProButton, TclProEdit, TclProDateEdit, TClProSearchEdit
|-
|-
|Font.Style ||button1.clProSettings.TextSettings.Font.Style = [fsBold,fsItalic,fsUnderline]; ||A property that determines the text appearance of a text component. This property controls attributes such as the font's weight (fsBold), slant (fsItalic), and underline (fsUnderline). || TclProButton, TclProLabel, TclProEdit, TclProDateEdit, TClProSearchEdit
|BackgroundColor || button1.clProSettings.BackgroundColor = clAlphaColor.clRed;  button1.clProSettings.BackgroundColor = clAlphaColor.clHexToColor('#ff00ac'); || It is a property that specifies the background color of a component. || TclProLabel, TclProButton, TclProImage, TclProEdit, TclProListView, TclProListViewDesignerPanel, TclProPanel, TclProDateEdit, TClProSearchEdit
|-
|-
|BorderColor ||button1.clProSettings.BorderColor = clAlphaColor.clBlue; <br>button1.clProSettings.BorderColor = clAlphaColor.clHexToColor('#ff00ac'); || A property that specifies the border color of a component. || TclProButton, TclProLabel, TclProEdit, TclProImage, TclProPanel, TclProListView, TclProListViewDesignerPanel, TclProDateEdit, TClProSearchEdit
|BorderColor ||button1.clProSettings.BorderColor = clAlphaColor.clBlue; <br>button1.clProSettings.BorderColor = clAlphaColor.clHexToColor('#ff00ac'); || A property that specifies the border color of a component. If you want to use clAlphaColor, please visit the [[Color Constants]] page. || TclProLabel, TclProButton, TclProImage, TclProEdit, TclProListView, TclProListViewDesignerPanel, TclProPanel, TclProDateEdit, TClProSearchEdit
|-
|-
|BorderWidth || button1.clProSettings.BorderWidth = 20; || A property that specifies the border width of a component. || TclProButton, TclProLabel, TclProEdit, TclProImage, TclProPanel, TclProListView, TclProListViewDesignerPanel, TclProDateEdit, TClProSearchEdit
|IsTransparent || button1.clProSettings.IsTransparent = True; || A property that determines whether the background of a component is visible or not. When this property is set to "True", the background of the component becomes invisible, allowing other components or controls behind it to be visible. When set to "False", the background of the component becomes visible. || TclProLabel, TclProButton, TclProImage, TclProEdit, TclProListView, TclProListViewDesignerPanel, TclProPanel, TclProDateEdit, TClProSearchEdit
|-
|-
|BackgroundColor || button1.clProSettings.BackgroundColor = clAlphaColor.clRed;  button1.clProSettings.BackgroundColor = clAlphaColor.clHexToColor('#ff00ac'); || It is a property that specifies the background color of a component. || TclProButton, TclProLabel, TclProEdit, TclProImage, TclProPanel, TclProListView, TclProListViewDesignerPanel, TclProDateEdit, TClProSearchEdit
|IsFill || button1.clProSettings.IsFill = False; || A property that controls whether a component's background is filled with color or not. When this property is set to "True", the background color of the component is visible. When set to "False", the background color of the component is not visible. || TclProLabel, TclProButton, TclProImage, TclProEdit, TclProListView, TclProListViewDesignerPanel, TclProPanel, TclProDateEdit, TClProSearchEdit
|-
|-
|IsTransparent || button1.clProSettings.IsTransparent = True; || A property that determines whether the background of a component is visible or not. When this property is set to "True", the background of the component becomes invisible, allowing other components or controls behind it to be visible. When set to "False", the background of the component becomes visible. || TclProButton, TclProLabel, TclProEdit, TclProImage, TclProPanel, TclProListView, TclProListViewDesignerPanel, TclProDateEdit, TClProSearchEdit
|RoundHeight || button1.clProSettings.RoundHeight = 20; || A property that specifies the rounded corner height of a component. || TclProLabel, TclProButton, TclProImage, TclProEdit, TclProListView, TclProListViewDesignerPanel, TclProPanel, TclProDateEdit, TClProSearchEdit
|-
|-
|IsFill || button1.clProSettings.IsFill = False; || A property that controls whether a component's background is filled with color or not. When this property is set to "True", the background color of the component is visible. When set to "False", the background color of the component is not visible. || TclProButton, TclProLabel, TclProEdit, TclProImage, TclProPanel, TclProListView, TclProListViewDesignerPanel, TclProDateEdit, TClProSearchEdit
|RoundWidth || button1.clProSettings.RoundWidth = 20; || A property that specifies the rounded corner width of a component. || TclProLabel, TclProButton, TclProImage, TclProEdit, TclProListView, TclProListViewDesignerPanel, TclProPanel, TclProDateEdit, TClProSearchEdit
|-
|-
|IsRound || button1.clProSettings.IsRound = True; || "IsRound" is a property that indicates whether the corners of an object are rounded or not. When this property is set to "True", the corners of the object are rounded; when set to "False", the corners are not rounded and remain flat. If this feature is desired to be used, RoundHeight and RoundWidth values ​​must be given. || TclProButton, TclProLabel, TclProEdit, TclProImage, TclProPanel, TclProListView, TclProListViewDesignerPanel, TclProDateEdit, TClProSearchEdit
|IsRound || button1.clProSettings.IsRound = True; || "IsRound" is a property that indicates whether the corners of an object are rounded or not. When this property is set to "True", the corners of the object are rounded; when set to "False", the corners are not rounded and remain flat. If this feature is desired to be used, RoundHeight and RoundWidth values ​​must be given. || TclProLabel, TclProButton, TclProImage, TclProEdit, TclProListView, TclProListViewDesignerPanel, TclProPanel, TclProDateEdit, TClProSearchEdit
|-
|-
|RoundHeight || button1.clProSettings.RoundHeight = 20; || A property that specifies the rounded corner height of a component. || TclProButton, TclProLabel, TclProEdit, TclProImage, TclProPanel, TclProListView, TclProListViewDesignerPanel, TclProDateEdit, TClProSearchEdit
|BorderWidth || button1.clProSettings.BorderWidth = 20; || A property that specifies the border width of a component. || TclProLabel, TclProButton, TclProImage, TclProEdit, TclProListView, TclProListViewDesignerPanel, TclProPanel, TclProDateEdit, TClProSearchEdit
|-
|-
|RoundWidth || button1.clProSettings.RoundWidth = 20; || A property that specifies the rounded corner width of a component. || TclProButton, TclProLabel, TclProEdit, TclProImage, TclProPanel, TclProListView, TclProListViewDesignerPanel, TclProDateEdit, TClProSearchEdit
|PictureAutoFit || button1.clProSettings.PictureAutoFit = True; || A property that determines whether the image inside a component that is capable of displaying images should automatically fit to the component's size or not. When this property is set to "True", the image is automatically resized to fit the component's size. When set to "False", if the image is larger than the component's size, it may be cropped or overflow. When using this property, the PictureSource property must also be used. || TclProButton, TclProImage, TClProEdit, TClProSearchEdit
|-
|-
|PictureAutoFit || button1.clProSettings.PictureAutoFit = True; || A property that determines whether the image inside a component that is capable of displaying images should automatically fit to the component's size or not. When this property is set to "True", the image is automatically resized to fit the component's size. When set to "False", if the image is larger than the component's size, it may be cropped or overflow. When using this property, the PictureSource property must also be used. || TclProButton, TclProImage
|PictureStretch || button1.clProSettings.PictureStretch = False; || A property that determines whether the image in an image component should be stretched to fit the component's size exactly or not. When this property is set to "True", the image is automatically resized to fit exactly within the component's dimensions. When set to "False", the image remains in its original size, and if it doesn't fit within the component's dimensions, it may overflow or be cropped. When using this property, the PictureSource property must also be used.|| TclProButton, TclProImage, TClProEdit, TClProSearchEdit
|-
|-
|PictureStretch || button1.clProSettings.PictureStretch = False; || A property that determines whether the image in an image component should be stretched to fit the component's size exactly or not. When this property is set to "True", the image is automatically resized to fit exactly within the component's dimensions. When set to "False", the image remains in its original size, and if it doesn't fit within the component's dimensions, it may overflow or be cropped. When using this property, the PictureSource property must also be used.|| TclProButton, TclProImage
|PictureSource || button1.clProSettings.PictureSource = 'https://clomosy.com/demos/chatGreen.png'; || A property that specifies the source of the image to be assigned to an image component. || TclProButton, TclProImage, TClProEdit, TClProSearchEdit
|-
|-
|PictureSource || button1.clProSettings.PictureSource = 'https://clomosy.com/demos/chatGreen.png'; || A property that specifies the source of the image to be assigned to an image component. || TclProButton, TclProImage
|AutoSize || Label1.clProSettings.AutoSize = True; || This property determines whether the component's size will automatically adjust based on its content. 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. || TclProLabel
|-
|-
|ColCount || proLV1.clProSettings.ColCount = 2; || A property that specifies the number of columns in a list component. || TclProListView
|WordWrap ||Label1.clProSettings.WordWrap = True; || WordWrap is a feature that automatically wraps text to the next line when it does not fit within a given area (e.g., a label or a text box). This ensures that the text is displayed across multiple lines without overflowing horizontally.|| TclProLabel
|-
|-
|ItemSpace || proLV1.clProSettings.ItemSpace = 10; || A property that specifies the spacing between items in a list component. || TclProListView
|ItemSpace || proLV1.clProSettings.ItemSpace = 10; || A property that specifies the spacing between items in a list component. || TclProListView
|-
|ItemHeight || proLV1.clProSettings.ItemHeight = 100; || A property that specifies the height of items in a list component. || TclProListView
|-
|-
|ItemWidth || proLV1.clProSettings.ItemWidth = 100; || A property that specifies the width of items in a list component. || TclProListView
|ItemWidth || proLV1.clProSettings.ItemWidth = 100; || A property that specifies the width of items in a list component. || TclProListView
|-
|-
|ItemHeight || proLV1.clProSettings.ItemHeight = 100; || A property that specifies the height of items in a list component. || TclProListView
|ColCount || proLV1.clProSettings.ColCount = 2; || A property that specifies the number of columns in a list component. || TclProListView
|-
|-
|ViewType || proLV1.clProSettings.ViewType = lvWaterFall;//(lvList, lvIcon, lvWaterFall) || A property that specifies the view type of a list component. This property determines how the list will be displayed and is used in the design of list components. || TclProListView
|ViewType || proLV1.clProSettings.ViewType = lvWaterFall;//(lvList, lvIcon, lvWaterFall) || A property that specifies the view type of a list component. This property determines how the list will be displayed and is used in the design of list components. || TclProListView
|}
|}
</div>
</div>




Line 107: Line 130:
</pre>
</pre>


<h2> SetupComponent </h2>
The properties used for TRObject language components have the following JSON structure. This JSON structure contains the parameters determined for the design of the components.<br>
<div class="alert alert-primary" role="alert" data-bs-theme="light">
A JSON object contains zero, one, or more key-value pairs, also called properties. The object is surrounded by curly braces {}. Every key-value pair is separated by a comma. The order of the key-value pair is irrelevant.<br>
A key-value pair consists of a key and a value, separated by a colon (:). The key is a string, which identifies the key-value pair.<br>
</div>
<div class="table-responsive">
{| class="wikitable" style="border: 2px solid #c3d7e0"
! style="background-color: #c3d7e0"| Feature  !!style="background-color: #c3d7e0"| Definition !!style="background-color: #c3d7e0"| Components Using
|-
|caption ||It represents the text displayed on a component.|| TclProButton, TclProLabel, TclProEdit
|-
|Width || It specifies the width of a component. || TclProButton, TclProLabel, TclProEdit, TclProImage, TclProPanel, TclProListView, TclProListViewDesignerPanel, TclProSearchEdit, TclProDateEdit
|-
|Height || It specifies the height of a component. || TclProButton, TclProLabel, TclProEdit, TclProImage, TclProPanel, TclProListView, TclProListViewDesignerPanel, TclProSearchEdit, TclProDateEdit
|-
|PositionX || It specifies the horizontal position (X coordinate) of a component. || TclProButton, TclProLabel, TclProEdit, TclProImage, TclProPanel, TclProListView, TclProListViewDesignerPanel, TclProSearchEdit, TclProDateEdit
|-
|PositionY || It specifies the vertical position (Y coordinate) of a component. || TclProButton, TclProLabel, TclProEdit, TclProImage, TclProPanel, TclProListView, TclProListViewDesignerPanel, TclProSearchEdit, TclProDateEdit
|-
|Align || Align is a property that specifies how a component is positioned within its parent control or component. You can refer to the [[Object Properties]] page for the Align properties. || TclProButton, TclProLabel, TclProEdit, TclProImage, TclProPanel, TclProListView, TclProListViewDesignerPanel, TclProSearchEdit, TclProDateEdit
|-
|TextColor || It is a property that specifies the color of the text displayed on a text component. || TclProButton, TclProLabel, TclProEdit, TclProImage, TclProSearchEdit, TclProDateEdit
|-
|BackgroundColor || It is a property that specifies the background color of a component. || TclProButton, TclProLabel, TclProEdit, TclProImage, TclProPanel, TclProListView, TclProListViewDesignerPanel, TclProSearchEdit, TclProDateEdit
|-
|TextSize || "TextSize" is a property that specifies the size of the text font used in a text component. || TclProButton, TclProLabel, TclProEdit, TclProListView, TclProSearchEdit, TclProDateEdit
|-
|TextVerticalAlign || A property that specifies the vertical alignment of the text used in a text component. || TclProButton, TclProLabel, TclProEdit, TclProSearchEdit, TclProDateEdit
|-
|TextHorizontalAlign || A property that specifies the horizontal alignment of the text used in a text component. || TclProButton, TclProLabel, TclProEdit, TclProSearchEdit, TclProDateEdit
|-
|TextBold || A property that specifies whether the text used in a text component will be bold or not. || TclProButton, TclProLabel, TclProEdit, TclProSearchEdit, TclProDateEdit
|-
|MarginTop || A property that specifies the amount of space inward from the top edge of a component.  || TclProButton, TclProLabel, TclProEdit, TclProImage, TclProPanel, TclProListView, TclProListViewDesignerPanel, TclProSearchEdit, TclProDateEdit
|-
|MarginBottom || A property that specifies the amount of space inward from the bottom edge of a component.  || TclProButton, TclProLabel, TclProEdit, TclProImage, TclProPanel, TclProListView, TclProListViewDesignerPanel, TclProSearchEdit, TclProDateEdit
|-
|MarginRight || A property that specifies the amount of space inward from the right edge of a component. || TclProButton, TclProLabel, TclProEdit, TclProImage, TclProPanel, TclProListView, TclProListViewDesignerPanel, TclProSearchEdit, TclProDateEdit
|-
|MarginLeft || A property that specifies the amount of space inward from the left edge of a component. || TclProButton, TclProLabel, TclProEdit, TclProImage, TclProPanel, TclProListView, TclProListViewDesignerPanel, TclProSearchEdit, TclProDateEdit
|-
|RoundHeight || A property that specifies the rounded corner height of a component. || TclProButton, TclProLabel, TclProEdit, TclProImage, TclProPanel, TclProListView, TclProListViewDesignerPanel, TclProSearchEdit, TclProDateEdit
|-
|RoundWidth || A property that specifies the rounded corner Width of a component. || TclProButton, TclProLabel, TclProEdit, TclProImage, TclProPanel, TclProListView, TclProListViewDesignerPanel, TclProSearchEdit, TclProDateEdit
|-
|BorderColor || A property that specifies the border color of a component. || TclProButton, TclProLabel, TclProEdit, TclProImage, TclProPanel, TclProListView, TclProListViewDesignerPanel, TclProSearchEdit, TclProDateEdit
|-
|BorderWidth || A property that specifies the border width of a component. || TclProButton, TclProLabel, TclProEdit, TclProImage, TclProPanel, TclProListView, TclProListViewDesignerPanel, TclProSearchEdit, TclProDateEdit
|-
|ImgUrl || A property that specifies the source URL of an image displayed within a component's content. || TclProButton, TclProImage, TclProSearchEdit
|-
|ImgFit || It ensures that the image inside an image component is precisely matched to the component dimensions. || TclProButton, TclProImage, TclProSearchEdit
|-
|ImgStretch || It adjusts the dimensions of the image within an image component by stretching or compressing it according to the component's dimensions. || TclProButton, TclProImage, TclProSearchEdit
|-
|PromptText || A property that specifies the text displayed in an input component (e.g., a text box) to indicate to the user what type of data should be entered or to describe the expected input. This is typically displayed in a gray color, slightly transparent, and replaces the actual text input until the user makes a real data entry. || TclProEdit
|-
|ItemSpace || A property that specifies the spacing between items in a list component. || TClProListView
|-
|ItemColumnCount || A property that specifies the number of columns in which items are arranged in a list component. || TClProListView
|-
|ListType('List' - 'Cart' - 'Fluid')|| A property that specifies how a list component is displayed. || TClProListView
|-
|AutoSize (Horizontal, Vertical) || A property that specifies automatic resizing of a component. || TclProLabel
|-
|ItemWidth || A property that specifies the width of items in a list component. || TClProListView
|-
|ItemHeight || A property that specifies the height of items in a list component. || TClProListView
|}
</div>
<b>Use of:</b><br>
<pre>
clComponent.SetupComponent(TCLComponent,'{
  "caption":"this is label",
  "Width":100,
  "Height":200,
  "PositionX": 50,
  "PositionY" : 150,
  "Align" : "Center",
  "TextColor":"#f5428d",
  "BackgroundColor":"#5e61ff",
  "TextSize":20,
  "TextVerticalAlign":"center",
  "TextHorizontalAlign":"center",
  "TextBold":"yes",
  "MarginTop" : 50,
  "MarginBottom":0,
  "MarginRight":0,
  "MarginLeft":0,
  "RoundHeight":10,
  "RoundWidth":10,
  "BorderColor":"#57000e",
  "BorderWidth":2,
  "ImgUrl":"hhtp:..",
  "ImgFit":"yes",
  "ImgStretch":"yes",
  "PromptText":"this is for help",
  "ItemSpace" : 0,
  "ItemColumnCount" : 0,
  "ListType":"Cart",
  "AutoSize":"Horizontal",
  "ItemWidth": 0,
  "ItemHeight" : 0
}');
</pre>


<h2> See Also </h2>
<h2> See Also </h2>
Line 223: Line 135:
* [[Object Properties]]
* [[Object Properties]]
* [[Color Constants]]
* [[Color Constants]]
{{#seo:|description=Learn about Pro Object Properties in Clomosy Docs. A detailed guide on managing and utilizing object properties for advanced app development.}}

Latest revision as of 08:08, 16 April 2025

In Clomosy, clProSettings is used to define custom settings for professional components. This structure allows the behavior and appearance of components to be customized.

clProSettings

For pro components, there is an alternative usage for utilizing enhanced features apart from the properties of standard components. This usage is available through the clProSetting property. Through this, the following properties can be utilized:


Feature Use of Definition Components Using
TextSettings button1.clProSettings.TextSettings.Font.Style = [fsBold,fsItalic,fsUnderline]; A property that determines the text appearance of a text component. This property controls attributes such as the font's weight (fsBold), slant (fsItalic), and underline (fsUnderline). TclProLabel, TclProButton, TclProEdit, TclProDateEdit, TClProSearchEdit
FontColor button1.clProSettings.FontColor = clAlphaColor.clHexToColor('#ff00ac'); button1.clProSettings.FontColor = clAlphaColor.clRed; It is a property that specifies the color of the text displayed on a text component. If you want to use clAlphaColor, please visit the Color Constants page. TclProLabel, TclProButton, TclProEdit, TclProDateEdit, TClProSearchEdit
FontName button1.clProSettings.FontName = 'Algerian'; //for Windows It is used to customize the text font of a component. However, font selection varies depending on the platform. TclProLabel, TclProButton, TclProEdit, TclProDateEdit, TClProSearchEdit
FontSize button1.clProSettings.FontSize = 20; a property that specifies the size of the text font used in a text component. TclProLabel, TclProButton, TclProEdit, TclProDateEdit, TClProSearchEdit
FontVertAlign button1.clProSettings.FontVertAlign = palcenter; //palLeading, palCenter, palTrailing A property that specifies the vertical alignment of the text used in a text component.
  • palLeading: Aligns the text to the top.
  • palCenter: Aligns the text to the center of the component.
  • palTrailing: Aligns the text to the bottom of the component.
TclProLabel, TclProButton, TclProEdit, TclProDateEdit, TClProSearchEdit
FontHorzAlign button1.clProSettings.FontHorzAlign = palLeading;//palLeading, palCenter, palTrailing A property that specifies the horizontal alignment of the text used in a text component.
  • palLeading: Aligns the text to the left side of the component.
  • palCenter: Aligns the text to the center of the component.
  • palTrailing: Aligns the text to the right side of the component.
TclProLabel, TclProButton, TclProEdit, TclProDateEdit, TClProSearchEdit
BackgroundColor button1.clProSettings.BackgroundColor = clAlphaColor.clRed; button1.clProSettings.BackgroundColor = clAlphaColor.clHexToColor('#ff00ac'); It is a property that specifies the background color of a component. TclProLabel, TclProButton, TclProImage, TclProEdit, TclProListView, TclProListViewDesignerPanel, TclProPanel, TclProDateEdit, TClProSearchEdit
BorderColor button1.clProSettings.BorderColor = clAlphaColor.clBlue;
button1.clProSettings.BorderColor = clAlphaColor.clHexToColor('#ff00ac');
A property that specifies the border color of a component. If you want to use clAlphaColor, please visit the Color Constants page. TclProLabel, TclProButton, TclProImage, TclProEdit, TclProListView, TclProListViewDesignerPanel, TclProPanel, TclProDateEdit, TClProSearchEdit
IsTransparent button1.clProSettings.IsTransparent = True; A property that determines whether the background of a component is visible or not. When this property is set to "True", the background of the component becomes invisible, allowing other components or controls behind it to be visible. When set to "False", the background of the component becomes visible. TclProLabel, TclProButton, TclProImage, TclProEdit, TclProListView, TclProListViewDesignerPanel, TclProPanel, TclProDateEdit, TClProSearchEdit
IsFill button1.clProSettings.IsFill = False; A property that controls whether a component's background is filled with color or not. When this property is set to "True", the background color of the component is visible. When set to "False", the background color of the component is not visible. TclProLabel, TclProButton, TclProImage, TclProEdit, TclProListView, TclProListViewDesignerPanel, TclProPanel, TclProDateEdit, TClProSearchEdit
RoundHeight button1.clProSettings.RoundHeight = 20; A property that specifies the rounded corner height of a component. TclProLabel, TclProButton, TclProImage, TclProEdit, TclProListView, TclProListViewDesignerPanel, TclProPanel, TclProDateEdit, TClProSearchEdit
RoundWidth button1.clProSettings.RoundWidth = 20; A property that specifies the rounded corner width of a component. TclProLabel, TclProButton, TclProImage, TclProEdit, TclProListView, TclProListViewDesignerPanel, TclProPanel, TclProDateEdit, TClProSearchEdit
IsRound button1.clProSettings.IsRound = True; "IsRound" is a property that indicates whether the corners of an object are rounded or not. When this property is set to "True", the corners of the object are rounded; when set to "False", the corners are not rounded and remain flat. If this feature is desired to be used, RoundHeight and RoundWidth values ​​must be given. TclProLabel, TclProButton, TclProImage, TclProEdit, TclProListView, TclProListViewDesignerPanel, TclProPanel, TclProDateEdit, TClProSearchEdit
BorderWidth button1.clProSettings.BorderWidth = 20; A property that specifies the border width of a component. TclProLabel, TclProButton, TclProImage, TclProEdit, TclProListView, TclProListViewDesignerPanel, TclProPanel, TclProDateEdit, TClProSearchEdit
PictureAutoFit button1.clProSettings.PictureAutoFit = True; A property that determines whether the image inside a component that is capable of displaying images should automatically fit to the component's size or not. When this property is set to "True", the image is automatically resized to fit the component's size. When set to "False", if the image is larger than the component's size, it may be cropped or overflow. When using this property, the PictureSource property must also be used. TclProButton, TclProImage, TClProEdit, TClProSearchEdit
PictureStretch button1.clProSettings.PictureStretch = False; A property that determines whether the image in an image component should be stretched to fit the component's size exactly or not. When this property is set to "True", the image is automatically resized to fit exactly within the component's dimensions. When set to "False", the image remains in its original size, and if it doesn't fit within the component's dimensions, it may overflow or be cropped. When using this property, the PictureSource property must also be used. TclProButton, TclProImage, TClProEdit, TClProSearchEdit
PictureSource button1.clProSettings.PictureSource = 'https://clomosy.com/demos/chatGreen.png'; A property that specifies the source of the image to be assigned to an image component. TclProButton, TclProImage, TClProEdit, TClProSearchEdit
AutoSize Label1.clProSettings.AutoSize = True; This property determines whether the component's size will automatically adjust based on its content. 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. TclProLabel
WordWrap Label1.clProSettings.WordWrap = True; WordWrap is a feature that automatically wraps text to the next line when it does not fit within a given area (e.g., a label or a text box). This ensures that the text is displayed across multiple lines without overflowing horizontally. TclProLabel
ItemSpace proLV1.clProSettings.ItemSpace = 10; A property that specifies the spacing between items in a list component. TclProListView
ItemHeight proLV1.clProSettings.ItemHeight = 100; A property that specifies the height of items in a list component. TclProListView
ItemWidth proLV1.clProSettings.ItemWidth = 100; A property that specifies the width of items in a list component. TclProListView
ColCount proLV1.clProSettings.ColCount = 2; A property that specifies the number of columns in a list component. TclProListView
ViewType proLV1.clProSettings.ViewType = lvWaterFall;//(lvList, lvIcon, lvWaterFall) A property that specifies the view type of a list component. This property determines how the list will be displayed and is used in the design of list components. TclProListView


Use of:
In the following example, two button objects are created, and several properties of the btn1 object are used. These properties are then transferred to the btn2 object as well.

 var
   Form1:TCLForm;
   Btn1,Btn2 : TClProButton;
 {
   Form1 = TCLForm.Create(Self);
 
   Btn1 = Form1.AddNewProButton(Form1,'Btn1','Buton1 Object');
   Btn1.Align = alMostTop;
   Btn1.Height = 75;
   Btn1.clProSettings.BorderColor = clAlphaColor.clHexToColor('#d6cdcd');
   Btn1.clProSettings.FontColor = clAlphaColor.clDarkorchid;
   Btn1.clProSettings.FontSize = 12;
   Btn1.clProSettings.FontVertAlign = palcenter;//palLeading , palCenter , palTrailing
   Btn1.clProSettings.FontHorzAlign = palLeading;
   Btn1.clProSettings.TextSettings.Font.Style = [fsBold,fsItalic];
   
   Btn1.clProSettings.BackgroundColor = clAlphaColor.clBlanchedalmond;
   Btn1.clProSettings.IsTransparent = False;
   Btn1.clProSettings.IsFill = True; 
   Btn1.clProSettings.IsRound = True;
   Btn1.clProSettings.RoundHeight = 15;
   Btn1.clProSettings.RoundWidth = 15;
   Btn1.clProSettings.BorderWidth = 3;
   
   Btn1.SetclProSettings(Btn1.clProSettings);
   
   Btn2 = Form1.AddNewProButton(Form1,'Btn2','Buton2 Object');
   Btn2.Align = alTop;
   Btn2.Height = 75;
   Btn2.Margins.Top = 5;
   Btn2.SetclProSettings(Btn1.clProSettings);
   Form1.Run;
 }


See Also