import QtQuick 2.0
 
// The root element is the Rectangle
Rectangle {
    // name this element root
    id: root
 
    // properties: <name>: <value>
    width: 180; height: 240
 
    // color property
    color: "#D8D8D8"
 
    Text {
            id: label
 
            x: 24; y: 24
 
            // custom counter property for space presses
            property int spacePresses: 0
 
            text: "Space pressed: " + spacePresses + " times"
 
            // (1) handler for text changes
            onTextChanged: console.log("text changed to:", text)
 
            // need focus to receive key events
            focus: true
 
            // (2) handler with some JS
            Keys.onEnterPressed: {
                increment()
            }
 
            // (3) handler with some JS
            Keys.onSpacePressed: {
                increment()
            }
 
            // (4) a JS function
            function increment() {
                spacePresses = spacePresses + 1
                console.log("spacePresses:", spacePresses)
            }
        }
}