How to access QML elements inside TabView from the function outside?

Question

In my QML application I have a TabView, Tabs and a few Buttons and Text fields. I need to access them using custom function from outside TabView component which is called by button from inside a Tab.

My code is pretty simple:

ApplicationWindow {
    function showText() {
        console.log(tabView.testText);
    }

    TabView {
        id: tabView

        property alias testText: test.text

        Tab {
            title:'tab1'

            RowLayout {
                Button {
                    text:"PRINT"

                    onClicked: {
                        showText()
                    }
                }

                Text {
                    id:test
                    text:'Test123'
                }
            }
        }

        Tab {
            title:'tab2'
        }
    }
}

but I get error message for the alias creation line:

 Invalid alias reference. Unable to find id "test"

What is wrong with it? I've followed similar question on SO (ReferenceError in qt quick controls tabview) but the code doesn't work either.

Evgeny · Answer 1 · 2016-01-08T14:24:56.337

0

I think you should add one more alias like this:

TabView {
    id: tabView

    property var testText: { return getTab(0).tab1Text }

    Tab {
        id: tab1
        title:'tab1'

        property alias tab1Text: test.text

        RowLayout {
            Button {
                text:"PRINT"

                onClicked: {
                    showText()
                }
            }

            Text {
                id:test
                text:'Test123'
            }
        }
    }

    Tab {
        title:'tab2'
    }
}

edited Jan 08 '16 at 14:24

answered Jan 08 '16 at 14:11

Evgeny

3,910
2
20
37

1

I still get 'Invalid alias location' error for 'property alias testText: tab1.tab1Text' line. I think what I need to do is not weird or unusual but I can't figure out how to make it work. – SP5RFD Jan 08 '16 at 14:22
Then try something like this `property var testText: { return getTab(0).tab1Text }`. Maybe it should be little fixed. – Evgeny Jan 08 '16 at 14:25

score 0 · Answer 2 · edited May 23 '17 at 12:25

As mentioned in this answer, Tab is basically a Loader, which means the properties you're trying to access via the alias may not have been loaded yet. alias has some strict requirements, one of which being that they are "only activated once a component has been fully initialized":

Since you call the show() method from within the Tab that you're trying to get access to, you could just pass the data you need:

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Extras 1.3
import QtQuick.Layouts 1.1

ApplicationWindow {
    width: 300
    height: 600
    visible: true

    function showText(text) {
        console.log(text)
    }

    TabView {
        id: tabView

        Tab {
            title: 'tab1'

            RowLayout {
                Button {
                    text: "PRINT"

                    onClicked: {
                        showText(text)
                    }
                }

                Text {
                    id: test
                    text: 'Test123'
                }
            }
        }

        Tab {
            title: 'tab2'
        }
    }
}

How to access QML elements inside TabView from the function outside?

2 Answers2