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

Qt Code:
  1. property var controlWindow: Window {
  2. id: mainWindow
  3.  
  4. visible: true
  5.  
  6. x: 0
  7. y: 0
  8. width: 1280
  9. height: (800 + 1) // Addressing the screen flicker related to the Combobox elements
  10.  
  11. ...
  12.  
  13. TabView {
  14. id: tabView
  15.  
  16. z: -1
  17. anchors.fill: parent
  18. anchors.topMargin: 40
  19.  
  20. frameVisible: false
  21.  
  22. Layout.minimumWidth: 1280
  23. Layout.minimumHeight: 800
  24. Layout.preferredWidth: 1280
  25. Layout.preferredHeight: 800
  26. Component.onCompleted: {
  27. console.log( "tabView.onCompleted, visible: ", visible, ", enabled: ", enabled)
  28. console.log( "x: ", x, ", y: ", y, ", width: ", width, ", height: ", height, ", parent width: ", parent.width, ", parent height: ", parent.height)
  29. }
  30. Tab {
  31. id: systemConfigTab
  32. title: qsTr( "System Management")
  33. source: "systemConfig.qml"
  34. }
  35. Tab {
  36. id: clientTab
  37. title: qsTr( "Client")
  38. source: "clientForm.qml"
  39. }
  40. ...
  41. }
  42. }
To copy to clipboard, switch view to plain text mode 
The content of systemConfig.qml is defined as follows:

Qt Code:
  1. ScrollView {
  2.  
  3. id: systemConfigItem
  4.  
  5. Item {
  6. x: 44
  7. y: 31
  8. width: 818
  9. height: 630
  10.  
  11. TabView {
  12. id: systemConfigTabView
  13.  
  14. width: systemConfigItem.width
  15. height: systemConfigItem.height
  16. z: -1
  17.  
  18. anchors.fill: parent
  19.  
  20. Layout.minimumWidth: systemConfigItem.width
  21. Layout.minimumHeight: systemConfigItem.height
  22. Layout.preferredWidth: systemConfigItem.width
  23. Layout.preferredHeight: systemConfigItem.height
  24.  
  25. frameVisible: true // the TabView frame is visible to get a visual reference; otherwise should be false
  26.  
  27. Tab {
  28. id: backupTab
  29. title: qsTr( "Backup")
  30. source: "backupForm.qml"
  31. }
  32.  
  33. Tab {
  34. id: userManagementTab
  35. title: qsTr( "User Management")
  36. source: "userManagementForm.qml"
  37. }
  38.  
  39. Component.onCompleted: {
  40. console.log( "tabView.onCompleted, visible: ", visible, ", enabled: ", enabled)
  41. console.log( "x: ", x, ", y: ", y, ", width: ", width, ", height: ", height, ", parent width: ", parent.width, ", parent height: ", parent.height)
  42. }
  43. }
  44. }
  45. }
To copy to clipboard, switch view to plain text mode 
Finally, a partial definition of the content of userManagementForm.qml is as follow:

Qt Code:
  1. ScrollView {
  2.  
  3. id: userManagementView
  4. Component.onCompleted: {
  5. console.log( "userManagementView.ScrollView.Component.onCompleted(): parent width: ", parent.width, ", parent height: ", parent.height)
  6. console.log( "width: ", width, ", height: ", height)
  7. }
  8.  
  9. Item {
  10. id: userManagement
  11.  
  12. anchors.left: parent.left
  13. anchors.leftMargin: 8
  14. anchors.top: parent.top
  15. anchors.topMargin: 8
  16.  
  17. Component.onCompleted: {
  18. console.log( "userManagement.Item.Component.onCompleted(): parent width: ", parent.width, ", parent height: ", parent.height)
  19. console.log( "width: ", width, ", height: ", height, ", horizScaleFactor:", horizScaleFactor, ", vertScaleFactor: ", vertScaleFactor)
  20. console.log( "userManagementView.width: ", userManagementView.width, ", userManagementView.height: ", userManagementView.height)
  21. }
  22.  
  23. SplitView {
  24. id: userMgmtSplitView
  25. width: userManagement.width
  26. height: userManagement.height
  27.  
  28. orientation: Qt.Horizontal
  29. z: 2
  30.  
  31. Component.onCompleted: {
  32. console.log( "userMgmtSplitView.SplitView.Component.onCompleted(): visible: ", visible, ", enabled: ", enabled)
  33. console.log( "width: ", width, ", height: ", height, ", parent width: ", parent.width, ", parent height: ", parent.height)
  34. }
  35.  
  36. Item {
  37. id: userMgmtItem1
  38. width: ((parent.width / 3) - 20) * horizScaleFactor
  39. height: (parent.height - 20) * vertScaleFactor //200
  40.  
  41. Layout.maximumWidth: ((parent.width / 3) - 20) * horizScaleFactor
  42.  
  43. Component.onCompleted: {
  44. console.log( "userMgmtSplitView.userMgmtItem1.Component.onCompleted(): visible: ", visible, ", enabled: ", enabled)
  45. console.log( "width: ", width, ", height: ", height, ", parent width: ", parent.width, ", parent height: ", parent.height)
  46. }
  47. ...
  48. }
  49. ...
  50. }
  51. }
  52. }
To copy to clipboard, switch view to plain text mode 
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