Positioners example: Update by coding conventions from official doc

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

Pick-to: 6.5 6.5.0
Change-Id: I2c8077cea2bd55ec6a407eca85394a667c6a289e
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>

3 files changed, 199 insertions, 59 deletions

diff --git a/examples/quick/positioners/positioners-attachedproperties.qml b/examples/quick/positioners/positioners-attachedproperties.qml
index 60aabb6b52..18cf7d866d 100644
--- a/examples/quick/positioners/positioners-attachedproperties.qml
+++ b/examples/quick/positioners/positioners-attachedproperties.qml
@@ -17,7 +17,7 @@ Rectangle {
       anchors.top: parent.top
       anchors.right: parent.right
       anchors.margins: 10
-      text: hidingRect.visible ? "Hide" : "Show"
+      text: hidingRect.visible ? qsTr("Hide") : qsTr("Show")
       onClicked: hidingRect.visible = !hidingRect.visible
     }
 
@@ -42,9 +42,9 @@ Rectangle {
               anchors.left: parent.right
               anchors.leftMargin: 20
               anchors.verticalCenter: parent.verticalCenter
-              text: "Index: " + parent.Positioner.index
-                  + (parent.Positioner.isFirstItem ? " (First)" : "")
-                  + (parent.Positioner.isLastItem ? " (Last)" : "")
+              text: qsTr("Index: %1%2%3").arg(parent.Positioner.index)
+                        .arg(parent.Positioner.isFirstItem ? qsTr(" (First)") : "")
+                        .arg(parent.Positioner.isLastItem ? qsTr(" (Last)") : "")
             }
 
             // When mouse is clicked, display the values of the positioner
@@ -65,9 +65,9 @@ Rectangle {
               anchors.left: parent.right
               anchors.leftMargin: 20
               anchors.verticalCenter: parent.verticalCenter
-              text: "Index: " + parent.Positioner.index
-                  + (parent.Positioner.isFirstItem ? " (First)" : "")
-                  + (parent.Positioner.isLastItem ? " (Last)" : "")
+              text: qsTr("Index: %1%2%3").arg(parent.Positioner.index)
+                        .arg(parent.Positioner.isFirstItem ? qsTr(" (First)") : "")
+                        .arg(parent.Positioner.isLastItem ? qsTr(" (Last)") : "")
             }
 
             // When mouse is clicked, display the values of the positioner
@@ -87,9 +87,9 @@ Rectangle {
               anchors.left: parent.right
               anchors.leftMargin: 20
               anchors.verticalCenter: parent.verticalCenter
-              text: "Index: " + parent.Positioner.index
-                  + (parent.Positioner.isFirstItem ? " (First)" : "")
-                  + (parent.Positioner.isLastItem ? " (Last)" : "")
+              text: qsTr("Index: %1%2%3").arg(parent.Positioner.index)
+                        .arg(parent.Positioner.isFirstItem ? qsTr(" (First)") : "")
+                        .arg(parent.Positioner.isLastItem ? qsTr(" (Last)") : "")
             }
 
             // When mouse is clicked, display the values of the positioner
@@ -111,18 +111,18 @@ Rectangle {
                 anchors.left: parent.right
                 anchors.leftMargin: 20
                 anchors.verticalCenter: parent.verticalCenter
-                text: "Index: " + parent.Positioner.index
-                    + (parent.Positioner.isFirstItem ? " (First)" : "")
-                    + (parent.Positioner.isLastItem ? " (Last)" : "")
+                text: qsTr("Index: %1%2%3").arg(parent.Positioner.index)
+                          .arg(parent.Positioner.isFirstItem ? qsTr(" (First)") : "")
+                          .arg(parent.Positioner.isLastItem ? qsTr(" (Last)") : "")
             }
         }
 
         // Print the index of the child item in the positioner and convenience
         // properties showing if it's the first or last item.
         function showInfo(positioner) {
-            console.log("Item Index = " + positioner.index)
-            console.log("  isFirstItem = " + positioner.isFirstItem)
-            console.log("  isLastItem = " + positioner.isLastItem)
+            console.log(qsTr("Item Index = ") + positioner.index)
+            console.log(qsTr("  isFirstItem = ") + positioner.isFirstItem)
+            console.log(qsTr("  isLastItem = ") + positioner.isLastItem)
         }
     }
 }
diff --git a/examples/quick/positioners/positioners-transitions.qml b/examples/quick/positioners/positioners-transitions.qml
index 4507080182..44eb2ea625 100644
--- a/examples/quick/positioners/positioners-transitions.qml
+++ b/examples/quick/positioners/positioners-transitions.qml
@@ -19,7 +19,7 @@ Item {
         interval: 2000
         running: true
         repeat: true
-        onTriggered: page.effectiveOpacity = (page.effectiveOpacity == 1.0 ? 0.0 : 1.0);
+        onTriggered: page.effectiveOpacity = (page.effectiveOpacity == 1.0 ? 0.0 : 1.0)
     }
 
     Column {
@@ -32,41 +32,73 @@ Item {
         spacing: page.elementSpacing
 
         populate: Transition {
-            NumberAnimation { properties: "x,y"; from: 200; duration: 100; easing.type: Easing.OutBounce }
+            NumberAnimation {
+                properties: "x,y"
+                from: 200
+                duration: 100
+                easing.type: Easing.OutBounce
+            }
         }
         add: Transition {
-            NumberAnimation { properties: "y"; easing.type: Easing.OutQuad }
+            NumberAnimation {
+                properties: "y"
+                easing.type: Easing.OutQuad
+            }
         }
         move: Transition {
-            NumberAnimation { properties: "y"; easing.type: Easing.OutBounce }
+            NumberAnimation {
+                properties: "y"
+                easing.type: Easing.OutBounce
+            }
         }
 
-        Rectangle { color: "#80c342"; width: page.bigSize; height: page.smallSize }
+        Rectangle {
+            color: "#80c342"
+            width: page.bigSize
+            height: page.smallSize
+        }
 
         Rectangle {
             id: greenV1
+
             visible: opacity != 0
-            width: page.bigSize; height: page.smallSize
+            width: page.bigSize
+            height: page.smallSize
             color: "#006325"
             border.color: "transparent"
             Behavior on opacity { NumberAnimation {} }
             opacity: page.effectiveOpacity
         }
 
-        Rectangle { color: "#14aaff"; width: page.bigSize; height: page.smallSize }
+        Rectangle {
+            color: "#14aaff"
+            width: page.bigSize
+            height: page.smallSize
+        }
 
         Rectangle {
             id: greenV2
+
             visible: opacity != 0
-            width: page.bigSize; height: page.smallSize
+            width: page.bigSize
+            height: page.smallSize
             color: "#006325"
             border.color: "transparent"
             Behavior on opacity { NumberAnimation {} }
             opacity: page.effectiveOpacity
         }
 
-        Rectangle { color: "#6400aa"; width: page.bigSize; height: page.smallSize }
-        Rectangle { color: "#80c342"; width: page.bigSize; height: page.smallSize }
+        Rectangle {
+            color: "#6400aa"
+            width: page.bigSize
+            height: page.smallSize
+        }
+
+        Rectangle {
+            color: "#80c342"
+            width: page.bigSize
+            height: page.smallSize
+        }
     }
 
     Row {
@@ -79,41 +111,73 @@ Item {
         spacing: page.elementSpacing
 
         populate: Transition {
-            NumberAnimation { properties: "x,y"; from: 200; duration: 100; easing.type: Easing.OutBounce }
+            NumberAnimation {
+                properties: "x,y"
+                from: 200
+                duration: 100
+                easing.type: Easing.OutBounce
+            }
         }
         add: Transition {
-            NumberAnimation { properties: "x"; easing.type: Easing.OutQuad }
+            NumberAnimation {
+                properties: "x"
+                easing.type: Easing.OutQuad
+            }
         }
         move: Transition {
-            NumberAnimation { properties: "x"; easing.type: Easing.OutBounce }
+            NumberAnimation {
+                properties: "x"
+                easing.type: Easing.OutBounce
+            }
         }
 
-        Rectangle { color: "#80c342"; width: page.smallSize; height: page.bigSize }
+        Rectangle {
+            color: "#80c342"
+            width: page.smallSize
+            height: page.bigSize
+        }
 
         Rectangle {
             id: blueH1
+
             visible: opacity != 0
-            width: page.smallSize; height: page.bigSize
+            width: page.smallSize
+            height: page.bigSize
             color: "#006325"
             border.color: "transparent"
             Behavior on opacity { NumberAnimation {} }
             opacity: page.effectiveOpacity
         }
 
-        Rectangle { color: "#14aaff"; width: page.smallSize; height: page.bigSize }
+        Rectangle {
+            color: "#14aaff"
+            width: page.smallSize
+            height: page.bigSize
+        }
 
         Rectangle {
             id: greenH2
+
             visible: opacity != 0
-            width: page.smallSize; height: page.bigSize
+            width: page.smallSize
+            height: page.bigSize
             color: "#006325"
             border.color: "transparent"
             Behavior on opacity { NumberAnimation {} }
             opacity: page.effectiveOpacity
         }
 
-        Rectangle { color: "#6400aa"; width: page.smallSize; height: page.bigSize }
-        Rectangle { color: "#80c342"; width: page.smallSize; height: page.bigSize }
+        Rectangle {
+            color: "#6400aa"
+            width: page.smallSize
+            height: page.bigSize
+        }
+
+        Rectangle {
+            color: "#80c342"
+            width: page.smallSize
+            height: page.bigSize
+        }
     }
 
     Grid {
@@ -124,54 +188,97 @@ Item {
         spacing: page.elementSpacing
 
         populate: Transition {
-            NumberAnimation { properties: "x,y"; from: 200; duration: 100; easing.type: Easing.OutBounce }
+            NumberAnimation {
+                properties: "x,y"
+                from: 200
+                duration: 100
+                easing.type: Easing.OutBounce
+            }
         }
         add: Transition {
-            NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce }
+            NumberAnimation {
+                properties: "x,y"
+                easing.type: Easing.OutBounce
+            }
         }
         move: Transition {
-            NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce }
+            NumberAnimation {
+                properties: "x,y"
+                easing.type: Easing.OutBounce
+            }
         }
 
-        Rectangle { color: "#80c342"; width: page.smallSize; height: page.smallSize }
+        Rectangle {
+            color: "#80c342"
+            width: page.smallSize
+            height: page.smallSize
+        }
 
         Rectangle {
             id: greenG1
+
             visible: opacity != 0
-            width: page.smallSize; height: page.smallSize
+            width: page.smallSize
+            height: page.smallSize
             color: "#006325"
             border.color: "transparent"
             Behavior on opacity { NumberAnimation {} }
             opacity: page.effectiveOpacity
         }
 
-        Rectangle { color: "#14aaff"; width: page.smallSize; height: page.smallSize }
+        Rectangle {
+            color: "#14aaff"
+            width: page.smallSize
+            height: page.smallSize
+        }
 
         Rectangle {
             id: greenG2
+
             visible: opacity != 0
-            width: page.smallSize; height:page. smallSize
+            width: page.smallSize
+            height:page. smallSize
             color: "#006325"
             border.color: "transparent"
             Behavior on opacity { NumberAnimation {} }
             opacity: page.effectiveOpacity
         }
 
-        Rectangle { color: "#6400aa"; width: page.smallSize; height: page.smallSize }
+        Rectangle {
+            color: "#6400aa"
+            width: page.smallSize
+            height: page.smallSize
+        }
 
         Rectangle {
             id: greenG3
+
             visible: opacity != 0
-            width: page.smallSize; height: page.smallSize
+            width: page.smallSize
+            height: page.smallSize
             color: "#006325"
             border.color: "transparent"
             Behavior on opacity { NumberAnimation {} }
             opacity: page.effectiveOpacity
         }
 
-        Rectangle { color: "#80c342"; width: page.smallSize; height: page.smallSize }
-        Rectangle { color: "#14aaff"; width: page.smallSize; height: page.smallSize }
-        Rectangle { color: "#6400aa"; width: page.smallSize; height: page.smallSize }
+        Rectangle {
+            color: "#80c342"
+            width: page.smallSize
+            height: page.smallSize
+        }
+
+        Rectangle {
+            color: "#14aaff"
+            width: page.smallSize
+            height: page.smallSize
+        }
+
+        Rectangle {
+            color: "#6400aa"
+            width: page.smallSize
+            height: page.smallSize
+        }
     }
 
     Flow {
@@ -185,58 +292,91 @@ Item {
 
         //! [move]
         move: Transition {
-            NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce }
+            NumberAnimation {
+                properties: "x,y"
+                easing.type: Easing.OutBounce
+            }
         }
         //! [move]
 
         //! [add]
         add: Transition {
-            NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce }
+            NumberAnimation {
+                properties: "x,y"
+                easing.type: Easing.OutBounce
+            }
         }
         //! [add]
 
         //! [populate]
         populate: Transition {
-            NumberAnimation { properties: "x,y"; from: 200; duration: 100; easing.type: Easing.OutBounce }
+            NumberAnimation {
+                properties: "x,y"
+                from: 200
+                duration: 100
+                easing.type: Easing.OutBounce
+            }
         }
         //! [populate]
 
-        Rectangle { color: "#80c342"; width: page.smallSize; height: page.smallSize }
+        Rectangle {
+            color: "#80c342"
+            width: page.smallSize
+            height: page.smallSize
+        }
 
         Rectangle {
             id: greenF1
+
             visible: opacity != 0
-            width: 0.6 * page.bigSize; height: page.smallSize
+            width: 0.6 * page.bigSize
+            height: page.smallSize
             color: "#006325"
             border.color: "transparent"
             Behavior on opacity { NumberAnimation {} }
             opacity: page.effectiveOpacity
         }
 
-        Rectangle { color: "#14aaff"; width: 0.3 * page.bigSize; height: page.smallSize }
+        Rectangle {
+            color: "#14aaff"
+            width: 0.3 * page.bigSize
+            height: page.smallSize
+        }
 
         Rectangle {
             id: greenF2
+
             visible: opacity != 0
-            width: 0.6 * page.bigSize; height: page.smallSize
+            width: 0.6 * page.bigSize
+            height: page.smallSize
             color: "#006325"
             border.color: "transparent"
             Behavior on opacity { NumberAnimation {} }
             opacity: page.effectiveOpacity
         }
 
-        Rectangle { color: "#6400aa"; width: page.smallSize; height: page.smallSize }
+        Rectangle {
+            color: "#6400aa"
+            width: page.smallSize
+            height: page.smallSize
+        }
 
         Rectangle {
             id: greenF3
+
             visible: opacity != 0
-            width: 0.4 * page.bigSize; height: page.smallSize
+            width: 0.4 * page.bigSize
+            height: page.smallSize
             color: "#006325"
             border.color: "transparent"
             Behavior on opacity { NumberAnimation {} }
             opacity: page.effectiveOpacity
         }
 
-        Rectangle { color: "#80c342"; width: 0.8 * page.bigSize; height: page.smallSize }
+        Rectangle {
+            color: "#80c342"
+            width: 0.8 * page.bigSize
+            height: page.smallSize
+        }
     }
 }
diff --git a/examples/quick/positioners/positioners.qml b/examples/quick/positioners/positioners.qml
index 645979b598..d166135441 100644
--- a/examples/quick/positioners/positioners.qml
+++ b/examples/quick/positioners/positioners.qml
@@ -11,8 +11,8 @@ Item {
         id: ll
         anchors.fill: parent
         Component.onCompleted: {
-            addExample("Transitions", "Fluidly shows and hides elements",  Qt.resolvedUrl("positioners-transitions.qml"));
-            addExample("Attached Properties", "Knows where it is in the positioner", Qt.resolvedUrl("positioners-attachedproperties.qml"));
+            addExample(qsTr("Transitions"), qsTr("Fluidly shows and hides elements"),  Qt.resolvedUrl("positioners-transitions.qml"))
+            addExample(qsTr("Attached Properties"), qsTr("Knows where it is in the positioner"), Qt.resolvedUrl("positioners-attachedproperties.qml"))
         }
     }
 }