====== Interaction Basics ======
===== Mouse Events =====

  * The **MouseArea** item handles mouse events for items that are on the scene.
  * They can emit //signals//, which are used to specify behaviors.
<file javascript mousearea-example.qml>
import QtQuick 1.0

Item {
    width: 300
    height: 300

    Rectangle {
        width: 100
        height: 100
        color: "green"

        MouseArea {
            anchors.fill: parent
            onClicked: { parent.color = 'red' }
        }
    }
}</file>
  * Signals associated with MouseArea:
    * ''onCanceled''
    * ''onClicked''
    * ''onDoubleClicked''
    * ''onEntered''
    * ''onExited''
    * ''onPositionChanged''
    * ''onPressAndHold''
    * ''onPressed''
    * ''onReleased''

==== Scrollbar example ====

  * You build complex interactions with trees of elements and behaviors connecting them.
  * In addition to generating signals, MouseArea can be dragged.
  * Create a green horizontal slider in the middle of the scene that contains a red handle. Put a MouseArea in the handle and use that to drag the slider.
<file javascript scrollbar-mousearea-example.qml>
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
                }
            }
        }
    }
}</file>


===== Key Events =====

==== Key Focus ====

  * You can generate a key event when a key is pressed.
  * Example uses ''id'' property to change displayed text.
<file javascript focusscope-event.qml>
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'
        }
    }
}</file>

==== Key Navigation ====
  * It is common in key-based UIs to use arrow keys to navigate between focused items.
  * Example below creates a 2x2 Grid item containing four Rectangles. KeyNavigation is used to change the focus as appropriate.
<file javascript key-navigation.qml>
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
     }
 }</file>

===== Flickable =====

  * Elements placed in a Flickable item can be dragged and flicked.
<file javascript flickable-area.qml>
import QtQuick 1.0

Flickable {
     width: 200
     height: 200
     contentWidth: image.width
     contentHeight: image.height

     Image {
         id: image;
         source: "images/background.png"
     }
 }</file>
  * More about Flickable on the [[https://qt-project.org/doc/qt-4.8/qml-flickable.html|Qt 4.8]] doc pages.

====== Resources ======
  * {{:qt-quick-for-designers-1:images.zip|}}
  * All source code is subject to this [[copyright header|copyright]].