TclListView

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.

AddNewListView (TComponent, xName): TclListView

TComponent : 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 listview should be written.

Let's create a listview.

1. Create a new project.

2. You need to define TclListView on the form. To do this, you should add under the var parameter on the ide as follows. It is the name of your variable you typed at the beginning. You should define this as you want and add it as TclListView.

var
testListview : TClListView; 

3. Add the TClListView to the form. For this, you must add the begin end block and add it inside the form after the form is defined. By saying MyForm.AddNewListView, we actually add to the form we have defined. Here, you need to add your form definition as whatever you wrote it.

testListview := MyForm.AddNewListView(MyForm,'testListview');

4. If you do not want to define it in the form, you can add it in another component (such as Layout, Panel). Of course, before that, that component must be defined.

testLayout := MyForm.AddNewLayout(MyForm,'testLayout');
testListview := MyForm.AddNewListView(testLayout,'testListview ');

5. While defining the component, you can define it manually by typing. Another method is to write its shortcut. If you type "AddNewListView" while the shortcut is in the code block, a pop-up menu will appear.

As soon as you click, the following block will come automatically.

AddNewListView(xOwner:TComponent; xName:String);

6. We gave the variable name while defining the TclListView in var. Now when you add this in begin end you should use this variable name in all definitions. Your code will throw an error when you write these variable names incorrectly.

7. Now let's design our TclListView component. Let's set the width and height first. For this, you must make the following definitions.

testListview.Height := 50;
testListview.Width := 150;

8. 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. We're going to call it the top part here. So we have to write "AlTop".

testListview.Align := alTop;

9. With the Margins parameter, you can give margins at any scale from the right, left, bottom, top.

testListview.Margins.Left:= 50;
testListview.Margins.Right:= 10; 
testListview.Margins.Top:= 50;
testListview.Margins.Bottom:= 10;

10. If you want to get the information of the clicked data when the ListView is clicked, you can write a code like this:
(You can call it with procedure and use it in the field you want.)

testListview.clSelectedItemData('MAIN_TEXT');

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

11. After making the definition, we will create the database connection. MSSQL database is used here.

procedure SetupSqlConnection;
begin
Clomosy.DBSQLServerConnect('SQL Server','server_name','user_name','user_password','database_name',port);
end;

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;
begin
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.



Then we write our code above to our database. As below, the names of the columns in the database have been changed. We didn't change the database columns here, we just did the cloning.



So why did we change the columns this way? Could we write something else instead?
The reason we change it this way is ListView fields. Even though they are not actually visible on the screen, we can add data to positions such as write the information we get from a database into the Listview to the right, write to the left. Where else can we write on this screen, their names are available in the table below. From here, you can position your data in the area you want.

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.

View:

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 then
begin
testListview.clLoadListViewDataFromDataset(foodListQuery);
end;

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 "TSearchBox" to access the search bar inside the ListView and then write the required code to access it.

Var
testSearchBox : TSearchBox;

testSearchBox := 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 Scanning Barcode with ListView SearchBox page for an example application.

14. 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:

Var   
MyForm:TclForm;
testListview : TClListView;

procedure onItemClicked;
 begin
 ShowMessage(testListview.clSelectedItemData('MAIN_TEXT'));
 end;
procedure SetupSqlConnection;
begin
  Clomosy.DBSQLServerConnect('SQL Server','server_name','user_name','user_password','database_name',port);
end;

procedure CreateListView;
begin
  testListview := MyForm.AddNewListView(MyForm,'testListview');
  testListview.Align := alClient;
  MyForm.AddNewEvent(testListview,tbeOnItemClick,'onItemClicked');
end;

procedure AddDataToListview;
Var
  foodListQuery : TClSqlQuery;
begin
  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 then
    begin
      testListview.clLoadListViewDataFromDataset(foodListQuery);
    end;
  finally
    foodListQuery.Close;
    foodListQuery.Free;
  end;
end;

begin
 MyForm := TclForm.Create(Self);

 CreateListView;
 SetupSqlConnection;
 AddDataToListview;
 MyForm.Run;
  
end;

Output:

See Also

• Object Properties
• AddNewEvent