Results 1 to 5 of 5

Thread: issue loading component with model

  1. #1
    Join Date
    Jun 2016
    Posts
    99
    Thanks
    18
    Thanked 1 Time in 1 Post
    Qt products
    Qt5
    Platforms
    Unix/X11

    Default Re: issue loading component with model

    I have splitView with two rectangles that hold ListViews with two model sets one for items and one for sub-items, I would like the user to press a plus button to display a textArea in the listView to add in new items or sub-Items but keep battling undefined warnings for qml ids (parent/sibling relationships) I'm using state mechanism and a loader/component in the listView its self..... issue with refrencing qml id's being undefined...

    Qt Code:
    1. //---Rect to hold checkList---//
    2. Rectangle {
    3. id: checkListView_rect
    4. z: 1
    5. width: 1350
    6. height: 430
    7. anchors.horizontalCenter: parent.horizontalCenter
    8. anchors.horizontalCenterOffset: 0
    9. anchors.verticalCenter: parent.verticalCenter
    10. anchors.verticalCenterOffset: 230
    11. border{
    12. color: "black"
    13. width: 3
    14. }
    15. layer.enabled: true
    16. layer.effect: DropShadow {
    17. horizontalOffset: 8
    18. verticalOffset: 8
    19. radius: 8.0
    20. samples: 16
    21. color: "#80000000"
    22. source: checkListView_rect
    23. }
    24. //---SplitView for Items & Sub-Items---//
    25. SplitView {
    26. id: checklist_splitView
    27. anchors.margins: 3
    28. anchors.fill:parent
    29. orientation: Qt.Horizontal
    30. //---Items Rectangle---//
    31. Rectangle {
    32. id: itemsRectangle
    33. width: parent.width * 0.5
    34. height: parent.height
    35. Layout.minimumWidth: 350
    36. color: "steelblue"
    37. ScrollView {
    38. id: item_scrollView
    39. anchors.fill:parent
    40. flickableItem.interactive: true
    41. style: cmd_scrollbar_style
    42. GroupBox {
    43. title: qsTr("Items")
    44. anchors.top: parent.top
    45. //---Row layout for editting buttons---//
    46. Row{
    47. id: addRemove_ItemRow
    48. anchors.horizontalCenter: parent.horizontalCenter
    49. height: 50
    50. //---Adds New Item---//
    51. Button {
    52. id: add_item
    53. width: 48
    54. height: 48
    55. anchors.verticalCenter: parent.verticalCenter
    56. onClicked: {
    57. item_scrollView.state = "addItem"
    58. }
    59. style: XToolBtnStyle {
    60. bkg_image:"add.png"
    61. bkg_title: qsTr("Add")
    62. image_size: 32
    63. text_size: 9
    64. text_color: "white"
    65. }
    66. }
    67. //---Delete Item----//
    68. Button {
    69. id: delete_item
    70. width: 48
    71. height: 48
    72. action: deleteItem_action
    73. anchors.verticalCenter: parent.verticalCenter
    74. style: XToolBtnStyle {
    75. bkg_image:"remove.png"
    76. bkg_title: qsTr("Remove")
    77. image_size: 32
    78. text_size: 9
    79. text_color: "white"
    80. }
    81. }
    82. }
    83. }
    84. //---Items listview---//
    85. ListView {
    86. id: itemsListView
    87. anchors.fill: parent
    88. anchors.topMargin: 75
    89. interactive: true
    90. model: itemModel
    91. currentIndex: 0
    92. focus: true
    93. delegate: Item {
    94. id: item_delegate
    95. width: itemsListView.width
    96. height: 50
    97. TextArea {
    98. id: itemTextArea
    99. width: parent.width
    100. height: 50
    101. activeFocusOnPress: true
    102. backgroundVisible: false
    103. readOnly: true
    104. wrapMode: Text.WordWrap
    105. text: qsTr(itemRole + " " + textRole)
    106. MouseArea {
    107. anchors.fill: parent
    108. hoverEnabled: true
    109. onClicked: {
    110. item_delegate.state = "editItem"
    111. }
    112. Keys.onEnterPressed: {
    113. //itemsListView.currentIndex = index;
    114. //checklistUI.updateItems(index);
    115. //checklist_edit.currentItemIndex = index;
    116. }
    117. }
    118. }
    119. states: [
    120. State {
    121. name: "editItem"
    122. PropertyChanges {target: itemTextArea; readOnly: false}
    123. },
    124. State {
    125. name: "addItem"
    126. PropertyChanges{target: addItem_loader; sourceComponent: addItem_textField_component}
    127. AnchorChanges{target: addItemTextArea; anchors { top: itemTextArea.bottom}}
    128. //PropertyChanges {target: addItemTextArea; readOnly: false}
    129. }
    130. ]
    131.  
    132. //---TextField for Adding new Items---//
    133. Component {
    134. id: addItem_textField_component
    135. TextField {
    136. id: addItemTextArea
    137. activeFocusOnPress: true
    138. readOnly: false
    139. MouseArea {
    140. anchors.fill: parent
    141. hoverEnabled: true
    142. onClicked: {
    143. //itemsListView.currentIndex = index;
    144. //checklistUI.updateSubitems(index);
    145. //checklist_edit.currentItemIndex = index;
    146. }
    147. }
    148. }
    149. }
    150.  
    151. //---Displays TextField for adding new Item---//
    152. Loader {
    153. id: addItem_loader
    154. property string filename: ""
    155. width: parent.width
    156. height: 50
    157. sourceComponent: null
    158. anchors.top: parent.bottom
    159. anchors.centerIn: parent
    160. z: 2
    161. }
    162. }
    To copy to clipboard, switch view to plain text mode 

    had to chop up my code a bunch to get it to fit

    Qt Code:
    1. //---SubItem Rectangle---//
    2. Rectangle {
    3. id: subitemsRectangle
    4. width: parent.width * 0.5
    5. height: parent.height
    6. Layout.minimumWidth: 350
    7. color: "lightgrey"
    8. ScrollView {
    9. id: subItem_scrollView
    10. anchors.fill:parent
    11. flickableItem.interactive: true
    12. style: cmd_scrollbar_style
    13. GroupBox {
    14. title: qsTr("Sub-Items")
    15. anchors.top: parent.top
    16. //---Row layout for editting buttons---//
    17. Row{
    18. id: addRemove_subItemRow
    19. anchors.horizontalCenter: parent.horizontalCenter
    20. height: 50
    21. //---Adds New SubItem---//
    22. Button {
    23. id: add_subItem
    24. width: 48
    25. height: 48
    26. anchors.verticalCenter: parent.verticalCenter
    27. onClicked: {
    28. subItem_scrollView.state = "addSubItem"
    29. }
    30. style: XToolBtnStyle {
    31. bkg_image:"add.png"
    32. bkg_title: qsTr("Add")
    33. image_size: 32
    34. text_size: 9
    35. text_color: "white"
    36. }
    37. }
    38. //---Deletes SubItem---//
    39. Button {
    40. id: delete_subItem
    41. width: 48
    42. height: 48
    43. anchors.verticalCenter: parent.verticalCenter
    44. action: deleteSubItem_action
    45. style: XToolBtnStyle {
    46. bkg_image:"remove.png"
    47. bkg_title: qsTr("Remove")
    48. image_size: 32
    49. text_size: 9
    50. text_color: "white"
    51. }
    52. }
    53. }
    54. }
    55. //---Sub Item ListView---//
    56. ListView {
    57. id: subItemsListView
    58. anchors.fill: parent
    59. anchors.topMargin: 75
    60. model: subitemModel
    61. interactive: true
    62. currentIndex: 0
    63. delegate: Item {
    64. id: subItem_delegate
    65. width: subItemsListView.width
    66. height: 100
    67. TextArea {
    68. id: subItemTextArea
    69. width: parent.width
    70. height: 100
    71. backgroundVisible: false
    72. readOnly: true
    73. wrapMode: Text.WordWrap
    74. text: qsTr(subitemRole + " " + subitemTextRole)
    75. MouseArea {
    76. anchors.fill: parent
    77. hoverEnabled: true
    78. onClicked: {
    79. subItem_delegate.state = "editSubItem"
    80. }
    81. Keys.onEnterPressed: {
    82. //subItemsListView.currentIndex = index;
    83. //checklistUI.updateSubitems(index);
    84. //checklist_edit.subItemIndex = index;
    85. }
    86. }
    87. }
    88. states: [
    89. State {
    90. name: "editSubItem"
    91. PropertyChanges {target: subItemTextArea; readOnly: false}
    92. },
    93. State {
    94. name: "addSubItem"
    95. PropertyChanges{target: addSubItem_loader; sourceComponent: addSubItem_textField_component;}
    96. AnchorChanges{target: addSubItemTextArea; anchors { top: subItemTextArea.bottom}}
    97. //PropertyChanges {target: addSubItemTextArea; readOnly: false}
    98. }
    99. ]
    100.  
    101. //---TextField for Adding new Sub-Items---//
    102. Component {
    103. id: addSubItem_textField_component
    104. TextField {
    105. id: addSubItemTextArea
    106. activeFocusOnPress: true
    107. readOnly: false
    108. MouseArea {
    109. anchors.fill: parent
    110. hoverEnabled: true
    111. onClicked: {
    112. itemsListView.currentIndex = index;
    113. checklistUI.updateSubitems(index);
    114. checklist_edit.currentItemIndex = index;
    115. }
    116. }
    117. }
    118. }
    119.  
    120. //---Displays TextField for adding new Sub-Item---//
    121. Loader {
    122. id: addSubItem_loader
    123. property string filename: ""
    124. width: parent.width
    125. height: 50
    126. anchors.top: parent.bottom
    127. anchors.centerIn: parent
    128. sourceComponent: null
    129. z: 2
    130. }
    131. }
    To copy to clipboard, switch view to plain text mode 

  2. #2
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: issue loading component with model

    I had a cursory look, one thing that is problematic is the attempt to reference an id from inside a Component.

    A Component is a bit like a separate file, id values from within it are not "visible" to the place where the component is being used.
    After all, there could be many instances of the component.

    So instead of referring to e.g. "addItemTextArea" you would need to refer to the loader's "item".

    Cheers,
    _

  3. #3
    Join Date
    Jun 2016
    Posts
    99
    Thanks
    18
    Thanked 1 Time in 1 Post
    Qt products
    Qt5
    Platforms
    Unix/X11

    Default Re: issue loading component with model

    Thats what I thought but wasnt sure thanks for the help

  4. #4
    Join Date
    Jun 2016
    Posts
    99
    Thanks
    18
    Thanked 1 Time in 1 Post
    Qt products
    Qt5
    Platforms
    Unix/X11

    Default Re: issue loading component with model

    anda_skoa,

    I understand why referencing the id of the component won't work and you confirmed my suppositions on it. However instead of referencing the id of the textField in the component you suggest to use the loader item Property? its a read only property so was wondering if you could enlighten me on how the item property of the loader would work... as the documentation has a one sentence description on it...

    do I use the name of the loader (id) and then use the item to find out what top level qml component is loaded at the time ? addSubItem_loader.item how do I access the textField in that component using the item property I'm not sure how do this

    Qt Code:
    1. ScrollView {
    2. id: item_scrollView
    3. anchors.fill:parent
    4. flickableItem.interactive: true
    5. style: cmd_scrollbar_style
    6. GroupBox {
    7. title: qsTr("Items")
    8. anchors.top: parent.top
    9. //---Row layout for editting buttons---//
    10. Row{
    11. id: addRemove_ItemRow
    12. anchors.horizontalCenter: parent.horizontalCenter
    13. height: 50
    14. //---Adds New Item---//
    15. Button {
    16. id: add_item
    17. width: 48
    18. height: 48
    19. anchors.verticalCenter: parent.verticalCenter
    20. onClicked: {
    21. addItem_loader.item.state = "addItem"
    22. item_delegate.state = "addItem"
    23. }
    24. style: XToolBtnStyle {
    25. bkg_image:"add.png"
    26. bkg_title: qsTr("Add")
    27. image_size: 32
    28. text_size: 9
    29. text_color: "white"
    30. }
    31. }
    32. //---Delete Item----//
    33. Button {
    34. id: delete_item
    35. width: 48
    36. height: 48
    37. action: deleteItem_action
    38. anchors.verticalCenter: parent.verticalCenter
    39. style: XToolBtnStyle {
    40. bkg_image:"remove.png"
    41. bkg_title: qsTr("Remove")
    42. image_size: 32
    43. text_size: 9
    44. text_color: "white"
    45. }
    46. }
    47. //---Move Items Position in List---//
    48. Button {
    49. id: moveItemUP
    50. width: 50
    51. height: 45
    52. Image {
    53. anchors.horizontalCenter: parent.horizontalCenter
    54. anchors.top: parent.top
    55. source: "up_arrow.png"
    56. sourceSize.width: 24
    57. sourceSize.height: 24
    58. Text {
    59. anchors.top: parent.bottom
    60. anchors.horizontalCenter: parent.horizontalCenter
    61. text: "Item"
    62. font.pixelSize: 9
    63. }
    64. }
    65. onClicked: checklistUI.moveItemUp(itemsListView.currentIndex)
    66. }
    67. Button {
    68. id: moveItemDown
    69. width: 50
    70. height: 45
    71. enabled: false
    72. Image {
    73. anchors.horizontalCenter: parent.horizontalCenter
    74. anchors.top: parent.top
    75. source: "down_arrow.png"
    76. sourceSize.width: 24
    77. sourceSize.height: 24
    78. Text {
    79. anchors.top: parent.bottom
    80. anchors.horizontalCenter: parent.horizontalCenter
    81. text: "Item"
    82. font.pixelSize: 9
    83. }
    84. }
    85. //onClicked: checklistUI.moveItemDown(itemsListView.currentIndex)
    86. }
    87. }
    88. }
    89. //---Items listview---//
    90. ListView {
    91. id: itemsListView
    92. anchors.fill: parent
    93. anchors.topMargin: 75
    94. interactive: true
    95. model: itemModel
    96. currentIndex: 0
    97. focus: true
    98. delegate: item_component
    99. highlight: item_highlight
    100. }
    101. }
    To copy to clipboard, switch view to plain text mode 

    Qt Code:
    1. //---Item Delegate Component---//
    2. Component{
    3. id: item_component
    4. Item {
    5. id: item_delegate
    6. width: itemsListView.width
    7. height: 50
    8. TextArea {
    9. id: item_text
    10. width: parent.width
    11. //height: calcHeight(item_metrics.boundingRect.height + 25)
    12. //contentHeight: 50
    13. height: 50
    14. backgroundVisible: false
    15. readOnly: true
    16. wrapMode: Text.WordWrap
    17. text: item_metrics.text
    18. activeFocusOnPress: true
    19.  
    20. //---JavaScript function calulates Text Field height for display---//
    21. function calcHeight(text_height){
    22. if(text_height < 350)
    23. return 350
    24. else if(text_height > 550)
    25. return 550
    26. else
    27. return text_height
    28. }
    29.  
    30. //---Changes height of displayed text based off amount of text to display---//
    31. //onItemChanged: {
    32. //item_metrics.text = textRole
    33. //item_text.height = calcHeight(item_metrics.boundingRect.height + 25)
    34. //}
    35.  
    36. //---Sets properties & formatting for text item below---//
    37. TextMetrics{
    38. id:item_metrics
    39. font.pointSize: 10
    40. text: qsTr(itemRole + " " + textRole)
    41. }
    42. }
    43. MouseArea {
    44. anchors.fill: parent
    45. hoverEnabled: true
    46. onClicked: {
    47. addItem_loader.state = "editItem"
    48. itemsListView.currentIndex = index;
    49. //---updates sub-item model for display---//
    50. checklistUI.updateSubitems(index);
    51. checklist_edit.currentItemIndex = index;
    52. }
    53. Component.onCompleted: {
    54. addItem_loader.state = "editItem"
    55. }
    56.  
    57. Keys.onReturnPressed: {
    58. //checklistUI.updateItems(index);
    59. }
    60. }
    61.  
    62. //---Displays TextField for adding new Item---//
    63. Loader {
    64. id: addItem_loader
    65. property string filename: ""
    66. width: parent.width
    67. height: 50
    68. sourceComponent: null
    69. anchors.top: parent.bottom
    70. anchors.centerIn: parent
    71. z: 2
    72. //item: addItem_textField
    73.  
    74. states: [
    75. State {
    76. name: "editItem"
    77. PropertyChanges {target: item_text; readOnly: false}
    78. },
    79. State {
    80. name: "addItem"
    81. PropertyChanges{target: addItem_loader; sourceComponent: addItem_textField}
    82. AnchorChanges{target: addItemTextArea; anchors { top: item_text.bottom}}
    83. }
    84. ]
    85.  
    86. //---TextField for Adding new Items---//
    87. Component {
    88. id: addItem_textField
    89. TextField {
    90. id: addItemTextArea
    91. activeFocusOnPress: true
    92. readOnly: false
    93. MouseArea {
    94. anchors.fill: parent
    95. hoverEnabled: true
    96. onClicked: {
    97. //itemsListView.currentIndex = index;
    98. //checklistUI.updateSubitems(index);
    99. //checklist_edit.currentItemIndex = index;
    100. }
    101. }
    102. }
    103. }
    104. }
    105. }
    106. }
    To copy to clipboard, switch view to plain text mode 
    Last edited by jfinn88; 11th January 2017 at 20:08.

  5. #5
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: issue loading component with model

    The Loader's item can be used a bit like and id, i.e. to refere to the loaded item

    For example, in a non-loader situation you might have this
    Qt Code:
    1. Text {
    2. text: input.text
    3. }
    4. TextField {
    5. id: input
    6. }
    To copy to clipboard, switch view to plain text mode 

    When using a Loader for the "input" it would look like this
    Qt Code:
    1. Text {
    2. text: loader.item ? loader.item.text : ""
    3. }
    4. Loader {
    5. id: loader
    6. }
    To copy to clipboard, switch view to plain text mode 
    I.e. instead of "input" this now refers to "loader.item". With a check for "item" actually existing before accessing it as it will not always be present.

    Btw, in your case, where your Loader component is simple, you could avoid using the loader and just set the item visible/invisible as needed.

    Cheers,
    _

Similar Threads

  1. Replies: 6
    Last Post: 28th September 2016, 17:58
  2. Replies: 1
    Last Post: 8th October 2015, 16:27
  3. Loading 3d model
    By webmagic in forum Newbie
    Replies: 4
    Last Post: 23rd October 2010, 05:07
  4. Model loading
    By iksarp in forum Newbie
    Replies: 5
    Last Post: 2nd June 2010, 19:38
  5. QT Jpeg, Gif, Bmp loading issue
    By meraj ansari in forum Qt Programming
    Replies: 7
    Last Post: 21st May 2010, 09:33

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.