Results 1 to 2 of 2

Thread: How to make outer rectangle clickable if inner elements made are also cliclable.

  1. #1
    Join Date
    Nov 2010
    Posts
    5
    Qt products
    Qt4
    Platforms
    Unix/X11

    Unhappy How to make outer rectangle clickable if inner elements made are also cliclable.

    The problem is that I am not able to figure out how to implement mousearea on outer element if inner elements made by me also use mousearea and do some some action on being clicked. As soon as i apply mousearea on outer rectangle the whole thing becomes unclickable and no action takes place on the click.

    Code for big cell
    Qt Code:
    1. import Qt 4.7
    2.  
    3. /*This is used as a container to the bigger cell in the my recommendation list.*/
    4. Item {
    5. id: bigButton
    6. signal bigTileClicked
    7. property string tipText
    8. property string tipTitle
    9. property string tipId
    10. property string tipStatus
    11. width: 519
    12. height: 308
    13.  
    14. Rectangle
    15. {
    16. id:innerRect
    17. x:0
    18. y:0
    19. /*This is used to display the image of the big cell.*/
    20. Image {
    21. id:bigTile
    22. x:0
    23. y:0
    24. width: 519
    25. height: 308
    26. source: "ui_images/BigCell.png"
    27. opacity: 1
    28. smooth: true
    29.  
    30. /*Here RemindMeCell is used to create button on the big cell. */
    31. RemindMeCell{
    32. id:highlightTile
    33. x:131
    34. y:254
    35. buttonText: "Remind me to do this!"
    36. onClicked: allReminderSlotClass.topRecommendationDetails(bigButton.tipId,buttonText);
    37. }
    38.  
    39. /*Here trash can button is create on the big tile to create Trash can button.*/
    40. TrashCanCell{
    41. id:trashCanTile
    42. x:465
    43. y:254
    44. onClicked:allReminderSlotClass.getClickedTipValueForTipPop(tipId,tipTitle);
    45. }
    46.  
    47. /* This is the text of the of the status of the reminder.*/
    48. Text {
    49. id: stausText
    50. text: bigButton.tipTitle
    51. color: "orange"
    52. x:15
    53. y:5
    54. wrapMode: Text.Wrap
    55. horizontalAlignment: Text.AlignLeft
    56. }
    57.  
    58. /*This is the text for the reminder of the big tile. */
    59. Text {
    60. id: text
    61. text: bigButton.tipText
    62. color: "white"
    63. x:15
    64. y:30
    65. font.pixelSize: 14
    66. font.pointSize:12
    67. width: 500
    68. height: 200
    69. wrapMode: Text.Wrap
    70. horizontalAlignment: Text.AlignLeft
    71. }
    72. /*This is applied on the outer container to make the cell clickable*/
    73.  
    74. }
    75. /*This is applied on the outer container to make the cell clickable*/
    76. MouseArea {
    77. id: bigCellMouseArea
    78. anchors.fill: parent
    79. //anchors.top: innerRect.top
    80. //anchors.bottom: text.top
    81. //anchors.left: highlightTile.left
    82. onClicked: {
    83. allReminderSlotClass.getReminder("big cell");
    84. }
    85. }
    86. }
    87.  
    88. /*This is applied on the outer container to make the cell clickable*/
    89. // MouseArea {
    90. // id: bigCellMouseArea1
    91. // anchors.fill: parent
    92. //// anchors.top: parent.top
    93. //// //anchors.bottom: text.top
    94. //// anchors.left: highlightTile.left
    95. // onClicked: {
    96. // allReminderSlotClass.getReminder("big cell");
    97. // }
    98. // }
    99. }
    To copy to clipboard, switch view to plain text mode 


    Code for PrimaryButton which is also clickable

    Qt Code:
    1. import Qt 4.7
    2.  
    3. Rectangle {
    4. id:mainRect
    5. width: primary_button.width
    6. height: 42
    7.  
    8. FontLoader { id: whitney; name: "Whitney" }
    9. property string tipIdValue
    10. property string buttonText//: "The Quick brown fox Jumped Over the Lazy Dog"
    11. color: "#323232"
    12.  
    13. Rectangle {
    14. id: primary_button
    15.  
    16. //property string text: "The Quick brown fox Jumped Over the Lazy Dog"
    17.  
    18. signal clicked
    19.  
    20. //anchors.centerIn: parent
    21.  
    22. //width: buttonLabel.width + 20
    23. width: {if((buttonLabel.width + 20) < 265)
    24. return 265;
    25. }
    26. height: 42
    27.  
    28. color: parent.color
    29.  
    30. smooth: true
    31.  
    32. // Default state
    33. state: "enabled"
    34.  
    35. Rectangle {
    36.  
    37. id:primary_button_enabled
    38. // width: {if((buttonLabel.width + 20) < 265)
    39. // return 265;
    40. // }
    41. // Create left end cap enabled
    42. Image {
    43. id: left_cap_enabled
    44. source: "ui_images/button_primary_normal_enabled_left_side.png"
    45. anchors.right: parent.left
    46. }
    47.  
    48. // Create center fill enabled
    49. Image {
    50. id: center_fill_enabled
    51. source: "ui_images/button_primary_normal_enabled_center_tile.png"
    52. anchors.left: left_cap_enabled.right
    53. fillMode: Image.Tile
    54. //width: buttonLabel.width + 20
    55. width: {if((buttonLabel.width + 20) < 265)
    56. return 265;
    57. }
    58. }
    59.  
    60. // Create right end cap enabled
    61. Image {
    62. id: right_cap_enabled
    63. source: "ui_images/button_primary_normal_enabled_right_side.png"
    64. anchors.left: center_fill_enabled.right
    65. }
    66.  
    67. }
    68.  
    69. Rectangle {
    70.  
    71. id:primary_button_pressed
    72.  
    73. // Create left end cap pressed
    74. Image {
    75. id: left_cap_pressed
    76. source: "ui_images/button_primary_normal_pressed_left_side.png"
    77. anchors.right: parent.left
    78. }
    79.  
    80. // Create center fill pressed
    81. Image {
    82. id: center_fill_pressed
    83. source: "ui_images/button_primary_normal_pressed_center_tile.png"
    84. anchors.left: left_cap_pressed.right
    85. fillMode: Image.Tile
    86. //width: buttonLabel.width + 20
    87. width: {if((buttonLabel.width + 20) < 265)
    88. return 265;
    89. }
    90. }
    91.  
    92. // Create right end cap pressed
    93. Image {
    94. id: right_cap_pressed
    95. source: "ui_images/button_primary_normal_pressed_right_side.png"
    96. anchors.left: center_fill_pressed.right
    97. }
    98.  
    99. }
    100.  
    101.  
    102. Rectangle {
    103.  
    104. id:primary_button_disabled
    105.  
    106. // Create left end cap disabled
    107. Image {
    108. id: left_cap_disabled
    109. source: "ui_images/button_primary_normal_disabled_left_side.png"
    110. anchors.right: parent.left
    111. }
    112.  
    113. // Create center fill disabled
    114. Image {
    115. id: center_fill_disabled
    116. source: "ui_images/button_primary_normal_disabled_center_tile.png"
    117. anchors.left: left_cap_disabled.right
    118. fillMode: Image.Tile
    119. // width: buttonLabel.width + 20
    120. width: {if((buttonLabel.width + 20) < 265)
    121. return 265;
    122. }
    123. }
    124.  
    125. // Create right end cap disabled
    126. Image {
    127. id: right_cap_disabled
    128. source: "ui_images/button_primary_normal_disabled_right_side.png"
    129. anchors.left: center_fill_disabled.right
    130. }
    131.  
    132. }
    133.  
    134.  
    135. MouseArea {
    136. id: mouseArea
    137. anchors.fill: parent //onClicked: container.clicked()
    138. onPressed: primary_button.state = "pressed"
    139. onReleased: primary_button.state = "enabled"
    140. //onClicked: primary_button.state = "pressed"
    141. onClicked:popUpSlot.clickedDetails(tipIdValue,buttonText) //primary_button.clicked()
    142. }
    143.  
    144. Text {
    145. id: buttonLabel
    146. text: mainRect.buttonText
    147. anchors.centerIn: primary_button
    148. color: "white"
    149. font.family: "Whitney-Medium"
    150. font.pixelSize: 14
    151. //font.capitalization: Font.Capitalize
    152. }
    153.  
    154.  
    155. states: [
    156. State {
    157. name: "enabled"
    158. PropertyChanges { target: primary_button_enabled; visible:true; }
    159. PropertyChanges { target: primary_button_pressed; visible:false; }
    160. PropertyChanges { target: primary_button_disabled; visible:false; }
    161. PropertyChanges { target: buttonLabel; color:"white"; }
    162. PropertyChanges { target: mouseArea; enabled:true; }
    163. },
    164. State {
    165. name: "pressed"
    166. PropertyChanges { target: primary_button_enabled; visible:false; }
    167. PropertyChanges { target: primary_button_pressed; visible:true; }
    168. PropertyChanges { target: primary_button_disabled; visible:false; }
    169. PropertyChanges { target: buttonLabel; color:"white"; }
    170. PropertyChanges { target: mouseArea; enabled:true; }
    171. },
    172. State {
    173. name: "disabled"
    174. PropertyChanges { target: primary_button_enabled; visible:false; }
    175. PropertyChanges { target: primary_button_pressed; visible:false; }
    176. PropertyChanges { target: primary_button_disabled; visible:true; }
    177. PropertyChanges { target: buttonLabel; color:"#797979"; }
    178. PropertyChanges { target: mouseArea; enabled:false; }
    179. }
    180.  
    181. ]
    182.  
    183.  
    184. }
    185.  
    186. }
    To copy to clipboard, switch view to plain text mode 


    Now the problem is that if the code of mousearea which is commented in bigcell code at the bottom, if that is uncommented the buttons 4 of them stop being clicked. Any solutions....

  2. #2
    Join Date
    Oct 2006
    Location
    New Delhi, India
    Posts
    2,467
    Thanks
    8
    Thanked 334 Times in 317 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows

    Default Re: How to make outer rectangle clickable if inner elements made are also cliclable.

    Qt Code:
    1. OuterRect
    2. {
    3.  
    4. MouseArea
    5. {
    6. Rectangle1 { ... MouseArea : {} }
    7. Rectangle2 { ... MouseArea : {} }
    8. }
    9. }
    To copy to clipboard, switch view to plain text mode 

Similar Threads

  1. Make Grid of Rectangle
    By sagirahmed in forum Newbie
    Replies: 1
    Last Post: 8th October 2010, 07:59
  2. Make Grid of Rectangle
    By sagirahmed in forum Qt Programming
    Replies: 1
    Last Post: 8th October 2010, 07:59
  3. How to make a custom qwidget clickable ?
    By ada10 in forum Newbie
    Replies: 2
    Last Post: 1st September 2010, 13:55
  4. Clickable Regions
    By bbdaffy in forum Qt Programming
    Replies: 6
    Last Post: 22nd July 2009, 12:26
  5. Outer join in QSqlRelationalTableModel
    By Banjo in forum Qt Programming
    Replies: 2
    Last Post: 2nd April 2008, 00:19

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.