From Clomosy Docs

No edit summary
No edit summary
 
(6 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>


<blockquote style="background-color:#F7F5EB">
<span style="color:blue"><b>xName</b></span> : The name of the defined search edit should be written.<br>
searchEdt : TClProSearchEdit;
</blockquote>
Let's add ProSearchEdit in MyForm.
<blockquote style="background-color:#F7F5EB">
    searchEdt := MyForm.AddNewProSearchEdit(MyForm,'searchEdt','Search Something ...');<br>
    searchEdt.Align := alTop;<br>
    searchEdt.Margins.Top := 15;<br>
    searchEdt.Margins.Left := 15;<br>
    searchEdt.Margins.Right := 15;<br>
    searchEdt.Margins.Bottom := 10;<br>
    searchEdt.Height := 40;
</blockquote>


The following screenshot is displayed with the above code.<br>
<span style="color:blue"><b>xCaption</b></span> : You can enter the search edit title here.<br>
'''Output:'''<br>
[[File:ProSearchEdit.png|frameless|450px]]<br>
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>
<blockquote style="background-color:#F7F5EB">
searchEdt.'''clBarcodeReader''' := True;
</blockquote>
'''Output:'''<br>
[[File:ProSearchEditBarcode.png|frameless|450px]]<br>
'''Code:'''<br>
:'''Base Syntax'''
  Var 
    MyForm:TclForm;
    testListview : 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
    testListview := MyForm.AddNewProListView(MyForm,'testListview');
    clComponent.SetupComponent(testListview,'{"Height" : 150,"Align":"Client","MarginBottom":20,"MarginTop":20,"MarginRight":20,"MarginLeft":20, "ListType":"Cart","ItemColumnCount" : 2,"ItemHeight" : 150,"ItemWidth":150,
    "BorderColor":"#098614", "BorderWidth":2,"RoundWidth":5, "RoundHeight":5}');
    testListview.ListType := 'horizontal';
    searchEdt.TargetListView := testListview;
  end;
 
  begin
    MyForm := TclForm.Create(Self);
    SetSearchEdit;
    CreateListView;
    MyForm.Run;
  end;


:'''TRObject Syntax'''
<div class="alert alert-danger" role="alert" data-bs-theme="light">
Used only on the TclProListView object.
</div>


  Var   
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>
    MyForm:TclForm;
 
    testListview : TClProListView;
<div class="table-responsive">
    searchEdt : TClProSearchEdit;
{| class="wikitable" style="border: 2px solid #c3d7e0"
 
! style="background-color: #c3d7e0"| Feature  !!style="background-color: #c3d7e0"| Use of !!style="background-color: #c3d7e0"| Definition
  void SetSearchEdit;
|-
  {
|TClProSearchEdit || ProSearchEdit1 : TClProSearchEdit; || A variable belonging to the TClProSearchEdit class is created.
    searchEdt = MyForm.AddNewProSearchEdit(MyForm,'searchEdt','Search Something ...');
|-
    searchEdt.Align = alTop;
|AddNewProSearchEdit ||ProSearchEdit1 = Form1.AddNewProSearchEdit(Form1,'ProSearchEdit1','Search Something ...');|| A new TClProSearchEdit is added to the form. <b> [[File:ProSearchEdit.png|frameless|250px]]
    searchEdt.Margins.Top = 15;
|-
    searchEdt.Margins.Left = 15;
|clBarcodeReader  ||ProSearchEdit1.clBarcodeReader = True; || Used to enable the barcode scanning feature on the button in the search bar. The default value is False.<br>
    searchEdt.Margins.Right = 15;
[[File:ProSearchEditBarcode.png|frameless|250px]]
    searchEdt.Margins.Bottom = 10;
|-
    searchEdt.Height = 40;
|TargetListView  ||ProSearchEdit1.TargetListView = ProListView1; || The TargetListView property determines which TclProListView component the search component will operate on.
    searchEdt.clBarcodeReader = True;
|}
  }
</div>
 
 
  void CreateListView;
In addition to the features of a standard search edit, TClProSearchEdit offers new and advanced features, which we will explain in detail below.<br>
  {
 
    testListview = MyForm.AddNewProListView(MyForm,'testListview');
<div class="row">
    clComponent.SetupComponent(testListview,'{"Height" : 150,"Align":"Client","MarginBottom":20,"MarginTop":20,"MarginRight":20,"MarginLeft":20, "ListType":"Cart","ItemColumnCount" : 2,"ItemHeight" : 150,"ItemWidth":150,
<div class="col-lg-6">
    "BorderColor":"#098614", "BorderWidth":2,"RoundWidth":5, "RoundHeight":5}');
<div  class="card d-flex flex-column justify-content-start gap-1 mb-3 h-100" style="padding: 3;">
    testListview.ListType = 'horizontal';
<div style="font-size: 16px;font-weight: bold;text-align:left;">
    searchEdt.TargetListView = testListview;
  clProSettings Properties
  }
</div>
 
<div style="font-size: 14px;font-weight: normal;text-align:justify; max-width: 350px;">
  {
<li>FontColor</li>
    MyForm = TclForm.Create(Self);
<li>FontSize</li>
    SetSearchEdit;
<li>FontVertAlign</li>
    CreateListView;
<li>FontHorzAlign</li>
    MyForm.Run;
<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>
 
<div class="alert alert-warning" role="alert" data-bs-theme="light">
To learn the purpose and usage of the <b>clProSettings</b> properties, please refer to [[Pro Object Properties| the page]].
</div>
 
<b>Example</b><br>
 
For clProSettings:<br>
<pre>
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;
}
</pre>
 
<h2> See Also </h2>
* [[Components]]
* [[Pro Object Properties]]
* [[Object Properties]]
{{#seo:|description=Learn how to use the TClProSearchEdit component in Clomosy to add advanced search functionality, including barcode scanning, to TclProListView objects.}}

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"