import QtQuick 2.7
import QtQuick.Controls 1.5

ApplicationWindow {
    id: root
    visible : true
    width   : 640
    height  : 480

    StackView{
        id: stackView
        anchors.fill: parent
        initialItem : page1
    }

    Component{
        id: page1

        Rectangle {
            color: "lightGray"

            MouseArea{
                id: mouseArea
                width   : parent.width  / 8
                height  : parent.height / 8
                anchors.centerIn: parent

                function pushNext(){
                    console.log("PressHandHold")
                    stackView.push(page2)
                }

                function doSomething(){
                    console.log("Clicked")
                    rotation = rotation + 360
                }

                Behavior on rotation {NumberAnimation{duration: 500}}

                Rectangle{
                    anchors.fill: parent
                    border.width: 1
                    border.color: parent.pressed ? "red" : "green"
                }

                Text{
                    anchors.centerIn: parent
                    text: "Next"
                }

                onPressed       : console.log("Pressed")
                onReleased      : console.log("Released")
                onCanceled      : console.log("Canceled")
                onDoubleClicked : console.log("DoubleClicked")
                onClicked       : doSomething()
                onPressAndHold  : pushNext()
            }
        }
    }

    Component{
        id: page2
        Rectangle{
            Button{
                text: "Back"
                anchors.centerIn: parent
                onClicked       : stackView.pop()
            }
        }
    }
}