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
New Contributor
Posts: 2
Registered: ‎05-16-2013
My Device: Dev Alpha B
My Carrier: Bell
Accepted Solution

Problem referencing child containers from function - noob question

I'm trying to highlight a list item in a list view when the user toggles it. I keep getting an error suggesting that my function can't find my container. I've tried a bunch of different ways to reference the container by I can't seem to find the solution.

 

Error is: asset:///main.qml:114: ReferenceError: Can't find variable: highlight

 

It occurs in my setHighlight function. QML is as follows:

import bb.cascades 1.0

NavigationPane {
    id: navigationPane

    // auto-delete any page when popped from the NavigationPane
    onPopTransitionEnded: page.destroy()

    Page {

        Container {

            onCreationCompleted: _btController.deviceListing.discover()

            ListView {
                id: deviceList

                dataModel: _btController.deviceListing.model

                listItemComponents: [
                    ListItemComponent {
                        type: "listItem"

                        Container {
                            layout: DockLayout {
                            }

                            Container {
                                id: highlight
                                background: Color.Black
                                opacity: 0.1
                                horizontalAlignment: HorizontalAlignment.Fill
                                verticalAlignment: VerticalAlignment.Fill
                            }

                            StandardListItem {
                                title: ListItemData.deviceName
                                description: ListItemData.deviceAddress
                                status: ListItemData.deviceRSSI
                            }
                        }
                    }
                ]

                function setHighlight(highlighted) {
                    if (highlighted) {
                        highlight.opacity = 0.5;
                    } else {
                        highlight.opacity = 0.0;
                    }
                }
                
                onTriggered: {
                    deviceList.toggleSelection(indexPath);
                    setHighlight(ListItem.selected)
                }
           }
        }
    }
}

 

Developer
Posts: 196
Registered: ‎03-04-2013
My Device: BB Z10
My Carrier: Rogers

Re: Problem referencing child containers from function - noob question

Not entirely sure, but have you tried

 

    // Place this within the ListView { }
    // and use highlightOpacity = 0.5
    property alias highlightOpacity: highlight.opacity

 

Developer
Posts: 16,786
Registered: ‎07-29-2008
My Device: Z10 LE, Z30, Passport
My Carrier: O2 Germany

Re: Problem referencing child containers from function - noob question

the listitem cannot access items outside. you can access the listview from it, and the listview can access outside items, so you could write a function there, or use a property of listview.
----------------------------------------------------------
feel free to press the like button on the right side to thank the user that helped you.
please mark posts as solved if you found a solution.
@SimonHain on twitter
Developer
Posts: 1,523
Registered: ‎12-18-2012
My Device: Z30, Z10 LE, DevAlpha C, PlayBook

Re: Problem referencing child containers from function - noob question

Hi,

 

You're referencing ListItem.selected in ListView { }, but it doesn't exist there.

It's available only on root item of ListItemComponent.

 

Something like this should work (untested):

ListItemComponent {
  type: "listItem"
  Container {
    id: rootItem
    layout: DockLayout {}
    Container {
      background: Color.Black
      opacity: rootItem.ListItem.selected ? 0.5 : 0.0
      horizontalAlignment: HorizontalAlignment.Fill
      verticalAlignment: VerticalAlignment.Fill
    }
    ...

...

onTriggered: {
  deviceList.toggleSelection(indexPath);
}

 

Item selection is a special case, but if you need to update properties other than selection, do not reference ListItemComponents directly. There may be multiple instances of a component and they aren't guaranteed to exist, so they can't be referenced by id from outside. All changes should be made through dataModel. In components bind to dataModel values.

 

 

 

 


Andrey Fidrya, @zmeyc on twitter
New Contributor
Posts: 2
Registered: ‎05-16-2013
My Device: Dev Alpha B
My Carrier: Bell

Re: Problem referencing child containers from function - noob question

I'll give Zmey the prize here.

 

Rather than trying to set the Selected attribute programmatically and then forcing the opacity of the listItem, it turned out to be easier to add a field to the groupdatamodel I am using and then have the opacity change depending on the value in the datamodel. I suspect this will be a more robust approach as well.

 

                        Container {
                            layout: DockLayout {
                            }
                            
                            Container {
                                id: highlightContainer
                                background: Color.Black
                                opacity: ListItemData.deviceSelected ? 0.5 : 0.0
                                horizontalAlignment: HorizontalAlignment.Fill
                                verticalAlignment: VerticalAlignment.Fill
                            }

                            StandardListItem {
                                title: ListItemData.deviceName
                                description: ListItemData.deviceSelected
                                status: ListItemData.deviceRSSI
                            }
                        }


...

                onTriggered: {
                    var selectedDevice = dataModel.data(indexPath);
                    deviceList.toggleSelection(indexPath);
                    selectedDevice.deviceSelected = deviceList.isSelected(indexPath);
                    dataModel.updateItem(indexPath, selectedDevice);
                }

 

Developer
Posts: 1,523
Registered: ‎12-18-2012
My Device: Z30, Z10 LE, DevAlpha C, PlayBook

Re: Problem referencing child containers from function - noob question

I'm glad that it worked! Have you tried binding 'opacity' to ListItem.selected as in the example above? That's the preferred way to work with selection. Duplicating it in dataModel is not really needed, because it can get out of sync this way if selection is changed by some other method.

Just make sure that you're referencing ListItem.selected via id of top-level item of ListItemComponent. Unlike ListItemData it's not accessible from child items.

Andrey Fidrya, @zmeyc on twitter