DLabonte
15th January 2018, 04:53
Good evening,
my question relates to a rather simple idea, QML object parent and how their propeties are used by children.
In my application, I am using TabView to walk thru the different screen/forms. This is working well so far. I needed to added a new Tab in the existing TabView, and part of the content of this new tab is another TabView.
And this is where my problems start. Part of the QML declaration is listed here
property var controlWindow: Window {
id: mainWindow
visible: true
x: 0
y: 0
width: 1280
height: (800 + 1) // Addressing the screen flicker related to the Combobox elements
...
TabView {
id: tabView
z: -1
anchors.fill: parent
anchors.topMargin: 40
frameVisible: false
Layout.minimumWidth: 1280
Layout.minimumHeight: 800
Layout.preferredWidth: 1280
Layout.preferredHeight: 800
Component.onCompleted: {
console.log( "tabView.onCompleted, visible: ", visible, ", enabled: ", enabled)
console.log( "x: ", x, ", y: ", y, ", width: ", width, ", height: ", height, ", parent width: ", parent.width, ", parent height: ", parent.height)
}
Tab {
id: systemConfigTab
title: qsTr( "System Management")
source: "systemConfig.qml"
}
Tab {
id: clientTab
title: qsTr( "Client")
source: "clientForm.qml"
}
...
}
}
The content of systemConfig.qml is defined as follows:
ScrollView {
id: systemConfigItem
Item {
x: 44
y: 31
width: 818
height: 630
TabView {
id: systemConfigTabView
width: systemConfigItem.width
height: systemConfigItem.height
z: -1
anchors.fill: parent
Layout.minimumWidth: systemConfigItem.width
Layout.minimumHeight: systemConfigItem.height
Layout.preferredWidth: systemConfigItem.width
Layout.preferredHeight: systemConfigItem.height
frameVisible: true // the TabView frame is visible to get a visual reference; otherwise should be false
Tab {
id: backupTab
title: qsTr( "Backup")
source: "backupForm.qml"
}
Tab {
id: userManagementTab
title: qsTr( "User Management")
source: "userManagementForm.qml"
}
Component.onCompleted: {
console.log( "tabView.onCompleted, visible: ", visible, ", enabled: ", enabled)
console.log( "x: ", x, ", y: ", y, ", width: ", width, ", height: ", height, ", parent width: ", parent.width, ", parent height: ", parent.height)
}
}
}
}
Finally, a partial definition of the content of userManagementForm.qml is as follow:
ScrollView {
id: userManagementView
Component.onCompleted: {
console.log( "userManagementView.ScrollView.Component.onComplete d(): parent width: ", parent.width, ", parent height: ", parent.height)
console.log( "width: ", width, ", height: ", height)
}
Item {
id: userManagement
anchors.left: parent.left
anchors.leftMargin: 8
anchors.top: parent.top
anchors.topMargin: 8
Component.onCompleted: {
console.log( "userManagement.Item.Component.onCompleted(): parent width: ", parent.width, ", parent height: ", parent.height)
console.log( "width: ", width, ", height: ", height, ", horizScaleFactor:", horizScaleFactor, ", vertScaleFactor: ", vertScaleFactor)
console.log( "userManagementView.width: ", userManagementView.width, ", userManagementView.height: ", userManagementView.height)
}
SplitView {
id: userMgmtSplitView
width: userManagement.width
height: userManagement.height
orientation: Qt.Horizontal
z: 2
Component.onCompleted: {
console.log( "userMgmtSplitView.SplitView.Component.onCompleted( ): visible: ", visible, ", enabled: ", enabled)
console.log( "width: ", width, ", height: ", height, ", parent width: ", parent.width, ", parent height: ", parent.height)
}
Item {
id: userMgmtItem1
width: ((parent.width / 3) - 20) * horizScaleFactor
height: (parent.height - 20) * vertScaleFactor //200
Layout.maximumWidth: ((parent.width / 3) - 20) * horizScaleFactor
Component.onCompleted: {
console.log( "userMgmtSplitView.userMgmtItem1.Component.onComple ted(): visible: ", visible, ", enabled: ", enabled)
console.log( "width: ", width, ", height: ", height, ", parent width: ", parent.width, ", parent height: ", parent.height)
}
...
}
...
}
}
}
In this phase of development, I am using Component.onCompleted() to verify the QML attributes. The clientTab, which is part of the original code, is still displayed correctly
Running the code, the following is reported:
qml: tabView.onCompleted, visible: true , enabled: true
qml: x: 0 , y: 40 , width: 0 , height: -40 , parent width: 0 , parent height: 0
qml: clientTab.ScrollView.onCompleted, visible: true , enabled: true
qml: x: 0 , y: 0 , width: 1278 , height: 736 , parent width: 1278 , parent height: 736
qml: systemConfigTabView.onCompleted(): visible: true , enabled: true
qml: x: 0 , y: 0 , width: 818 , height: 630 , parent width: 818 , parent height: 630
qml: backupView.ScrollView.onCompleted(): parent width: 818 , parent height: 607
qml: width: 818 , height: 607
qml: userManagementView.ScrollView.Component.onComplete d(): parent width: 818 , parent height: 607
qml: width: 818 , height: 607
qml: userManagement.Item.Component.onCompleted(): parent width: 0 , parent height: 0
qml: width: 0 , height: 0
qml: userManagementView.width: 818 , userManagementView.height: 607
qml: userMgmtSplitView.operatorInfo.Component.onComplet ed(): visible: false , enabled: true
qml: width: -20 , height: 0 , parent width: 0 , parent height: 0
qml: userManagementForm.RowLayout.Component.onCompleted (): visible: false , enabled: true
qml: width: 136 , height: 28 , parent width: -20 , parent height: 0
qml: userMgmtSplitView.userMgmtItem1.Component.onComple ted(): visible: false , enabled: true
qml: width: -20 , height: -20 , parent width: 0 , parent height: 0
systemConfigTabView is a child of Item (in systemConfigItem), and the reported width and height attributes match its parent.
However, userManagement is a child of userManagementView, yet the reported parent and object width and height are 0.
The same is true for other QML elements in the rest of the declaration in the file.
What am I missing? The results are the same if I replace ScrollView by Item in userManagementForm.qml. Isn't it possible to have a TabView within a Tab?
Thanks in advance,
Daniel
my question relates to a rather simple idea, QML object parent and how their propeties are used by children.
In my application, I am using TabView to walk thru the different screen/forms. This is working well so far. I needed to added a new Tab in the existing TabView, and part of the content of this new tab is another TabView.
And this is where my problems start. Part of the QML declaration is listed here
property var controlWindow: Window {
id: mainWindow
visible: true
x: 0
y: 0
width: 1280
height: (800 + 1) // Addressing the screen flicker related to the Combobox elements
...
TabView {
id: tabView
z: -1
anchors.fill: parent
anchors.topMargin: 40
frameVisible: false
Layout.minimumWidth: 1280
Layout.minimumHeight: 800
Layout.preferredWidth: 1280
Layout.preferredHeight: 800
Component.onCompleted: {
console.log( "tabView.onCompleted, visible: ", visible, ", enabled: ", enabled)
console.log( "x: ", x, ", y: ", y, ", width: ", width, ", height: ", height, ", parent width: ", parent.width, ", parent height: ", parent.height)
}
Tab {
id: systemConfigTab
title: qsTr( "System Management")
source: "systemConfig.qml"
}
Tab {
id: clientTab
title: qsTr( "Client")
source: "clientForm.qml"
}
...
}
}
The content of systemConfig.qml is defined as follows:
ScrollView {
id: systemConfigItem
Item {
x: 44
y: 31
width: 818
height: 630
TabView {
id: systemConfigTabView
width: systemConfigItem.width
height: systemConfigItem.height
z: -1
anchors.fill: parent
Layout.minimumWidth: systemConfigItem.width
Layout.minimumHeight: systemConfigItem.height
Layout.preferredWidth: systemConfigItem.width
Layout.preferredHeight: systemConfigItem.height
frameVisible: true // the TabView frame is visible to get a visual reference; otherwise should be false
Tab {
id: backupTab
title: qsTr( "Backup")
source: "backupForm.qml"
}
Tab {
id: userManagementTab
title: qsTr( "User Management")
source: "userManagementForm.qml"
}
Component.onCompleted: {
console.log( "tabView.onCompleted, visible: ", visible, ", enabled: ", enabled)
console.log( "x: ", x, ", y: ", y, ", width: ", width, ", height: ", height, ", parent width: ", parent.width, ", parent height: ", parent.height)
}
}
}
}
Finally, a partial definition of the content of userManagementForm.qml is as follow:
ScrollView {
id: userManagementView
Component.onCompleted: {
console.log( "userManagementView.ScrollView.Component.onComplete d(): parent width: ", parent.width, ", parent height: ", parent.height)
console.log( "width: ", width, ", height: ", height)
}
Item {
id: userManagement
anchors.left: parent.left
anchors.leftMargin: 8
anchors.top: parent.top
anchors.topMargin: 8
Component.onCompleted: {
console.log( "userManagement.Item.Component.onCompleted(): parent width: ", parent.width, ", parent height: ", parent.height)
console.log( "width: ", width, ", height: ", height, ", horizScaleFactor:", horizScaleFactor, ", vertScaleFactor: ", vertScaleFactor)
console.log( "userManagementView.width: ", userManagementView.width, ", userManagementView.height: ", userManagementView.height)
}
SplitView {
id: userMgmtSplitView
width: userManagement.width
height: userManagement.height
orientation: Qt.Horizontal
z: 2
Component.onCompleted: {
console.log( "userMgmtSplitView.SplitView.Component.onCompleted( ): visible: ", visible, ", enabled: ", enabled)
console.log( "width: ", width, ", height: ", height, ", parent width: ", parent.width, ", parent height: ", parent.height)
}
Item {
id: userMgmtItem1
width: ((parent.width / 3) - 20) * horizScaleFactor
height: (parent.height - 20) * vertScaleFactor //200
Layout.maximumWidth: ((parent.width / 3) - 20) * horizScaleFactor
Component.onCompleted: {
console.log( "userMgmtSplitView.userMgmtItem1.Component.onComple ted(): visible: ", visible, ", enabled: ", enabled)
console.log( "width: ", width, ", height: ", height, ", parent width: ", parent.width, ", parent height: ", parent.height)
}
...
}
...
}
}
}
In this phase of development, I am using Component.onCompleted() to verify the QML attributes. The clientTab, which is part of the original code, is still displayed correctly
Running the code, the following is reported:
qml: tabView.onCompleted, visible: true , enabled: true
qml: x: 0 , y: 40 , width: 0 , height: -40 , parent width: 0 , parent height: 0
qml: clientTab.ScrollView.onCompleted, visible: true , enabled: true
qml: x: 0 , y: 0 , width: 1278 , height: 736 , parent width: 1278 , parent height: 736
qml: systemConfigTabView.onCompleted(): visible: true , enabled: true
qml: x: 0 , y: 0 , width: 818 , height: 630 , parent width: 818 , parent height: 630
qml: backupView.ScrollView.onCompleted(): parent width: 818 , parent height: 607
qml: width: 818 , height: 607
qml: userManagementView.ScrollView.Component.onComplete d(): parent width: 818 , parent height: 607
qml: width: 818 , height: 607
qml: userManagement.Item.Component.onCompleted(): parent width: 0 , parent height: 0
qml: width: 0 , height: 0
qml: userManagementView.width: 818 , userManagementView.height: 607
qml: userMgmtSplitView.operatorInfo.Component.onComplet ed(): visible: false , enabled: true
qml: width: -20 , height: 0 , parent width: 0 , parent height: 0
qml: userManagementForm.RowLayout.Component.onCompleted (): visible: false , enabled: true
qml: width: 136 , height: 28 , parent width: -20 , parent height: 0
qml: userMgmtSplitView.userMgmtItem1.Component.onComple ted(): visible: false , enabled: true
qml: width: -20 , height: -20 , parent width: 0 , parent height: 0
systemConfigTabView is a child of Item (in systemConfigItem), and the reported width and height attributes match its parent.
However, userManagement is a child of userManagementView, yet the reported parent and object width and height are 0.
The same is true for other QML elements in the rest of the declaration in the file.
What am I missing? The results are the same if I replace ScrollView by Item in userManagementForm.qml. Isn't it possible to have a TabView within a Tab?
Thanks in advance,
Daniel