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
Posts: 134
Registered: ‎04-25-2009
My Device: Z30
My Carrier: AT&T
Accepted Solution

Custom List Item changing when clicked

[ Edited ]

I am having an odd issue.

When my list of messages is first populated, it checks a property in the json data to see if the message is "read" or "unread." If it is "unread" it will be a different color than the ones that are already "read" as an indication to the user.

 

This works fine, however I added a context action to the list, and when this action is triggered, I am changing the message to be "unread." So the color of the list item should change. This is working.

 

However, after I have changed the color of a single item in the list, when i scroll the list up and down, many items are changing colors. I believe it has to do with recycling the list renderer.

This behavior does not occur after list first initializes. Whichever colors have been set on initialize hold their place. Only after i make a change to one of the items in the list, things go crazy when i scroll. I hope I am being clear.

 

How can I prevent this from occuring?  This is the code that is changing the color of a label in my custom list item.

 

 listItemComponents: [
                            ListItemComponent {
                                MessageListItem {
                                    id: messagesListItem
                                    contextActions: ActionSet {
                                        ActionItem {
                                            title: "Mark Unread"
                                            onTriggered: {
                                                if (messagesListItem.isNew == false) {
                                                    var selectedItem = ListItemData;
                                                    messagesListItem.isNew = true; //property of list item is changed to unread
                                                }
                                            }
                                        }
                                    }

 And inside the MessageListItem.qml

 

 

property bool isNew: ListItemData.data.new

   onIsNewChanged: {
        if (isNew == true) {
            subjectLabel.textStyle.color = Color.create("#FF4500");
        } else {
            subjectLabel.textStyle.color = Color.create("#000000");
        }
    }

 

 Please let me know if you have questions, any help or suggestion is appreciated. Thanks!

Developer
Posts: 654
Registered: ‎10-08-2009
My Device: Bold 9900
My Carrier: Telus

Re: Custom List Item changing when clicked

I had the exact same problem with my ListView. The problem is most likely combination of the recycling mechanism and ListItemComponent scope issue

 

Anyway, the easiest way out is to use the alternative: ListItemProvider in C++

 

http://supportforums.blackberry.com/t5/Cascades-Development/Modify-ListItemComponent-from-outside/m-...

 

http://supportforums.blackberry.com/t5/Cascades-Development/ListView-bug-when-ListItemComponent-have...

 

Using ListItemProvider eliminates this issue.

----------------------------------------------------------
Twitter: @gyubok
Developer
Posts: 134
Registered: ‎04-25-2009
My Device: Z30
My Carrier: AT&T

Re: Custom List Item changing when clicked

Thanks for the reply!

When you say to use the ListItemProvider in C++, would exactly do you mean? It wouldn't mean adding the ListView via C++ I assume, so what does ListItemProvider do to help in this situation?
I didn't completely understand what that first link indicated was the solution and how one would implement it.
Sorry for being difficult...

Developer
Posts: 654
Registered: ‎10-08-2009
My Device: Bold 9900
My Carrier: Telus

Re: Custom List Item changing when clicked

Not a problem. ListItemComponent is a QML only class whereas ListItemProvider is C++ only class. To use LsitItemProvider, you would need to provide dataModel via C++

 

ListItemComponent: This class can only be used in QML. In C++, the visuals for list items can be managed using ListItemProvider.
ListItemProvider: An interface for providing VisualNode objects as items in a ListView.

The doc doesn't say it directly, which is rather annoying but it seem to suggest that ListItemProvider is the one you should use if you are to make changes on the UI.

 

One of the ListItemProvider function is:

updateItem(): called whenever an item is about to be shown, and when the data representation of the item (in the DataModel) has changed

 so you can call that function whenever an item in the list is clicked.

 

 

----------------------------------------------------------
Twitter: @gyubok
Developer
Posts: 134
Registered: ‎04-25-2009
My Device: Z30
My Carrier: AT&T

Re: Custom List Item changing when clicked

Ok, so here is what I am doing now.

 

Have my ListView and custom List item file defined in QML.

I make calls from the QML to C++, where i make network calls to retrieve JSON data.

Once I have json data, I set the datamodel of the ListView from C++.

Now I am trying to change components or their properties within the List item that is selected via QML.

 

Which part of this will I be doing differently? Just the last part?

 

Developer
Posts: 654
Registered: ‎10-08-2009
My Device: Bold 9900
My Carrier: Telus

Re: Custom List Item changing when clicked

My bad, I was reading your question a bit differently!

 

Try to use ListItemProvider instead. ListItemComponent gave me too much headache and because I couldn't find what was causing the UI mess up, I ended up switching to ListItemProvider to create item UI. Theoretically, yours and my implementation of the ListItemComponent should not cause any problem but it does. Perhaps it is because of memory issue on dev devices, I have yet to try on z10 with twice the memory.

 

I don't know what to say, using ListItemProvider to update UI works for me :smileyhappy:

 

https://developer.blackberry.com/cascades/reference/bb__cascades__listitemprovider.html

----------------------------------------------------------
Twitter: @gyubok
Developer
Posts: 1,523
Registered: ‎12-18-2012
My Device: Z30, Z10 LE, DevAlpha C, PlayBook

Re: Custom List Item changing when clicked

Hi!


I think it's not working because you aren't changing 'new' variable of dataModel's item. Also, directly assigning control's isNew property breaks it's binding to dataModel.

 

It should work if you modify the dataModel instead.

 

An important point to note, though, that it's not possible to modify individual variables of dataModel item. You'll have to replace the entire item. Sample code for GroupDataModel: (untested, so might require tweaks, please tell if you need help with getting this to work):

 

onTriggered: {
  var selectedItem = ListItemData  // get a copy of dataModel's item
  selectedItem.new = !selectedItem.new  // modify it's property
  messagesListItem.ListItem.view.dataModel.updateItem(indexPath, selectedItem) // update the model
}

 For ArrayDataModel the function is named differently.

 

Also, this line looks suspicious:

property bool isNew: ListItemData.data.new

Probably it should be replaced with this one:

property bool isNew: ListItemData.new

 


Andrey Fidrya, @zmeyc on twitter
Developer
Posts: 134
Registered: ‎04-25-2009
My Device: Z30
My Carrier: AT&T

Re: Custom List Item changing when clicked

[ Edited ]

That's a very good point about changing the data model. I tried to at first, but it had no effect so I dismissed the idea. But now i will try your method.

 

This line is correct. Its just the structure of the json..

property bool isNew: ListItemData.data.new

 

I am using an ArrayDataModel, do you know what the function is named? the equivalent of updateItem()?

 

Thanks!

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

Re: Custom List Item changing when clicked

Ah, I see.

 

In ArrayDataModel it's called replace():

http://developer.blackberry.com/cascades/reference/bb__cascades__arraydatamodel.html#function-replac...

 

If it won't work try changing the dataModel to a flat one (single level) for testing purposes.

 


Andrey Fidrya, @zmeyc on twitter
Developer
Posts: 134
Registered: ‎04-25-2009
My Device: Z30
My Carrier: AT&T

Re: Custom List Item changing when clicked

[ Edited ]

indexPath was undefined, but I found a solution here:

http://supportforums.blackberry.com/t5/Cascades-Development/ListView-With-Context-Actions/td-p/22546...

 

The equivalent in my scenario would be

messagesListItem.ListItem.indexPath

 

 

Otherwise, I can confirm that the issue is fixed by using this method. No funky activity happening when scrolling now, thanks so much!