How to use a Flickable inside a Flipable

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.

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

Rectangle {<br /> width: 360<br /> height: 360

Flipable {<br /> id: flipable1<br /> property bool flipped: false

anchors.fill: parent

back: Flickable {<br /> anchors.fill: parent<br /> contentHeight: backText.height<br /> contentWidth: backText.width

Text {<br /> id: backText<br /> text: qsTr(&quot;Hello Back of the World&amp;quot;)<br /> }

onFlickEnded: console.debug(&quot;back flick ended&amp;quot;)<br /> onFlickStarted: console.debug(&quot;back flick started&amp;quot;)

MouseArea {<br /> anchors.fill: parent<br /> onPressAndHold: {<br /> console.debug(&quot;back enabling flipping&amp;quot;)<br /> flipableMouseArea.toggleEnabled()<br /> }<br /> }<br /> }

front: Flickable {<br /> anchors.fill: parent<br /> contentHeight: frontText.height<br /> contentWidth: frontText.width

Text {<br /> id: frontText<br /> text: qsTr(&quot;Hello Front of the World&amp;quot;)<br /> }

onFlickEnded: console.debug(&quot;front flick ended&amp;quot;)<br /> onFlickStarted: console.debug(&quot;front flick started&amp;quot;)

MouseArea {<br /> anchors.fill: parent<br /> onPressAndHold: {<br /> console.debug(&quot;front enabling flipping&amp;quot;)<br /> flipableMouseArea.toggleEnabled()<br /> }<br /> }<br /> }

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

states: State {<br /> name: &quot;back&amp;quot;<br /> PropertyChanges { target: rotation; angle: 180 }<br /> when: flipable1.flipped<br /> }

transitions: Transition {<br /> NumberAnimation { target: rotation; property: &quot;angle&amp;quot;; duration: flipable1.transitionDuration }<br /> }

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

function toggleEnabled() {<br /> console.debug(&quot;flipping toggled by press and hold&amp;quot;)<br /> enabled = ! enabled<br /> }<br /> }<br /> }<br />}<br />