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: 139
Registered: ‎05-24-2011
My Device: Z30 running 10.2 and Playbook 4GLTE running OS2.1
My Carrier: rogers

change the appearance of a row in a ListView?

Hi gang,

 

I'd like to change the appearance of a row in a ListView based on the properties of the current ListItemComponent.  In my case, the model is a GroupDataModel containing QObject pointers to a custom class/object.

 

So, for example, if "ListItemData.itemSet = true, then change the background color of this row to green".

 

is something like that possible?  I can't seem to find any way to do this.

 

thx,

 

J

bron: a cron-like scheduler for BlackBerry 10
http://apps.oddelement.com
Highlighted
Developer
Posts: 1,177
Registered: ‎03-20-2013
My Device: Red LE Developer Z10
My Carrier: Fido

Re: change the appearance of a row in a ListView?

[ Edited ]

Yes it is possible. I have moved all this code to C++ in later versions of my app, but here is a snippet of QML from an earlier version...

 

ListItemComponent {
   type: "item"
   Container {
      id: itemRoot
      background: itemRoot.ListItem.active ? Color.create("#2F13A9DA") : SystemDefaults.Paints.ContainerBackground
      Container {
         background: (itemRoot.ListItem.indexInSection + 1 < itemRoot.ListItem.sectionSize) ? itemBackground.imagePaint : Color.Transparent
         preferredWidth: Infinity
         attachedObjects: [
            ImagePaintDefinition {
               id: itemBackground
               imageSource: "asset:///images/ListViewItemBackground.amd"
            }
         ]
         Label {
            text: ListItemData.title
            textStyle {
               color: Color.create("#FF" + ListItemData.textColor)
               fontWeight: (ListItemData.read) ? FontWeight.Normal : FontWeight.Bold
            }
            multiline: true
         }
      }
   }
}

What this does is change the background colour of the item when the user is pressing it, and also sets the text colour and font weight depending on settings in item data. It should point you in the right direction.



Developer of Built for BlackBerry certified multiFEED RSS/Atom feed reader and aggregator.  multiFEED Icon

Play nice: Clicking Like Button on posts that helped you not only encourages others to continue sharing their experience, but also improves your own rating on this board. Also, don't forget to accept a post if it solves your problem or answers your question.
Retired
Posts: 749
Registered: ‎12-16-2008
My Device: BlackBerry Z30
My Carrier: Bell

Re: change the appearance of a row in a ListView?

greenmr's solution is probably the best for something simple like your example of changing a colour, but it's worth noting that you can have completely different ListItemComponents for different types if you want to do something radical

Paul Bernhardt
Application Development Consultant
BlackBerry
@PBernhardt

Did this answer your question? Please accept this post as the solution.
Found a bug? Report it to the Developer Issue Tracker
Developer
Posts: 139
Registered: ‎05-24-2011
My Device: Z30 running 10.2 and Playbook 4GLTE running OS2.1
My Carrier: rogers

Re: change the appearance of a row in a ListView?

Thanks greenmr, I'll mess around with this a bit.  I think i can see how to use this.

 

PBernhardt, how do you define a custom type?  I read that there are two default types, "header" and "item"... is it possible to create custom types?  if so, any pointers/hints?

 

thanks,

 

J

bron: a cron-like scheduler for BlackBerry 10
http://apps.oddelement.com
Retired
Posts: 749
Registered: ‎12-16-2008
My Device: BlackBerry Z30
My Carrier: Bell

Re: change the appearance of a row in a ListView?

There are two special predefined ListItemComponents (Header and StandardListItem) but you can put pretty much whatever you like in a ListItemCompontent. Just start with a container and then add your own bits. You can see an example here:

 

https://developer.blackberry.com/native/documentation/cascades/ui/lists/list_view.html

 

If you want something that is closer to the standard list item (with highlights and such) but your own custom content, you probably want to start with CustomListItem (https://developer.blackberry.com/native/reference/cascades/bb__cascades__customlistitem.html)

 

One other note is that depending on the DataModel that you use, the itemType method may not return what you expect. This is what is used to determine which ListItemComponent is used (the type on the component is matched with the itemType from the given item in the data model). You can fix it with your own function though. Take a look at the Customizing Apperence of List Items section of this: https://developer.blackberry.com/native/reference/cascades/bb__cascades__listview.html

 

Though really, that whole page is very helpful for lists. ListView is extremely powerful, and there is a lot of cool stuff you can do with it.

 

Paul Bernhardt
Application Development Consultant
BlackBerry
@PBernhardt

Did this answer your question? Please accept this post as the solution.
Found a bug? Report it to the Developer Issue Tracker