1 files changed, 73 insertions, 17 deletions

diff --git a/DemoApplication/main.qml b/DemoApplication/main.qml
index bfb7840..1bc600b 100644
--- a/DemoApplication/main.qml
+++ b/DemoApplication/main.qml
@@ -13,35 +13,85 @@ ApplicationWindow {
     visible: true
     title: qsTr("Cursor Navigation Demo Application")
 
-    header:
+    /* there are alternative ways to implement a tabbar. the traditional tabbar has
+     * problems with CursorNavigation: when trying to navigate the cursor on it
+     * right after launching the application, the cursor will not be passed onto
+     * the children. However, if clicked first, the navigation works. Another
+     * workaround is to force the active focus on one of the tabs.
+     * The listview approach works right out of the box
+     */
 
-        TabBar {
-            id: tabBar
-            width: window.width
+    header:/* ListView {
+        id: tabBar
+        orientation: ListView.Horizontal
+        width: window.width
+        height: 40
+        CursorNavigation.acceptsCursor: true
 
+        delegate: Rectangle {
             CursorNavigation.acceptsCursor: true
+            CursorNavigation.onHasCursorChanged: {
+                if (CursorNavigation.hasCursor)
+                    tabBar.currentIndex = index
+            }
+            width: tabBar.width/tabBar.count
+            height: 40
+            border.width: 2
+            border.color: CursorNavigation.hasCursor ? "red" : "transparent"
+
+            Text { anchors.centerIn: parent; text: pageName}
+        }
 
-            CNTabButton {
-                text: qsTr("Page 1")
-                focus: true
+        model: ListModel {
+            ListElement {
+                pageName: "Page 1"
             }
-            CNTabButton {
-                text: qsTr("Page 2")
+            ListElement {
+                pageName: "Page 2"
             }
-            CNTabButton {
-                text: qsTr("Page 3")
+            ListElement {
+                pageName: "Page 3"
             }
-            CNTabButton {
-                text: qsTr("Page 4")
+            ListElement {
+                pageName: "Page 4"
             }
-            CNTabButton {
-                text: qsTr("Page 5")
+            ListElement {
+                pageName: "Page 5"
             }
-            CNTabButton {
-                text: qsTr("Map")
+            ListElement {
+                pageName: "Map"
             }
         }
 
+    }*/
+
+    TabBar {
+        id: tabBar
+        width: window.width
+        CursorNavigation.acceptsCursor: true
+
+        CNTabButton {
+            id: defaultButton
+            text: qsTr("Page 1")
+            focus: true
+        }
+        CNTabButton {
+            text: qsTr("Page 2")
+        }
+        CNTabButton {
+            text: qsTr("Page 3")
+        }
+        CNTabButton {
+            text: qsTr("Page 4")
+        }
+        CNTabButton {
+            text: qsTr("Page 5")
+        }
+        CNTabButton {
+            text: qsTr("Map")
+        }
+    }
+
     contentData: StackLayout {
         anchors.fill: parent
         currentIndex: tabBar.currentIndex
@@ -52,4 +102,10 @@ ApplicationWindow {
         Page5 { }
         Page6 { }
     }
+
+    //a trick that ensure the cursor can be moved on the tabbar without needing to click teh tabbar first
+    Component.onCompleted: {
+        defaultButton.forceActiveFocus()
+    }
+
 }