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
laurentC
Posts: 266
Registered: ‎02-05-2010
My Device: Blackberry Z10
My Carrier: Bouygues Telecom
Accepted Solution

About the ListView component

Hi all,


I've already successfully created a simple 2 levels list (header, item) from an XML file.
By default, the ListView shows headers and items. I want to know if it's possible to make it auto-expandable, I mean I want my list just present the header items and when the user click on an header item, the second levels appears (and if it clicks again on the header, it hides the second level).
Do you think I can manage that kind of list with Qml ?

Thanks for your help,
Laurent

Twitter : @LaurentKP
My apps
Please use plain text.
BlackBerry Development Advisor (Retired)
timvito
Posts: 19
Registered: ‎05-07-2012
My Device: none
My Carrier: none

Re: About the ListView component

Hey Laurent,


I don't believe there is any built in way to compress and expand items in a ListView in QML. I think what you are asking about could be done by dynamically adding and removing items from your ListView's data model though. It would require some C++ code to modify your data model. The list of tasks I would do to create this functionality would be:

 

C++ Tasks
- maintain a data structure in C++ that contains all headers and items (could parse your xml into a map or some other data structure in C++ that will be used to add to the ListView's data model)
- create a QListDataModel in C++ and fill it with all my headers, then set it to be the data model for the ListView
- create a function that is exposed to the QML that will be called to insert and remove dynamically

 

QML Tasks
- create the ListView with no data model (will be set in C++)
- make two ListItemComponents in my QML for HeaderListItem and StandardListItem
- overload function itemType in QML to create the correct ListItemComponent depending on if it's a header or item element
- the onSelectionChanged: function in QML can check if the selected item is a header, then call the C++ function to either add or remove elements depending if the group has been expanded or not.

 

Not sure if that would give you the exact behaviour you had in mind, but I believe that would allow for elements to be expanded and compressed in a ListView. The quotes sample app is a nice place to start to see how to create the data model in C++ and how to add elements.

Please use plain text.
BlackBerry Development Advisor (Retired)
smacmartin
Posts: 499
Registered: ‎05-07-2012
My Device: developer
My Carrier: developer

Re: About the ListView component

If you look at the StampCollector sample app StampCollectorApp::smileysurprised:nSelectionChanged, you'll see that this is called when you click the header.  When the indexPath size is 1 and it is selected,  have the data model expose the children, and if not selected, hide the children again.

Please use plain text.
BlackBerry Development Advisor (Retired)
smacmartin
Posts: 499
Registered: ‎05-07-2012
My Device: developer
My Carrier: developer

Re: About the ListView component

The attached example demonstrates use of a custom data model to populate a list.

The text styling is wrong, so it shows up as faint text on faint background.

If you click "hello" then "hello" expands.  Click again and it collapses.

Ditto for "world"

 

Is this roughly what you are looking for?

 

Stuart

Please use plain text.
Developer
laurentC
Posts: 266
Registered: ‎02-05-2010
My Device: Blackberry Z10
My Carrier: Bouygues Telecom

Re: About the ListView component

Thanks a lot for your sample code.
I'll look into it as soon as possible.

Right now I need to debug my app because some code I've wrote recently made my app buggy and I got error at startup. Anyway, as soon as I can fix it I'll try to implement your code and see if it's ok.

Just wandering if implementing a fake first level in my xml file is not an easier solution (I'm lazy I know) :

<root>
    <root2>
        <header title="hello header"/>
            <listItem title="hello item"/>
        <header title="hello header 2"/>
            <listItem title="hello item 2"/>
    </root2>
</root>

The qml documentation says only the two first levels are displayed. Maybe I'll give it a try too...
I'll tell you my feedback when I'm done.

Again thanks for your support.

Laurent

Twitter : @LaurentKP
My apps
Please use plain text.
BlackBerry Development Advisor (Retired)
smacmartin
Posts: 499
Registered: ‎05-07-2012
My Device: developer
My Carrier: developer

Re: About the ListView component

Have you got past your issue?

 

Please use plain text.
Developer
laurentC
Posts: 266
Registered: ‎02-05-2010
My Device: Blackberry Z10
My Carrier: Bouygues Telecom

Re: About the ListView component

Hi,

 

yes I've successfully solved my issue and my app is running fine now.

Unfortunately, I have not tested your code for now but I'll do it as soon as I can. 

Making the list auto-expandable is not a priority but it's a better user experience when you have a lot of items at the second level of your list. That's why I'll try to work on making it possible in my app.

 

Thanks again for your help,

 

Laurent

Twitter : @LaurentKP
My apps
Please use plain text.