From Clomosy Docs

No edit summary
No edit summary
 
(5 intermediate revisions by one other user not shown)
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> : Specifies the parent of the object to be defined.<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 search edit 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>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 
* [[Pro Object Properties]]
  MyForm:TclForm;
* [[Object Properties]]
  ListView1 : TClProListView;
{{#seo:|description=Learn how to use the TClProSearchEdit component in Clomosy to add advanced search functionality, including barcode scanning, to TclProListView objects.}}
  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]]
* [[JSON_Design]]

Latest revision as of 10:58, 24 December 2024

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

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

xCaption : You can enter the search edit 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

    Retrieved from "http:///index.php?title=TClProSearchEdit&oldid=3644"