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