import QtQuick 1.0
 
Item {
    width: 300
    height: 300
 
    Rectangle {
        width: 100
        height: 100
        color: "green"
 
        MouseArea {
            anchors.fill: parent
            onClicked: { parent.color = 'red' }
        }
    }
}

import QtQuick 1.0
 
Item {
    id: myItem
    width: 350
    height: 350
 
    Rectangle {
        id: slider
        width: 320
        height: 40
        color: "green"
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
 
        Rectangle {
            id: handle
            width: 40
            height: 40
            color: "red"
 
            MouseArea {
                anchors.fill: parent
                drag {
                    target: parent
                    axis: "XAxis"
                    minimumX: 0
                    maximumX: slider.width - handle.width
                }
            }
        }
    }
}

import QtQuick 1.0
 
Rectangle {
    color: "lightsteelblue"
    width: 240
    height: 25
 
    Text {
        id: myText
        text: "Press A, B or C"
    }
 
    Item {
        id: keyHandler
        focus: true
        Keys.onPressed: {
           if (event.key == Qt.Key_A)
             myText.text = 'Key A was pressed'
           else if (event.key == Qt.Key_B)
             myText.text = 'Key B was pressed'
           else if (event.key == Qt.Key_C)
             myText.text = 'Key C was pressed'
        }
    }
}

import QtQuick 1.0
 
Grid {
     columns: 2
     width: 100; height: 100
     Rectangle {
         id: item1
         focus: true
         width: 50; height: 50
         color: focus ? "red" : "lightgray"
         KeyNavigation.right: item2
         KeyNavigation.down: item3
     }
     Rectangle {
         id: item2
         width: 50; height: 50
         color: focus ? "red" : "lightgray"
         KeyNavigation.left: item1
         KeyNavigation.down: item4
     }
     Rectangle {
         id: item3
         width: 50; height: 50
         color: focus ? "red" : "lightgray"
         KeyNavigation.right: item4
         KeyNavigation.up: item1
     }
     Rectangle {
         id: item4
         width: 50; height: 50
         color: focus ? "red" : "lightgray"
         KeyNavigation.left: item3
         KeyNavigation.up: item2
     }
 }

import QtQuick 1.0
 
Flickable {
     width: 200
     height: 200
     contentWidth: image.width
     contentHeight: image.height
 
     Image {
         id: image;
         source: "images/background.png"
     }
 }