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
New Contributor
Posts: 3
Registered: ‎03-23-2013
My Device: Z10
My Carrier: Rogers

Putting images in the ListView

[ Edited ]

Hello,

 

I'm trying to populate a ListView with bbm contact info. Each item on the list will consist of the display picture and the name of a bbm contact. Currently, I'm using ContactService::displayPictureUpdated(...) in a Cascade cpp file to get the bbm contact display pictures in QByteArray format. 

 

The listview is constructed in qml like this:

 

ListView {
    dataModel: _friendList.model
        listItemComponents: ListItemComponent {
        type: "item" 
        StandardListItem {
            title: ListItemData.name
            imageSpaceReserved: true 
            image: ListItemData.image
        }
    }
}

 The contact name is displayed correctly, however, I have no idea how to make it display the image. All the tutorials, documentation, and samples that I've examined all assume the image that I want to insert is already saved on the device, not in QByteArray format in the memory. Can anyone help a newbie out?

Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: Putting images in the ListView

Since you've already created your own model just call a function there passing the index,

 

ListView {


    dataModel: _friendList.model
        listItemComponents: ListItemComponent {
        type: "item" 
        StandardListItem {
            title: _friendList.getName(ListItem.indexInSection)
            imageSpaceReserved: true 
            image: _friendList.getImage(ListItem.indexInSection)
        }
    }
}

 

 

 


If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.
New Contributor
Posts: 3
Registered: ‎03-23-2013
My Device: Z10
My Carrier: Rogers

Re: Putting images in the ListView

Thank you, but what should be the method signature of getName() and getImage()?

I tried the following but they didn't seem to get called:
QString * getName(int index);
Image * getImage(int index);
Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: Putting images in the ListView

Q_INVOKABLE QString getName(int index)

Q_INVOKABLE Image getImage(int index)

 

http://developer.blackberry.com/cascades/documentation/dev/integrating_cpp_qml/

 

Or depending on implementation pass a pointer back to your own QObject class.

 


If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.
New Contributor
Posts: 3
Registered: ‎03-23-2013
My Device: Z10
My Carrier: Rogers

Re: Putting images in the ListView

Q_INVOKABLE didn't solve the problem. The functions are still not being called. If I put the function call _friendList.getName(0) in an ActionItem:Smiley SurprisednTriggered block, it gets called when I click on the ActionItem. However, if I put the function call in StandardListItem, it does not get called. Therefore, the list stays empty.

Developer
Posts: 1,524
Registered: ‎12-18-2012
My Device: Z30, Z10 LE, DevAlpha C, PlayBook

Re: Putting images in the ListView

[ Edited ]

ListItemComponents have their own visibility scope. To access variables which are declared outside, declare a JavaScript function in ListView and call it using id of top level item in ListItemComponent as shown in example below.

 

_friendList should be accessible from this outer JavaScript function.

 

Example:

 

 

Container {
    ListView {
       function proxyFunc() {
          return _friendList.getName(0)
       }
       listItemComponents: [
           ListItemComponent {
             StandardListItem {
               id: item
               title: item.ListItem.view.proxyFunc() // 'item.' can be omitted

 

 


Andrey Fidrya, @zmeyc on twitter
Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: Putting images in the ListView

[ Edited ]

If you've seen my code before I don't use proxies I just call directly, such as,

 

folderItem.ListItem.view.dataModel.deleteFolders(folderItem.ListItem.view.selectionList());

Zmey's solution is more readable and manageable but comes with the extra time overhead. Smiley Happy

 

If it was all C++ the extra call would get optimised out but seeing as it is isn't, it won't.

 

 

 


If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.