DemoApplication/pages/Page3.qml


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

import QtQuick 2.0

import CursorNavigation 1.0
import controls 1.0

Item {
    width: parent.width
    height: parent.height

    FocusScope {
        id: rootScope
        anchors.fill: parent
        Row {
            anchors.centerIn: parent
            spacing: 10
            CNButton {
                width: 100
                height: 100
                text: "alone!"

                CursorNavigation.onMovedUp: text = "moved up"
                CursorNavigation.onMovedDown: text = "moved down"
                CursorNavigation.onMovedRight: text = "moved right"
                CursorNavigation.onMovedLeft: text = "moved left"
            }

            Grid {
                columns: 2
                rows: 2
                spacing: 5

                CNButton {
                    text: "b1"
                }

                CNButton {
                    text: "b2 (default focus)"
                    focus: true
                }

                CNButton {
                    id: defaultButton
                    text: "b3 (escape target)"
                }

                CNButton {
                    text: "b4"
                }
            }

            Rectangle {
                width: 250
                height: 200

                border.width: 2
                border.color: "grey"

                FocusScope {
                    anchors.fill: parent
                    CursorNavigation.acceptsCursor: true
                    CursorNavigation.escapeTarget: defaultButton
                    CursorNavigation.trapsCursor: trapCheckBox.checked

                    //redefine the controls for this scope
                    //(default arrow keys will still work as well, unless reassigned here)
                    Keys.onDigit5Pressed: CursorNavigation.moveUp()
                    Keys.onDigit2Pressed: CursorNavigation.moveDown()
                    Keys.onDigit3Pressed: CursorNavigation.moveRight()
                    Keys.onDigit1Pressed: CursorNavigation.moveLeft()

                    Grid {
                        spacing: 5
                        columns: 2
                        rows: 3

                        CNButton {
                            text: "sb1"
                        }

                        CNButton {
                            text: "sb2"
                        }

                        CNButton {
                            text: "sb3"
                        }

                        CNButton {
                            text: "sb4 (default focus)"
                            focus: true
                        }

                        CNCheckBox {
                            id: trapCheckBox
                            text: "trap cursor"
                        }
                    }
                }
            }
        }
        //this seems to be the way to force focus on a newly opened dialog?
        Component.onCompleted: { forceActiveFocus(); }
    }
}