PDA

View Full Version : How to make outer rectangle clickable if inner elements made are also cliclable.



kunal269
10th December 2010, 08:36
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



import Qt 4.7

/*This is used as a container to the bigger cell in the my recommendation list.*/
Item {
id: bigButton
signal bigTileClicked
property string tipText
property string tipTitle
property string tipId
property string tipStatus
width: 519
height: 308

Rectangle
{
id:innerRect
x:0
y:0
/*This is used to display the image of the big cell.*/
Image {
id:bigTile
x:0
y:0
width: 519
height: 308
source: "ui_images/BigCell.png"
opacity: 1
smooth: true

/*Here RemindMeCell is used to create button on the big cell. */
RemindMeCell{
id:highlightTile
x:131
y:254
buttonText: "Remind me to do this!"
onClicked: allReminderSlotClass.topRecommendationDetails(bigB utton.tipId,buttonText);
}

/*Here trash can button is create on the big tile to create Trash can button.*/
TrashCanCell{
id:trashCanTile
x:465
y:254
onClicked:allReminderSlotClass.getClickedTipValueF orTipPop(tipId,tipTitle);
}

/* This is the text of the of the status of the reminder.*/
Text {
id: stausText
text: bigButton.tipTitle
color: "orange"
x:15
y:5
wrapMode: Text.Wrap
horizontalAlignment: Text.AlignLeft
}

/*This is the text for the reminder of the big tile. */
Text {
id: text
text: bigButton.tipText
color: "white"
x:15
y:30
font.pixelSize: 14
font.pointSize:12
width: 500
height: 200
wrapMode: Text.Wrap
horizontalAlignment: Text.AlignLeft
}
/*This is applied on the outer container to make the cell clickable*/

}
/*This is applied on the outer container to make the cell clickable*/
MouseArea {
id: bigCellMouseArea
anchors.fill: parent
//anchors.top: innerRect.top
//anchors.bottom: text.top
//anchors.left: highlightTile.left
onClicked: {
allReminderSlotClass.getReminder("big cell");
}
}
}

/*This is applied on the outer container to make the cell clickable*/
// MouseArea {
// id: bigCellMouseArea1
// anchors.fill: parent
//// anchors.top: parent.top
//// //anchors.bottom: text.top
//// anchors.left: highlightTile.left
// onClicked: {
// allReminderSlotClass.getReminder("big cell");
// }
// }
}




Code for PrimaryButton which is also clickable




import Qt 4.7

Rectangle {
id:mainRect
width: primary_button.width
height: 42

FontLoader { id: whitney; name: "Whitney" }
property string tipIdValue
property string buttonText//: "The Quick brown fox Jumped Over the Lazy Dog"
color: "#323232"

Rectangle {
id: primary_button

//property string text: "The Quick brown fox Jumped Over the Lazy Dog"

signal clicked

//anchors.centerIn: parent

//width: buttonLabel.width + 20
width: {if((buttonLabel.width + 20) < 265)
return 265;
}
height: 42

color: parent.color

smooth: true

// Default state
state: "enabled"

Rectangle {

id:primary_button_enabled
// width: {if((buttonLabel.width + 20) < 265)
// return 265;
// }
// Create left end cap enabled
Image {
id: left_cap_enabled
source: "ui_images/button_primary_normal_enabled_left_side.png"
anchors.right: parent.left
}

// Create center fill enabled
Image {
id: center_fill_enabled
source: "ui_images/button_primary_normal_enabled_center_tile.png"
anchors.left: left_cap_enabled.right
fillMode: Image.Tile
//width: buttonLabel.width + 20
width: {if((buttonLabel.width + 20) < 265)
return 265;
}
}

// Create right end cap enabled
Image {
id: right_cap_enabled
source: "ui_images/button_primary_normal_enabled_right_side.png"
anchors.left: center_fill_enabled.right
}

}

Rectangle {

id:primary_button_pressed

// Create left end cap pressed
Image {
id: left_cap_pressed
source: "ui_images/button_primary_normal_pressed_left_side.png"
anchors.right: parent.left
}

// Create center fill pressed
Image {
id: center_fill_pressed
source: "ui_images/button_primary_normal_pressed_center_tile.png"
anchors.left: left_cap_pressed.right
fillMode: Image.Tile
//width: buttonLabel.width + 20
width: {if((buttonLabel.width + 20) < 265)
return 265;
}
}

// Create right end cap pressed
Image {
id: right_cap_pressed
source: "ui_images/button_primary_normal_pressed_right_side.png"
anchors.left: center_fill_pressed.right
}

}


Rectangle {

id:primary_button_disabled

// Create left end cap disabled
Image {
id: left_cap_disabled
source: "ui_images/button_primary_normal_disabled_left_side.png"
anchors.right: parent.left
}

// Create center fill disabled
Image {
id: center_fill_disabled
source: "ui_images/button_primary_normal_disabled_center_tile.png"
anchors.left: left_cap_disabled.right
fillMode: Image.Tile
// width: buttonLabel.width + 20
width: {if((buttonLabel.width + 20) < 265)
return 265;
}
}

// Create right end cap disabled
Image {
id: right_cap_disabled
source: "ui_images/button_primary_normal_disabled_right_side.png"
anchors.left: center_fill_disabled.right
}

}


MouseArea {
id: mouseArea
anchors.fill: parent //onClicked: container.clicked()
onPressed: primary_button.state = "pressed"
onReleased: primary_button.state = "enabled"
//onClicked: primary_button.state = "pressed"
onClicked:popUpSlot.clickedDetails(tipIdValue,butt onText) //primary_button.clicked()
}

Text {
id: buttonLabel
text: mainRect.buttonText
anchors.centerIn: primary_button
color: "white"
font.family: "Whitney-Medium"
font.pixelSize: 14
//font.capitalization: Font.Capitalize
}


states: [
State {
name: "enabled"
PropertyChanges { target: primary_button_enabled; visible:true; }
PropertyChanges { target: primary_button_pressed; visible:false; }
PropertyChanges { target: primary_button_disabled; visible:false; }
PropertyChanges { target: buttonLabel; color:"white"; }
PropertyChanges { target: mouseArea; enabled:true; }
},
State {
name: "pressed"
PropertyChanges { target: primary_button_enabled; visible:false; }
PropertyChanges { target: primary_button_pressed; visible:true; }
PropertyChanges { target: primary_button_disabled; visible:false; }
PropertyChanges { target: buttonLabel; color:"white"; }
PropertyChanges { target: mouseArea; enabled:true; }
},
State {
name: "disabled"
PropertyChanges { target: primary_button_enabled; visible:false; }
PropertyChanges { target: primary_button_pressed; visible:false; }
PropertyChanges { target: primary_button_disabled; visible:true; }
PropertyChanges { target: buttonLabel; color:"#797979"; }
PropertyChanges { target: mouseArea; enabled:false; }
}

]


}

}




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

aamer4yu
29th December 2010, 15:53
OuterRect
{

MouseArea
{
Rectangle1 { ... MouseArea : {} }
Rectangle2 { ... MouseArea : {} }
}
}