Cascades Development

[gpatton]

Hi,

I have a list with JSON data fed into it. In the StandardListItem I have an Image source. Now through the Action overflow menu, I want to be able to toggle the image source to on/off. Is there anyway to do this?

My code is below. In the ActionItem with id: toggleListFlags, the text changes fine of the Action item, but the image of the StandardListItem does not toggle. Any ideas? 

TabbedPane {
    property variant countryView
    id: mainTabPage
    showTabsOnActionBar: true
    Tab {
        
        id: countryTab
        title: qsTr("Countries")
        NavigationPane {
            id: countryNav
            
            Page {
                id: countryPage
                Container {
                    ListView {
                        id: countryList
                        objectName: "countryList"
                        dataModel: dataModel
                        listItemComponents: [
                            ListItemComponent {
                                type: "item"
                                StandardListItem {
                                    id: mainCountryList
                                    title: ListItemData.name
                                    imageSource: "asset:///images/picture1.png"
                                }
                            }
                        ]
                        onTriggered: {
                            ...
                        }
                    }
                    attachedObjects: [
                        GroupDataModel {
                            ...
                        },
                        DataSource {
                            ...
                        }
                    ]
                }

                actions: [
                   ActionItem {
                        id: toggleListFlags
                        title: qsTr("Hide Flags")
                        
                        onTriggered: {
                            if (toggleListFlags.title == "Hide Flags") {
                                toggleListFlags.title = "Show Flags"
                                mainCountryList.imageSource = null
                            } else if (toggleListFlags.title == "Show Flags") {
                                toggleListFlags.title = "Hide Flags"
                                mainCountryList.imageSource = "asset:///images/picture1.png"
                            }
                        }
                    }
                ]// End Actionitems
                
                onCreationCompleted: {
                    ...
                }
            }
            attachedObjects: [
                ComponentDefinition {
                    id: countryPageDefinition;
                    source: "countryDetail.qml"
                }
            ]
        }
    }
    
  }
    
}

[gpatton]

Any idea anybody?

[hieupious]

You cannot assign null for an imageSource. Now we are not able to use null keyword in QML. But I dont know how to replace it.

[gpatton]

Hey,

Thanks for the reply. Instead of nulll, I've also used just empty quotes ie "" with nothing in them. Still nothing changes.

Its strange, I'm modifying the property of an item with its proper id, yet nothing is changing.

I just want to toggle on/off the images in list view.

-G

[hieupious]

We can also use function resetImage() to resets the image on this list item to a default value of an empty image.

[hakimrie]

I'm not sure you can acces list item from page action item. but may be you can try property to change the list item value on the fly like this 

TabbedPane {
    property variant countryView
    id: mainTabPage
    showTabsOnActionBar: true
    Tab {
        
        id: countryTab
        title: qsTr("Countries")
        NavigationPane {
            id: countryNav
            
            Page {
                id: countryPage
                Container {
                    ListView {
                        id: countryList
                        property string imageUrl
                        objectName: "countryList"
                        dataModel: dataModel
                        listItemComponents: [
                            ListItemComponent {
                                type: "item"
                                StandardListItem {
                                    id: mainCountryList
                                    title: ListItemData.name
                                    imageSource: ListItem.view.imageUrl
                                }
                            }
                        ]
                        onTriggered: {
                            ...
                        }
                    }
                    attachedObjects: [
                        GroupDataModel {
                            ...
                        },
                        DataSource {
                            ...
                        }
                    ]
                }

                actions: [
                   ActionItem {
                        id: toggleListFlags
                        title: qsTr("Hide Flags")
                        
                        onTriggered: {
                            if (toggleListFlags.title == "Hide Flags") {
                                toggleListFlags.title = "Show Flags"
                                countyList.imageUrl = ""
                            } else if (toggleListFlags.title == "Show Flags") {
                                toggleListFlags.title = "Hide Flags"
                                countryList.imageUrl = "asset:///images/picture1.png"
                            }
                        }
                    }
                ]// End Actionitems
                
                onCreationCompleted: {
                    ...
                }
            }
            attachedObjects: [
                ComponentDefinition {
                    id: countryPageDefinition;
                    source: "countryDetail.qml"
                }
            ]
        }
    }
    
  }
    
}

haven't try yet, but I think it should work

[hieupious]

Frankly, I didn't try it but I don't think it works because QML don't realize "null" keyword

[gpatton]

@hakimrie

Hey,

Works well! Thanks!

-G 

I think i spoke too early. The imageUrl should be pointing to an item link that is pulled from the JSON file I have. Just like I do this in the StandardListItem.

 title: ListItemData.name

By declaring that outside, I can't pull that data.

Any idea?