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

Reply
Contributor
dhairyasarous
Posts: 19
Registered: ‎06-26-2013
My Device: BlackBerry Z10
Accepted Solution

Adjusting properties of a listview item

I am populating the listivew with an arraydatamodel and I would like to adjust the height and text size of each item in the listview. I essentially want to reduce the text size and the spacing around the text. Here's the code:

import bb.cascades 1.0
  
Page {
    content: Container {    
        // Create a ListView that uses an XML data model
        ListView {
            dataModel: ArrayDataModel {
                id: dataModel
            }
            onCreationCompleted: {
                for (var a = 0; a < 20; a ++) {
                    dataModel.append("Item" + a);
                }
            }           
        } // end of ListView
    } // end of Container
} // end of Page

 

 

Developer
DrShavargo
Posts: 133
Registered: ‎05-10-2013
My Device: Blackberry Z10

Re: Adjusting properties of a listview item

On the ListView API page, you'll find this bit of code, which shows how to customize your list view by using the properties of elements in the .xml file (I see your using an array data model, but it shouldn't be much different). The code you're looking for is in bold:

 

import bb.cascades 1.0
  
Page {
    content: Container {    
        // Create a ListView that uses an XML data model
        ListView {
            dataModel: XmlDataModel {
                source: "models/items.xml"
            }
          
            // Add appearance definitions for the list items using the listItemComponents list
            listItemComponents: [
          
                // The first ListItemComponent defines how "header" items
                // should appear. These items use a Label.
                ListItemComponent {
                    type: "header"
                    Label {
                        text: ListItemData.title
                      
                        // Apply a text style to create a large, bold font with
                        // a specific color
                        textStyle {
                            base: SystemDefaults.TextStyles.BigText
                            fontWeight: FontWeight.Bold
                            color: Color.create ("#7a184a")
                        }
                    }
                },
              
                // The second ListItemComponent defines how "listItem" items
                // should appear. These items use a Container that includes a
                // CheckBox and a Label.
                ListItemComponent {
                    type: "listItem"
                    Container {
                        layout: StackLayout {
                            orientation: LayoutOrientation.LeftToRight
                        }
                        CheckBox {
                            // Determine whether the CheckBox should be checked
                            // according to a value in the data model
                            checked: ListItemData.checked
                        }
                        Label {
                            text: ListItemData.title
                          
                            // Apply a text style to create a title-sized font
                            // with normal weight
                            textStyle {
                                base: SystemDefaults.TextStyles.TitleText
                                fontWeight: FontWeight.Normal
                            }
                        }
                    } // end of Container
                } // end of second ListItemComponent
            ] // end of listItemComponents list
        } // end of ListView
    } // end of Container
} // end of Page

 

----------------------------------------
Remember to mark the thread as solved at the post that solved your problem, and if you like a post, like it!
Contributor
dhairyasarous
Posts: 19
Registered: ‎06-26-2013
My Device: BlackBerry Z10

Re: Adjusting properties of a listview item

[ Edited ]

Right, I looked at this before and this is where I was stuck. I can't figure out how to get the text from the ArrayDataModel like they do in the xml data model (text: ListItemData.title).

New Member
SharkValleyFL
Posts: 1
Registered: ‎07-08-2013
My Device: Z10

Re: Adjusting properties of a listview item

Use ListItemData.value

 

 

Contributor
dhairyasarous
Posts: 19
Registered: ‎06-26-2013
My Device: BlackBerry Z10

Re: Adjusting properties of a listview item

I have modified this post by peter9477 a bit to come up with a solution:

import bb.cascades 1.0

Page {
    Container {
        ListView {
            id: myList
            preferredHeight: 400.0
            dataModel: ArrayDataModel {
                id: model
            }
            listItemComponents: [
                ListItemComponent {
                    Container {
                        Button {
                            verticalAlignment: VerticalAlignment.Center
                            text: ListItemData.name
                            onClicked: {
                                var item = ListItemData;
                                console.log("Label: " + item.name);
                                Qt.label.text = item.name;
                            }
                        }
                    }
                }
            ]
        }
        
        Button {
            text: "Populate"
            onClicked: {
                for (var i = 0; i < 20; i ++) {
                    model.append({
                        name: 'foobar ' + i
                    });
                }
            }
        }

        Button {
            text: "clear"
            onClicked: model.clear()
        }
        Label {
            verticalAlignment: VerticalAlignment.Center
            id: label
        }
    }
    onCreationCompleted: {
        Qt.label = label;
    }
}