Cascades Development

[CrozyBB]

I have a ListView and a ListItemComponent with a StandardListItem that currently loads data from a local Json source.

I would like to be able to actively change the ListItemData pointer so that I can change the information displayed by my ListView.

	    ListView {
	        id: myListView
	        dataModel: dataModel
	        
	        listItemComponents: [
	            ListItemComponent {
	                id: listStyles
	                type: "item"
	                StandardListItem {
	                    title: ListItemData.name
	                    description: ListItemData.description
	                }
	            }
	        ]
	    } // end of ListView

Looking at the code above, I would like to change "description: ListItemData.description" to "description: ListItemData.status".

Is that possible? And how would I go about changing that? I've tried using property variants but with no luck so far

[peter9477]

As with basically all ListItemComponent behavior, you should make it depend on something in the model data. Therefore the simplest approach is to have a property named say, "useDesc", in your model data, and change the QML to "description: ListItemData.useDesc ? ListItemData.description : ListItemData.status".

[CrozyBB]

Do you mean changing the actual json data to use a key "useDesc" instead of "description" or to create a new property in the dataModel called "useDesc" and set that equal to which ever json value would suit me (i.e 'description' or 'status')?

If it's the latter, how would that be defined in the dataModel? Suppose I have the following code as well

    attachedObjects: [
        GroupDataModel {
            id: dataModel
        },
        DataSource {
            id: dataSource
            source: "models/example.json"
            type: DataSourceType.Json
            onDataLoaded: {
                // After the data is loaded, insert it into the data model
                dataModel.clear();
                dataModel.insertList(data);           
            }
            onSourceChanged: {
                dataSource.load();
            }
        }
    ]

your help is much appreciated

[peter9477]

Your responses are puzzling to me, so I think we're not on the same page.

Was your original question about how to be able to dynamically change which of the properties (either "description" or "status") was selected for display as the "description" item, on a case-by-case or dynamic basis?

Or were you simply asking if you could do "description: ListItemData.status" so that it displayed a property (called "status") from your JSON data, as the "description" field in the standard list item component?

If it was the latter, just do it. (If that's all the question was, I don't know why you would have asked it though, since it would have been easier to test that than to type up the question in the first place... thus I still don't know if I've guessed at what you really want here. Sorry. :-) )

[CrozyBB]

I'm looking to be able to dynamically change which property of my data model is displayed as the "description" item.

I'm looking to reduce the QML documents in my app. So in order to do this I'm looking to be able to load a common Page with a ListView where I can define such things as my data source and ListItemCompenent properties like "description", "title" and "status".

So for one instance I load my page, set my data model source, load data into the ListView using a GroupDataModel) and set 'description: ListItemData.descA' and in another instance I load my page, set my data model to a different source, load my data into the ListView and set 'description: ListItemData.descB'

[peter9477 · Accepted solution]

Okay, so reusing a single Page, but modifying the content to adjust to the data in the model. Not on an item-by-item basis, but just as a "global" thing. (Correct me if I'm wrong.)

You could do this. I expect there are slightly better ways, but as I probably wouldn't try to do the optimization you're apparently doing, I'm not going to try making it "perfect". Feel free to experiment further. :-)

// in file SwitchablePage.qml
import bb.cascades 1.0

Page {
    property alias useDescA: theListView.useDescA

    Container {
        ListView {
            id: theListView
            property bool useDescA: true

            listItemComponents: [
                ListItemComponent {
                    id: listStyles
                    type: "item"
                    StandardListItem {
                        title: ListItemData.name
                        description: ListItem.view.useDescA ? ListItemData.descA : ListItemData.descB
                    }
                }
            ]
    ...

// in file which uses the page
...

    SwitchablePage {
        useDescA: false  // use descB instead
    }

This takes advantage of the somewhat ugly way in which a ListItemComponent can "reach out" into the ListView and access its properties.  Note that if you had a custom list component, I believe you actually need yet another property on the root component in it, to reach out to the list.  I've got the page "reaching in" to the list with an alias property, but you could just as well put the property on the page, then have the ListView "reach out" to reference it with an alias property (e.g. property alias useDescA: pageId.useDescA), but it amounts to the same thing as far as I can tell.

I'd reconsider why you're trying to do this, however... if it's for some performance reason, I'd make sure I'd measured the impact carefully before going to this effort. I doubt an extra page in another .qml file is going to be noticeable by almost any measure, but you could also swap between ListView in a single page, or just have multiple ListItemComponent types list (e.g. type: "useDescA" vs type: "useDescB") and switch between them based on that. (That would require implementing an itemType() function in the ListView, which would then just return either "useDescA" or "useDescB" based on some property.)  This latter approach seems cleaner in most respects.

[CrozyBB]

Thank you very much! You're approach worked very well. I am going to reconsider using that method though.

I'm also going to look into using multiple ListItemComponents because I think that might work better for because I'll be loading this page with many different data sources (more than two where a bool property would not suffice).

Thanks again!