Shapes example: adhere to guidelines

- Fix all qmllint warnings.
  (except for main.qml, interactive.qml, and sampling.qml)
- Translate user facing strings when it makes sense to do so.
- Mark readonly properties as 'readonly'.
- Avoid binding on multiple properties on a single line.
  (except for tiger.qml).

Pick-to: 6.5
Change-Id: Idbf8a472ca5ba5385d1368aadd608e95231a07f0
Reviewed-by: Shawn Rutledge <shawn.rutledge@qt.io>

22 files changed, 759 insertions, 317 deletions

diff --git a/examples/quick/shapes/arcDirection.qml b/examples/quick/shapes/arcDirection.qml
index 7f457719ac..60ec181380 100644
--- a/examples/quick/shapes/arcDirection.qml
+++ b/examples/quick/shapes/arcDirection.qml
@@ -17,21 +17,28 @@ Rectangle {
 
         Repeater {
             model: 2
-            Shape {
+            delegate: Shape {
+                id: delegate
+
+                required property int index
+
                 anchors.fill: parent
 
                 ShapePath {
                     fillColor: "transparent"
-                    strokeColor: model.index === 0 ? "red" : "blue"
+                    strokeColor: delegate.index === 0 ? "red" : "blue"
                     strokeStyle: ShapePath.DashLine
                     strokeWidth: 4
 
-                    startX: 4; startY: 4
+                    startX: 4
+                    startY: 4
                     PathArc {
                         id: arc
-                        x: 96; y: 96
-                        radiusX: 100; radiusY: 100
-                        direction: model.index === 0 ? PathArc.Clockwise : PathArc.Counterclockwise
+                        x: 96
+                        y: 96
+                        radiusX: 100
+                        radiusY: 100
+                        direction: delegate.index === 0 ? PathArc.Clockwise : PathArc.Counterclockwise
                     }
                 }
             }
@@ -41,11 +48,11 @@ Rectangle {
     Column {
         anchors.right: parent.right
         Text {
-            text: "Clockwise (sweep 1)"
+            text: qsTr("Clockwise (sweep 1)")
             color: "red"
         }
         Text {
-            text: "Counter clockwise (sweep 0)"
+            text: qsTr("Counter clockwise (sweep 0)")
             color: "blue"
         }
     }
diff --git a/examples/quick/shapes/arcRotation.qml b/examples/quick/shapes/arcRotation.qml
index 178c3cda0d..2433280698 100644
--- a/examples/quick/shapes/arcRotation.qml
+++ b/examples/quick/shapes/arcRotation.qml
@@ -11,22 +11,29 @@ Rectangle {
 
     Repeater {
         model: 2
-        Shape {
+        delegate: Shape {
+            id: delegate1
+
+            required property int index
+
             width: 200
             height: 200
             anchors.centerIn: parent
 
             ShapePath {
                 fillColor: "transparent"
-                strokeColor: model.index === 0 ? "red" : "blue"
+                strokeColor: delegate1.index === 0 ? "red" : "blue"
                 strokeStyle: ShapePath.DashLine
                 strokeWidth: 4
 
-                startX: 50; startY: 100
+                startX: 50
+                startY: 100
                 PathArc {
-                    x: 150; y: 100
-                    radiusX: 50; radiusY: 20
-                    xAxisRotation: model.index === 0 ? 0 : 45
+                    x: 150
+                    y: 100
+                    radiusX: 50
+                    radiusY: 20
+                    xAxisRotation: delegate1.index === 0 ? 0 : 45
                 }
             }
         }
@@ -34,20 +41,27 @@ Rectangle {
 
     Repeater {
         model: 2
-        Shape {
+        delegate: Shape {
+            id: delegate2
+
+            required property int index
+
             width: 200
             height: 200
             anchors.centerIn: parent
 
             ShapePath {
                 fillColor: "transparent"
-                strokeColor: model.index === 0 ? "red" : "blue"
+                strokeColor: delegate2.index === 0 ? "red" : "blue"
 
-                startX: 50; startY: 100
+                startX: 50
+                startY: 100
                 PathArc {
-                    x: 150; y: 100
-                    radiusX: 50; radiusY: 20
-                    xAxisRotation: model.index === 0 ? 0 : 45
+                    x: 150
+                    y: 100
+                    radiusX: 50
+                    radiusY: 20
+                    xAxisRotation: delegate2.index === 0 ? 0 : 45
                     direction: PathArc.Counterclockwise
                 }
             }
@@ -57,11 +71,11 @@ Rectangle {
     Column {
         anchors.right: parent.right
         Text {
-            text: "0 degrees"
+            text: qsTr("0 degrees")
             color: "red"
         }
         Text {
-            text: "45 degrees"
+            text: qsTr("45 degrees")
             color: "blue"
         }
     }
diff --git a/examples/quick/shapes/capStyles.qml b/examples/quick/shapes/capStyles.qml
index 35a048c3d1..7fc7a4e2b9 100644
--- a/examples/quick/shapes/capStyles.qml
+++ b/examples/quick/shapes/capStyles.qml
@@ -6,7 +6,8 @@ import QtQuick.Shapes
 
 Rectangle {
     color: "lightGray"
-    width: 256; height: 256
+    width: 256
+    height: 256
 
     Shape {
         anchors.centerIn: parent
@@ -20,15 +21,29 @@ Rectangle {
             fillColor: "transparent"
 
             property int capStyleIdx: 0
-            property variant styles: [ ShapePath.FlatCap, ShapePath.SquareCap, ShapePath.RoundCap ]
-            property variant styleTexts: [ "FlatCap", "SquareCap", "RoundCap" ]
+            readonly property variant styles: [ ShapePath.FlatCap, ShapePath.SquareCap, ShapePath.RoundCap ]
+            readonly property variant styleTexts: [ qsTr("FlatCap"), qsTr("SquareCap"), qsTr("RoundCap") ]
 
             capStyle: styles[capStyleIdx]
 
-            startX: 40; startY: 30
-            PathQuad { x: 50; y: 80; controlX: 0; controlY: 80 }
-            PathLine { x: 150; y: 80 }
-            PathQuad { x: 160; y: 30; controlX: 200; controlY: 80 }
+            startX: 40
+            startY: 30
+            PathQuad {
+                x: 50
+                y: 80
+                controlX: 0
+                controlY: 80
+            }
+            PathLine {
+                x: 150
+                y: 80
+            }
+            PathQuad {
+                x: 160
+                y: 30
+                controlX: 200
+                controlY: 80
+            }
         }
     }
 
diff --git a/examples/quick/shapes/clippedtigers.qml b/examples/quick/shapes/clippedtigers.qml
index 6ec170fa24..8885f60dd7 100644
--- a/examples/quick/shapes/clippedtigers.qml
+++ b/examples/quick/shapes/clippedtigers.qml
@@ -9,12 +9,24 @@ Rectangle {
     width: 1024
     height: 768
 
-    property color col: "lightsteelblue"
+    readonly property color col: "lightsteelblue"
     gradient: Gradient {
-        GradientStop { position: 0.0; color: Qt.tint(root.col, "#20FFFFFF") }
-        GradientStop { position: 0.1; color: Qt.tint(root.col, "#20AAAAAA") }
-        GradientStop { position: 0.9; color: Qt.tint(root.col, "#20666666") }
-        GradientStop { position: 1.0; color: Qt.tint(root.col, "#20000000") }
+        GradientStop {
+            position: 0.0
+            color: Qt.tint(root.col, "#20FFFFFF")
+        }
+        GradientStop {
+            position: 0.1
+            color: Qt.tint(root.col, "#20AAAAAA")
+        }
+        GradientStop {
+            position: 0.9
+            color: Qt.tint(root.col, "#20666666")
+        }
+        GradientStop {
+            position: 1.0
+            color: Qt.tint(root.col, "#20000000")
+        }
     }
 
     Rectangle {
@@ -22,7 +34,7 @@ Rectangle {
         width: 200
         height: 200
         x: 150
-        property real centerY: parent.height / 2 - height / 2
+        readonly property real centerY: parent.height / 2 - height / 2
         property real dy: 0
         y: centerY + dy
         clip: true
@@ -37,20 +49,26 @@ Rectangle {
             visible: status === Loader.Ready
         }
 
-        SequentialAnimation on dy {
+        SequentialAnimation {
             loops: Animation.Infinite
-            running: loader1.status === Loader.Ready && loader1.item.status === Shape.Ready
+            running: loader1.status === Loader.Ready && (loader1.item as Shape)?.status === Shape.Ready
             NumberAnimation {
+                target: scissorRect
+                property: "dy"
                 from: 0
                 to: -scissorRect.centerY
                 duration: 2000
             }
             NumberAnimation {
+                target: scissorRect
+                property: "dy"
                 from: -scissorRect.centerY
                 to: scissorRect.centerY
                 duration: 4000
             }
             NumberAnimation {
+                target: scissorRect
+                property: "dy"
                 from: scissorRect.centerY
                 to: 0
                 duration: 2000
@@ -66,9 +84,11 @@ Rectangle {
         id: stencilRect
         width: 300
         height: 200
-        anchors.right: parent.right
-        anchors.rightMargin: 100
-        anchors.verticalCenter: parent.verticalCenter
+        anchors {
+            right: parent.right
+            rightMargin: 100
+            verticalCenter: parent.verticalCenter
+        }
         clip: true // NB! still clips to bounding rect (not shape)
 
         Loader {
diff --git a/examples/quick/shapes/cubicCurve.qml b/examples/quick/shapes/cubicCurve.qml
index 9c35a869bf..3fa4ed6f4b 100644
--- a/examples/quick/shapes/cubicCurve.qml
+++ b/examples/quick/shapes/cubicCurve.qml
@@ -23,22 +23,53 @@ Rectangle {
                 strokeColor: "black"
                 fillGradient: ConicalGradient {
                     id: conGrad
-                    centerX: 100; centerY: 75
-                    NumberAnimation on angle { from: 0; to: 360; duration: 10000; loops: Animation.Infinite }
-                    GradientStop { position: 0; color: "#00000000" }
-                    GradientStop { position: 0.10; color: "#ffe0cc73" }
-                    GradientStop { position: 0.17; color: "#ffc6a006" }
-                    GradientStop { position: 0.46; color: "#ff600659" }
-                    GradientStop { position: 0.72; color: "#ff0680ac" }
-                    GradientStop { position: 0.92; color: "#ffb9d9e6" }
-                    GradientStop { position: 1.00; color: "#00000000" }
+                    centerX: 100
+                    centerY: 75
+                    NumberAnimation on angle {
+                        from: 0
+                        to: 360
+                        duration: 10000
+                        loops: Animation.Infinite
+                    }
+                    GradientStop {
+                        position: 0
+                        color: "#00000000"
+                    }
+                    GradientStop {
+                        position: 0.10
+                        color: "#ffe0cc73"
+                    }
+                    GradientStop {
+                        position: 0.17
+                        color: "#ffc6a006"
+                    }
+                    GradientStop {
+                        position: 0.46
+                        color: "#ff600659"
+                    }
+                    GradientStop {
+                        position: 0.72
+                        color: "#ff0680ac"
+                    }
+                    GradientStop {
+                        position: 0.92
+                        color: "#ffb9d9e6"
+                    }
+                    GradientStop {
+                        position: 1.00
+                        color: "#00000000"
+                    }
                 }
 
-                startX: 50; startY: 100
+                startX: 50
+                startY: 100
                 PathCubic {
-                    x: 150; y: 100
-                    control1X: cp1.x; control1Y: cp1.y
-                    control2X: cp2.x; control2Y: cp2.y
+                    x: 150
+                    y: 100
+                    control1X: cp1.x
+                    control1Y: cp1.y
+                    control2X: cp2.x
+                    control2Y: cp2.y
                 }
             }
         }
@@ -46,7 +77,8 @@ Rectangle {
         Rectangle {
             id: cp1
             color: "red"
-            width: 10; height: 10
+            width: 10
+            height: 10
             SequentialAnimation {
                 loops: Animation.Infinite
                 running: true
@@ -84,7 +116,8 @@ Rectangle {
         Rectangle {
             id: cp2
             color: "blue"
-            width: 10; height: 10
+            width: 10
+            height: 10
             x: shape.width - width
             SequentialAnimation {
                 loops: Animation.Infinite
@@ -122,8 +155,10 @@ Rectangle {
     }
 
     Text {
-        anchors.right: parent.right
-        anchors.top: parent.top
-        text: "Conical gradient angle: " + Math.round(conGrad.angle)
+        anchors {
+            right: parent.right
+            top: parent.top
+        }
+        text: qsTr("Conical gradient angle: ") + Math.round(conGrad.angle)
     }
 }
diff --git a/examples/quick/shapes/dashPattern.qml b/examples/quick/shapes/dashPattern.qml
index 06b50dea2b..87db319c9a 100644
--- a/examples/quick/shapes/dashPattern.qml
+++ b/examples/quick/shapes/dashPattern.qml
@@ -16,38 +16,98 @@ Rectangle {
             strokeWidth: 4
             strokeColor: "red"
             fillGradient: RadialGradient {
-                centerX: 100; centerY: 100; centerRadius: 100
+                centerX: 100
+                centerY: 100
+                centerRadius: 100
                 SequentialAnimation on focalRadius {
                     loops: Animation.Infinite
-                    NumberAnimation { from: 1; to: 20; duration: 2000 }
-                    NumberAnimation { from: 20; to: 1; duration: 2000 }
+                    NumberAnimation {
+                        from: 1
+                        to: 20
+                        duration: 2000
+                    }
+                    NumberAnimation {
+                        from: 20
+                        to: 1
+                        duration: 2000
+                    }
                 }
                 SequentialAnimation on focalX {
                     loops: Animation.Infinite
-                    NumberAnimation { from: 50; to: 150; duration: 3000 }
-                    NumberAnimation { from: 150; to: 50; duration: 3000 }
+                    NumberAnimation {
+                        from: 50
+                        to: 150
+                        duration: 3000
+                    }
+                    NumberAnimation {
+                        from: 150
+                        to: 50
+                        duration: 3000
+                    }
                 }
                 SequentialAnimation on focalY {
                     loops: Animation.Infinite
-                    NumberAnimation { from: 50; to: 150; duration: 1000 }
-                    NumberAnimation { from: 150; to: 50; duration: 1000 }
-                }
-                GradientStop { position: 0; color: "#ffffff" }
-                GradientStop { position: 0.11; color: "#f9ffa0" }
-                GradientStop { position: 0.13; color: "#f9ff99" }
-                GradientStop { position: 0.14; color: "#f3ff86" }
-                GradientStop { position: 0.49; color: "#93b353" }
-                GradientStop { position: 0.87; color: "#264619" }
-                GradientStop { position: 0.96; color: "#0c1306" }
-                GradientStop { position: 1; color: "#000000" }
+                    NumberAnimation {
+                        from: 50
+                        to: 150
+                        duration: 1000
+                    }
+                    NumberAnimation {
+                        from: 150
+                        to: 50
+                        duration: 1000
+                    }
+                }
+                GradientStop {
+                    position: 0
+                    color: "#ffffff"
+                }
+                GradientStop {
+                    position: 0.11
+                    color: "#f9ffa0"
+                }
+                GradientStop {
+                    position: 0.13
+                    color: "#f9ff99"
+                }
+                GradientStop {
+                    position: 0.14
+                    color: "#f3ff86"
+                }
+                GradientStop {
+                    position: 0.49
+                    color: "#93b353"
+                }
+                GradientStop {
+                    position: 0.87
+                    color: "#264619"
+                }
+                GradientStop {
+                    position: 0.96
+                    color: "#0c1306"
+                }
+                GradientStop {
+                    position: 1
+                    color: "#000000"
+                }
             }
             fillColor: "blue" // ignored with the gradient set
             strokeStyle: ShapePath.DashLine
             dashPattern: [ 1, 4 ]
-            startX: 20; startY: 20
-            PathLine { x: 180; y: 130 }
-            PathLine { x: 20; y: 130 }
-            PathLine { x: 20; y: 20 }
+            startX: 20
+            startY: 20
+            PathLine {
+                x: 180
+                y: 130
+            }
+            PathLine {
+                x: 20
+                y: 130
+            }
+            PathLine {
+                x: 20
+                y: 20
+            }
         }
     }
 }
diff --git a/examples/quick/shapes/ellipticalArcs.qml b/examples/quick/shapes/ellipticalArcs.qml
index 024d5e76f6..d2b65cb4c1 100644
--- a/examples/quick/shapes/ellipticalArcs.qml
+++ b/examples/quick/shapes/ellipticalArcs.qml
@@ -17,26 +17,41 @@ Rectangle {
         ShapePath {
             fillGradient: LinearGradient {
                 y2: shape.height
-                GradientStop { position: 0; color: "yellow" }
-                GradientStop { position: 1; color: "green" }
+                GradientStop {
+                    position: 0
+                    color: "yellow"
+                }
+                GradientStop {
+                    position: 1
+                    color: "green"
+                }
             }
 
-            startX: 10; startY: 100
+            startX: 10
+            startY: 100
             PathArc {
-                relativeX: 50; y: 100
-                radiusX: 25; radiusY: 25
+                relativeX: 50
+                y: 100
+                radiusX: 25
+                radiusY: 25
             }
             PathArc {
-                relativeX: 50; y: 100
-                radiusX: 25; radiusY: 35
+                relativeX: 50
+                y: 100
+                radiusX: 25
+                radiusY: 35
             }
             PathArc {
-                relativeX: 50; y: 100
-                radiusX: 25; radiusY: 60
+                relativeX: 50
+                y: 100
+                radiusX: 25
+                radiusY: 60
             }
             PathArc {
-                relativeX: 50; y: 100
-                radiusX: 50; radiusY: 120
+                relativeX: 50
+                y: 100
+                radiusX: 50
+                radiusY: 120
             }
         }
     }
@@ -56,13 +71,21 @@ Rectangle {
             capStyle: ShapePath.RoundCap
 
             PathAngleArc {
-                centerX: 65; centerY: 95
-                radiusX: 45; radiusY: 45
+                centerX: 65
+                centerY: 95
+                radiusX: 45
+                radiusY: 45
                 startAngle: -180
                 SequentialAnimation on sweepAngle {
                     loops: Animation.Infinite
-                    NumberAnimation { to: 360; duration: 2000 }
-                    NumberAnimation { to: 0; duration: 2000 }
+                    NumberAnimation {
+                        to: 360
+                        duration: 2000
+                    }
+                    NumberAnimation {
+                        to: 0
+                        duration: 2000
+                    }
                 }
             }
         }
diff --git a/examples/quick/shapes/fillRules.qml b/examples/quick/shapes/fillRules.qml
index ca7ff75330..1e96af94e7 100644
--- a/examples/quick/shapes/fillRules.qml
+++ b/examples/quick/shapes/fillRules.qml
@@ -17,12 +17,30 @@ Rectangle {
             strokeColor: "blue"
             fillColor: "magenta"
             strokeWidth: 2
-            PathMove { x: 90; y: 50 }
-            PathLine { x: 50 + 40 * Math.cos(0.8 * 1 * Math.PI); y: 50 + 40 * Math.sin(0.8 * 1 * Math.PI) }
-            PathLine { x: 50 + 40 * Math.cos(0.8 * 2 * Math.PI); y: 50 + 40 * Math.sin(0.8 * 2 * Math.PI) }
-            PathLine { x: 50 + 40 * Math.cos(0.8 * 3 * Math.PI); y: 50 + 40 * Math.sin(0.8 * 3 * Math.PI) }
-            PathLine { x: 50 + 40 * Math.cos(0.8 * 4 * Math.PI); y: 50 + 40 * Math.sin(0.8 * 4 * Math.PI) }
-            PathLine { x: 90; y: 50 }
+            PathMove {
+                x: 90
+                y: 50
+            }
+            PathLine {
+                x: 50 + 40 * Math.cos(0.8 * 1 * Math.PI)
+                y: 50 + 40 * Math.sin(0.8 * 1 * Math.PI)
+            }
+            PathLine {
+                x: 50 + 40 * Math.cos(0.8 * 2 * Math.PI)
+                y: 50 + 40 * Math.sin(0.8 * 2 * Math.PI)
+            }
+            PathLine {
+                x: 50 + 40 * Math.cos(0.8 * 3 * Math.PI)
+                y: 50 + 40 * Math.sin(0.8 * 3 * Math.PI)
+            }
+            PathLine {
+                x: 50 + 40 * Math.cos(0.8 * 4 * Math.PI)
+                y: 50 + 40 * Math.sin(0.8 * 4 * Math.PI)
+            }
+            PathLine {
+                x: 90
+                y: 50
+            }
         }
         NumberAnimation on rotation {
             from: 0
@@ -39,6 +57,6 @@ Rectangle {
     }
     Text {
         anchors.right: parent.right
-        text: star.fillRule === ShapePath.OddEvenFill ? "OddEvenFill" : "WindingFill"
+        text: star.fillRule === ShapePath.OddEvenFill ? qsTr("OddEvenFill") : qsTr("WindingFill")
     }
 }
diff --git a/examples/quick/shapes/gradientSpreadModes.qml b/examples/quick/shapes/gradientSpreadModes.qml
index 75b9a5b3db..ba2dc2b734 100644
--- a/examples/quick/shapes/gradientSpreadModes.qml
+++ b/examples/quick/shapes/gradientSpreadModes.qml
@@ -9,10 +9,10 @@ Rectangle {
     width: 256
     height: 256
     Rectangle {
-        border.color: "black"
+        anchors.centerIn: parent
         width: 200
         height: 200
-        anchors.centerIn: parent
+        border.color: "black"
 
         Shape {
             anchors.fill: parent
@@ -22,16 +22,36 @@ Rectangle {
 
                 fillGradient: LinearGradient {
                     id: grad
-                    y1: 50; y2: 150
-                    GradientStop { position: 0; color: "black" }
-                    GradientStop { position: 1; color: "red" }
+                    y1: 50
+                    y2: 150
+                    GradientStop {
+                        position: 0
+                        color: "black"
+                    }
+                    GradientStop {
+                        position: 1
+                        color: "red"
+                    }
                 }
 
-                startX: 10; startY: 10
-                PathLine { relativeX: 180; relativeY: 0 }
-                PathLine { relativeX: 0; relativeY: 180 }
-                PathLine { relativeX: -180; relativeY: 0 }
-                PathLine { relativeX: 0; relativeY: -180 }
+                startX: 10
+                startY: 10
+                PathLine {
+                    relativeX: 180
+                    relativeY: 0
+                }
+                PathLine {
+                    relativeX: 0
+                    relativeY: 180
+                }
+                PathLine {
+                    relativeX: -180
+                    relativeY: 0
+                }
+                PathLine {
+                    relativeX: 0
+                    relativeY: -180
+                }
             }
         }
 
@@ -40,23 +60,37 @@ Rectangle {
             interval: 3000
             running: true
             repeat: true
-            property variant spreads: [ ShapeGradient.PadSpread, ShapeGradient.RepeatSpread, ShapeGradient.ReflectSpread ]
-            property variant spreadTexts: [ "PadSpread", "RepeatSpread", "ReflectSpread" ]
+            readonly property variant spreads: [ ShapeGradient.PadSpread, ShapeGradient.RepeatSpread, ShapeGradient.ReflectSpread ]
+            readonly property variant spreadTexts: [ qsTr("PadSpread"), qsTr("RepeatSpread"), qsTr("ReflectSpread") ]
             property int spreadIdx: 0
-            onTriggered: { spreadIdx = (spreadIdx + 1) % spreads.length; grad.spread = spreads[spreadIdx] }
+            onTriggered: function() {
+                spreadIdx = (spreadIdx + 1) % spreads.length
+                grad.spread = spreads[spreadIdx]
+            }
         }
 
-
         Shape {
             anchors.fill: parent
             ShapePath {
                 strokeColor: "gray"
                 strokeWidth: 2
                 fillColor: "transparent"
-                PathMove { x: 0; y: 50 }
-                PathLine { relativeX: 200; relativeY: 0 }
-                PathMove { x: 0; y: 150 }
-                PathLine { relativeX: 200; relativeY: 0 }
+                PathMove {
+                    x: 0
+                    y: 50
+                }
+                PathLine {
+                    relativeX: 200
+                    relativeY: 0
+                }
+                PathMove {
+                    x: 0
+                    y: 150
+                }
+                PathLine {
+                    relativeX: 200
+                    relativeY: 0
+                }
             }
         }
     }
diff --git a/examples/quick/shapes/interactive.qml b/examples/quick/shapes/interactive.qml
index f9e2359a91..f986eaff43 100644
--- a/examples/quick/shapes/interactive.qml
+++ b/examples/quick/shapes/interactive.qml
@@ -6,6 +6,8 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Shapes
 
+pragma ComponentBehavior: Bound
+
 Rectangle {
     id: root
     width: 1024
@@ -59,7 +61,7 @@ Rectangle {
                         fillColor: fillSwitch.checked ? "green" : "transparent"
                         PathQuad {
                             id: pathSegment
-                            x: quadShapePath.startx + 1
+                            x: quadShapePath.startX + 1
                             y: quadShapePath.startY + 1
                             controlX: quadShapePath.startX + 50
                             controlY: quadShapePath.startY + 50
@@ -148,12 +150,24 @@ Rectangle {
 
             property real halfWidth: width / 2
             property bool complete: false
-            Binding { target: rect.target; property: xprop; value: x + halfWidth; when: complete }
-            Binding { target: rect.target; property: yprop; value: y + halfWidth; when: complete }
+            Binding {
+                target: rect.target
+                property: rect.xprop
+                value: rect.x + rect.halfWidth
+                when: rect.complete
+            }
+            Binding {
+                target: rect.target
+                property: rect.yprop
+                value: rect.y + rect.halfWidth
+                when: rect.complete
+            }
 
             DragHandler { }
 
-            HoverHandler { id: hh }
+            HoverHandler {
+                id: hh
+            }
 
             Component.onCompleted: {
                 x = target[xprop] - halfWidth;
diff --git a/examples/quick/shapes/joinStyles.qml b/examples/quick/shapes/joinStyles.qml
index 4d6410f059..127cb50fbe 100644
--- a/examples/quick/shapes/joinStyles.qml
+++ b/examples/quick/shapes/joinStyles.qml
@@ -23,15 +23,21 @@ Rectangle {
             capStyle: ShapePath.RoundCap
 
             property int joinStyleIdx: 0
-            property variant styles: [ ShapePath.BevelJoin, ShapePath.MiterJoin, ShapePath.RoundJoin ]
-            property variant styleTexts: [ "BevelJoin", "MiterJoin", "RoundJoin" ]
+            readonly property variant styles: [ ShapePath.BevelJoin, ShapePath.MiterJoin, ShapePath.RoundJoin ]
+            readonly property variant styleTexts: [ qsTr("BevelJoin"), qsTr("MiterJoin"), qsTr("RoundJoin") ]
 
             joinStyle: styles[joinStyleIdx]
 
             startX: 30
             startY: 30
-            PathLine { x: 100; y: 100 }
-            PathLine { x: 30; y: 100 }
+            PathLine {
+                x: 100
+                y: 100
+            }
+            PathLine {
+                x: 30
+                y: 100
+            }
         }
     }
 
diff --git a/examples/quick/shapes/largeOrSmallArc.qml b/examples/quick/shapes/largeOrSmallArc.qml
index 0ac934ca1c..0d887d162d 100644
--- a/examples/quick/shapes/largeOrSmallArc.qml
+++ b/examples/quick/shapes/largeOrSmallArc.qml
@@ -11,22 +11,28 @@ Rectangle {
 
     Repeater {
         model: 2
-        Shape {
+        delegate: Shape {
+            id: delegate
+            required property int index
+
+            anchors.centerIn: parent
             width: 200
             height: 200
-            anchors.centerIn: parent
 
             ShapePath {
                 fillColor: "transparent"
-                strokeColor: model.index === 0 ? "red" : "blue"
+                strokeColor: delegate.index === 0 ? "red" : "blue"
                 strokeStyle: ShapePath.DashLine
                 strokeWidth: 4
 
-                startX: 50; startY: 100
+                startX: 50
+                startY: 100
                 PathArc {
-                    x: 100; y: 150
-                    radiusX: 50; radiusY: 50
-                    useLargeArc: model.index === 1
+                    x: 100
+                    y: 150
+                    radiusX: 50
+                    radiusY: 50
+                    useLargeArc: delegate.index === 1
                 }
             }
         }
@@ -35,11 +41,11 @@ Rectangle {
     Column {
         anchors.right: parent.right
         Text {
-            text: "Small"
+            text: qsTr("Small")
             color: "red"
         }
         Text {
-            text: "Large"
+            text: qsTr("Large")
             color: "blue"
         }
     }
diff --git a/examples/quick/shapes/linearGradient.qml b/examples/quick/shapes/linearGradient.qml
index 8ab6d7407d..742f8622e9 100644
--- a/examples/quick/shapes/linearGradient.qml
+++ b/examples/quick/shapes/linearGradient.qml
@@ -27,13 +27,15 @@ Rectangle {
             PathArc {
                 x: shape.width / 2 + p.xr
                 y: shape.height / 2 + p.yr
-                radiusX: p.xr; radiusY: p.yr
+                radiusX: p.xr
+                radiusY: p.yr
                 useLargeArc: true
             }
             PathArc {
                 x: shape.width / 2 - p.xr
                 y: shape.height / 2 - p.yr
-                radiusX: p.xr; radiusY: p.yr
+                radiusX: p.xr
+                radiusY: p.yr
                 useLargeArc: true
             }
         }
diff --git a/examples/quick/shapes/main.qml b/examples/quick/shapes/main.qml
index c39aa19ed3..90fcbd28f0 100644
--- a/examples/quick/shapes/main.qml
+++ b/examples/quick/shapes/main.qml
@@ -10,10 +10,10 @@ Item {
     LauncherList {
         anchors.fill: parent
         Component.onCompleted: {
-            addExample("Shape Gallery", "Simple path rendering examples", Qt.resolvedUrl("shapegallery.qml"))
-            addExample("Interactive Shape", "Dynamic, interactive path rendering examples", Qt.resolvedUrl("interactive.qml"))
-            addExample("Super- and multisampling", "Improving quality", Qt.resolvedUrl("sampling.qml"))
-            addExample("Clip My Tiger!", "Clip examples, a.k.a. What Not To Do", Qt.resolvedUrl("clippedtigers.qml"))
+            addExample(qsTr("Shape Gallery"), qsTr("Simple path rendering examples"), Qt.resolvedUrl("shapegallery.qml"))
+            addExample(qsTr("Interactive Shape"), qsTr("Dynamic, interactive path rendering examples"), Qt.resolvedUrl("interactive.qml"))
+            addExample(qsTr("Super- and multisampling"), qsTr("Improving quality"), Qt.resolvedUrl("sampling.qml"))
+            addExample(qsTr("Clip My Tiger!"), qsTr("Clip examples, a.k.a. What Not To Do"), Qt.resolvedUrl("clippedtigers.qml"))
         }
     }
 }
diff --git a/examples/quick/shapes/quadraticCurve.qml b/examples/quick/shapes/quadraticCurve.qml
index b20bd73394..d626d2693a 100644
--- a/examples/quick/shapes/quadraticCurve.qml
+++ b/examples/quick/shapes/quadraticCurve.qml
@@ -26,8 +26,10 @@ Rectangle {
                 startX: 50
                 startY: 50
                 PathQuad {
-                    x: 150; y: 50
-                    controlX: cp.x; controlY: cp.y
+                    x: 150
+                    y: 50
+                    controlX: cp.x
+                    controlY: cp.y
                 }
             }
         }
diff --git a/examples/quick/shapes/radialGradient.qml b/examples/quick/shapes/radialGradient.qml
index 5fd3670b28..cb89be7e6b 100644
--- a/examples/quick/shapes/radialGradient.qml
+++ b/examples/quick/shapes/radialGradient.qml
@@ -16,27 +16,73 @@ Rectangle {
             strokeWidth: 4
             strokeColor: "red"
             fillGradient: LinearGradient {
-                x1: 20; y1: 20
-                x2: 180; y2: 130
-                GradientStop { position: 0; color: "blue" }
-                GradientStop { position: 0.2; color: "green" }
-                GradientStop { position: 0.4; color: "red" }
-                GradientStop { position: 0.6; color: "yellow" }
-                GradientStop { position: 1; color: "cyan" }
+                x1: 20
+                y1: 20
+                x2: 180
+                y2: 130
+                GradientStop {
+                    position: 0
+                    color: "blue"
+                }
+                GradientStop {
+                    position: 0.2
+                    color: "green"
+                }
+                GradientStop {
+                    position: 0.4
+                    color: "red"
+                }
+                GradientStop {
+                    position: 0.6
+                    color: "yellow"
+                }
+                GradientStop {
+                    position: 1
+                    color: "cyan"
+                }
             }
             fillColor: "blue" // ignored with the gradient set
             strokeStyle: ShapePath.DashLine
             dashPattern: [ 1, 4 ]
-            startX: 20; startY: 20
-            PathLine { x: 180; y: 130 }
-            PathLine { x: 20; y: 130 }
-            PathLine { x: 20; y: 20 }
+            startX: 20
+            startY: 20
+            PathLine {
+                x: 180
+                y: 130
+            }
+            PathLine {
+                x: 20
+                y: 130
+            }
+            PathLine {
+                x: 20
+                y: 20
+            }
         }
-        transform: Rotation { origin.x: 100; origin.y: 50; axis { x: 0; y: 1; z: 0 }
+        transform: Rotation {
+            origin.x: 100
+            origin.y: 50
+            axis {
+                x: 0
+                y: 1
+                z: 0
+            }
             SequentialAnimation on angle {
-                NumberAnimation { from: 0; to: 75; duration: 2000 }
-                NumberAnimation { from: 75; to: -75; duration: 4000 }
-                NumberAnimation { from: -75; to: 0; duration: 2000 }
+                NumberAnimation {
+                    from: 0
+                    to: 75
+                    duration: 2000
+                }
+                NumberAnimation {
+                    from: 75
+                    to: -75
+                    duration: 4000
+                }
+                NumberAnimation {
+                    from: -75
+                    to: 0
+                    duration: 2000
+                }
                 loops: Animation.Infinite
             }
         }
diff --git a/examples/quick/shapes/sampling.qml b/examples/quick/shapes/sampling.qml
index e88aa380a2..f58815e813 100644
--- a/examples/quick/shapes/sampling.qml
+++ b/examples/quick/shapes/sampling.qml
@@ -9,24 +9,38 @@ Rectangle {
     width: 1024
     height: 768
 
-    property color col: "lightsteelblue"
+    readonly property color col: "lightsteelblue"
     gradient: Gradient {
-        GradientStop { position: 0.0; color: Qt.tint(root.col, "#20FFFFFF") }
-        GradientStop { position: 0.1; color: Qt.tint(root.col, "#20AAAAAA") }
-        GradientStop { position: 0.9; color: Qt.tint(root.col, "#20666666") }
-        GradientStop { position: 1.0; color: Qt.tint(root.col, "#20000000") }
+        GradientStop {
+            position: 0.0
+            color: Qt.tint(root.col, "#20FFFFFF")
+        }
+        GradientStop {
+            position: 0.1
+            color: Qt.tint(root.col, "#20AAAAAA")
+        }
+        GradientStop {
+            position: 0.9
+            color: Qt.tint(root.col, "#20666666")
+        }
+        GradientStop {
+            position: 1.0
+            color: Qt.tint(root.col, "#20000000")
+        }
     }
 
     Row {
-        anchors.fill: parent
-        anchors.margins: 20
+        anchors {
+            fill: parent
+            margins: 20
+        }
         spacing: 40
 
         Column {
             spacing: 40
 
             Text {
-                text: "Original"
+                text: qsTr("Original")
             }
 
             // A simple Shape without anything special.
@@ -44,20 +58,38 @@ Rectangle {
 
                     ShapePath {
                         strokeColor: "green"
-                        NumberAnimation on strokeWidth { from: 1; to: 20; duration: 5000 }
+                        NumberAnimation on strokeWidth {
+                            from: 1
+                            to: 20
+                            duration: 5000
+                        }
                         fillColor: "transparent"
                         capStyle: ShapePath.RoundCap
 
-                        startX: 40; startY: 30
-                        PathQuad { x: 50; y: 80; controlX: 0; controlY: 80 }
-                        PathLine { x: 150; y: 80 }
-                        PathQuad { x: 160; y: 30; controlX: 200; controlY: 80 }
+                        startX: 40
+                        startY: 30
+                        PathQuad {
+                            x: 50
+                            y: 80
+                            controlX: 0
+                            controlY: 80
+                        }
+                        PathLine {
+                            x: 150
+                            y: 80
+                        }
+                        PathQuad {
+                            x: 160
+                            y: 30
+                            controlX: 200
+                            controlY: 80
+                        }
                     }
                 }
             }
 
             Text {
-                text: "Supersampling (2x)"
+                text: qsTr("Supersampling (2x)")
             }
 
             // Now let's use 2x supersampling via layers. This way the entire subtree
@@ -83,14 +115,32 @@ Rectangle {
 
                     ShapePath {
                         strokeColor: "green"
-                        NumberAnimation on strokeWidth { from: 1; to: 20; duration: 5000 }
+                        NumberAnimation on strokeWidth {
+                            from: 1
+                            to: 20
+                            duration: 5000
+                        }
                         fillColor: "transparent"
                         capStyle: ShapePath.RoundCap
 
-                        startX: 40; startY: 30
-                        PathQuad { x: 50; y: 80; controlX: 0; controlY: 80 }
-                        PathLine { x: 150; y: 80 }
-                        PathQuad { x: 160; y: 30; controlX: 200; controlY: 80 }
+                        startX: 40
+                        startY: 30
+                        PathQuad {
+                            x: 50
+                            y: 80
+                            controlX: 0
+                            controlY: 80
+                        }
+                        PathLine {
+                            x: 150
+                            y: 80
+                        }
+                        PathQuad {
+                            x: 160
+                            y: 30
+                            controlX: 200
+                            controlY: 80
+                        }
                     }
                 }
             }
@@ -100,7 +150,7 @@ Rectangle {
             spacing: 40
 
             Text {
-                text: "Multisampling (4x)"
+                text: qsTr("Multisampling (4x)")
             }
 
             // Now let's use 4x MSAA, again via layers. This needs support for
@@ -123,14 +173,32 @@ Rectangle {
 
                     ShapePath {
                         strokeColor: "green"
-                        NumberAnimation on strokeWidth { from: 1; to: 20; duration: 5000 }
+                        NumberAnimation on strokeWidth {
+                            from: 1
+                            to: 20
+                            duration: 5000
+                        }
                         fillColor: "transparent"
                         capStyle: ShapePath.RoundCap
 
-                        startX: 40; startY: 30
-                        PathQuad { x: 50; y: 80; controlX: 0; controlY: 80 }
-                        PathLine { x: 150; y: 80 }
-                        PathQuad { x: 160; y: 30; controlX: 200; controlY: 80 }
+                        startX: 40
+                        startY: 30
+                        PathQuad {
+                            x: 50
+                            y: 80
+                            controlX: 0
+                            controlY: 80
+                        }
+                        PathLine {
+                            x: 150
+                            y: 80
+                        }
+                        PathQuad {
+                            x: 160
+                            y: 30
+                            controlX: 200
+                            controlY: 80
+                        }
                     }
                 }
             }
diff --git a/examples/quick/shapes/shapegallery.qml b/examples/quick/shapes/shapegallery.qml
index dec1b4a5c5..34056a0ccd 100644
--- a/examples/quick/shapes/shapegallery.qml
+++ b/examples/quick/shapes/shapegallery.qml
@@ -4,149 +4,180 @@
 import QtQuick
 import QtQuick.Shapes
 
+pragma ComponentBehavior: Bound
+
 Rectangle {
     id: root
     width: 1024
     height: 768
 
-    property color col: "lightsteelblue"
+    readonly property color col: "lightsteelblue"
     gradient: Gradient {
-        GradientStop { position: 0.0; color: Qt.tint(root.col, "#20FFFFFF") }
-        GradientStop { position: 0.1; color: Qt.tint(root.col, "#20AAAAAA") }
-        GradientStop { position: 0.9; color: Qt.tint(root.col, "#20666666") }
-        GradientStop { position: 1.0; color: Qt.tint(root.col, "#20000000") }
-    }
-
-    ListModel {
-        id: pathGalleryModel
-        ListElement {
-            name: "Stroke and fill"
-            shapeUrl: "tapableTriangle.qml"
-        }
-        ListElement {
-            name: "Stroke or fill only"
-            shapeUrl: "strokeOrFill.qml"
-        }
-        ListElement {
-            name: "Dash pattern"
-            shapeUrl: "linearGradient.qml"
-        }
-        ListElement {
-            name: "Linear gradient"
-            shapeUrl: "radialGradient.qml"
-        }
-        ListElement {
-            name: "Radial gradient"
-            shapeUrl: "dashPattern.qml"
-        }
-        ListElement {
-            name: "Fill rules"
-            shapeUrl: "fillRules.qml"
-        }
-        ListElement {
-            name: "Join styles"
-            shapeUrl: "joinStyles.qml"
-        }
-        ListElement {
-            name: "Cap styles"
-            shapeUrl: "capStyles.qml"
-        }
-        ListElement {
-            name: "Quadratic curve"
-            shapeUrl: "quadraticCurve.qml"
-        }
-        ListElement {
-            name: "Cubic curve"
-            shapeUrl: "cubicCurve.qml"
-        }
-        ListElement {
-            name: "Elliptical arc"
-            shapeUrl: "ellipticalArcs.qml"
-        }
-        ListElement {
-            name: "Gradient spread modes"
-            shapeUrl: "gradientSpreadModes.qml"
+        GradientStop {
+            position: 0.0
+            color: Qt.tint(root.col, "#20FFFFFF")
         }
-        ListElement {
-            name: "Arc direction"
-            shapeUrl: "arcDirection.qml"
+        GradientStop {
+            position: 0.1
+            color: Qt.tint(root.col, "#20AAAAAA")
         }
-        ListElement {
-            name: "Large/small arc"
-            shapeUrl: "largeOrSmallArc.qml"
+        GradientStop {
+            position: 0.9
+            color: Qt.tint(root.col, "#20666666")
         }
-        ListElement {
-            name: "Arc rotation"
-            shapeUrl: "arcRotation.qml"
-        }
-        ListElement {
-            name: "Tiger"
-            shapeUrl: "tigerLoader.qml"
-        }
-        ListElement {
-            name: "Text"
-            shapeUrl: "text.qml"
+        GradientStop {
+            position: 1.0
+            color: Qt.tint(root.col, "#20000000")
         }
     }
 
-    property int gridSpacing: 10
-
-    Component {
-        id: pathGalleryDelegate
-        Rectangle {
-            border.color: "purple"
-            width: grid.cellWidth - root.gridSpacing
-            height: grid.cellHeight - root.gridSpacing
-            Column {
-                anchors.fill: parent
-                anchors.margins: 4
-                Item {
-                    width: parent.width
-                    height: parent.height - delegText.height
-                    Loader {
-                        source: Qt.resolvedUrl(shapeUrl)
-                        anchors.fill: parent
-                    }
-                }
-                Text {
-                    id: delegText
-                    text: model.name
-                    font.pointSize: 16
-                    anchors.horizontalCenter: parent.horizontalCenter
-                }
-            }
-        }
-    }
+    readonly property int gridSpacing: 10
 
     Rectangle {
-        anchors.fill: parent
-        anchors.margins: 10
+        anchors {
+            fill: parent
+            margins: 10
+        }
         color: "lightBlue"
         clip: true
 
         GridView {
             id: grid
-            anchors.fill: parent
-            anchors.margins: root.gridSpacing
+            anchors {
+                fill: parent
+                margins: root.gridSpacing
+            }
             cellWidth: 300
             cellHeight: 300
-            delegate: pathGalleryDelegate
-            model: pathGalleryModel
+            delegate: Rectangle {
+                id: gridDelegate
+
+                required property string name
+                required property string shapeUrl
+
+                border.color: "purple"
+                width: grid.cellWidth - root.gridSpacing
+                height: grid.cellHeight - root.gridSpacing
+                Column {
+                    anchors.fill: parent
+                    anchors.margins: 4
+                    Item {
+                        width: parent.width
+                        height: parent.height - delegText.height
+                        Loader {
+                            source: Qt.resolvedUrl(gridDelegate.shapeUrl)
+                            anchors.fill: parent
+                        }
+                    }
+                    Text {
+                        id: delegText
+                        text: gridDelegate.name
+                        font.pointSize: 16
+                        anchors.horizontalCenter: parent.horizontalCenter
+                    }
+                }
+            }
+            model: ListModel {
+                ListElement {
+                    name: qsTr("Stroke and fill")
+                    shapeUrl: "tapableTriangle.qml"
+                }
+                ListElement {
+                    name: qsTr("Stroke or fill only")
+                    shapeUrl: "strokeOrFill.qml"
+                }
+                ListElement {
+                    name: qsTr("Dash pattern")
+                    shapeUrl: "linearGradient.qml"
+                }
+                ListElement {
+                    name: qsTr("Linear gradient")
+                    shapeUrl: "radialGradient.qml"
+                }
+                ListElement {
+                    name: qsTr("Radial gradient")
+                    shapeUrl: "dashPattern.qml"
+                }
+                ListElement {
+                    name: qsTr("Fill rules")
+                    shapeUrl: "fillRules.qml"
+                }
+                ListElement {
+                    name: qsTr("Join styles")
+                    shapeUrl: "joinStyles.qml"
+                }
+                ListElement {
+                    name: qsTr("Cap styles")
+                    shapeUrl: "capStyles.qml"
+                }
+                ListElement {
+                    name: qsTr("Quadratic curve")
+                    shapeUrl: "quadraticCurve.qml"
+                }
+                ListElement {
+                    name: qsTr("Cubic curve")
+                    shapeUrl: "cubicCurve.qml"
+                }
+                ListElement {
+                    name: qsTr("Elliptical arc")
+                    shapeUrl: "ellipticalArcs.qml"
+                }
+                ListElement {
+                    name: qsTr("Gradient spread modes")
+                    shapeUrl: "gradientSpreadModes.qml"
+                }
+                ListElement {
+                    name: qsTr("Arc direction")
+                    shapeUrl: "arcDirection.qml"
+                }
+                ListElement {
+                    name: qsTr("Large/small arc")
+                    shapeUrl: "largeOrSmallArc.qml"
+                }
+                ListElement {
+                    name: qsTr("Arc rotation")
+                    shapeUrl: "arcRotation.qml"
+                }
+                ListElement {
+                    name: qsTr("Tiger")
+                    shapeUrl: "tigerLoader.qml"
+                }
+                ListElement {
+                    name: qsTr("Text")
+                    shapeUrl: "text.qml"
+                }
+            }
         }
     }
 
     Text {
         anchors.right: parent.right
-        Shape { id: dummyShape; ShapePath { } } // used only to get the renderer type
+        // used only to get the renderer type
+        Shape {
+            id: dummyShape
+            ShapePath { }
+        }
         color: "darkBlue"
         font.pointSize: 12
-        property variant rendererStrings: [ "Unknown", "Generic (QtGui triangulator)", "GL_NV_path_rendering", "Software (QPainter)" ]
-        text: "Active Shape backend: " + rendererStrings[dummyShape.rendererType]
+        readonly property variant rendererStrings: [ qsTr("Unknown"), qsTr("Generic (QtGui triangulator)"), qsTr("GL_NV_path_rendering"), qsTr("Software (QPainter)") ]
+        text: qsTr("Active Shape backend: ") + rendererStrings[dummyShape.rendererType]
         SequentialAnimation on opacity {
-            NumberAnimation { from: 1; to: 0; duration: 5000 }
-            PauseAnimation { duration: 5000 }
-            NumberAnimation { from: 0; to: 1; duration: 1000 }
-            PauseAnimation { duration: 5000 }
+            NumberAnimation {
+                from: 1
+                to: 0
+                duration: 5000
+            }
+            PauseAnimation {
+                duration: 5000
+            }
+            NumberAnimation {
+                from: 0
+                to: 1
+                duration: 1000
+            }
+            PauseAnimation {
+                duration: 5000
+            }
             loops: Animation.Infinite
         }
     }
diff --git a/examples/quick/shapes/strokeOrFill.qml b/examples/quick/shapes/strokeOrFill.qml
index e5a4f350a4..c939ed067d 100644
--- a/examples/quick/shapes/strokeOrFill.qml
+++ b/examples/quick/shapes/strokeOrFill.qml
@@ -6,7 +6,8 @@ import QtQuick.Shapes
 
 Rectangle {
     color: "lightGray"
-    width: 256; height: 256
+    width: 256
+    height: 256
 
     Shape {
         id: circ1
@@ -36,19 +37,21 @@ Rectangle {
                 }
             }
 
-            property real r: 60
+            readonly property real r: 60
             startX: circ1.width / 2 - r
             startY: circ1.height / 2 - r
             PathArc {
                 x: circ1.width / 2 + p1.r
                 y: circ1.height / 2 + p1.r
-                radiusX: p1.r; radiusY: p1.r
+                radiusX: p1.r
+                radiusY: p1.r
                 useLargeArc: true
             }
             PathArc {
                 x: circ1.width / 2 - p1.r
                 y: circ1.height / 2 - p1.r
-                radiusX: p1.r; radiusY: p1.r
+                radiusX: p1.r
+                radiusY: p1.r
                 useLargeArc: true
             }
         }
@@ -60,8 +63,16 @@ Rectangle {
 
         SequentialAnimation on opacity {
             loops: Animation.Infinite
-            NumberAnimation { from: 1.0; to: 0.0; duration: 5000 }
-            NumberAnimation { from: 0.0; to: 1.0; duration: 5000 }
+            NumberAnimation {
+                from: 1.0
+                to: 0.0
+                duration: 5000
+            }
+            NumberAnimation {
+                from: 0.0
+                to: 1.0
+                duration: 5000
+            }
         }
 
         ShapePath {
@@ -87,19 +98,21 @@ Rectangle {
                 }
             }
 
-            property real r: 40
+            readonly property real r: 40
             startX: circ2.width / 2 - r
             startY: circ2.height / 2 - r
             PathArc {
                 x: circ2.width / 2 + p2.r
                 y: circ2.height / 2 + p2.r
-                radiusX: p2.r; radiusY: p2.r
+                radiusX: p2.r
+                radiusY: p2.r
                 useLargeArc: true
             }
             PathArc {
                 x: circ2.width / 2 - p2.r
                 y: circ2.height / 2 - p2.r
-                radiusX: p2.r; radiusY: p2.r
+                radiusX: p2.r
+                radiusY: p2.r
                 useLargeArc: true
             }
         }
diff --git a/examples/quick/shapes/tapableTriangle.qml b/examples/quick/shapes/tapableTriangle.qml
index a369293300..c76821e898 100644
--- a/examples/quick/shapes/tapableTriangle.qml
+++ b/examples/quick/shapes/tapableTriangle.qml
@@ -10,7 +10,9 @@ Rectangle {
     color: th.pressed ? "steelBlue" : "lightGray"
     containmentMask: ctr
 
-    TapHandler { id: th }
+    TapHandler {
+        id: th
+    }
 
     Shape {
         id: ctr
@@ -23,15 +25,35 @@ Rectangle {
 
             SequentialAnimation on strokeWidth {
                 loops: Animation.Infinite
-                NumberAnimation { from: 1; to: 30; duration: 5000 }
-                NumberAnimation { from: 30; to: 1; duration: 5000 }
-                PauseAnimation { duration: 2000 }
+                NumberAnimation {
+                    from: 1
+                    to: 30
+                    duration: 5000
+                }
+                NumberAnimation {
+                    from: 30
+                    to: 1
+                    duration: 5000
+                }
+                PauseAnimation {
+                    duration: 2000
+                }
             }
 
-            startX: 30; startY: 30
-            PathLine { x: ctr.width - 30; y: ctr.height - 30 }
-            PathLine { x: 30; y: ctr.height - 30 }
-            PathLine { x: 30; y: 30 }
+            startX: 30
+            startY: 30
+            PathLine {
+                x: ctr.width - 30
+                y: ctr.height - 30
+            }
+            PathLine {
+                x: 30
+                y: ctr.height - 30
+            }
+            PathLine {
+                x: 30
+                y: 30
+            }
         }
 
         // Besides ShapePath, Shape supports visual and non-visual objects too, allowing
diff --git a/examples/quick/shapes/text.qml b/examples/quick/shapes/text.qml
index 141bd8cd8d..8a105fb254 100644
--- a/examples/quick/shapes/text.qml
+++ b/examples/quick/shapes/text.qml
@@ -20,7 +20,13 @@ Rectangle {
             strokeWidth: 1
             fillColor: "black"
 
-            PathText { x: 0; y: 0; font.family: "Arial"; font.pixelSize: 150; text: "Qt!" }
+            PathText {
+                x: 0
+                y: 0
+                text: qsTr("Qt!")
+                font.family: "Arial"
+                font.pixelSize: 150
+            }
         }
     }
 }
diff --git a/examples/quick/shapes/tigerLoader.qml b/examples/quick/shapes/tigerLoader.qml
index 302d8cac27..e49d33a828 100644
--- a/examples/quick/shapes/tigerLoader.qml
+++ b/examples/quick/shapes/tigerLoader.qml
@@ -14,10 +14,10 @@ Rectangle {
 
         Text {
             anchors.centerIn: parent
-            text: "Loading"
+            text: qsTr("Loading")
             // Phase #1: Loader loads tiger.qml. After this we have our item.
             // Phase #2: With some backends (generic) the item will start async processing. Wait for this too.
-            visible: shapeLoader.status != Loader.Ready || shapeLoader.item.status === Shape.Processing
+            visible: shapeLoader.status != Loader.Ready || (shapeLoader.item as Shape)?.status === Shape.Processing
         }
 
         Loader {