Add descriptions to demo app examples. Also some tweaks.

4 files changed, 294 insertions, 225 deletions

diff --git a/DemoApplication/pages/Page1.qml b/DemoApplication/pages/Page1.qml
index 356bee1..244c1a3 100644
--- a/DemoApplication/pages/Page1.qml
+++ b/DemoApplication/pages/Page1.qml
@@ -7,109 +7,132 @@ Item {
     width: parent.width
     height: parent.height
 
-    RowLayout {
-        anchors.centerIn: parent
-
-        GridLayout {
-            rows: 3
-            columns: 2
-            rowSpacing: 10
-            columnSpacing: 10
-
-            CNButton {
-                id: button
-                text: qsTr("Button")
-            }
-
-            CNButton {
-                id: button1
-                text: qsTr("Button")
-            }
-
-            CNButton {
-                id: button2
-                text: qsTr("Button \n(cursor off)")
-                CursorNavigation.acceptsCursor: false
-            }
+    Text {
+        id: text
+        text: "Welcome to the CursorNavigation demo!\nUse the arrow keys, keys a,w,s,d or a game controller to move the cursor between the UI elements."
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.margins: 10
+        wrapMode: Text.WordWrap
+    }
 
-            CNButton {
-                id: button3
-                text: qsTr("Button \n(esc. target)")
-            }
+    Item {
+        anchors.top: text.bottom
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        RowLayout {
+            spacing: 10
+
+            anchors.centerIn: parent
+
+            GridLayout {
+                rows: 3
+                columns: 2
+                rowSpacing: 10
+                columnSpacing: 10
+                anchors.margins: 10
+
+                CNButton {
+                    id: button
+                    text: qsTr("Button")
+                }
 
-            Rectangle {
-                border.width: 1
-                CNCursorIndicator { cursorItem: textEdit }
-                Layout.columnSpan: 2
-                Layout.fillWidth: true
-                Layout.minimumWidth: 100
-                Layout.preferredWidth: 200
-                Layout.maximumWidth: 300
-                Layout.minimumHeight: 30
-                TextEdit {
-                    id: textEdit
-                    anchors.fill: parent
-                    CursorNavigation.acceptsCursor: true
-                    text: "some text..."
+                CNButton {
+                    id: button1
+                    text: qsTr("Button")
                 }
-            }
 
-        }
+                CNButton {
+                    id: button2
+                    text: qsTr("Button \n(cursor off)")
+                    CursorNavigation.acceptsCursor: false
+                }
 
-        Rectangle {
-            Layout.fillWidth: true
-            //Layout.minimumWidth: 300
-            //Layout.preferredWidth: 250
-            //Layout.maximumWidth: 300
-            //Layout.minimumHeight: 350
-            Layout.minimumHeight: grid.height
-            Layout.minimumWidth: grid.width
-            border.width: 1
-
-            FocusScope {
-                anchors.fill: parent
-                CursorNavigation.acceptsCursor: true
-                CursorNavigation.escapeTarget: button3
-                CursorNavigation.trapsCursor: trapCheckBox.checked
-
-                GridLayout {
-                    id: grid
-                    anchors.centerIn: parent
-                    rows: 3
-                    columns: 2
-                    rowSpacing: 10
-                    columnSpacing: 10
-
-                    CNButton {
-                        id: button4
-                        //make the focusscope forward the focus and the cursor to it's children
-                        focus: true
-                        text: qsTr("Button")
-                    }
+                CNButton {
+                    id: button3
+                    text: qsTr("Button \n(esc. target)")
+                }
 
-                    CNButton {
-                        id: button5
-                        text: qsTr("Button")
+                Rectangle {
+                    border.width: 1
+                    CNCursorIndicator { cursorItem: textEdit }
+                    Layout.columnSpan: 2
+                    Layout.fillWidth: true
+                    Layout.minimumWidth: 100
+                    Layout.preferredWidth: 200
+                    Layout.maximumWidth: 300
+                    Layout.minimumHeight: 30
+                    TextEdit {
+                        id: textEdit
+                        anchors.fill: parent
+                        CursorNavigation.acceptsCursor: true
+                        text: "some text..."
                     }
+                }
 
-                    CNButton {
-                        id: button6
-                        text: qsTr("Button")
-                    }
+            }
 
-                    CNButton {
-                        id: button7
-                        text: qsTr("Button")
-                    }
+            Rectangle {
+                Layout.fillWidth: true
+                //Layout.minimumWidth: 300
+                //Layout.preferredWidth: 250
+                //Layout.maximumWidth: 300
+                //Layout.minimumHeight: 350
+                Layout.minimumHeight: grid.height
+                Layout.minimumWidth: grid.width
+                border.width: 1
 
-                    CNCheckBox {
-                        id: trapCheckBox
-                        text: "Trap cursor to this scope"
-                        Layout.columnSpan: 2
+                FocusScope {
+                    anchors.fill: parent
+                    CursorNavigation.acceptsCursor: true
+                    CursorNavigation.escapeTarget: button3
+                    CursorNavigation.trapsCursor: trapCheckBox.checked
+
+                    GridLayout {
+                        id: grid
+                        anchors.centerIn: parent
+                        rows: 4
+                        columns: 2
+                        rowSpacing: 10
+                        columnSpacing: 10
+
+                        CNButton {
+                            id: button4
+                            //make the focusscope forward the focus and the cursor to it's children
+                            focus: true
+                            text: qsTr("Button")
+                        }
+
+                        CNButton {
+                            id: button5
+                            text: qsTr("Button")
+                        }
+
+                        CNButton {
+                            id: button6
+                            text: qsTr("Button")
+                        }
+
+                        CNButton {
+                            id: button7
+                            text: qsTr("Button")
+                        }
+
+                        CNCheckBox {
+                            id: trapCheckBox
+                            text: "Trap cursor to this scope"
+                            Layout.columnSpan: 2
+                        }
+
+                        Text {
+                            text: "Press 'esc' to exit the scope."
+                            Layout.columnSpan: 2
+                        }
                     }
                 }
             }
         }
     }
-
 }
diff --git a/DemoApplication/pages/Page2.qml b/DemoApplication/pages/Page2.qml
index ea9bc77..a72d77d 100644
--- a/DemoApplication/pages/Page2.qml
+++ b/DemoApplication/pages/Page2.qml
@@ -9,154 +9,170 @@ Item {
     width: parent.width
     height: parent.height
 
-    RowLayout {
-        anchors.centerIn: parent
-        spacing: 10
+    Text {
+        id: text
+        text: "Lists and list items may also be defined cursor navigable. Try moving the cursor between the lists and the other controls. List on the left is defined as a navigable item and so are its items. A list like this will relay the cursor to its currently selected child. However, list on the right has only its children defines as navigables and this will mean cursor will move to the item based on cursor's and items' locations."
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.margins: 10
+        wrapMode: Text.WordWrap
+    }
 
-        Column {
-            CNListView {
-                id: listView
-                width: 198
-                height: 359
+    Item {
+        anchors.top: text.bottom
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
 
-                spacing: 4
-                clip: true
+        RowLayout {
+            anchors.centerIn: parent
+            spacing: 10
 
-                delegate: CNItemDelegate {
-                    width: listView.width
-                    height: 40
+            Column {
+                CNListView {
+                    id: listView
+                    width: 198
+                    height: 359
 
-                    contentItem: Item {
+                    spacing: 4
+                    clip: true
+
+                    delegate: CNItemDelegate {
                         width: listView.width
                         height: 40
 
-                        Row {
-                            width: (parent.width - x)
-                            height: 35
-                            x: 5
-                            anchors.verticalCenter: parent.verticalCenter
-                            spacing: 10
-
-                            Rectangle {
-                                width: parent.height
-                                height: parent.height
-                                radius: width/2
-                                color: colorCode
-                            }
-
-                            Text {
-                                height: parent.height
-                                font.bold: true
-                                verticalAlignment: Text.AlignVCenter
-                                text: name
+                        contentItem: Item {
+                            width: listView.width
+                            height: 40
+
+                            Row {
+                                width: (parent.width - x)
+                                height: 35
+                                x: 5
+                                anchors.verticalCenter: parent.verticalCenter
+                                spacing: 10
+
+                                Rectangle {
+                                    width: parent.height
+                                    height: parent.height
+                                    radius: width/2
+                                    color: colorCode
+                                }
+
+                                Text {
+                                    height: parent.height
+                                    font.bold: true
+                                    verticalAlignment: Text.AlignVCenter
+                                    text: name
+                                }
                             }
                         }
                     }
-                }
 
-                model: ListModel {
-                    ListElement {
-                        name: "Grey"
-                        colorCode: "grey"
-                    }
-                    ListElement {
-                        name: "Red"
-                        colorCode: "red"
-                    }
-                    ListElement {
-                        name: "Blue"
-                        colorCode: "blue"
-                    }
-                    ListElement {
-                        name: "Green"
-                        colorCode: "green"
-                    }
-                    ListElement {
-                        name: "Cyan"
-                        colorCode: "cyan"
-                    }
-                    ListElement {
-                        name: "Magenta"
-                        colorCode: "magenta"
-                    }
-                    ListElement {
-                        name: "Yellow"
-                        colorCode: "yellow"
-                    }
-                    ListElement {
-                        name: "Black"
-                        colorCode: "black"
-                    }
-                    ListElement {
-                        name: "Aliceblue"
-                        colorCode: "aliceblue"
-                    }
-                    ListElement {
-                        name: "Blueviolet"
-                        colorCode: "blueviolet"
-                    }
-                    ListElement {
-                        name: "Coral"
-                        colorCode: "coral"
+                    model: ListModel {
+                        ListElement {
+                            name: "Grey"
+                            colorCode: "grey"
+                        }
+                        ListElement {
+                            name: "Red"
+                            colorCode: "red"
+                        }
+                        ListElement {
+                            name: "Blue"
+                            colorCode: "blue"
+                        }
+                        ListElement {
+                            name: "Green"
+                            colorCode: "green"
+                        }
+                        ListElement {
+                            name: "Cyan"
+                            colorCode: "cyan"
+                        }
+                        ListElement {
+                            name: "Magenta"
+                            colorCode: "magenta"
+                        }
+                        ListElement {
+                            name: "Yellow"
+                            colorCode: "yellow"
+                        }
+                        ListElement {
+                            name: "Black"
+                            colorCode: "black"
+                        }
+                        ListElement {
+                            name: "Aliceblue"
+                            colorCode: "aliceblue"
+                        }
+                        ListElement {
+                            name: "Blueviolet"
+                            colorCode: "blueviolet"
+                        }
+                        ListElement {
+                            name: "Coral"
+                            colorCode: "coral"
+                        }
                     }
                 }
+                CNButton {
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    id: button3
+                    text: qsTr("Button")
+                }
             }
-            CNButton {
-                anchors.horizontalCenter: parent.horizontalCenter
-                id: button3
-                text: qsTr("Button")
-            }
-        }
 
-        Column {
-            spacing: 30
-            CNButton {
-                text: qsTr("Button")
-            }
+            Column {
+                spacing: 30
+                CNButton {
+                    text: qsTr("Button")
+                }
 
-            CNButton {
-                text: qsTr("Button")
-            }
+                CNButton {
+                    text: qsTr("Button")
+                }
 
-            CNButton {
-                text: qsTr("Button")
+                CNButton {
+                    text: qsTr("Button")
+                }
             }
-        }
-
-        CNListView {
-            id: listView2
-            width: 198
-            height: 359
-
-            spacing: 4
-            clip: true
 
-            /* when we set acceptsCursor false for the ListView itself,
-             * navigation between the list items and items outside of the list,
-             * is based on the item geometry and not just the whole ListView's geometry
-             */
-            CursorNavigation.acceptsCursor: false
+            CNListView {
+                id: listView2
+                width: 198
+                height: 359
 
-            delegate: CNItemDelegate {
-                width: listView.width
-                height: 40
+                spacing: 4
+                clip: true
 
-                CursorNavigation.onActivated: checkBox.toggle()
+                /* when we set acceptsCursor false for the ListView itself,
+                 * navigation between the list items and items outside of the list,
+                 * is based on the item geometry and not just the whole ListView's geometry
+                 */
+                CursorNavigation.acceptsCursor: false
 
-                contentItem: Item {
+                delegate: CNItemDelegate {
                     width: listView.width
                     height: 40
 
-                    CheckBox{
-                        id: checkBox
-                        text: "Item " + index
-                        anchors.centerIn: parent
+                    CursorNavigation.onActivated: checkBox.toggle()
+
+                    contentItem: Item {
+                        width: listView.width
+                        height: 40
+
+                        CheckBox{
+                            id: checkBox
+                            text: "Item " + index
+                            anchors.centerIn: parent
+                        }
                     }
                 }
-            }
 
-            model: 10
+                model: 10
+            }
         }
-
     }
 }
diff --git a/DemoApplication/pages/Page4.qml b/DemoApplication/pages/Page4.qml
index ff5ce2d..c73c3d9 100644
--- a/DemoApplication/pages/Page4.qml
+++ b/DemoApplication/pages/Page4.qml
@@ -5,26 +5,43 @@ import "../controls"
 
 Item {
 
-    GridLayout {
-        columns: 4
-        rows: 4
-        rowSpacing: 10
-        columnSpacing: 10
+    Text {
+        id: text
+        text: "CursorNavigation allows passing the navigable items information about cursor's intended or actual movement. This example demonstrates a button that uses cursor's magnitude and movement information to implement a flipping motion that follows the cursor's direction."
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.margins: 10
+        wrapMode: Text.WordWrap
+    }
+
+    Item {
+        anchors.top: text.bottom
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+
+        GridLayout {
+            columns: 4
+            rows: 4
+            rowSpacing: 10
+            columnSpacing: 10
 
-        anchors.centerIn: parent
+            anchors.centerIn: parent
 
-        Repeater {
-            CNFlipButton {
-                Layout.minimumWidth: 110
-                Layout.minimumHeight: 110
-                text: "Button " + index
+            Repeater {
+                CNFlipButton {
+                    Layout.minimumWidth: 110
+                    Layout.minimumHeight: 110
+                    text: "Button " + index
 
-                Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
+                    Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
+                }
+
+                model: 16
             }
 
-            model: 16
         }
-
     }
 
 }
diff --git a/DemoApplication/pages/Page6.qml b/DemoApplication/pages/Page6.qml
index ece82ba..efb5996 100644
--- a/DemoApplication/pages/Page6.qml
+++ b/DemoApplication/pages/Page6.qml
@@ -10,6 +10,16 @@ Item {
     width: parent.width
     height: parent.height
 
+    Text {
+        id: text
+        text: "CursorNavigation allows navigation in a simple 4-way, or a completely free 360 degree manner. The 4 way navigation is useful for traditional, rectangular and structured UIs, however, the example here works best when using a controller that allows moving to any direction (eg. analog stick)."
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.margins: 10
+        wrapMode: Text.WordWrap
+    }
+
     Timer {
         id: cooldownTimer
         interval: 500
@@ -54,7 +64,10 @@ Item {
 
     Map {
         id: map
-        anchors.fill: parent
+        anchors.top: text.bottom
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
         plugin: mapPlugin;
         center: locationOslo
         zoomLevel: 13