How to use a Flickable inside a Flipable

This article may require cleanup to meet the Qt Wiki's quality standards. Reason: Auto-imported from ExpressionEngine. Please improve this article if you can. Remove the {{cleanup}} tag and add this page to Updated pages list after it's clean.

In a QtQuick application I'm writing I need a Flipable that has Flickable objects on its front and back. My solution is to use Press-and-Hold mouse events to toggle on and off the flipping feature of the Flipable. With flipping disabled, the Flickable objects can receive their flicking events. I use another Press-and-Hold mouse event on one of the Flickables to re-enable flipping.

// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1

Rectangle {
 width: 360
 height: 360

Flipable {
 id: flipable1
 property bool flipped: false

anchors.fill: parent

back: Flickable {
 anchors.fill: parent
 contentHeight: backText.height
 contentWidth: backText.width

Text {
 id: backText
 text: qsTr("Hello Back of the World")
 }

onFlickEnded: console.debug("back flick ended")
 onFlickStarted: console.debug("back flick started")

MouseArea {
 anchors.fill: parent
 onPressAndHold: {
 console.debug("back enabling flipping")
 flipableMouseArea.toggleEnabled()
 }
 }
 }

front: Flickable {
 anchors.fill: parent
 contentHeight: frontText.height
 contentWidth: frontText.width

Text {
 id: frontText
 text: qsTr("Hello Front of the World")
 }

onFlickEnded: console.debug("front flick ended")
 onFlickStarted: console.debug("front flick started")

MouseArea {
 anchors.fill: parent
 onPressAndHold: {
 console.debug("front enabling flipping")
 flipableMouseArea.toggleEnabled()
 }
 }
 }

transform: Rotation {
 id: rotation
 origin.x: flipable1.width/2
 origin.y: flipable1.height/2
 axis.x: 0; axis.y: 1; axis.z: 0 // set axis.y to 1 to rotate around y-axis
 angle: 0 // the default angle
 }

states: State {
 name: "back"
 PropertyChanges { target: rotation; angle: 180 }
 when: flipable1.flipped
 }

transitions: Transition {
 NumberAnimation { target: rotation; property: "angle"; duration: flipable1.transitionDuration }
 }

MouseArea {
 id: flipableMouseArea
 anchors.fill: parent
 onPressAndHold: toggleEnabled()
 onClicked: flipable1.flipped = !flipable1.flipped

function toggleEnabled() {
 console.debug("flipping toggled by press and hold")
 enabled = ! enabled
 }
 }
 }
}