Cascades Development

[jamiejulius]

Consider the following QML:

import bb.cascades 1.0

Page {
  content: Container {
    Label {
      id: topLabel
      text: "One"
      textStyle.size: 100.0
      textStyle.color: Color.Blue
    }

    Button {
      text: "Change to Two"
      onClicked: {
        topLabel.text = "Two"
      }
    }

    ListView {
      objectName: "testList"

      listItemComponents: [
        ListItemComponent {
          type: ""
          Button {
            text: "Change to Three"
            onClicked: {
              topLabel.text = "Three"
            }
          }
        }
      ]

      maxHeight: 300.0
    }
  }
}

The pages defines three controls: a label, a button and a listview. In turn, each listview item also contains a button.

Clicking on the button beneath the label successfully changes the label's text via this code:

onClicked: {
  topLabel.text = "Two"
}

However, executing similar code from the button within the listview fails with this error:

Test.qml:28: ReferenceError: Can't find variable: topLabel

Apparently, variables defined outside of the listview are not directly visible from within the listview items.

Is there some syntax available in order to access them?

Thanks,

Jamie

[gperry]

Are you looking for a way to set the button text based on the selection change in the list?

The reccommended way is shown at the bottlom of the page below.

https://developer.blackberry.com/cascades/documentation/ui/lists/list_view.html

Alternatively you might need to use a property to expose the label text.

[jamiejulius]

Hi,

The text I'm trying to change is that of the top label. It already has a property (text) which exposes that. I'm trying to do it in response to a button, which is defined within a ListComponent. The problem seems to be that the label (which is outside of the list) is not programmatically accessible from within the ListComponent (which is inside of the list). The variable (the id of the label) can't be found.

[gperry · Accepted solution]

OK, We have identified a work around that should solve your issue, as suspected it was scope related so some redefinition is required.

At the top Page level add the following line to make the label accessible.

Page {
    id: topPage
    
    onCreationCompleted: { Qt.topLabel = topLabel; }
        
Then in the button definition you can reference the Qt.topLabel from within the list.

            listItemComponents: [
                ListItemComponent {
                    type: "item"
                    Button {
                        text: "Change To Three"
                        onClicked: {
                            Qt.topLabel.text = "Three";
                        }                        
                    }
                }
            ]

Hope this resolves your issue. It certainly worked on my system.

Graham

[jamiejulius]

Works for me too. Thanks for your time on this!

I since learned that the listitem button was not a child in the same tree, so I understand what you mean about a different scope. Nonetheless, I was stumped to find a simple solution.

To understand your solution, I gather that Qt is some kind of pre-existing global object. Correct? And what you are essentially doing, is adding a dynamic property (i.e., one that didn't already exist). Correct?

Thanks,

Jamie

[gperry]

Correct.

Can you mark this thread as solved please.

Glad we were able to help.

Graham

[jamiejulius]

Thanks!

I marked this as solved before my previous reply.

Cheers,

Jamie

[gperry]

Ooops,

Thanks

Graham