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
Regular Contributor
coolneo
Posts: 56
Registered: ‎06-25-2012
My Device: non-blackberry user
Accepted Solution

Change ListView Background

Hello all,

 

I want to draw a listview with different backgrounds on every even and odd positions i tried with accessing indexPath inside my listItemComponent but thats not happening any clues on that would be great !!

 

Regards

Neo

Developer
peter9477
Posts: 6,473
Registered: ‎12-08-2010
My Device: PlayBook, Z10

Re: Change ListView Background

If you've tried something, it might help us to see a code snippet. Then we could just point out the likely cause of the problem.

Peter Hansen -- (BB10 and dev-related blog posts at http://peterhansen.ca.)
Author of White Noise and Battery Guru for BB10 and for PlayBook | Get more from your battery!
Regular Contributor
coolneo
Posts: 56
Registered: ‎06-25-2012
My Device: non-blackberry user

Re: Change ListView Background

Ok thanks for your reply following is my code:

 

    ListView {
        id:allEventListView
        
        dataModel: ArrayDataModel {
            id:allEventDatModel
        }
        
        onCreationCompleted: {
            var testModel = []
            testModel.push({title:"Title Index"})
            testModel.push({title:"Title Two"})
            testModel.push({title:"Title Three"})
            allEventDatModel.append(testModel)
        }
        
        function getImgSource() {
            if(indexPath % 2 == 0) {
                return "right_image.png"
            }else {
                return "left_image.png"
            }
        }
        
        function getHorizontalAlignment() {
            if(indexPath % 2 == 0) {
                return  HorizontalAlignment.Right
            }else {
                return HorizontalAlignment.Left
            }
        }

        
        listItemComponents:[
            ListItemComponent {
                
                Container {
                    layout: DockLayout {
                        
                    }
                                        
                    ImageView {
                        id:listItemBgImgView
                        imageSource: getImgSource()
                        horizontalAlignment:getHorizontalAlignment() 
                    }
                    
                    Label {
                        id:titleLable
                        horizontalAlignment: HorizontalAlignment.Center
                        verticalAlignment: VerticalAlignment.Center
                        text: ListItemData.title
                        textStyle.color: Color.White
                    }
                }
            }
        ]
        
        onTriggered: {
            console.log("Selected index = "+indexPath)
        }
    }

 

But getImgSource is not called only ??

Developer
peter9477
Posts: 6,473
Registered: ‎12-08-2010
My Device: PlayBook, Z10

Re: Change ListView Background

There's a section in the ListView docs that it's *essential* that anyone using it for more than trivial things understands. Go to https://developer.blackberry.com/native/reference/cascades/bb__cascades__listview.html and scroll down to the subsection titled "List Visuals in QML".

You'll want to learn about the use of the "ListItem.indexPath" and related "attached properties", and especially about how the ListItemComponent has a different "scope" than the ListView itself.

That whole section is important, but especially the paragraph starting with "The ListItem.* symbols listed above only have values on the root element in the item visuals, so they must be prefixed by the id of the root element if used on any element further down in the tree."

If reading that and experimenting a bit doesn't get you past the issue, please post again and I or someone else can be more specific. I'm trying to make sure you actually understand the reasons *why* you'd have to do something here, rather than just handing you the answer as code.

Peter Hansen -- (BB10 and dev-related blog posts at http://peterhansen.ca.)
Author of White Noise and Battery Guru for BB10 and for PlayBook | Get more from your battery!
Regular Contributor
coolneo
Posts: 56
Registered: ‎06-25-2012
My Device: non-blackberry user

Re: Change ListView Background

[ Edited ]

Thanks again for your reply and i tried with following changes:

 

ImageView {
    id:listItemBgImgView
    imageSource:allEventListView.ListItem.indexPath % 2 == 0?"asset:///right.png":"asset:///left.png"
    horizontalAlignment:allEventListView.ListItem.indexPath % 2 == 0?       HorizontalAlignment.Right:HorizontalAlignment.Left  
 }

 

 

But with this also nothing happens by nothing happens i mean i cant see my images !!

 

Can you help me in understanding what wrong my i am doing here !!

Regular Contributor
coolneo
Posts: 56
Registered: ‎06-25-2012
My Device: non-blackberry user

Re: Change ListView Background

Solve the problem from more reading of the list view documents !!

Thanks
Developer
peter9477
Posts: 6,473
Registered: ‎12-08-2010
My Device: PlayBook, Z10

Re: Change ListView Background

Bonus points if you post your modified code and/or the reason it wasn't working before! :-) (For others, who may read this thread in the future and hope to see an answer for their own problem.)

Peter Hansen -- (BB10 and dev-related blog posts at http://peterhansen.ca.)
Author of White Noise and Battery Guru for BB10 and for PlayBook | Get more from your battery!
Regular Contributor
coolneo
Posts: 56
Registered: ‎06-25-2012
My Device: non-blackberry user

Re: Change ListView Background

Hello Sorry for replying late.

 

from the docs i understood that we need to mention the root item of the listItemComponent, which i misunderstood to the listview.

 

But actually we need to mentiom the root item of container which contains all the visual elements inside the listitemComponent !!