Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development Knowledge Base

ListItemComponent Types When Using GroupDataModel

by Administrator on ‎06-20-2012 05:47 PM - edited on ‎06-20-2012 05:47 PM by BlackBerry Development Advisor (4,052 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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  

 

Contributors
Users Online
Currently online: 12 members 548 guests
Please welcome our newest community members: