From Clomosy Docs

No edit summary
No edit summary
Line 8: Line 8:


<div class="alert alert-danger" role="alert" data-bs-theme="light">
<div class="alert alert-danger" role="alert" data-bs-theme="light">
Used only on the [[TclProListView]] object.
Used only on the [[TClProListView]] object.
</div>
</div>


Line 31: Line 31:
* clImage1
* clImage1
* clImage2
* clImage2
How to add an object to a field name?<br>
The object is added using the AddPanelObject property. The first parameter of this property is the name of the object to be added, and the second parameter specifies the field where the object will be added.<br>
For example, if there is a TclEdit object, it contains text, so one of the fields starting with clText can be used for this.<br>
Example usage:<br>
<pre>
DesignerPanel1.AddPanelObject(Edit1,clText);
</pre>
</div>
</div>


<div class="table-responsive">
{| class="wikitable" style="border: 2px solid #c3d7e0"
! style="background-color: #c3d7e0"| Feature  !!style="background-color: #c3d7e0"| Use of !!style="background-color: #c3d7e0"| Definition
|-
|TClProListViewDesignerPanel ||DesignerPanel1 : TClProListViewDesignerPanel; || A variable belonging to the TClProListViewDesignerPanel class is created.
|-
|AddNewProListViewDesignerPanel ||DesignerPanel1 = MyForm.AddNewProListViewDesignerPanel(ProListView1,'DesignerPanel1'); || A new TClProListViewDesignerPanel component is added to the form.
|-
|AddPanelObject ||DesignerPanel1.AddPanelObject(Label1,clText); //Label1 :TclLabel; || The TclProListViewDesignerPanel object allows the addition of objects into it.
|}
</div>




<div class="row">
<div class="col-lg-6">
<div  class="card d-flex flex-column justify-content-start gap-1 mb-3 h-100" style="padding: 3;">
<div style="font-size: 16px;font-weight: bold;text-align:left;">
  clProSettings Properties
</div>
<div style="font-size: 14px;font-weight: normal;text-align:justify; max-width: 350px;">
<li>BorderColor</li>
<li>BorderWidth</li>
<li>BackgroundColor</li>
<li>IsTransparent</li>
<li>IsFill</li>
<li>IsRound</li>
<li>RoundHeight</li>
<li>RoundWidth</li>
</div>
</div>
</div>
<div class="col-lg-6">
<div  class="card d-flex flex-column justify-content-start gap-1 mb-3 h-100" style="padding: 3;">
<div style="font-size: 16px;font-weight: bold;text-align:left;">
SetupComponent Properties
</div>
<div style="font-size: 14px;font-weight: normal;text-align:justify; max-width: 350px;">
<li>Caption</li>
<li>Width</li>
<li>Height</li>
<li>PositionX</li>
<li>PositionY</li>
<li>Align</li>
<li>TextColor</li>
<li>BackgroundColor</li>
<li>TextSize</li>
<li>TextVerticalAlign</li>
<li>TextHorizontalAlign</li>
<li>TextBold</li>
<li>MarginTop</li>
<li>MarginBottom</li>
<li>MarginRight</li>
<li>MarginLeft</li>
<li>RoundHeight</li>
<li>RoundWidth</li>
<li>BorderColor</li>
<li>BorderWidth</li>
<li>AutoSize</li>
</div>
</div>
</div>
</div>
<br>








<div class="alert alert-warning" role="alert" data-bs-theme="light">
To learn the purpose and usage of the <b>SetupComponent</b> and <b>clProSettings</b> properties, please refer to [[Pro Object Properties| the page]].
</div>


<b>Example</b><br>


<div class="alert alert-danger" role="alert" data-bs-theme="light">
The data will not appear in the TclListView object unless it is added to the DesignerPanel.
</div>
For clProSettings:<br>
<pre>
var
  Form1 : TclForm;
  ListView1 : TClProListView;
  DesignerPanel1 : TClProListViewDesignerPanel;
 
{
  Form1 = TclForm.Create(Self);


  ListView1 = Form1.AddNewProListView(Form1,'ListView1');
  ListView1.Align = AlClient;
  ListView1.Margins.Bottom = 20;
  ListView1.Margins.Top = 20;
  ListView1.Margins.Right = 20;
  ListView1.Margins.Left = 20;
  ListView1.clProSettings.ViewType = lvIcon; //(lvList, lvIcon, lvWaterFall)
  ListView1.clProSettings.ColCount = 1;
  ListView1.clProSettings.ItemHeight = 100;
  ListView1.clProSettings.ItemSpace = 10;
  ListView1.clProSettings.BackgroundColor = clAlphaColor.clHexToColor('#FFFCFF');
  ListView1.clProSettings.BorderColor = clAlphaColor.clHexToColor('#66FF7F');
  ListView1.clProSettings.BorderWidth = 2;
  ListView1.clProSettings.RoundHeight = 5;
  ListView1.clProSettings.RoundWidth = 5;
  ListView1.SetclProSettings(ListView1.clProSettings);


How do we use these parameters?<br>
  DesignerPanel1 = Form1.AddNewProListViewDesignerPanel(ListView1,'DesignerPanel1');
When you want to add an object to the TclProListViewDesignerPanel component, the '''AddPanelObject''' property is used. The first parameter of this property is the name of the object to be added, and the second parameter specifies the field where the object will be added.<br>
  DesignerPanel1.Align = alMostTop;
For example, there is a TclEdit object. This object is a text component. One of the fields starting with clText mentioned above can be used for this. Below, an addition has been made to the clText field.<br>
  DesignerPanel1.Height = 100;
  DesignerPanel1.clProSettings.BorderColor = clAlphaColor.clHexToColor('#F5BCC9');
  DesignerPanel1.clProSettings.BackgroundColor = clAlphaColor.clHexToColor('#F6EDDB');
  DesignerPanel1.clProSettings.IsTransparent = False;
  DesignerPanel1.clProSettings.IsFill = True;
  DesignerPanel1.clProSettings.IsRound = True;
  DesignerPanel1.clProSettings.RoundHeight = 20;
  DesignerPanel1.clProSettings.RoundWidth = 20;
  DesignerPanel1.clProSettings.BorderWidth = 2;
  DesignerPanel1.SetclProSettings(DesignerPanel1.clProSettings);
  ListView1.SetDesignerPanel(DesignerPanel1);
 
  Form1.Run;
}
</pre>


DesignerPanel1.AddPanelObject(Label1,'''clText''');
For SetupComponent:<br>
 
<pre>
Let's define it to use in our project.<br>
var
 
  Form1 : TclForm;
DesignerPanel1 : TClProListViewDesignerPanel;
  ListView1 : TClProListView;
 
  DesignerPanel1 : TClProListViewDesignerPanel;
<blockquote style="background-color:#CBEDD5">To learn the purpose and usage of the '''SetupComponent''' and '''clProSettings''' properties, please refer to [[Pro Object Properties| the page]]. </blockquote>
 
 
{
The SetDesignerPanel property is used to add the DesignerPanel to the ProListView.<br>
  Form1 = TclForm.Create(Self);
ListView1.'''SetDesignerPanel'''(DesignerPanel1);


Then, we'll assign properties to our panel using both the SetupComponent structure and clProSettings.
  ListView1 = Form1.AddNewProListView(Form1,'ListView1');
  ListView1.Align = AlClient;
  ListView1.Margins.Bottom = 20;
  ListView1.Margins.Top = 20;
  ListView1.Margins.Right = 20;
  ListView1.Margins.Left = 20;
  ListView1.clProSettings.ViewType = lvIcon; //(lvList, lvIcon, lvWaterFall)
  ListView1.clProSettings.ColCount = 1;
  ListView1.clProSettings.ItemHeight = 100;
  ListView1.clProSettings.ItemSpace = 10;
  ListView1.clProSettings.BackgroundColor = clAlphaColor.clHexToColor('#FFFCFF');
  ListView1.clProSettings.BorderColor = clAlphaColor.clHexToColor('#66FF7F');
  ListView1.clProSettings.BorderWidth = 2;
  ListView1.clProSettings.RoundHeight = 5;
  ListView1.clProSettings.RoundWidth = 5;
  ListView1.SetclProSettings(ListView1.clProSettings);


:''For clProSettings:''
  DesignerPanel1 = Form1.AddNewProListViewDesignerPanel(ListView1,'DesignerPanel1');
<pre>
  clComponent.SetupComponent(DesignerPanel1,'{
  DesignerPanel1 = Form1.AddNewProButton(ListView1,'DesignerPanel1');
  "Align" : "MostTop",
  DesignerPanel1.Align = alMostTop;
  "Height":100,
  DesignerPanel1.Height = 100;
  "BorderColor":"#F5BCC9",
  DesignerPanel1.clProSettings.BorderColor = clAlphaColor.clHexToColor('#F5BCC9');
  "BackgroundColor":"#F6EDDB",  
  DesignerPanel1.clProSettings.BackgroundColor = clAlphaColor.clHexToColor('#F6EDDB');
  "RoundHeight":20,
  DesignerPanel1.clProSettings.IsTransparent = False;
  "RoundWidth":20,
  DesignerPanel1.clProSettings.IsFill = True;
  "BorderWidth":2
  DesignerPanel1.clProSettings.IsRound = True;
  }');
  DesignerPanel1.clProSettings.RoundHeight = 20;
  ListView1.SetDesignerPanel(DesignerPanel1);
  DesignerPanel1.clProSettings.RoundWidth = 20;
 
  DesignerPanel1.clProSettings.BorderWidth = 2;
  Form1.Run;
  DesignerPanel1.SetclProSettings(DesignerPanel1.clProSettings);
}
  ListView1.SetDesignerPanel(DesignerPanel1);
</pre>
 
:''For SetupComponent:''
<pre>
DesignerPanel1 = MyForm.AddNewProListViewDesignerPanel(ListView1,'DesignerPanel1');
clComponent.SetupComponent(DesignerPanel1,'{"Align":"MostTop","Height":100,"Width" : 150,"BackgroundColor":"#F6EDDB",
"BorderColor":"#F5BCC9","BorderWidth":2,"RoundHeight":20,"RoundWidth":20}');
ListView1.SetDesignerPanel(DesignerPanel1);
</pre>
</pre>


<div class="alert alert-success" role="alert" data-bs-theme="light">
You can see the sample projects in the [[TClProListView|TClProListView]] page.
</div>


In this way, we have made our definitions. You can see the sample project in the [[TClProListView|TClProListView]] page.
<h2> See Also </h2>
* [[Components]]
* [[Pro Object Properties]]
* [[Object Properties]]

Revision as of 10:20, 13 November 2024

AComponent : Specifies the parent of the object to be defined.

xName : The name of the defined listview should be written.

Used on the ListView object, this represents items created within the list. A single item is created, within which a specified number of objects can be added.

Feature Use of Definition
TClProListViewDesignerPanel DesignerPanel1 : TClProListViewDesignerPanel; A variable belonging to the TClProListViewDesignerPanel class is created.
AddNewProListViewDesignerPanel DesignerPanel1 = MyForm.AddNewProListViewDesignerPanel(ProListView1,'DesignerPanel1'); A new TClProListViewDesignerPanel component is added to the form.
AddPanelObject DesignerPanel1.AddPanelObject(Label1,clText); //Label1 :TclLabel; The TclProListViewDesignerPanel object allows the addition of objects into it.


clProSettings Properties

  • BorderColor
  • BorderWidth
  • BackgroundColor
  • IsTransparent
  • IsFill
  • IsRound
  • RoundHeight
  • RoundWidth
  • SetupComponent Properties

  • Caption
  • Width
  • Height
  • PositionX
  • PositionY
  • Align
  • TextColor
  • BackgroundColor
  • TextSize
  • TextVerticalAlign
  • TextHorizontalAlign
  • TextBold
  • MarginTop
  • MarginBottom
  • MarginRight
  • MarginLeft
  • RoundHeight
  • RoundWidth
  • BorderColor
  • BorderWidth
  • AutoSize



  • Example

    For clProSettings:

    var
      Form1 : TclForm;
      ListView1 : TClProListView;
      DesignerPanel1 : TClProListViewDesignerPanel;
      
    {
      Form1 = TclForm.Create(Self);
    
      ListView1 = Form1.AddNewProListView(Form1,'ListView1');
      ListView1.Align = AlClient;
      ListView1.Margins.Bottom = 20;
      ListView1.Margins.Top = 20;
      ListView1.Margins.Right = 20;
      ListView1.Margins.Left = 20;
      ListView1.clProSettings.ViewType = lvIcon; //(lvList, lvIcon, lvWaterFall)
      ListView1.clProSettings.ColCount = 1;
      ListView1.clProSettings.ItemHeight = 100;
      ListView1.clProSettings.ItemSpace = 10;
      ListView1.clProSettings.BackgroundColor = clAlphaColor.clHexToColor('#FFFCFF');
      ListView1.clProSettings.BorderColor = clAlphaColor.clHexToColor('#66FF7F');
      ListView1.clProSettings.BorderWidth = 2;
      ListView1.clProSettings.RoundHeight = 5;
      ListView1.clProSettings.RoundWidth = 5;
      ListView1.SetclProSettings(ListView1.clProSettings);
    
      DesignerPanel1 = Form1.AddNewProListViewDesignerPanel(ListView1,'DesignerPanel1');
      DesignerPanel1.Align = alMostTop;
      DesignerPanel1.Height = 100;
      DesignerPanel1.clProSettings.BorderColor = clAlphaColor.clHexToColor('#F5BCC9');
      DesignerPanel1.clProSettings.BackgroundColor = clAlphaColor.clHexToColor('#F6EDDB');
      DesignerPanel1.clProSettings.IsTransparent = False;
      DesignerPanel1.clProSettings.IsFill = True; 
      DesignerPanel1.clProSettings.IsRound = True;
      DesignerPanel1.clProSettings.RoundHeight = 20;
      DesignerPanel1.clProSettings.RoundWidth = 20;
      DesignerPanel1.clProSettings.BorderWidth = 2;
      DesignerPanel1.SetclProSettings(DesignerPanel1.clProSettings);
      ListView1.SetDesignerPanel(DesignerPanel1);
      
      Form1.Run;
    }
    

    For SetupComponent:

    var
      Form1 : TclForm;
      ListView1 : TClProListView;
      DesignerPanel1 : TClProListViewDesignerPanel;
      
    {
      Form1 = TclForm.Create(Self);
    
      ListView1 = Form1.AddNewProListView(Form1,'ListView1');
      ListView1.Align = AlClient;
      ListView1.Margins.Bottom = 20;
      ListView1.Margins.Top = 20;
      ListView1.Margins.Right = 20;
      ListView1.Margins.Left = 20;
      ListView1.clProSettings.ViewType = lvIcon; //(lvList, lvIcon, lvWaterFall)
      ListView1.clProSettings.ColCount = 1;
      ListView1.clProSettings.ItemHeight = 100;
      ListView1.clProSettings.ItemSpace = 10;
      ListView1.clProSettings.BackgroundColor = clAlphaColor.clHexToColor('#FFFCFF');
      ListView1.clProSettings.BorderColor = clAlphaColor.clHexToColor('#66FF7F');
      ListView1.clProSettings.BorderWidth = 2;
      ListView1.clProSettings.RoundHeight = 5;
      ListView1.clProSettings.RoundWidth = 5;
      ListView1.SetclProSettings(ListView1.clProSettings);
    
      DesignerPanel1 = Form1.AddNewProListViewDesignerPanel(ListView1,'DesignerPanel1');
      clComponent.SetupComponent(DesignerPanel1,'{
      "Align" : "MostTop",
      "Height":100,
      "BorderColor":"#F5BCC9",
      "BackgroundColor":"#F6EDDB", 
      "RoundHeight":20,
      "RoundWidth":20,		
      "BorderWidth":2
      }');
      ListView1.SetDesignerPanel(DesignerPanel1);
      
      Form1.Run;
    }
    

    See Also