From Clomosy Docs
function AddNewProListView(AComponent: TCLComponent; xName: string): TClProListView;
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.
Refer to the TclListView page for standard listview usage.
| Feature | Use of | Definition |
|---|---|---|
| TClProListView | ProListview1 : TClProListView; | A variable belonging to the TClProListView class is created. |
| AddNewProListView | ProListview1 = Form1.AddNewProListView(Form1,'ProListview1'); | A new TClProListView component is added to the form. |
| ListType | ProListView1.ListType = 'horizontal'; //vertical | It is used to set the listing direction. The default value is vertical. |
| Properties.ItemSpace | ProListView1.Properties.ItemSpace = 10; | The spacing between listed items is defined. |
| clSelectedItemData | ProListView1.clSelectedItemData(clRecord_GUID) | To access the data of the clicked item within a ListView, "clSelectedItemData" is used. |
| clearList | ProListView1.clearList; | Clears all content of the ListView object. |
In TclListView usage, a search bar is included. However, when TclProListView is created, the search bar does not appear. For this, the TClProSearchEdit object should be used.
clProSettings Properties
SetupComponent Properties
To learn the purpose and usage of the SetupComponent and clProSettings properties, please refer to the page.
Example 1: Use of TclProListView
For clProSettings:
Var
Form1:TclForm;
ListView1 : TClProListView;
{
Form1 = TclForm.Create(Self);
ListView1 = Form1.AddNewProListView(Form1,'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 = 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);
Form1.Run;
}
For SetupComponent:
Var
Form1:TclForm;
ListView1 : TClProListView;
{
Form1 = TclForm.Create(Self);
ListView1 = Form1.AddNewProListView(Form1,'ListView1');
clComponent.SetupComponent(ListView1,'{
"Align" : "Client",
"MarginTop" : 20,
"MarginBottom":20,
"MarginRight":20,
"MarginLeft":20,
"ListType":"Cart",
"ItemColumnCount" : 1,
"ItemHeight" : 100,
"ItemSpace" : 10,
"BackgroundColor":"#FFFCFF",
"BorderColor":"#66FF7F",
"BorderWidth":2,
"RoundHeight":5,
"RoundWidth":5
}');
Form1.Run;
}
Example 2: Listing with JSON
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.
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.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;
}
Output:
Example 3: Listing with SQLite
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;
}
Output:
