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
Developer
soulgen
Posts: 44
Registered: ‎02-11-2013
My Device: Z10
My Carrier: TELE2
Accepted Solution

ArrayDataModel&ListView usage issue

Hi all, I don't understand how to use ArrayDataModel with ImageView as a ListItemComponent in ListView. Is it possible?

ListView {
    id: myList
    dataModel: ArrayDataModel {
        id: theDataModel
    }
    onCreationCompleted: {
        theDataModel.append("../images/1.jpg");
    }
    layout: GridListLayout {
        id: gridID
        columnCount: 4
    }
    listItemComponents: [
        ListItemComponent {
            type: "listItem"

            ImageView {
                id: myImageView
                imageSource: ListItemData.???
            }
...

 

Please use plain text.
Developer
mdodd
Posts: 187
Registered: ‎07-19-2012
My Device: Z10 LE
My Carrier: Three

Re: ArrayDataModel&ListView usage issue

If you're only pushing simple data into the ArrayDataModel (e.g. a QString), as far as I know you would only need to use ListItemData. You'd only need to put ListItemData.value if you were pushing QVariantMaps into the ArrayDataModel.



Did this post help you? If so, please make sure to "like" it!
Please use plain text.
Developer
RileyGB
Posts: 282
Registered: ‎08-06-2010
My Device: Z10

Re: ArrayDataModel&ListView usage issue

mdodd is correct, just use ListItemData.



Follow me on twitter @RileyGB - https://twitter.com/RileyGB
View my BB10 OpenSource projects - https://github.com/RileyGB/BlackBerry10-Samples
Please use plain text.
New Developer
cristianjss
Posts: 12
Registered: ‎09-23-2008
My Device: Dev Alpha B
My Carrier: Telcel

Re: ArrayDataModel&ListView usage issue

Hi Soulgen, in the ArrayModel you can use Maps as elements, so you could append a map with the data you need to use in each item on the list, in this case the PATH of the image.

On the other hand, you need to erase the property "TYPE" of the ListItemComponent, so the object set the default value for the property.

Finaly, you should use a container to hold the image. The code shold be something like this :

 

    Container {
        id: listViewContainer
        
        ListView {
            id:myModelListView
            
            dataModel: ArrayDataModel {
                id: theDataModel
            }
            
            onCreationCompleted: {
                theDataModel.append({"imagePath":"../images/image.jpg"});
            }
            
            listItemComponents: [
                ListItemComponent {
                    
                   Container {
                       ImageView {
                            id: myImageView
                            imageSource: ListItemData.imagePath
                       }
                   }
                }
            ]
        
        }
    }

 

I hope, it can be helpful.

 

Cristian

 

 

 

Please use plain text.
Developer
soulgen
Posts: 44
Registered: ‎02-11-2013
My Device: Z10
My Carrier: TELE2

Re: ArrayDataModel&ListView usage issue

I can see only text item with text "../images/1.jpg". It looks like there is no way to use custom listItem with ArrayDataModel, StandartListItem used by default instead. It is very strange. Any help?

Container {
    ListView {
        id: myList
        dataModel: ArrayDataModel {
            id: theDataModel
        }
        onCreationCompleted: {
            theDataModel.append({"imagePath":"../images/1.jpg"});
        }
        layout: GridListLayout {
             id: gridID
             columnCount: 4
             cellAspectRatio: 1.4
        }
        listItemComponents: [
             ListItemComponent {
                type: "listItem"
                Container {
                    id: cont
                    preferredWidth: 180
                    preferredHeight: 126                                
                    layout: DockLayout {}
                    ImageView {
                        id: myImageView
                        imageSource: ListItemData.imagePath
                        opacity: 1.0
                    }
                    CheckBox {
                        id: imageCB
                        onCheckedChanged: {
                            if(checked){
                                myImageView.opacity = 0.5 
                            }
                            else {
                                myImageView.opacity = 1.0;
                            }
                        }
                    }
                } // Container
            } // end of ListItemComponent
        ]
    } // end of ListView
}

 

Please use plain text.
New Developer
cristianjss
Posts: 12
Registered: ‎09-23-2008
My Device: Dev Alpha B
My Carrier: Telcel

Re: ArrayDataModel&ListView usage issue

Try removing the following line from your code

type: "listItem"

Please use plain text.
Developer
soulgen
Posts: 44
Registered: ‎02-11-2013
My Device: Z10
My Carrier: TELE2

Re: ArrayDataModel&ListView usage issue

Thanks a lot Cristian!

Please use plain text.
New Developer
cristianjss
Posts: 12
Registered: ‎09-23-2008
My Device: Dev Alpha B
My Carrier: Telcel

Re: ArrayDataModel&ListView usage issue

You´re welcome !! :smileyhappy:

Please use plain text.