ListItemComponent Types When Using GroupDataModel

by BlackBerry Development Advisor on ‎06-20-2012 05:47 PM (4,344 Views)

Summary

 

This article applies to the following:

  • Cascades™

Description

 

 

When using a ListView you can specify different row types for the data within the ListView.  This is done by specifying a ListItemComponent for the various row types you wish to use.

 

When defining your ListItemComponents, the styles are applied based on each type. Consider the following data used to populate a GroupDataModel with the following data.

 

GroupDataModel *model = new GroupDataModel(QStringList() << "DisplayName" << "Message" << "Status");
model->setGrouping(ItemGrouping::ByFirstChar);

QVariantMap map;
map["DisplayName"] = "Daphne"; 
map["Message"] = "I'm over here Fred."; 
map["Status"] = "Available"; 
model->insert(map);

map["DisplayName"] = "Velma"; 
map["Message"] = "Where are my glasses?"; 
map["Status"] = "Busy"; 
model->insert(map);

map["DisplayName"] = "Fred"; 
map["Message"] = "I love mysteries.";
map["Status"] = "Available"; 
model->insert(map);
 
map["DisplayName"] = "Shaggy"; 
map["Message"] = "Nom nom nom..."; 
map["Status"] = "Busy"; 
model->insert(map);

map["DisplayName"] = "Scooby"; 
map["Message"] = "Got any scooby snacks?"; 
map["Status"] = "Available"; 
model->insert(map);

 

 

GroupDataModel has two default types: GroupDataModel::Header for headers, and GroupDataModel::Item for non-headers. In QML you can use the strings "header" and "item" as shown in the QML below.

 

ListView {
	id: contactList
	objectName: "contactList"
	listItemComponents: [
		ListItemComponent {
			type: "header"
			HeaderListItem {
				titleText: ListItemData
			}
			
		},
		
		ListItemComponent {
			type: "item"
			StandardListItem {
				titleText: ListItemData.DisplayName
				descriptionText: ListItemData.Message
				statusText: ListItemData.Status

			}
		}
	] // end of listItemComponents list	    
}

 

 

 Here's a screenshot of what is shown on the device.

 

list1.png