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
Samantha-beautiful
Posts: 3
Registered: ‎10-29-2013
My Device: Q10, Z10
My Carrier: Orange
Accepted Solution

Highlight on ListView

Hi there,

 

 

I would like to highlight selected items in a listview with ListItemComponent attached.

My current version of SDK is 10.1 and I tried to use the highlightAppearance feature but it doesn't work.

 

 ---------------------------------------------------

 My code looks like :

 

ListView {
                        id: otherList
                        objectName: "otherList"
                        dataModel: ficheprogramme.getOtherPrograms
                        onDataModelChanged: {
                            if (otherList.dataModel.childCount(1) != 0)
                            {
                                autresEmissionsLabel.visible = true;
                            }
                        }
                        listItemComponents: [
                            
                            ListItemComponent {
                                type: "header"
                                Header {
                                 visible: false
                                }
                            },
                            
                            ListItemComponent {
                                type: "item"
                                
                                Container {
                 
                                    Container {

                                        layout {
                                            DockLayout {
                                            
                                            }
                                        }

                                            Label {
                                                text: ListItemData.date_diffusion
                                            textStyle {
                                            fontSize: FontSize.PointValue
                                            fontSizeValue: 8
                                            fontWeight: FontWeight.W400
                                            color: Color.White
                                        }
                                            }
                                        
                                        }
                                    }
                                
  ------------------------------------------                             
                            
I once had result (a blue frame around the selected item on tap) by setting "ListItemData" as a type for ListItemComponent. The solution wasn't good because I wasn't able to customize the text color, size, container paddings... of the list items.

 

 

Thank you for your help,

 

 

Samantha

 

Please use plain text.
BlackBerry Development Advisor
sabdelsayed
Posts: 249
Registered: ‎08-17-2012
My Device: BlackBerry Z10 and Q10
My Carrier: Bell

Re: Highlight on ListView

Hi Samantha, the HighlightAppearance API was introduced in the 10.2 SDK, i.e. it won't work if you are still using the 10.1 release.

 

For prior releases, you would have to implement your list highlight behavior yourself like indicated in this forum post for example: http://supportforums.blackberry.com/t5/Native-Development/Highlight-selected-item-of-ListView/m-p/24...

@SamarAbdelsayed

Did this answer your question? Please accept post as solution.
Please refrain from posting new questions in solved threads.
Found a bug? Report it using the Issue Tracker
Please use plain text.
Developer
greenmr
Posts: 882
Registered: ‎03-20-2013
My Device: Red LE Developer Z10
My Carrier: Fido

Re: Highlight on ListView

In my multiFEED app I used bold text to indicate unread list items. It is fairly easy to make the text bold or normal (or change any other attributes in the item) when the data is loaded into the ListView, but from QML it is tricky to change the text weight after loading without reloading the data. It is possible, but you have to get the ListItemComponent from the DataModel using the index path, modify it, then plug it back into the ListView in the same place. To make the display show the changes you actually have to replace the old ListItemComponent with the modified one.

 

With C++ it is much easier since you have much more direct control over ListView item presentation and you can modify it in-place and it will show the changes without needing to replace the item.

 

Originally I did it the QML way, but for my completely rewritten upcoming release I switched to defining my ListView and items in C++ and it was MUCH cleaner.

 


Samantha-beautiful wrote:

Hi there,

 

 

I would like to highlight selected items in a listview with ListItemComponent attached.

My current version of SDK is 10.1 and I tried to use the highlightAppearance feature but it doesn't work.

 

 ---------------------------------------------------

 My code looks like :

 

ListView {
                        id: otherList
                        objectName: "otherList"
                        dataModel: ficheprogramme.getOtherPrograms
                        onDataModelChanged: {
                            if (otherList.dataModel.childCount(1) != 0)
                            {
                                autresEmissionsLabel.visible = true;
                            }
                        }
                        listItemComponents: [
                            
                            ListItemComponent {
                                type: "header"
                                Header {
                                 visible: false
                                }
                            },
                            
                            ListItemComponent {
                                type: "item"
                                
                                Container {
                 
                                    Container {

                                        layout {
                                            DockLayout {
                                            
                                            }
                                        }

                                            Label {
                                                text: ListItemData.date_diffusion
                                            textStyle {
                                            fontSize: FontSize.PointValue
                                            fontSizeValue: 8
                                            fontWeight: FontWeight.W400
                                            color: Color.White
                                        }
                                            }
                                        
                                        }
                                    }
                                
  ------------------------------------------                             
                            
I once had result (a blue frame around the selected item on tap) by setting "ListItemData" as a type for ListItemComponent. The solution wasn't good because I wasn't able to customize the text color, size, container paddings... of the list items.

 

 

Thank you for your help,

 

 

Samantha

 






Developer of Built for BlackBerry certified multiFEED RSS/Atom feed reader and aggregator.
Please use plain text.
Developer
LoganSix
Posts: 265
Registered: ‎01-02-2011
My Device: Z30, PlayBook
My Carrier: AT&T

Re: Highlight on ListView

onTouch: {
                        if (event.touchType == TouchType.Down) {
                            itemRoot.opacity = 0.75;
                            itemRoot.background = Color.Red;
                            itemLabel.textStyle.color = Color.White;
                        } else if (event.touchType == TouchType.Up || event.touchType == TouchType.Cancel)     {
                            itemRoot.opacity = 1.0;
                            itemRoot.background = null;
                            itemLabel.textStyle.color = Color.Red;
                        }
                    } 

First you need to give an id to the Container (ie. "itemRoot")

Then make sure your Label has an id (ie. "itemLabel")

 

Then in the Container, add an onTouch event to change the background color and text color based on the TouchType.

 

You'll still need to handle getting the item selected in the ListView if you want to open a menu or do an action based on the item selected.

_________________
Meetup for BlackBerry 10
Meetup Search Tool - not available at the moment
Please use plain text.
New Contributor
Samantha-beautiful
Posts: 3
Registered: ‎10-29-2013
My Device: Q10, Z10
My Carrier: Orange

Re: Highlight on ListView

Thank you everybody for your answers !

 

I finally did it with this solution :

 

ListItemComponent {
                                type: "item"
                                Container {
                                  
                                            attachedObjects: [
                                                ImagePaintDefinition {
                                                    id: border
                                                    imageSource: "asset:///images/frame.png"
                                                }
                                            ]


                                            background: ListItem.selected || ListItem.active ? border.imagePaint Color.Transparent

 

I apply as a background a transparent image of a frame I've made with Photoshop. It's a little bit crafty but it works.

Please use plain text.