Keyinteraction example: Update by coding conventions from official docv6.5.06.5.0

- string are translated.
- JS statements no longer end with semi-colon.
- Fix qmllint warning.

Change-Id: I83f2b702c9bb9f02f86728e2277297272cd75251
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>
(cherry picked from commit 023849fce46d25edc41db7b7c9e275cb0de5c189)
Reviewed-by: Qt Cherry-pick Bot <cherrypick_bot@qt-project.org>

6 files changed, 204 insertions, 54 deletions

diff --git a/examples/quick/keyinteraction/ContextMenu.qml b/examples/quick/keyinteraction/ContextMenu.qml
index 6364118602..22d149fd9d 100644
--- a/examples/quick/keyinteraction/ContextMenu.qml
+++ b/examples/quick/keyinteraction/ContextMenu.qml
@@ -5,6 +5,7 @@ import QtQuick
 
 FocusScope {
     id: container
+
     required property Item keyRightTarget
 
     property bool open: false
@@ -19,10 +20,14 @@ FocusScope {
             Keys.onRightPressed: container.keyRightTarget.focus = true
 
             Text {
-                anchors { top: parent.top; horizontalCenter: parent.horizontalCenter; margins: 30 }
+                anchors {
+                    top: parent.top
+                    horizontalCenter: parent.horizontalCenter
+                    margins: 30
+                }
                 color: "black"
                 font.pixelSize: 14
-                text: "Context Menu"
+                text: qsTr("Context Menu")
             }
         }
     }
diff --git a/examples/quick/keyinteraction/GridMenu.qml b/examples/quick/keyinteraction/GridMenu.qml
index d21f846089..b17a72bdc8 100644
--- a/examples/quick/keyinteraction/GridMenu.qml
+++ b/examples/quick/keyinteraction/GridMenu.qml
@@ -1,10 +1,12 @@
 // Copyright (C) 2021 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
 
+pragma ComponentBehavior: Bound
 import QtQuick
 
 FocusScope {
     id: menu
+
     property alias interactive: gridView.interactive
     required property Item keyUpTarget
     required property Item keyDownTarget
@@ -14,14 +16,24 @@ FocusScope {
         anchors.fill: parent
         clip: true
         gradient: Gradient {
-            GradientStop { position: 0.0; color: "#193441" }
-            GradientStop { position: 1.0; color: Qt.darker("#193441") }
+            GradientStop {
+                position: 0.0
+                color: "#193441"
+            }
+            GradientStop {
+                position: 1.0
+                color: Qt.darker("#193441")
+            }
         }
 
         GridView {
             id: gridView
-            anchors.fill: parent; anchors.leftMargin: 20; anchors.rightMargin: 20
-            cellWidth: 152; cellHeight: 152
+
+            anchors.fill: parent
+            anchors.leftMargin: 20
+            anchors.rightMargin: 20
+            cellWidth: 152
+            cellHeight: 152
             focus: true
             model: 12
 
@@ -31,22 +43,36 @@ FocusScope {
 
             delegate: Item {
                 id: container
-                width: GridView.view.cellWidth
-                height: GridView.view.cellHeight
+
+                width: gridView.cellWidth
+                height: gridView.cellHeight
                 required property int index
 
                 Rectangle {
                     id: content
+
                     color: "transparent"
                     antialiasing: true
-                    anchors.fill: parent; anchors.margins: 20; radius: 10
+                    anchors.fill: parent
+                    anchors.margins: 20
+                    radius: 10
 
-                    Rectangle { color: "#91AA9D"; anchors.fill: parent; anchors.margins: 3; radius: 8; antialiasing: true }
-                    Image { source: "images/qt-logo.png"; anchors.centerIn: parent }
+                    Rectangle {
+                        color: "#91AA9D"
+                        anchors.fill: parent
+                        anchors.margins: 3
+                        radius: 8
+                        antialiasing: true
+                    }
+                    Image {
+                        source: "images/qt-logo.png"
+                        anchors.centerIn: parent
+                    }
                 }
 
                 MouseArea {
                     id: mouseArea
+
                     anchors.fill: parent
                     hoverEnabled: true
 
@@ -57,7 +83,8 @@ FocusScope {
                 }
 
                 states: State {
-                    name: "active"; when: container.activeFocus
+                    name: "active"
+                    when: container.activeFocus
                     PropertyChanges {
                         content {
                             color: "#FCFFF5"
@@ -67,7 +94,10 @@ FocusScope {
                 }
 
                 transitions: Transition {
-                    NumberAnimation { properties: "scale"; duration: 100 }
+                    NumberAnimation {
+                        properties: "scale"
+                        duration: 100
+                    }
                 }
             }
         }
diff --git a/examples/quick/keyinteraction/ListMenu.qml b/examples/quick/keyinteraction/ListMenu.qml
index 47201099ff..0f4763e1b2 100644
--- a/examples/quick/keyinteraction/ListMenu.qml
+++ b/examples/quick/keyinteraction/ListMenu.qml
@@ -6,67 +6,117 @@ import QtQuick
 
 FocusScope {
     id: menu
+
     clip: true
     required property Item keyUpTarget
     required property Item keyLeftTarget
 
     ListView {
         id: list1
-        y: activeFocus ? 10 : 40; width: parent.width / 3; height: parent.height - 20
+
+        y: activeFocus ? 10 : 40
+        width: parent.width / 3
+        height: parent.height - 20
         focus: true
+
         KeyNavigation.up: menu.keyUpTarget
         KeyNavigation.left: menu.keyLeftTarget
         KeyNavigation.right: list2
-        model: 10; cacheBuffer: 200
+
+        model: 10
+        cacheBuffer: 200
         delegate: ListViewDelegate {}
 
         Behavior on y {
-            NumberAnimation { duration: 600; easing.type: Easing.OutQuint }
+            NumberAnimation {
+                duration: 600
+                easing.type: Easing.OutQuint
+            }
         }
     }
 
     ListView {
         id: list2
-        y: activeFocus ? 10 : 40; x: parseInt(parent.width / 3); width: parent.width / 3; height: parent.height - 20
+
+        y: activeFocus ? 10 : 40
+        x: parseInt(parent.width / 3)
+        width: parent.width / 3
+        height: parent.height - 20
+
         KeyNavigation.up: menu.keyUpTarget
         KeyNavigation.left: list1
         KeyNavigation.right: list3
-        model: 10; cacheBuffer: 200
+
+        model: 10
+        cacheBuffer: 200
         delegate: ListViewDelegate {}
 
         Behavior on y {
-            NumberAnimation { duration: 600; easing.type: Easing.OutQuint }
+            NumberAnimation {
+                duration: 600
+                easing.type: Easing.OutQuint
+            }
         }
     }
 
     ListView {
         id: list3
-        y: activeFocus ? 10 : 40; x: parseInt(2 * parent.width / 3); width: parent.width / 3; height: parent.height - 20
+
+        y: activeFocus ? 10 : 40
+        x: parseInt(2 * parent.width / 3)
+        width: parent.width / 3
+        height: parent.height - 20
+
         KeyNavigation.up: menu.keyUpTarget
         KeyNavigation.left: list2
-        model: 10; cacheBuffer: 200
+
+        model: 10
+        cacheBuffer: 200
         delegate: ListViewDelegate {}
 
         Behavior on y {
-            NumberAnimation { duration: 600; easing.type: Easing.OutQuint }
+            NumberAnimation {
+                duration: 600
+                easing.type: Easing.OutQuint
+            }
         }
     }
 
-    Rectangle { width: parent.width; height: 1; color: "#D1DBBD" }
+    Rectangle {
+        width: parent.width
+        height: 1
+        color: "#D1DBBD"
+    }
 
     Rectangle {
-        y: 1; width: parent.width; height: 10
+        y: 1
+        width: parent.width
+        height: 10
         gradient: Gradient {
-            GradientStop { position: 0.0; color: "#3E606F" }
-            GradientStop { position: 1.0; color: "transparent" }
+            GradientStop {
+                position: 0.0
+                color: "#3E606F"
+            }
+            GradientStop {
+                position: 1.0
+                color: "transparent"
+            }
         }
     }
 
     Rectangle {
-        y: parent.height - 10; width: parent.width; height: 10
+        y: parent.height - 10
+        width: parent.width
+        height: 10
         gradient: Gradient {
-            GradientStop { position: 1.0; color: "#3E606F" }
-            GradientStop { position: 0.0; color: "transparent" }
+            GradientStop {
+                position: 1.0
+                color: "#3E606F"
+            }
+            GradientStop {
+                position: 0.0
+                color: "transparent"
+            }
         }
     }
 }
diff --git a/examples/quick/keyinteraction/ListViewDelegate.qml b/examples/quick/keyinteraction/ListViewDelegate.qml
index 4b2424f393..8ae43c8ab5 100644
--- a/examples/quick/keyinteraction/ListViewDelegate.qml
+++ b/examples/quick/keyinteraction/ListViewDelegate.qml
@@ -7,28 +7,42 @@ Item {
     id: container
     required property int index
 
-    width: ListView.view.width; height: 60; anchors.leftMargin: 10; anchors.rightMargin: 10
+    width: ListView.view.width
+    height: 60
+    anchors.leftMargin: 10
+    anchors.rightMargin: 10
 
     Rectangle {
         id: content
-        anchors.centerIn: parent; width: container.width - 40; height: container.height - 10
+
+        anchors.centerIn: parent
+        width: container.width - 40
+        height: container.height - 10
         color: "transparent"
         antialiasing: true
         radius: 10
 
-        Rectangle { anchors.fill: parent; anchors.margins: 3; color: "#91AA9D"; antialiasing: true; radius: 8 }
+        Rectangle {
+            anchors.fill: parent
+            anchors.margins: 3
+            color: "#91AA9D"
+            antialiasing: true
+            radius: 8
+        }
     }
 
     Text {
         id: label
+
         anchors.centerIn: content
-        text: "List element " + (container.index + 1)
+        text: qsTr("List element ") + (container.index + 1)
         color: "#193441"
         font.pixelSize: 14
     }
 
     MouseArea {
         id: mouseArea
+
         anchors.fill: parent
         hoverEnabled: true
 
@@ -39,7 +53,8 @@ Item {
     }
 
     states: State {
-        name: "active"; when: container.activeFocus
+        name: "active"
+        when: container.activeFocus
         PropertyChanges {
             content {
                 color: "#FCFFF5"
@@ -50,6 +65,9 @@ Item {
     }
 
     transitions: Transition {
-        NumberAnimation { properties: "scale"; duration: 100 }
+        NumberAnimation {
+            properties: "scale"
+            duration: 100
+        }
     }
 }
diff --git a/examples/quick/keyinteraction/TabMenu.qml b/examples/quick/keyinteraction/TabMenu.qml
index e3c622aca1..04451b3206 100644
--- a/examples/quick/keyinteraction/TabMenu.qml
+++ b/examples/quick/keyinteraction/TabMenu.qml
@@ -1,6 +1,7 @@
 // Copyright (C) 2021 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
 
+pragma ComponentBehavior: Bound
 import QtQuick
 
 FocusScope {
@@ -12,19 +13,30 @@ FocusScope {
         anchors.fill: parent
         clip: true
         gradient: Gradient {
-            GradientStop { position: 0.0; color: "#193441" }
-            GradientStop { position: 1.0; color: Qt.darker("#193441") }
+            GradientStop {
+                position: 0.0
+                color: "#193441"
+            }
+            GradientStop {
+                position: 1.0
+                color: Qt.darker("#193441")
+            }
         }
 
         Row {
             id: tabView
-            anchors.fill: parent; anchors.leftMargin: 20; anchors.rightMargin: 20
+
+            anchors.fill: parent
+            anchors.leftMargin: 20
+            anchors.rightMargin: 20
             Repeater {
                 activeFocusOnTab: false
                 model: 5
                 Item {
                     id: container
-                    width: 152; height: 152
+
+                    width: 152
+                    height: 152
                     activeFocusOnTab: true
                     focus: true
 
@@ -35,10 +47,21 @@ FocusScope {
                         id: content
                         color: "transparent"
                         antialiasing: true
-                        anchors.fill: parent; anchors.margins: 20; radius: 10
+                        anchors.fill: parent
+                        anchors.margins: 20
+                        radius: 10
 
-                        Rectangle { color: "#91AA9D"; anchors.fill: parent; anchors.margins: 3; radius: 8; antialiasing: true }
-                        Image { source: "images/qt-logo.png"; anchors.centerIn: parent }
+                        Rectangle {
+                            color: "#91AA9D"
+                            anchors.fill: parent
+                            anchors.margins: 3
+                            radius: 8
+                            antialiasing: true
+                        }
+                        Image {
+                            source: "images/qt-logo.png"
+                            anchors.centerIn: parent
+                        }
                     }
 
                     MouseArea {
@@ -52,7 +75,8 @@ FocusScope {
                     }
 
                     states: State {
-                        name: "active"; when: container.activeFocus
+                        name: "active"
+                        when: container.activeFocus
                         PropertyChanges {
                             content {
                                 color: "#FCFFF5"
@@ -62,7 +86,10 @@ FocusScope {
                     }
 
                     transitions: Transition {
-                        NumberAnimation { properties: "scale"; duration: 100 }
+                        NumberAnimation {
+                            properties: "scale"
+                            duration: 100
+                        }
                     }
                 }
             }
diff --git a/examples/quick/keyinteraction/focus.qml b/examples/quick/keyinteraction/focus.qml
index 385f35d05b..42edcb5f01 100644
--- a/examples/quick/keyinteraction/focus.qml
+++ b/examples/quick/keyinteraction/focus.qml
@@ -7,18 +7,23 @@ import QtQuick
 Rectangle {
     id: window
 
-    width: 800; height: 640
+    width: 800
+    height: 640
     color: "#3E606F"
 
     FocusScope {
         id: mainView
 
-        width: parent.width; height: parent.height
+        width: parent.width
+        height: parent.height
         focus: true
 
         TabMenu {
             id: tabMenu
-            y: 160; width: parent.width; height: 160
+
+            y: 160
+            width: parent.width
+            height: 160
 
             keyUpTarget: listMenu
             keyDownTarget: gridMenu
@@ -34,7 +39,10 @@ Rectangle {
 
         GridMenu {
             id: gridMenu
-            y: 320; width: parent.width; height: 320
+
+            y: 320
+            width: parent.width
+            height: 320
             activeFocusOnTab: true
 
             keyUpTarget: tabMenu
@@ -49,7 +57,10 @@ Rectangle {
 
         ListMenu {
             id: listMenu
-            y: 640; width: parent.width; height: 320
+
+            y: 640
+            width: parent.width
+            height: 320
             activeFocusOnTab: true
 
             keyUpTarget: gridMenu
@@ -72,7 +83,7 @@ Rectangle {
             State {
                 name: "showTabViews"
                 PropertyChanges {
-                    tabMenu.y:  160
+                    tabMenu.y: 160
                     gridMenu.y: 320
                     listMenu.y: 640
                 }
@@ -81,7 +92,7 @@ Rectangle {
             State {
                 name: "showGridViews"
                 PropertyChanges {
-                    tabMenu.y:    0
+                    tabMenu.y: 0
                     gridMenu.y: 160
                     listMenu.y: 480
                 }
@@ -98,7 +109,11 @@ Rectangle {
         ]
 
         transitions: Transition {
-            NumberAnimation { properties: "y"; duration: 600; easing.type: Easing.OutQuint }
+            NumberAnimation {
+                properties: "y"
+                duration: 600
+                easing.type: Easing.OutQuint
+            }
         }
     }
 
@@ -108,7 +123,8 @@ Rectangle {
         anchors.verticalCenter: parent.verticalCenter
 
         MouseArea {
-            anchors.fill: parent; anchors.margins: -10
+            anchors.fill: parent
+            anchors.margins: -10
             onClicked: contextMenu.focus = true
         }
     }
@@ -135,6 +151,10 @@ Rectangle {
     }
 
     transitions: Transition {
-        NumberAnimation { properties: "x,opacity"; duration: 600; easing.type: Easing.OutQuint }
+        NumberAnimation {
+            properties: "x,opacity"
+            duration: 600
+            easing.type: Easing.OutQuint
+        }
     }
 }