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
Highlighted
Developer
Posts: 237
Registered: ‎11-24-2012
My Device: Blackberry 10 Dev Alpha
My Carrier: Telkomsel

How to make different item looks / UI on a listView ?

Hi, I want to make some item of listview has different looks / UI from other / default item UI.

How to do this?

 

Thanks

Developer
Posts: 313
Registered: ‎05-31-2010
My Device: Alpha 10, Bold 9900, Storm 9530, Tour 9630, Curve 9320, Curve 8900
My Carrier: All

Re: How to make different item looks / UI on a listView ?

Custom the "item" or "header" in the listItemComponents

 

listItemComponents: [
                    ListItemComponent {
                        type: "item"
                        Container {
                            //add your customized view
                        }
                    }
                ]




p(^_^)q
Good good study, day day up
Developer
Posts: 237
Registered: ‎11-24-2012
My Device: Blackberry 10 Dev Alpha
My Carrier: Telkomsel

Re: How to make different item looks / UI on a listView ?

No, what i mean is different UI for item on listView, like 2 UI for item on listview.

Ex: I want first item UI different from other item

 

Thanks

Developer
Posts: 313
Registered: ‎05-31-2010
My Device: Alpha 10, Bold 9900, Storm 9530, Tour 9630, Curve 9320, Curve 8900
My Carrier: All

Re: How to make different item looks / UI on a listView ?

[ Edited ]

It is very easy just check the index of row then use different look.

 

I copy the part of sample code as below

listItemComponents: [
                ListItemComponent {
                    type: "imageItem"
                    ImageItem {
                    }
                },
                ListItemComponent {
                    type: "textItem"
                    TextItem {
                    }
                },
                ListItemComponent {
                    type: "header"
                    Header {
                       
                    }
                }
            ]

            // Item type-mapping
            function itemType(data, indexPath) {
                
                if (indexPath.length == 1) {
                    
                    return 'header';
                } else {
                    if (data.imageSource != "") {
                        // The data contain an image return an item that can display an image.
                        return 'imageItem'
                    } else {
                        // No image in the data display a text item.
                        return 'textItem'
                    }
                }
            }

 




p(^_^)q
Good good study, day day up