1import QtQuick 1.0
2
3Rectangle {
4    color: "white"
5    width: 800
6    height: 600
7
8    Keys.onReturnPressed: console.log("Error - Root")
9
10    FocusScope {
11        id: myScope
12        objectName: "item0"
13        focus: true
14
15        Keys.onReturnPressed: console.log("Error - FocusScope")
16
17        Rectangle {
18            height: 120
19            width: 420
20
21            color: "transparent"
22            border.width: 5
23            border.color: myScope.activeFocus?"blue":"black"
24
25            Rectangle {
26                x: 10; y: 10
27                width: 100; height: 100; color: "green"
28                border.width: 5
29                border.color: item1.activeFocus?"blue":"black"
30            }
31
32            TextEdit {
33                id: item1; objectName: "item1"
34                x: 20; y: 20
35                width: 90; height: 90
36                color: "white"
37                font.pixelSize: 20
38                Keys.onReturnPressed: console.log("Top Left");
39                KeyNavigation.right: item2
40                focus: true
41                wrapMode: TextEdit.WordWrap
42                text: "Box 1"
43            }
44
45            Rectangle {
46                id: item2; objectName: "item2"
47                x: 310; y: 10
48                width: 100; height: 100; color: "green"
49                border.width: 5
50                border.color: activeFocus?"blue":"black"
51                KeyNavigation.left: item1
52                Keys.onReturnPressed: console.log("Top Right");
53
54                Rectangle {
55                    width: 50; height: 50; anchors.centerIn: parent
56                    color: parent.activeFocus?"red":"transparent"
57                }
58            }
59        }
60        KeyNavigation.down: item3
61    }
62
63    Text { x:100; y:170; text: "Blue border indicates scoped focus\nBlack border indicates NOT scoped focus\nRed box or flashing cursor indicates active focus\nUse arrow keys to navigate\nPress Ctrl-Return to print currently focused item" }
64
65    Rectangle {
66        x: 10; y: 300
67        width: 100; height: 100; color: "green"
68        border.width: 5
69        border.color: item3.activeFocus?"blue":"black"
70    }
71
72    TextEdit {
73        id: item3; objectName: "item3"
74        x: 20; y: 310
75        width: 90; height: 90
76        color: "white"
77        font.pixelSize: 20
78        text: "Box 3"
79
80        Keys.onReturnPressed: console.log("Bottom Left");
81        KeyNavigation.up: myScope
82        wrapMode: TextEdit.WordWrap
83    }
84}
85