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
Enaud
Posts: 74
Registered: ‎02-08-2013
My Device: z10
Accepted Solution

Augmenting StandardListItem

Hello Everyone,

 

I'd like to reproduce something similar to the download listview in the AppWorld app. Basically a ListView made up of StandardListItems but with the addition of a progress bar.

 

I already have a custom ListItemProvider but I can't figure out how to augment the StandardListItem with a progressBar (I'm assuming I'll be able to update the progressbar using the ListItemProvider::updateItem function).

 

Any advice is appreciated.

 

Cheers,

Eric

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

Re: Augmenting StandardListItem

I don't think you can do that, unless StandardListItem is actually capable of being used inside a Container with other stuff around it. (Doubtful, IMHO.)

You'd very likely need to recreate whatever StandardListItem does in a custom control, which isn't a trivial exercise if you need much of it. Among other things, it does fancy stuff with the font size as the system font size changes (specifically clipping it within a range of something like 6 to 11, whereas the system font can go from 5 to 18).

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!
Developer
strobejb
Posts: 282
Registered: ‎10-15-2012
My Device: bb10 developer

Re: Augmenting StandardListItem

The StandardListItem is not customizable. As peter9477 says, you need to create your own listitem visual that looks the same as the standard one.

 

What is possible though, is to 'wrap' the StandardListItem inside a CustomControl. Basically, you need to implement your own CustomControl like this:

 

class CustomListItem : public bb::cascades::CustomControl, public bb::cascades::ListItemListener
{
Q_OBJECT

        //
        //      StandardListItem properties
        //
        Q_PROPERTY(QUrl imageSource READ imageSource WRITE setImageSource RESET resetImageSource NOTIFY imageSourceChanged FINAL)
        Q_PROPERTY(QString title READ title WRITE setTitle RESET resetTitle NOTIFY titleChanged FINAL)
        Q_PROPERTY(QString status READ status WRITE setStatus RESET resetStatus NOTIFY statusChanged FINAL)
        Q_PROPERTY(QString description READ description WRITE setDescription RESET resetDescription NOTIFY descriptionChanged FINAL)
        Q_PROPERTY(bool imageSpaceReserved READ isImageSpaceReserved WRITE setImageSpaceReserved RESET resetImageSpaceReserved NOTIFY imageSpaceReservedChanged FINAL)

        //
        //      Custom properties
        //
        Q_PROPERTY(float sliderPos READ sliderPos WRITE setSliderPos RESET resetSliderPos NOTIFY sliderPosChanged FINAL)


        CustomListItem(bb::cascades::Container *parent = 0);

private:
        // signals & setters / getters go here
private:

        bb::cascades::StandardListItem * m_sli;
        bb::cascades::Slider *m_slider;
}

 You need to make it inherit from ListItemListener, so that the standard listitem selection logic works. And you also need to expose the same properties & signals that the StandardListItem exposes, so that your custom control "looks" like a StandardListItem.

 

In your constructor you create a Container (set to DockLayout) which holds the standardListItem, and you can overlay a slider on top of that within the same container. 

 

You then need to hook up the StandardListItem signals to your custom control, so that when you use it in a ListView, the listview is unaware that it is using a custom list item.

Developer
Enaud
Posts: 74
Registered: ‎02-08-2013
My Device: z10

Re: Augmenting StandardListItem

Thanks for the great answer! I'll give that a try.

 

 

Developer
jbadwal
Posts: 52
Registered: ‎04-22-2012
My Device: Z10

Re: Augmenting StandardListItem


strobejb wrote:

You then need to hook up the StandardListItem signals to your custom control, so that when you use it in a ListView, the listview is unaware that it is using a custom list item.


Can you elaborate on this if you dont mind. A StandardListItem has only a handful of signals and slots, but which ones do you hook up ? and how would you hook up the StandardListItem to your custom control ?

 

Is there any way to do this in pure QML ?