ReferenceError: textFieldServerAddress is not defined

Question

I am working on some Application Settings QML Window and here is minimalistic working code:

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.1
import QtQuick.Window 2.2
import QtQuick.Controls.Styles 1.4

Window
{
    width: 512
    height: 512

    flags: Qt.FramelessWindowHint

    visible: true

    ColumnLayout
    {
        anchors.fill: parent

        spacing: 8

        Rectangle
        {
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.margins: 8

            radius: 16
            border.color: "#4682b4"
            border.width: 1
            antialiasing: true

            gradient: Gradient
            {
                GradientStop
                {
                    position: 0
                    color: "#636363"
                }   // GradientStop

                GradientStop
                {
                    position: 1
                    color: "#303030"
                }   // GradientStop
            }   // Gradient

            ColumnLayout
            {
                anchors.fill: parent

                RowLayout
                {
                    spacing: 8
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    Layout.margins: 8
                    Layout.alignment: Qt.AlignHCenter|Qt.AlignTop

                    antialiasing: true

                    Text
                    {
                        text: qsTr("APPLICATION SETTINGS")
                        clip: true
                        font.bold: true
                        font.pointSize: 24
                        textFormat: Text.RichText
                        verticalAlignment: Text.AlignVCenter
                        horizontalAlignment: Text.AlignHCenter
                    }   // Text
                }   // RowLayout

                ColumnLayout
                {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    Layout.margins: 8
                    Layout.alignment: Qt.AlignHCenter|Qt.AlignBottom

                    TabView
                    {
                        Layout.fillWidth: true
                        Layout.fillHeight: true
                        Layout.alignment: Qt.AlignHCenter|Qt.AlignVCenter

                        frameVisible: true

                        Tab
                        {
                            asynchronous: true
                            title: qsTr("Database")

                            Layout.fillWidth: true
                            Layout.fillHeight: true
                            Layout.alignment: Qt.AlignHCenter|Qt.AlignVCenter

                            ColumnLayout
                            {
                                spacing: 8
                                Layout.fillWidth: true
                                Layout.fillHeight: true
                                Layout.alignment: Qt.AlignHCenter|Qt.AlignVCenter

                                TextField
                                {
                                    id: textFieldServerAddress
                                    antialiasing: true

                                    Layout.fillWidth: true
                                    Layout.fillHeight: false

                                    placeholderText: qsTr("database server address")
                                }   // TextField

                                TextField
                                {
                                    id: textFieldServerPort

                                    Layout.fillWidth: true
                                    Layout.fillHeight: false

                                    placeholderText: qsTr("database server port")
                                }   // TextField

                                TextField
                                {
                                    id: textFieldDatabaseName

                                    Layout.fillWidth: true
                                    Layout.fillHeight: false

                                    placeholderText: qsTr("database name")
                                }   // TextField

                                TextField
                                {
                                    id: textFieldDatabaseUsername

                                    Layout.fillWidth: true
                                    Layout.fillHeight: false

                                    placeholderText: qsTr("database access username")
                                }   // TextField

                                TextField
                                {
                                    id: textFieldDatabasePassword

                                    Layout.fillWidth: true
                                    Layout.fillHeight: false

                                    placeholderText: qsTr("database access password")

                                    echoMode: TextInput.PasswordEchoOnEdit
                                }   // TextField

                                RowLayout
                                {
                                    Layout.fillWidth: true
                                    Layout.fillHeight: false
                                    Layout.alignment: Qt.AlignLeft|Qt.AlignVCenter
                                    spacing: 8

                                    Button
                                    {
                                        Layout.fillWidth: false
                                        Layout.fillHeight: true
                                        Layout.alignment: Qt.AlignLeft|Qt.AlignVCenter

                                        text: qsTr("Test Connection")

                                        onClicked:
                                        {
                                            print(textFieldServerAddress.text+
                                                  textFieldServerPort.text+
                                                  textFieldDatabaseName.text+
                                                  textFieldDatabaseUsername.text+
                                                  textFieldDatabasePassword.text);
                                        }   // onClicked
                                    }   // Button
                                }   // RowLayout
                            }   // ColumnLayout
                        }   // Tab

                        Tab
                        {
                            asynchronous: true
                            title: qsTr("General")

                            Layout.fillWidth: true
                            Layout.fillHeight: true
                            Layout.alignment: Qt.AlignHCenter|Qt.AlignVCenter
                        }   // Tab
                    }   // TabView

                    RowLayout
                    {
                        Layout.fillWidth: true
                        Layout.fillHeight: false
                        Layout.alignment: Qt.AlignLeft|Qt.AlignVCenter
                        spacing: 8

                        Button
                        {
                            Layout.fillWidth: false
                            Layout.fillHeight: true
                            Layout.alignment: Qt.AlignLeft|Qt.AlignVCenter

                            text: qsTr("Apply")

                            onClicked:
                            {
                                print(textFieldServerAddress.text+
                                      textFieldServerPort.text+
                                      textFieldDatabaseName.text+
                                      textFieldDatabaseUsername.text+
                                      textFieldDatabasePassword.text);
                            }   // onClicked
                        }   // Button

                        Button
                        {
                            Layout.fillWidth: false
                            Layout.fillHeight: true
                            Layout.alignment: Qt.AlignLeft|Qt.AlignVCenter

                            text: qsTr("Clear")

                            onClicked:
                            {
                                textFieldServerAddress.text="";
                                textFieldServerPort.text="";
                                textFieldDatabaseName.text="";
                                textFieldDatabaseUsername.text="";
                                textFieldDatabasePassword.text="";
                            }   // onClicked
                        }   // Button
                    }   // RowLayou
                }   // ColumnLayout
            }   // ColumnLayout
        }   // Rectangle
    }   // ColumnLayout
}   // Window

As you can see, I have three Buttons:

1. Test Connection
2. Apply
3. Clear

Now, if I fill values and click on Test Connection Button, the code in handler onClicked() gets executed. However, If I click on Buttons Apply or Clear, I get following error:

ReferenceError: textFieldServerAddress is not defined

Wtf, why do I get this error and how do I get rid of it? As for Buttons names, in Test Connection I test the database connection with entered parameters, in Apply I save database connection parameters into SQLITE database and in Clear I clear all the values in TextField entites.

Answer 1

As from the documentation:

The component scope is the union of the object ids within the component and the component's root object's properties.

Also, we find from here that:

A Tab item inherits from Loader and provides a similar API.

Your item is thus a component scope for itself, with its own rules and visibility. That's because an item loaded by a Loader is not part of the surrounding scope, instead it has a limited access to it (mainly through what is exposed and made available by the Loader itself).

That's why that id is visible from within one button, but it is not from within the others in the tab.
You have to refactor your UI or, at least, to export symbols into an accessible object.