TclListView

function AddNewListView(AComponent: TCLComponent; xName: string): TclListView;

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

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

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. Besides, you use this component when you want to pull data from the database.

When an object of the TclListView class is created, fields are generated within this object. Assignments are made according to these field names. The following fields are included.

Listview Fields	Explanation
MAIN_TEXT	It is the main area. This place is in bold and is in the middle left.
SUB_TEXT	It is located just below "MAIN_TEXT".
SIDE_TEXT_TOP	It is located in the upper right corner.
SIDE_TEXT_CENTER	It is located in the middle right corner.
SIDE_TEXT_BOTTOM	It is located in the lower right corner.
FOOTER_TEXT	It is located in the lower left corner.
RECORD_GUID	(Unique field) product ids are written here.

Feature	Use of	Definition
TClListView	Listview1 : TClListView;	A variable belonging to the TClListView class is created.
AddNewListView	Listview1 = Form1.AddNewListView(Form1,'Listview1');	A new TClListView component is added to the form.
Width	Listview1.Width = 150;	Allows adjusting the width of the image.
Height	Listview1.Height = 50;	Allows adjusting the height of the image.
Align	Listview1.Align = alTop;	With the Align parameter, you can specify where you want our component to be aligned in the form. This parameter has multiple positioning properties. See the page to learn about these features.
Margins	Listview1.Margins.Left = 50; // Right, Top, Bottom	With the Margins parameter, you can give margins at any scale from the right, left, bottom, top.
clSelectedItemData	Listview1.clSelectedItemData('MAIN_TEXT');	It is used to get information about the data clicked when the ListView is clicked. (You can call it with a procedure and use it in the desired field.) Instead of "MAIN_TEXT", you can call whatever location you have added data to in the ListView. Other parameters you can call below; SUB_TEXT SIDE_TEXT_TOP SIDE_TEXT_CENTER SIDE_TEXT_BOTTOM FOOTER_TEXT RECORD_GUID
CheckedProperty	Listview1.CheckedProperty = True;	It is an expression used to determine or set whether the items in the TclListView component are checked.
GetValueCheckBoxList	stringValue = Listview1.GetValueCheckBoxList('MAIN_TEXT');	It retrieves the value of the specified field for the selected items in ListView1. In the example, it will retrieve the data in the MAIN_TEXT field of the selected item.
CheckedCount	Listview1.Items.CheckedCount(true)	Returns the number of items selected in the ListView.

Example 1: Selecting, Processing, and Displaying Items in a ListView

It creates a TClListView and a TClButton component on a form. The TClListView contains items loaded from JSON data and is made selectable with CheckBoxes. When the Button is clicked, the MAIN_TEXT values of the selected (Checked) items are retrieved and displayed both as plain text and separated by a ; character. Additionally, the number of selected items in the ListView is shown on the screen. This operation aims to provide the user with information about the selected items.

Var   
  MyForm:TclForm;
  ListView1 : TClListView;
  Button1 : TclButton;
  stringList : TclStringList;
void onItemClicked;
{
  stringList = ListView1.GetValueCheckBoxList('MAIN_TEXT'); // It retrieves the MAIN_TEXT of items with Checked set to True in ListView1.
  ShowMessage(stringList.text);
  ShowMessage(stringList.DelimitedText); // It separates the selected data with a ';' character.
  ShowMessage(IntToStr(ListView1.Items.CheckedCount(true)));  // It returns the CheckedCount within the ListView.
}
void CreateListView;
{
  ListView1 = MyForm.AddNewListView(MyForm,'ListView1');
  ListView1.Align = alClient;
  ListView1.clLoadListViewDataFromDataset(Clomosy.ClDataSetFromJSON('[
  {"RECORD_GUID":"AAAAAA","MAIN_TEXT":"Hello World","SUB_TEXT":5,"SIDE_TEXT_TOP":1,"SIDE_TEXT_CENTER":1,"SIDE_TEXT_BOTTOM":1,"FOOTER_TEXT":1},
  {"RECORD_GUID":"BBBBBB","MAIN_TEXT":"Hi World","SUB_TEXT":1,"SIDE_TEXT_TOP":1,"SIDE_TEXT_CENTER":1,"SIDE_TEXT_BOTTOM":1,"FOOTER_TEXT":1}]'));
  ListView1.CheckedProperty = True; //It must be enabled if a CheckBox is to be used within the ListView.
}

{
  MyForm = TclForm.Create(Self);
  Button1 = MyForm.AddNewButton(MyForm,'Button1','Click');
  Button1.StyledSettings = ssFamily;
  Button1.TextSettings.Font.Size = 20;
  Button1.TextSettings.FontColor = clAlphaColor.clHexToColor('#8a067c');
  MyForm.AddNewEvent(Button1,tbeOnClick,'onItemClicked');
  CreateListView;
  
  MyForm.Run;
}

Example 2: Usage of Sql Server

After defining objects for the TclListView class, a database connection will be established. Here, an MSSQL database is used.

void SetupSqlConnection;
{
Clomosy.DBSQLServerConnect('SQL Server','server_name','user_name','user_password','database_name',port);
}

So let's take a look at where they got this database information from.

You have learned your server name. You will have created your username and password while downloading sql. You make a connection entry with the information you created in the institution and write them in the code.
Now the last thing to do is to write your database name. For this, we create a database. Follow the steps below for creation.

Now that we have completed the database operations, we will add the data to the ListView.
For this, a new query is created and the "Clomosy.DBSQLServerConnection" connection is cloned.

Var
  foodListQuery : TClSqlQuery;
{
  foodListQuery = TClSqlQuery.Create(nil);
  foodListQuery.Connection = Clomosy.DBSQLServerConnection;
}

The sql query sentence to be executed in the query is defined.

foodListQuery.SQL.Text = 'SELECT productId as RECORD_GUID, productName as MAIN_TEXT,productPrice as SIDE_TEXT_BOTTOM from Products';

In order to define the above code, you must create a table in your database and add data to it. In this example we have added products. The product has a name and price.

To display the database field names in the TclListView object, the field names must be modified according to the list name.

Appearance:

The query is run.

foodListQuery.Open;

If there is a record after the query is run, the relevant record is added to the list.

if (foodListQuery.Found)
{
testListview.clLoadListViewDataFromDataset(foodListQuery);
}

Query is closed and freed.

foodListQuery.Close;
foodListQuery.Free;

Now the application is complete. As soon as the ListView component was defined, the search box could come up automatically. Now we will add a button to search by scanning the barcode on this search bar. For this, we will initially define the variable "TclSearchBox" to access the search bar inside the ListView and then write the required code to access it.

Var
SearchBox1 : TclSearchBox;

SearchBox1 = testListview.GetSearchBox;

We now have access to the searchBox. You can add a button to it and read the barcode with "CallBarcodeReader" and add it to the search bar.
Let's look at the SQLite Database - Searching via Barcode Scanning from the List page for an example application.

To tell you the truth, you have created a simple application that does nothing yet. Let's save and start using our project. You can save in one of two ways:
Click the save icon (the button in the upper right corner) or press Ctrl + S to save the project and see what you've done on the platforms now.

Example Code:

 Var   
   MyForm:TclForm;
   testListview : TClListView;
 
 void onItemClicked;
 {
   ShowMessage(testListview.clSelectedItemData('MAIN_TEXT'));
 }
 void SetupSqlConnection;
 {
   Clomosy.DBSQLServerConnect('SQL Server','server_name','user_name','user_password','database_name',1433);
 }
 
 void CreateListView;
 {
   testListview = MyForm.AddNewListView(MyForm,'testListview');
   testListview.Align = alClient;
   MyForm.AddNewEvent(testListview,tbeOnItemClick,'onItemClicked');
 }
 
 void AddDataToListview;
 Var
   foodListQuery : TClSqlQuery;
 {
   foodListQuery = TClSqlQuery.Create(nil);
   try
     foodListQuery.Connection = Clomosy.DBSQLServerConnection;
     foodListQuery.SQL.Text = 'SELECT productId as RECORD_GUID, productName as MAIN_TEXT,productPrice as SIDE_TEXT_BOTTOM from Products';
     foodListQuery.Open;
     if (foodListQuery.Found)
     {
       testListview.clLoadListViewDataFromDataset(foodListQuery);
     }
   finally
     foodListQuery.Close;
     foodListQuery.Free;
   }
 }
 
 {
   MyForm = TclForm.Create(Self);
   
   CreateListView;
   SetupSqlConnection;
   AddDataToListview;
   MyForm.Run;
 }

Below is the same example implemented on an SQLite database.

Example 3: Usage of SQLite

First, establish the database connection. To connect to the SQLite database, the DBSQLiteConnect function is used. If this function exists, it operates on it; otherwise, it adds a new database.

  void SqLiteConnection;
  {
    try
      Clomosy.DBSQLiteConnect(Clomosy.AppFilesPath + 'DBProduct.db3', ''); 
    except
     ShowMessage('Exception Class: '+LastExceptionClassName+' Exception Message: '+LastExceptionMessage);
    }
  }

After the database connection is established, if the desired table exists in the database, it will be listed. If it does not exist, the table will be created and data will be inserted.

  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 DECIMAL(18, 0) 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);
    }
  }

Example Code:

  var
    MyForm : TclForm;
    ListView1 : TClListView;
    Qry : TClSQLiteQuery;
  
  void onItemClicked;
  {
   ShowMessage(ListView1.clSelectedItemData('MAIN_TEXT'));
  }
  
  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 DECIMAL(18, 0) 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;
  {
    try
      Qry = Clomosy.DBSQLiteQueryWith('SELECT productId as RECORD_GUID, productName as MAIN_TEXT, productPrice as SIDE_TEXT_BOTTOM FROM Products');
      Qry.OpenOrExecute;
      ListView1.clLoadListViewDataFromDataset(Qry);
    
    except
      ShowMessage('Exception class: '+LastExceptionClassName+' Exception Message: ' +LastExceptionMessage);
    } 
  }
  void CreateListView;
  {
     ListView1 = MyForm.AddNewListView(MyForm,'ListView1');
     ListView1.Align = alClient;
     MyForm.AddNewEvent(ListView1,tbeOnItemClick,'onItemClicked');
     
  } 
  
  {
    
    MyForm = TclForm.Create(Self);
    CreateListView;
    SqLiteConnectionCreateTable;
    GetData;
    
    MyForm.Run;
  }

Output:

See Also

• Components
• Object Properties
• AddNewEvent