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


Thank you for visiting the BlackBerry Support Community Forums.

BlackBerry will be closing the BlackBerry Support Community Forums Device Forums on April 1st (Developers, see below)

BlackBerry remains committed to providing excellent customer support to our customers. We are delighted to direct you to the CrackBerry Forums, a well-established and thorough support channel, for continued BlackBerry support. Please visit http://forums.crackberry.com or http://crackberry.com/ask. You can also continue to visit BlackBerry Support or the BlackBerry Knowledge Base for official support options available for your BlackBerry Smartphone.

"When we launched CrackBerry.com 10 years ago, we set out to make it a fun and useful destination where BlackBerry Smartphone owners could share their excitement and learn to unleash the full potential of their BlackBerry. A decade later, the CrackBerry community is as active and passionate as ever and I know our knowledgeable members and volunteers will be excited to welcome and assist more BlackBerry owners with their questions."

- Kevin Michaluk, Founder, CrackBerry.com

Developers, for more information about the BlackBerry Developer Community please review Join the Conversation on the BlackBerry Developer Community Forums found on Inside BlackBerry.


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

 

Developer
Posts: 193
Registered: ‎12-29-2010
My Device: Bold 9900
My Carrier: Rogers

Re: Hiding image in ListView - StandardListItem

Any idea anybody?

Contributor
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.

Developer
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
Contributor
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.

Developer
Posts: 87
Registered: ‎07-23-2009
My Device: Z30
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 Smiley Happy

Highlighted
Contributor
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

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