TClProListView

AddNewProListView(TComponent, xName):TClProListView;

Represents the list view component that you can use to hold and present various types of items. TclListView displays a collection of items in a list optimized for fast and smooth scrolling. Apart from the standard ListView parameter properties, it has features such as background and border color rendering. We can also design the appearance of the components in the ProListView ourselves. It can be easily defined with the following json structure parameters.

• Width
• Height
• PositionX
• PositionY
• Align
• BackgroundColor
• MarginTop
• MarginBottom
• MarginRight
• MarginLeft
• RoundHeight
• RoundWidth
• BorderColor
• BorderWidth
• ItemSpace
• ItemHeight
• ItemWidth
• ItemColumnCount
• ListType ('List' - 'Cart' - 'Fluid')

When the standard Listview definition was made, the search bar was automatically defined at the top. It is not included in ProListView. For this we need to define the "AddNewProSearchEdit" component. We will define it in the next steps. Let's first define the ProListView object.

Var

testListview : TClProListView;

Let's define ProListView in MyForm and define json structure and parameters in it. Within the json structure, "List","Cart" and "Fluid" properties can be defined as ListType of our ProListView structure.
If List is selected in these properties, it displays data as List.
If we choose the Cart property, we need to specify how many data should be added to each column ("ItemColumnCount" : 2,).
If we choose the Fluid feature, it automatically adds as much as it can fit by looking at the size of the data added to the list according to the screen size. As soon as there is an overflow, it moves to a lower line and in this way the data is listed.

testListview := MyForm.AddNewProListView(MyForm,'testListview');
clComponent.SetupComponent(testListview,'{"Height" : 150,"Align":"Client","MarginBottom":20,"MarginTop":20,"MarginRight":20,"MarginLeft":20, "ListType":"Cart","ItemHeight" : 150,"ItemWidth":150,"BackgroundColor":"#CEF3FE", "BorderColor":"#26DE90","BorderWidth":2,"RoundWidth":5, "RoundHeight":5}');
MyForm.AddNewEvent(testListview,tbeOnItemClick,'onItemClicked');

The scrollable feature becomes active when data is added to the ProListView structure. If you do not specify the scrolling as described below, it defaults to "vertical". This means that the vertical scroll feature is turned on. If you want to make horizontal scrolling feature, you should make a definition (horizontal) as below.

testListview.ListType := 'horizontal';

Another feature of ProListView is that you can specify the spacing between listed variables. You can do this with the following piece of code.

testListview.Properties.ItemSpace := 10;

To access the data of the clicked item within a ListView, "clSelectedItemData" is used:

testListview.clSelectedItemData(clRecord_GUID)

If the entire content of the ListView object needs to be cleared, the ClearList property is used.

testListview.clearList;

If we want to add a search bar in ProListView, we must first define the "TClProSearchEdit" variable and create a Search Edit object. Browse to the AddNewProSearchEdit field to create this description.
Before starting to design into ProListView, DesignerPanel must be added to it. And the whole design can be done within this panel. Examine the AddNewProListViewDesignerPanel field for the DesignerPanel definition. Now let's look at a simple example of using ProListView. We will get the datas through sql database.

Example 1 :
In the example, a form is created and a TclProListView is added to it. The TclProListView is configured with specific properties, and a design panel (TclListViewDesignerPanel) is added. An image (TclProImage) and a label (TclProLabel) are added to the design panel. An item click event (tbeOnItemClick) is defined, which displays the selected item when triggered. Finally, JSON formatted data is loaded into the list, and the form is run.

TRObject Syntax

Var   
  Form1:TclForm;
  ListView1 : TClProListView;
  DesignerPanel1 : TClListViewDesignerPanel;
  taskName : TclProLabel;
  taskImg : TclProImage;
  
void TaskClick;
{
  ShowMessage(' Item: ' + ListView1.clSelectedItemData(clText));
}

void CreateListView
{
  ListView1 = Form1.AddNewProListView(Form1,'ListView1');
  ListView1.Align = AlClient;
  ListView1.Height = 150;
  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);
}

void CreateDesignerPanel
{
  DesignerPanel1 = Form1.AddNewProListViewDesignerPanel(ListView1, 'DesignerPanel1');
  DesignerPanel1.Height = 100;
  DesignerPanel1.Width = 150;
  DesignerPanel1.clProSettings.BackgroundColor = clAlphaColor.clHexToColor('#B3FCE5');
  DesignerPanel1.clProSettings.BorderColor = clAlphaColor.clHexToColor('#16FF8C');
  DesignerPanel1.clProSettings.BorderWidth = 2;
  DesignerPanel1.clProSettings.RoundHeight = 20;
  DesignerPanel1.clProSettings.RoundWidth = 20;
  DesignerPanel1.SetclProSettings(DesignerPanel1.clProSettings);
  
  ListView1.SetDesignerPanel(DesignerPanel1);
}

void CreateData;
{
  taskImg = Form1.AddNewProImage(DesignerPanel1, 'taskImg');
  taskImg.Align = AlLeft;
  taskImg.Margins.Top = 10;
  taskImg.Margins.Bottom = 10;
  DesignerPanel1.AddPanelObject(taskImg, clImage1);

  taskName = Form1.AddNewProLabel(DesignerPanel1, 'taskName', 'test');
  taskName.Align = AlVertCenter;
  taskName.Height =30;
  taskName.Margins.Bottom = 10;
  taskName.Margins.Top = 10;
  taskName.Margins.Right = 10;
  taskName.Margins.Left = 10;
  taskName.clProSettings.FontColor = clAlphaColor.clHexToColor('#000000');
  taskName.clProSettings.FontSize = 20;
  DesignerPanel1.AddPanelObject(taskName, clText);
    
  Form1.AddNewEvent(ListView1,tbeOnItemClick,'TaskClick');
}

void AddDataToListView;
{
  ListView1.clLoadProListViewDataFromDataset(Clomosy.ClDataSetFromJSON('[
  {"taskName" : "Task 1", "taskImg" : "https://clomosy.com/learn/1Top.png"},
  {"taskName" : "Task 2", "taskImg" : "https://clomosy.com/learn/2Top.png"},
  {"taskName" : "Task 3", "taskImg" : "https://clomosy.com/learn/3Top.png"},
  {"taskName" : "Task 4", "taskImg" : "https://clomosy.com/learn/4Top.png"}
  ]'));
}

{
  Form1 = TclForm.Create(Self);
  CreateListView;
  CreateDesignerPanel;
  CreateData;
  AddDataToListview;
  Form1.Run;
}

Base Syntax

Var   
  Form1:TclForm;
  ListView1 : TClProListView;
  DesignerPanel1 : TClListViewDesignerPanel;
  taskName : TclProLabel;
  taskImg : TclProImage;
  
procedure TaskClick;
begin
  ShowMessage(' Item: ' + ListView1.clSelectedItemData(clText));
end;

procedure CreateListView;
begin
  ListView1 := Form1.AddNewProListView(Form1,'ListView1');
  ListView1.Align := AlClient;
  ListView1.Height := 150;
  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);
end;

procedure CreateDesignerPanel
begin
  DesignerPanel1 := Form1.AddNewProListViewDesignerPanel(ListView1, 'DesignerPanel1');
  DesignerPanel1.Height := 100;
  DesignerPanel1.Width := 150;
  DesignerPanel1.clProSettings.BackgroundColor := clAlphaColor.clHexToColor('#B3FCE5');
  DesignerPanel1.clProSettings.BorderColor := clAlphaColor.clHexToColor('#16FF8C');
  DesignerPanel1.clProSettings.BorderWidth := 2;
  DesignerPanel1.clProSettings.RoundHeight := 20;
  DesignerPanel1.clProSettings.RoundWidth := 20;
  DesignerPanel1.SetclProSettings(DesignerPanel1.clProSettings);
  
  ListView1.SetDesignerPanel(DesignerPanel1);
end;

procedure CreateData;
begin
  taskImg := Form1.AddNewProImage(DesignerPanel1, 'taskImg');
  taskImg.Align := AlLeft;
  taskImg.Margins.Top := 10;
  taskImg.Margins.Bottom := 10;
  DesignerPanel1.AddPanelObject(taskImg, clImage1);

  taskName := Form1.AddNewProLabel(DesignerPanel1, 'taskName', 'test');
  taskName.Align := AlVertCenter;
  taskName.Height :=30;
  taskName.Margins.Bottom := 10;
  taskName.Margins.Top := 10;
  taskName.Margins.Right := 10;
  taskName.Margins.Left := 10;
  taskName.clProSettings.FontColor := clAlphaColor.clHexToColor('#000000');
  taskName.clProSettings.FontSize := 20;
  DesignerPanel1.AddPanelObject(taskName, clText);
    
  Form1.AddNewEvent(ListView1,tbeOnItemClick,'TaskClick');
end;

procedure AddDataToListView;
begin
  ListView1.clLoadProListViewDataFromDataset(Clomosy.ClDataSetFromJSON('[
  {"taskName" : "Task 1", "taskImg" : "https://clomosy.com/learn/1Top.png"},
  {"taskName" : "Task 2", "taskImg" : "https://clomosy.com/learn/2Top.png"},
  {"taskName" : "Task 3", "taskImg" : "https://clomosy.com/learn/3Top.png"},
  {"taskName" : "Task 4", "taskImg" : "https://clomosy.com/learn/4Top.png"}
  ]'));
end;

begin
  Form1 := TclForm.Create(Self);
  CreateListView;
  CreateDesignerPanel;
  CreateData;
  AddDataToListview;
  Form1.Run;
end;

Output:

Example 2 :

TRObject Syntax

 var
  MyForm : TclForm;
  PListView1 : TClProListView;
  DesignerPanel1 : TClProListViewDesignerPanel;
  productName,productPrice : TClProLabel;
  
  void SqLiteInsertData;
  {
    try
      Clomosy.DBSQLiteQuery.Sql.Text = '
    INSERT INTO Products (productId, productName, productPrice) VALUES (1, ''Iphone 11'', 18000.00);
    INSERT INTO Products (productId, productName, productPrice) VALUES (2, ''Xiaomi Redmi Note 11 Pro'', 15000.50);
    INSERT INTO Products (productId, productName, productPrice) VALUES (3, ''Omix X600'', 20000.75);
    INSERT INTO Products (productId, productName, productPrice) VALUES (4, ''Huawei Nova Y70'', 25000.00);
    INSERT INTO Products (productId, productName, productPrice) VALUES (5, ''Samsung Galaxy S20'', 30000.25);
    INSERT INTO Products (productId, productName, productPrice) VALUES (6, ''Iphone 14 Pro Max'', 50000.25);';
      Clomosy.DBSQLiteQuery.OpenOrExecute;
      
      ShowMessage('Adding data to the table was successful!');
    except
     ShowMessage('Exception Class: '+LastExceptionClassName+' Exception Message: '+LastExceptionMessage);
    }
  }
  
  void SqLiteConnectionCreateTable;
  var
    TableExists: Boolean;
  {
    try
      Clomosy.DBSQLiteConnect(Clomosy.AppFilesPath + 'DBProduct.db3', '');
 
      // Check if the table exists
      Clomosy.DBSQLiteQuery.Sql.Text = 'SELECT name FROM sqlite_master WHERE type="table" AND name="Products";';
      Clomosy.DBSQLiteQuery.OpenOrExecute;
      
      // Check the results
      TableExists = not Clomosy.DBSQLiteQuery.Eof;
      
      // Create the table if it does not exist
      if not (TableExists)
      {
        Clomosy.DBSQLiteQuery.Sql.Text = 'CREATE TABLE Products(productId INTEGER NOT NULL,
        productName TEXT NOT NULL,
        productPrice REAL NOT NULL,
        PRIMARY KEY (productId))';
        Clomosy.DBSQLiteQuery.OpenOrExecute;
        
        ShowMessage('Table successfully added to the database!');
        SqLiteInsertData;
      } else
      {
        ShowMessage('The Products table already exists.');
      }

    except
     ShowMessage('Exception Class: '+LastExceptionClassName+' Exception Message: '+LastExceptionMessage);
    }
  }
  
  void GetData;
  var
    Qry : TClSQLiteQuery;
  {
    try
      Qry = Clomosy.DBSQLiteQueryWith('SELECT productId as clRecord_GUID, productName, productPrice from Products');
      Qry.OpenOrExecute;
      if (Qry.Found)
      {
        PListView1.clLoadProListViewDataFromDataset(Qry);
      }
      
    except
      ShowMessage('Exception class: '+LastExceptionClassName+' Exception Message: ' +LastExceptionMessage);
    } 
  }

 void CreateListView;
 {
   PListView1 = MyForm.AddNewProListView(MyForm,'PListView1');
   PListView1.Properties.ItemSpace = 10;
   clComponent.SetupComponent(PListView1,'{"Height" : 150,"Align":"Client","MarginBottom":20,"MarginTop":20,"MarginRight":20,"MarginLeft":20, "ListType":"Cart","ItemColumnCount" : 2,"ItemHeight" : 150,"ItemWidth":150, 
   "BorderColor":"#F5BCC9", "BorderWidth":2,"RoundWidth":5, "RoundHeight":5}');
   PListView1.ListType = 'horizontal';
 }

  
    void CreateDesignerPanel;
 {
   DesignerPanel1 = MyForm.AddNewProListViewDesignerPanel(PListView1,'DesignerPanel1'); 
   clComponent.SetupComponent(DesignerPanel1,'{"Height":100,"Width" : 150,"BackgroundColor":"#F6EDDB","BorderColor":"#F5BCC9","BorderWidth":2,"RoundHeight":20,"RoundWidth":20}');
   PListView1.SetDesignerPanel(DesignerPanel1);
 }
 void CreateProductNameAndPrice;
 {
   productName = MyForm.AddNewProLabel(DesignerPanel1,'productName','test');
   clComponent.SetupComponent(productName,'{"MarginTop":10,"MarginLeft":10,"MarginRight":10,"MarginBottom":10 ,"Height":20,"Align" : "MostTop"}');
   DesignerPanel1.AddPanelObject(productName,clCaption);
   productName.Properties.AutoSize = True;
   
   productPrice = MyForm.AddNewProLabel(DesignerPanel1,'productPrice','test');
   clComponent.SetupComponent(productPrice,'{"MarginTop":10,"MarginLeft":10,"MarginRight":10,"MarginBottom":10 ,"Height":20,"Align" : "MostRight","Width":40}');
   DesignerPanel1.AddPanelObject(productPrice,clText);
   productPrice.Properties.AutoSize = True;
 }

  {
    MyForm = TclForm.Create(Self);
    CreateListView;
    CreateDesignerPanel;
    SqLiteConnectionCreateTable;
    CreateProductNameAndPrice;
    GetData;
    
    MyForm.Run;
  }

Base Syntax

 var
  MyForm : TclForm;
  PListView1 : TClProListView;
  DesignerPanel1 : TClProListViewDesignerPanel;
  productName,productPrice : TClProLabel;
  
  procedure SqLiteInsertData;
  begin
    try
      Clomosy.DBSQLiteQuery.Sql.Text := '
    INSERT INTO Products (productId, productName, productPrice) VALUES (1, ''Iphone 11'', 18000.00);
    INSERT INTO Products (productId, productName, productPrice) VALUES (2, ''Xiaomi Redmi Note 11 Pro'', 15000.50);
    INSERT INTO Products (productId, productName, productPrice) VALUES (3, ''Omix X600'', 20000.75);
    INSERT INTO Products (productId, productName, productPrice) VALUES (4, ''Huawei Nova Y70'', 25000.00);
    INSERT INTO Products (productId, productName, productPrice) VALUES (5, ''Samsung Galaxy S20'', 30000.25);
    INSERT INTO Products (productId, productName, productPrice) VALUES (6, ''Iphone 14 Pro Max'', 50000.25);';
      Clomosy.DBSQLiteQuery.OpenOrExecute;
      
      ShowMessage('Adding data to the table was successful!');
    except
     ShowMessage('Exception Class: '+LastExceptionClassName+' Exception Message: '+LastExceptionMessage);
    end;
  end;
  
  procedure SqLiteConnectionCreateTable;
  var
    TableExists: Boolean;
  begin
    try
      Clomosy.DBSQLiteConnect(Clomosy.AppFilesPath + 'DBProduct.db3', '');
 
      // Check if the table exists
      Clomosy.DBSQLiteQuery.Sql.Text := 'SELECT name FROM sqlite_master WHERE type="table" AND name="Products";';
      Clomosy.DBSQLiteQuery.OpenOrExecute;
      
      // Check the results
      TableExists := not Clomosy.DBSQLiteQuery.Eof;
      
      // Create the table if it does not exist
      if not TableExists then
      begin
        Clomosy.DBSQLiteQuery.Sql.Text := 'CREATE TABLE Products(productId INTEGER NOT NULL,
        productName TEXT NOT NULL,
        productPrice REAL NOT NULL,
        PRIMARY KEY (productId))';
        Clomosy.DBSQLiteQuery.OpenOrExecute;
        
        ShowMessage('Table successfully added to the database!');
        SqLiteInsertData;
      end else
      begin
        ShowMessage('The Products table already exists.');
      end;

    except
     ShowMessage('Exception Class: '+LastExceptionClassName+' Exception Message: '+LastExceptionMessage);
    end;
  end;
  
  procedure GetData;
  var
    Qry : TClSQLiteQuery;
  begin
    try
      Qry := Clomosy.DBSQLiteQueryWith('SELECT productId as clRecord_GUID, productName, productPrice from Products');
      Qry.OpenOrExecute;
      if Qry.Found then
      begin
        PListView1.clLoadProListViewDataFromDataset(Qry);
      end;
      
    except
      ShowMessage('Exception class: '+LastExceptionClassName+' Exception Message: ' +LastExceptionMessage);
    end; 
  end;

 procedure CreateListView;
 begin
   PListView1 := MyForm.AddNewProListView(MyForm,'PListView1');
   PListView1.Properties.ItemSpace := 10;
   clComponent.SetupComponent(PListView1,'{"Height" : 150,"Align":"Client","MarginBottom":20,"MarginTop":20,"MarginRight":20,"MarginLeft":20, "ListType":"Cart","ItemColumnCount" : 2,"ItemHeight" : 150,"ItemWidth":150, 
   "BorderColor":"#F5BCC9", "BorderWidth":2,"RoundWidth":5, "RoundHeight":5}');
   PListView1.ListType := 'horizontal';
 end;

  
    procedure CreateDesignerPanel;
 begin
   DesignerPanel1 := MyForm.AddNewProListViewDesignerPanel(PListView1,'DesignerPanel1'); 
   clComponent.SetupComponent(DesignerPanel1,'{"Height":100,"Width" : 150,"BackgroundColor":"#F6EDDB","BorderColor":"#F5BCC9","BorderWidth":2,"RoundHeight":20,"RoundWidth":20}');
   PListView1.SetDesignerPanel(DesignerPanel1);
 end;
 procedure CreateProductNameAndPrice;
 begin
   productName := MyForm.AddNewProLabel(DesignerPanel1,'productName','test');
   clComponent.SetupComponent(productName,'{"MarginTop":10,"MarginLeft":10,"MarginRight":10,"MarginBottom":10 ,"Height":20,"Align" : "MostTop"}');
   DesignerPanel1.AddPanelObject(productName,clCaption);
   productName.Properties.AutoSize := True;
   
   productPrice := MyForm.AddNewProLabel(DesignerPanel1,'productPrice','test');
   clComponent.SetupComponent(productPrice,'{"MarginTop":10,"MarginLeft":10,"MarginRight":10,"MarginBottom":10 ,"Height":20,"Align" : "MostRight","Width":40}');
   DesignerPanel1.AddPanelObject(productPrice,clText);
   productPrice.Properties.AutoSize := True;
 end;
  
  
  begin
    
    MyForm := TclForm.Create(Self);
    CreateListView;
   CreateDesignerPanel;
   SqLiteConnectionCreateTable;
   CreateProductNameAndPrice;
   GetData;
    
    MyForm.Run;
  end;

Output: