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
gpatton
Posts: 193
Registered: ‎12-29-2010
My Device: Bold 9900
My Carrier: Rogers

Hiding image in ListView - StandardListItem

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"
                }
            ]
        }
    }
    
  }
    
}

 

Please use plain text.
Developer
gpatton
Posts: 193
Registered: ‎12-29-2010
My Device: Bold 9900
My Carrier: Rogers

Re: Hiding image in ListView - StandardListItem

Any idea anybody?

Please use plain text.
Contributor
hieupious
Posts: 27
Registered: ‎11-14-2012
My Device: Curve 8900
My Carrier: Viettel

Re: Hiding image in ListView - StandardListItem

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.

Please use plain text.
Developer
gpatton
Posts: 193
Registered: ‎12-29-2010
My Device: Bold 9900
My Carrier: Rogers

Re: Hiding image in ListView - StandardListItem

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
Please use plain text.
Contributor
hieupious
Posts: 27
Registered: ‎11-14-2012
My Device: Curve 8900
My Carrier: Viettel

Re: Hiding image in ListView - StandardListItem

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

Please use plain text.
Developer
hakimrie
Posts: 82
Registered: ‎07-23-2009
My Device: 9900
My Carrier: XL

Re: Hiding image in ListView - StandardListItem

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 :smileyhappy:

Please use plain text.
Contributor
hieupious
Posts: 27
Registered: ‎11-14-2012
My Device: Curve 8900
My Carrier: Viettel

Re: Hiding image in ListView - StandardListItem

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

Please use plain text.
Developer
gpatton
Posts: 193
Registered: ‎12-29-2010
My Device: Bold 9900
My Carrier: Rogers

Re: Hiding image in ListView - StandardListItem

[ Edited ]

@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?

Please use plain text.