From Clomosy Docs

No edit summary
No edit summary
Line 1: Line 1:
AddNewProSearchEdit(TComponent, xName, xCaption):TClProSearchEdit;
<div class="alert alert-ligth border border-3 border-primary-subtle rounded-5 p-4 shadow-sm" role="alert">
function AddNewProSearchEdit(AComponent: TCLComponent; xName, xCaption: string): TClProSearchEdit;
</div>


Search bar does not appear automatically in ProListView. It is a component created for this. This component also has the ability to search by scanning the barcode. Now let's see how it goes either way. Let's start with the definition.<br>
<span style="color:blue"><b>AComponent</b></span> : The variable name of the defined component is written. Here you should write the component variable name of whatever your component will be in.<br>


searchEdt1 : TClProSearchEdit;
<span style="color:blue"><b>xName</b></span> : The name of the defined search edit should be written.<br>


Let's add ProSearchEdit in form.
<span style="color:blue"><b>xCaption</b></span> : You can enter the chart title here.<br>
<pre>
searchEdt1 = Form1.AddNewProSearchEdit(Form1,'searchEdt1','Search Something ...');
searchEdt1.Align = alTop;
searchEdt1.Margins.Top = 15;
searchEdt1.Margins.Left = 15;
searchEdt1.Margins.Right = 15;
searchEdt1.Margins.Bottom = 10;
searchEdt1.Height = 40;
</pre>


The following screenshot is displayed with the above code.<br>
<div class="alert alert-danger" role="alert" data-bs-theme="light">
'''Output:'''<br>
Used only on the TclProListView object.
[[File:ProSearchEdit.png|frameless|450px]]<br>
</div>
Now, if we want to search by scanning the barcode in the search bar, we must write the following code in our searchEdt variable, then the barcode scanning button will appear on the screen.<br>


searchEdt1.'''clBarcodeReader''' = True;
Search bar does not appear automatically in ProListView. It is a component created for this. This component also has the ability to search by scanning the barcode.<br>


The TargetListView property determines which TclProListView component the search component will operate on.
<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
|-
|TClProSearchEdit || ProSearchEdit1 : TClProSearchEdit; || A variable belonging to the TClProSearchEdit class is created.
|-
|AddNewProSearchEdit ||ProSearchEdit1 = Form1.AddNewProSearchEdit(Form1,'ProSearchEdit1','Search Something ...');|| A new TClProSearchEdit is added to the form. <b> [[File:ProSearchEdit.png|frameless|250px]]
|-
|clBarcodeReader  ||ProSearchEdit1.clBarcodeReader = True; || Used to enable the barcode scanning feature on the button in the search bar. The default value is False.<br>
[[File:ProSearchEditBarcode.png|frameless|250px]]
|-
|TargetListView  ||ProSearchEdit1.TargetListView = ProListView1; || The TargetListView property determines which TclProListView component the search component will operate on.
|}
</div>


searchEdt.'''TargetListView''' = ListView1;
In addition to the features of a standard search edit, TClProSearchEdit offers new and advanced features, which we will explain in detail below.<br>


<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>FontColor</li>
<li>FontSize</li>
<li>FontVertAlign</li>
<li>FontHorzAlign</li>
<li>Font.Style</li>
<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>
<br>


'''Output:'''<br>
<div class="alert alert-warning" role="alert" data-bs-theme="light">
[[File:ProSearchEditBarcode.png|frameless|450px]]<br>
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>


'''Example:'''<br>
<b>Example</b><br>


:'''TRObject Syntax'''
For clProSettings:<br>
<pre>
<pre>
Var   
Var   
   MyForm:TclForm;
   MyForm:TclForm;
   ListView1 : TClProListView;
   ListView1 : TClProListView;
Line 43: Line 74:
  {
  {
   searchEdt = MyForm.AddNewProSearchEdit(MyForm,'searchEdt','Search Something ...');
   searchEdt = MyForm.AddNewProSearchEdit(MyForm,'searchEdt','Search Something ...');
 
   searchEdt.Align = alTop;
   searchEdt.Align = alTop;
  searchEdt.Height = 40;
   searchEdt.Margins.Top = 15;
   searchEdt.Margins.Top = 15;
   searchEdt.Margins.Left = 15;
   searchEdt.Margins.Left = 15;
   searchEdt.Margins.Right = 15;
   searchEdt.Margins.Right = 15;
   searchEdt.Margins.Bottom = 10;
   searchEdt.Margins.Bottom = 10;
  searchEdt.Height = 40;
   searchEdt.clBarcodeReader = True;
   searchEdt.clBarcodeReader = True;
  searchEdt.clProSettings.BorderColor = clAlphaColor.clHexToColor('#d6cdcd');
  searchEdt.clProSettings.FontColor = clAlphaColor.clDarkorchid;
  searchEdt.clProSettings.FontSize = 12;
  searchEdt.clProSettings.FontVertAlign = palcenter;//palLeading , palCenter , palTrailing
  searchEdt.clProSettings.FontHorzAlign = palLeading;
  searchEdt.clProSettings.TextSettings.Font.Style = [fsBold,fsItalic];
  searchEdt.clProSettings.IsTransparent = False;
  searchEdt.clProSettings.IsFill = True;
  searchEdt.clProSettings.IsRound = True;
  searchEdt.clProSettings.RoundHeight = 15;
  searchEdt.clProSettings.RoundWidth = 15;
  searchEdt.clProSettings.BorderWidth = 3;
  searchEdt.SetclProSettings(searchEdt.clProSettings);
  }
  }
   
   
Line 82: Line 127:
</pre>
</pre>


:'''Base Syntax'''
<h2> See Also </h2>
<pre>
* [[Components]]
Var 
  MyForm:TclForm;
  ListView1 : TClProListView;
  searchEdt : TClProSearchEdit;
procedure SetSearchEdit;
begin
  searchEdt := MyForm.AddNewProSearchEdit(MyForm,'searchEdt','Search Something ...');
  searchEdt.Align := alTop;
  searchEdt.Margins.Top := 15;
  searchEdt.Margins.Left := 15;
  searchEdt.Margins.Right := 15;
  searchEdt.Margins.Bottom := 10;
  searchEdt.Height := 40;
  searchEdt.clBarcodeReader := True;
end;
procedure CreateListView;
begin
  ListView1 := MyForm.AddNewProListView(MyForm,'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 := 2;
  ListView1.clProSettings.ItemHeight := 150;
  ListView1.clProSettings.ItemWidth := 150;
  ListView1.clProSettings.ItemSpace := 10;
  ListView1.clProSettings.BorderColor := clAlphaColor.clHexToColor('#098614');
  ListView1.clProSettings.BorderWidth := 2;
  ListView1.clProSettings.RoundHeight := 5;
  ListView1.clProSettings.RoundWidth := 5;
  ListView1.SetclProSettings(ListView1.clProSettings);
  ListView1.ListType := 'horizontal';
  searchEdt.TargetListView := ListView1;
end;
begin
  MyForm := TclForm.Create(Self);
  SetSearchEdit;
  CreateListView;
  MyForm.Run;
end;
</pre>
 
 
= See Also =
* [[TClProListView]]
* [[Pro Object Properties]]
* [[Pro Object Properties]]
* [[Object Properties]]

Revision as of 13:58, 12 November 2024

AComponent : The variable name of the defined component is written. Here you should write the component variable name of whatever your component will be in.

xName : The name of the defined search edit should be written.

xCaption : You can enter the chart title here.

Search bar does not appear automatically in ProListView. It is a component created for this. This component also has the ability to search by scanning the barcode.

Feature Use of Definition
TClProSearchEdit ProSearchEdit1 : TClProSearchEdit; A variable belonging to the TClProSearchEdit class is created.
AddNewProSearchEdit ProSearchEdit1 = Form1.AddNewProSearchEdit(Form1,'ProSearchEdit1','Search Something ...'); A new TClProSearchEdit is added to the form. ProSearchEdit.png
clBarcodeReader ProSearchEdit1.clBarcodeReader = True; Used to enable the barcode scanning feature on the button in the search bar. The default value is False.

ProSearchEditBarcode.png

TargetListView ProSearchEdit1.TargetListView = ProListView1; The TargetListView property determines which TclProListView component the search component will operate on.

In addition to the features of a standard search edit, TClProSearchEdit offers new and advanced features, which we will explain in detail below.

clProSettings Properties

  • FontColor
  • FontSize
  • FontVertAlign
  • FontHorzAlign
  • Font.Style
  • BorderColor
  • BorderWidth
  • BackgroundColor
  • IsTransparent
  • IsFill
  • IsRound
  • RoundHeight
  • RoundWidth

  • Example

    For clProSettings:

     Var   
       MyForm:TclForm;
       ListView1 : TClProListView;
       searchEdt : TClProSearchEdit;
     
     void SetSearchEdit;
     {
       searchEdt = MyForm.AddNewProSearchEdit(MyForm,'searchEdt','Search Something ...');
       
       searchEdt.Align = alTop;
       searchEdt.Height = 40;
       searchEdt.Margins.Top = 15;
       searchEdt.Margins.Left = 15;
       searchEdt.Margins.Right = 15;
       searchEdt.Margins.Bottom = 10;
       searchEdt.clBarcodeReader = True;
       searchEdt.clProSettings.BorderColor = clAlphaColor.clHexToColor('#d6cdcd');
       searchEdt.clProSettings.FontColor = clAlphaColor.clDarkorchid;
       searchEdt.clProSettings.FontSize = 12;
       searchEdt.clProSettings.FontVertAlign = palcenter;//palLeading , palCenter , palTrailing
       searchEdt.clProSettings.FontHorzAlign = palLeading;
       searchEdt.clProSettings.TextSettings.Font.Style = [fsBold,fsItalic];
       searchEdt.clProSettings.IsTransparent = False;
       searchEdt.clProSettings.IsFill = True; 
       searchEdt.clProSettings.IsRound = True;
       searchEdt.clProSettings.RoundHeight = 15;
       searchEdt.clProSettings.RoundWidth = 15;
       searchEdt.clProSettings.BorderWidth = 3;
       searchEdt.SetclProSettings(searchEdt.clProSettings);
     }
     
     void CreateListView;
     {
      ListView1 = MyForm.AddNewProListView(MyForm,'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 = 2;
      ListView1.clProSettings.ItemHeight = 150;
      ListView1.clProSettings.ItemWidth = 150;
      ListView1.clProSettings.ItemSpace = 10;
      ListView1.clProSettings.BorderColor = clAlphaColor.clHexToColor('#098614');
      ListView1.clProSettings.BorderWidth = 2;
      ListView1.clProSettings.RoundHeight = 5;
      ListView1.clProSettings.RoundWidth = 5;
      ListView1.SetclProSettings(ListView1.clProSettings);
      ListView1.ListType = 'horizontal';
      searchEdt.TargetListView = ListView1;
     }
     
     {
       MyForm = TclForm.Create(Self);
       SetSearchEdit;
       CreateListView;
       MyForm.Run;
     }
    

    See Also