Differences

This shows you the differences between two versions of the page.

--- qt-quick-for-designers-1:interaction_basics [2013/06/21 21:27] – created; split off from "Layout and Interaction" mithat
+++ qt-quick-for-designers-1:interaction_basics [2013/07/06 22:52] (current) – mithat
@@ Line 1: / Line 1: @@
-====== Interaction basics ======
+====== 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.
+  * They can emit //signals//, which are used to specify behaviors.
 <file javascript mousearea-example.qml>
 import QtQuick 1.0
@@ Line 76: / Line 76: @@
 ===== 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]].