Add focus and key navigation example.

8 files changed, 209 insertions, 0 deletions

diff --git a/examples/declarative/focus/Core/ContextMenu.qml b/examples/declarative/focus/Core/ContextMenu.qml
new file mode 100644
index 0000000..bd6d8a2
--- /dev/null
+++ b/examples/declarative/focus/Core/ContextMenu.qml
@@ -0,0 +1,15 @@
+import Qt 4.6
+
+FocusScope {
+    id: container
+    property bool open: false
+
+    Item {
+        anchors.fill: parent
+
+        Rectangle {
+            anchors.fill: parent; color: "#D1DBBD"; focus: true
+            Keys.onRightPressed: mainView.focus = true
+        }
+    }
+}
diff --git a/examples/declarative/focus/Core/GridMenu.qml b/examples/declarative/focus/Core/GridMenu.qml
new file mode 100644
index 0000000..03d837a
--- /dev/null
+++ b/examples/declarative/focus/Core/GridMenu.qml
@@ -0,0 +1,54 @@
+import Qt 4.6
+
+FocusScope {
+    property alias interactive: gridView.interactive
+
+    onWantsFocusChanged: if (wantsFocus) mainView.state = ""
+
+    Rectangle {
+        clip: true; anchors.fill: parent
+        gradient: Gradient {
+            GradientStop { position: 0.0; color: "#193441" }
+            GradientStop { position: 1.0; color: Qt.darker("#193441") }
+        }
+
+        GridView {
+            id: gridView; cellWidth: 152; cellHeight: 152; focus: true
+            x: 20; width: parent.width - 40; height: parent.height
+            model: 12
+            KeyNavigation.down: listViews
+            KeyNavigation.left: contextMenu
+
+            delegate: Item {
+                id: container; width: GridView.view.cellWidth; height: GridView.view.cellHeight
+
+                Rectangle {
+                    id: content
+                    color: "transparent"; smooth: true
+                    anchors.centerIn: parent; width: container.width - 40; height: container.height - 40; radius: 10
+                    Rectangle { color: "#91AA9D"; x: 3; y: 3; width: parent.width - 6; height: parent.height - 6; radius: 8 }
+                    Image { source: "images/qt-logo.png"; anchors.centerIn: parent; smooth: true }
+                }
+
+                MouseArea {
+                    id: mouseArea; anchors.fill: parent; hoverEnabled: true
+                    onClicked: {
+                        GridView.view.currentIndex = index
+                        container.focus = true
+                        gridMenu.focus = true
+                        mainView.focus = true
+                    }
+                }
+
+                states: State {
+                    name: "active"; when: container.focus == true
+                    PropertyChanges { target: content; color: "#FCFFF5"; scale: 1.1 }
+                }
+
+                transitions: Transition {
+                    NumberAnimation { properties: "scale"; duration: 100 }
+                }
+            }
+        }
+    }
+}
diff --git a/examples/declarative/focus/Core/ListViewDelegate.qml b/examples/declarative/focus/Core/ListViewDelegate.qml
new file mode 100644
index 0000000..b7e067a
--- /dev/null
+++ b/examples/declarative/focus/Core/ListViewDelegate.qml
@@ -0,0 +1,39 @@
+import Qt 4.6
+
+Component {
+    Item {
+        id: container
+        x: 5; width: ListView.view.width - 10; height: 60
+
+        Rectangle {
+            id: content
+            color: "transparent"; smooth: true
+            anchors.centerIn: parent; width: container.width - 40; height: container.height - 10; radius: 10
+            Rectangle { color: "#91AA9D"; x: 3; y: 3; width: parent.width - 6; height: parent.height - 6; radius: 8 }
+            Text {
+                text: "List element " + (index + 1); color: "#193441"; font.bold: false; anchors.centerIn: parent
+                font.pixelSize: 14
+            }
+        }
+
+        MouseArea {
+            id: mouseArea; anchors.fill: parent; hoverEnabled: true
+            onClicked: {
+                ListView.view.currentIndex = index
+                container.focus = true
+                ListView.view.focus = true
+                listViews.focus = true
+                mainView.focus = true
+            }
+        }
+
+        states: State {
+            name: "active"; when: container.focus == true
+            PropertyChanges { target: content; color: "#FCFFF5"; scale: 1.1 }
+        }
+
+        transitions: Transition {
+            NumberAnimation { properties: "scale"; duration: 100 }
+        }
+    }
+}
diff --git a/examples/declarative/focus/Core/ListViews.qml b/examples/declarative/focus/Core/ListViews.qml
new file mode 100644
index 0000000..3cc4836
--- /dev/null
+++ b/examples/declarative/focus/Core/ListViews.qml
@@ -0,0 +1,47 @@
+import Qt 4.6
+
+FocusScope {
+    clip: true
+
+    onWantsFocusChanged: if (wantsFocus) mainView.state = "showListViews"
+
+    ListView {
+        id: list1
+        delegate: ListViewDelegate {}
+        y: wantsFocus ? 10 : 40; focus: true; width: parent.width / 3; height: parent.height - 20
+        model: 10; KeyNavigation.up: gridMenu; KeyNavigation.left: contextMenu; KeyNavigation.right: list2
+        Behavior on y { NumberAnimation { duration: 600; easing.type: "OutQuint" } }
+    }
+
+    ListView {
+        id: list2
+        delegate: ListViewDelegate {}
+        y: wantsFocus ? 10 : 40; x: parent.width / 3; width: parent.width / 3; height: parent.height - 20
+        model: 10; KeyNavigation.up: gridMenu; KeyNavigation.left: list1; KeyNavigation.right: list3
+        Behavior on y { NumberAnimation { duration: 600; easing.type: "OutQuint" } }
+    }
+
+    ListView {
+        id: list3
+        delegate: ListViewDelegate {}
+        y: wantsFocus ? 10 : 40; x: 2 * parent.width / 3; width: parent.width / 3; height: parent.height - 20
+        model: 10; KeyNavigation.up: gridMenu; KeyNavigation.left: list2
+        Behavior on y { NumberAnimation { duration: 600; easing.type: "OutQuint" } }
+    }
+
+    Rectangle { width: parent.width; height: 1; color: "#D1DBBD" }
+    Rectangle {
+        y: 1; width: parent.width; height: 10
+        gradient: Gradient {
+            GradientStop { position: 0.0; color: "#3E606F" }
+            GradientStop { position: 1.0; color: "transparent" }
+        }
+    }
+    Rectangle {
+        y: parent.height - 10; width: parent.width; height: 10
+        gradient: Gradient {
+            GradientStop { position: 1.0; color: "#3E606F" }
+            GradientStop { position: 0.0; color: "transparent" }
+        }
+    }
+}
diff --git a/examples/declarative/focus/Core/images/arrow.png b/examples/declarative/focus/Core/images/arrow.png
new file mode 100644
index 0000000..14978c2
--- /dev/null
+++ b/examples/declarative/focus/Core/images/arrow.png
diff --git a/examples/declarative/focus/Core/images/qt-logo.png b/examples/declarative/focus/Core/images/qt-logo.png
new file mode 100644
index 0000000..14ddf2a
--- /dev/null
+++ b/examples/declarative/focus/Core/images/qt-logo.png
diff --git a/examples/declarative/focus/Core/qmldir b/examples/declarative/focus/Core/qmldir
new file mode 100644
index 0000000..0460d9c
--- /dev/null
+++ b/examples/declarative/focus/Core/qmldir
@@ -0,0 +1,4 @@
+ContextMenu ContextMenu.qml
+GridMenu GridMenu.qml
+ListViews Listviews.qml
+ListViewDelegate ListViewDelegate.qml
diff --git a/examples/declarative/focus/focus.qml b/examples/declarative/focus/focus.qml
new file mode 100644
index 0000000..a8dc3c8
--- /dev/null
+++ b/examples/declarative/focus/focus.qml
@@ -0,0 +1,50 @@
+import Qt 4.6
+import "Core" 1.0
+
+Rectangle {
+    id: window; width: 800; height: 480; color: "#3E606F"
+
+    FocusScope {
+        id: mainView; focus: true; width: parent.width; height: parent.height
+
+        GridMenu {
+            id: gridMenu; focus: true
+            width: parent.width; height: 320; interactive: parent.wantsFocus
+        }
+
+        ListViews { id: listViews; y: 320; width: parent.width; height: 320 }
+
+        Rectangle { id: shade; color: "black"; opacity: 0; anchors.fill: parent }
+
+        states: State {
+            name: "showListViews"
+            PropertyChanges { target: gridMenu; y: -160 }
+            PropertyChanges { target: listViews; y: 160 }
+        }
+
+        transitions: Transition {
+            NumberAnimation { properties: "y"; duration: 600; easing.type: "OutQuint" }
+        }
+    }
+
+    Image {
+        source: "Core/images/arrow.png"; rotation: 90; anchors.verticalCenter: parent.verticalCenter
+        MouseArea {
+            anchors { fill: parent; leftMargin: -10; topMargin: -10; rightMargin: -10; bottomMargin: -10 }
+            onClicked: window.state = "contextMenuOpen"
+        }
+    }
+
+    ContextMenu { id: contextMenu; x: -265; width: 260; height: parent.height }
+
+    states: State {
+        name: "contextMenuOpen"; when: !mainView.wantsFocus
+        PropertyChanges { target: contextMenu; x: 0; open: true }
+        PropertyChanges { target: mainView; x: 130 }
+        PropertyChanges { target: shade; opacity: 0.25 }
+    }
+
+    transitions: Transition {
+        NumberAnimation { properties: "x,opacity"; duration: 600; easing.type: "OutQuint" }
+    }
+}