Make views example more in line with our guidelines

The views example is an old example, which shows off many different
features related to ListView, GridView and the QML models.

Unfortunately, there are currently a few things that are broken in it.
One of those things is the FlickrRssModel, which no longer works,
because flickr changed their web API.

This patch makes some improvements, but it's unfortunately not fixing
everything.
The list of fixes are the following:
- Fix a good number of qmllint warnings. Unfortunately, there seems to
  be a good number of false positives that remain unfixed.
- Use qsTr() in some places. But I've not adopted it everywhere.
- sections.qml now uses Qt Quick Controls CheckBox'es instead of a
  custom component.
- Property bindings are now declared on separate lines.

Pick-to: 6.6
Change-Id: Idfb563f4bd658dc70c1b9975549e872e7c25449e
Reviewed-by: Mitch Curtis <[email protected]>

16 files changed, 605 insertions, 194 deletions

diff --git a/examples/quick/views/CMakeLists.txt b/examples/quick/views/CMakeLists.txt
index c3370d452d..f48817a5af 100644
--- a/examples/quick/views/CMakeLists.txt
+++ b/examples/quick/views/CMakeLists.txt
@@ -19,14 +19,11 @@ qt_standard_project_setup(REQUIRES 6.5)
 add_subdirectory("../shared" "shared")
 
 qt_add_executable(viewsexample
+    WIN32
+    MACOSX_BUNDLE
     main.cpp
 )
 
-set_target_properties(viewsexample PROPERTIES
-    WIN32_EXECUTABLE TRUE
-    MACOSX_BUNDLE TRUE
-)
-
 target_link_libraries(viewsexample PRIVATE
     Qt6::Core
     Qt6::Gui
diff --git a/examples/quick/views/delegatemodel/dragselection.qml b/examples/quick/views/delegatemodel/dragselection.qml
index 1a66264e1d..07a949f819 100644
--- a/examples/quick/views/delegatemodel/dragselection.qml
+++ b/examples/quick/views/delegatemodel/dragselection.qml
@@ -5,6 +5,8 @@ import QtQml
 import QtQuick
 import QtQml.Models
 
+pragma ComponentBehavior: Bound
+
 Item {
     id: root
 
@@ -38,14 +40,33 @@ Item {
 
                     Drag.active: visibleContainer.drag.active
 
-                    anchors { horizontalCenter: parent.horizontalCenter; verticalCenter: parent.verticalCenter }
+                    anchors {
+                        horizontalCenter: parent.horizontalCenter
+                        verticalCenter: parent.verticalCenter
+                    }
 
                     states: State {
                         when: visibleContainer.drag.active
-                        AnchorChanges { target:  draggable; anchors { horizontalCenter: undefined; verticalCenter: undefined} }
-                        ParentChange { target: selectionView; parent: draggable; x: 0; y: 0 }
-                        PropertyChanges { root.dragging: true }
-                        ParentChange { target: draggable; parent: root }
+                        AnchorChanges {
+                            target:  draggable
+                            anchors {
+                                horizontalCenter: undefined
+                                verticalCenter: undefined
+                            }
+                        }
+                        ParentChange {
+                            target: selectionView
+                            parent: draggable
+                            x: 0
+                            y: 0
+                        }
+                        PropertyChanges {
+                            root.dragging: true
+                        }
+                        ParentChange {
+                            target: draggable
+                            parent: root
+                        }
                     }
                 }
                 DropArea {
@@ -72,8 +93,16 @@ Item {
                 radius: 8
 
                 gradient: Gradient {
-                    GradientStop { id: gradientStart; position: 0.0; color: "#8AC953" }
-                    GradientStop { id: gradientEnd; position: 1.0; color: "#8BC953" }
+                    GradientStop {
+                        id: gradientStart
+                        position: 0.0
+                        color: "#8AC953"
+                    }
+                    GradientStop {
+                        id: gradientEnd
+                        position: 1.0
+                        color: "#8BC953"
+                    }
                 }
 
                 border.width: 2
@@ -91,8 +120,13 @@ Item {
                 }
 
                 Rectangle {
-                    anchors { right: parent.right; top: parent.top; margins: 3 }
-                    width: 12; height: 12
+                    anchors {
+                        right: parent.right
+                        top: parent.top
+                        margins: 3
+                    }
+                    width: 12
+                    height: 12
                     color: packageRoot.DelegateModel.inSelected ? "black" : "white"
                     radius: 6
 
@@ -108,27 +142,55 @@ Item {
                 states: [
                     State {
                         name: "selected"
-                        ParentChange { target: content; parent: selectionContainer; x: 3; y: 3 }
+                        ParentChange {
+                            target: content
+                            parent: selectionContainer
+                            x: 3
+                            y: 3
+                        }
                         PropertyChanges {
                             packageRoot.DelegateModel.inItems: visibleContainer.drag.active
                             gradientStart.color: "#017423"
                         }
-                        PropertyChanges { gradientStart.color: "#007423" }
+                        PropertyChanges {
+                            gradientStart.color: "#007423"
+                        }
                     }, State {
                         name: "visible"
-                        PropertyChanges { packageRoot.DelegateModel.inItems: true }
-                        ParentChange { target: content; parent: visibleContainer; x: 3; y: 3 }
-                        PropertyChanges { gradientStart.color: "#8AC953" }
-                        PropertyChanges { gradientStart.color: "#8BC953" }
+                        PropertyChanges {
+                            packageRoot.DelegateModel.inItems: true
+                        }
+                        ParentChange {
+                            target: content
+                            parent: visibleContainer
+                            x: 3
+                            y: 3
+                        }
+                        PropertyChanges {
+                            gradientStart.color: "#8AC953"
+                        }
+                        PropertyChanges {
+                            gradientStart.color: "#8BC953"
+                        }
                     }
                 ]
                 transitions: Transition {
-                    PropertyAction { target: packageRoot; properties: "DelegateModel.inItems" }
+                    PropertyAction {
+                        target: packageRoot
+                        properties: "DelegateModel.inItems"
+                    }
                     ParentAnimation {
                         target: content
-                        NumberAnimation { target: content; properties: "x,y"; duration: 500 }
+                        NumberAnimation {
+                            target: content
+                            properties: "x,y"
+                            duration: 500
+                        }
+                    }
+                    ColorAnimation {
+                        targets: [gradientStart, gradientEnd]
+                        duration: 500
                     }
-                    ColorAnimation { targets: [gradientStart, gradientEnd]; duration: 500 }
                 }
             }
         }
@@ -139,7 +201,10 @@ Item {
         model: 35
         delegate: packageDelegate
 
-        groups: DelegateModelGroup { id: selectedItems; name: "selected" }
+        groups: DelegateModelGroup {
+            id: selectedItems
+            name: "selected"
+        }
 
         Component.onCompleted:  parts.selection.filterOnGroup = "selected"
     }
@@ -155,13 +220,16 @@ Item {
         path: Path {
             startX: 0
             startY: 0
-            PathLine { x: 64; y: 64 }
+            PathLine {
+                x: 64
+                y: 64
+            }
         }
     }
 
     GridView {
         id: itemsView
-        anchors { fill: parent }
+        anchors.fill: parent
         cellWidth: 64
         cellHeight: 64
         model: visualModel.parts.visible
diff --git a/examples/quick/views/delegatemodel/slideshow.qml b/examples/quick/views/delegatemodel/slideshow.qml
index c11a72147f..3e0c81f5d9 100644
--- a/examples/quick/views/delegatemodel/slideshow.qml
+++ b/examples/quick/views/delegatemodel/slideshow.qml
@@ -5,12 +5,15 @@ import QtQuick
 import QtQml.Models
 import shared as Shared
 
+pragma ComponentBehavior: Bound
+
 Rectangle {
     id: root
 
     property Item displayItem: null
 
-    width: 300; height: 400
+    width: 300
+    height: 400
 
     color: "black"
 
@@ -25,13 +28,17 @@ Rectangle {
         delegate: Item {
             id: delegateItem
 
-            width: 76; height: 76
+            width: 76
+            height: 76
 
             required property string thumbnail
 
             Rectangle {
                 id: image
-                x: 0; y: 0; width: 76; height: 76
+                x: 0
+                y: 0
+                width: 76
+                height: 76
                 border.width: 1
                 border.color: "white"
                 color: "black"
@@ -56,7 +63,14 @@ Rectangle {
                     State {
                         when: root.displayItem === delegateItem
                         name: "inDisplay";
-                        ParentChange { target: image; parent: imageContainer; x: 75; y: 75; width: 150; height: 150 }
+                        ParentChange {
+                            target: image
+                            parent: imageContainer
+                            x: 75
+                            y: 75
+                            width: 150
+                            height: 150
+                        }
                         PropertyChanges {
                             image.z: 2
                             delegateItem.DelegateModel.inItems: false
@@ -65,7 +79,14 @@ Rectangle {
                     State {
                         when: root.displayItem !== delegateItem
                         name: "inList";
-                        ParentChange { target: image; parent: delegateItem; x: 2; y: 2; width: 75; height: 75 }
+                        ParentChange {
+                            target: image
+                            parent: delegateItem
+                            x: 2
+                            y: 2
+                            width: 75
+                            height: 75
+                        }
                         PropertyChanges {
                             image.z: 1
                             delegateItem.DelegateModel.inItems: true
@@ -77,11 +98,19 @@ Rectangle {
                     Transition {
                         from: "inList"
                         SequentialAnimation {
-                            PropertyAction { target: delegateItem; property: "DelegateModel.inPersistedItems"; value: true }
+                            PropertyAction {
+                                target: delegateItem
+                                property: "DelegateModel.inPersistedItems"
+                                value: true
+                            }
                             ParentAnimation {
                                 target: image;
                                 via: root
-                                NumberAnimation { target: image; properties: "x,y,width,height"; duration: 1000 }
+                                NumberAnimation {
+                                    target: image
+                                    properties: "x,y,width,height"
+                                    duration: 1000
+                                }
                             }
                         }
                     }, Transition {
@@ -89,9 +118,17 @@ Rectangle {
                         SequentialAnimation {
                             ParentAnimation {
                                 target: image
-                                NumberAnimation { target: image; properties: "x,y,width,height"; duration: 1000 }
+                                NumberAnimation {
+                                    target: image
+                                    properties: "x,y,width,height"
+                                    duration: 1000
+                                }
+                            }
+                            PropertyAction {
+                                target: delegateItem
+                                property: "DelegateModel.inPersistedItems"
+                                value: false
                             }
-                            PropertyAction { target: delegateItem; property: "DelegateModel.inPersistedItems"; value: false }
                         }
                     }
                 ]
diff --git a/examples/quick/views/gridview/gridview-example.qml b/examples/quick/views/gridview/gridview-example.qml
index 3f849565ca..f340a97b4c 100644
--- a/examples/quick/views/gridview/gridview-example.qml
+++ b/examples/quick/views/gridview/gridview-example.qml
@@ -4,7 +4,8 @@
 import QtQuick
 
 Rectangle {
-    width: 300; height: 400
+    width: 300
+    height: 400
     color: "white"
 
     ListModel {
@@ -20,26 +21,36 @@ Rectangle {
 //! [0]
     GridView {
         anchors.fill: parent
-        cellWidth: 100; cellHeight: 100
+        cellWidth: 100
+        cellHeight: 100
         focus: true
         model: appModel
 
-        highlight: Rectangle { width: 80; height: 80; color: "lightsteelblue" }
+        highlight: Rectangle {
+            width: 80
+            height: 80
+            color: "lightsteelblue"
+        }
 
         delegate: Item {
             required property string icon
             required property string name
             required property int index
 
-            width: 100; height: 100
+            width: 100
+            height: 100
 
             Image {
                 id: myIcon
-                y: 20; anchors.horizontalCenter: parent.horizontalCenter
+                y: 20
+                anchors.horizontalCenter: parent.horizontalCenter
                 source: parent.icon
             }
             Text {
-                anchors { top: myIcon.bottom; horizontalCenter: parent.horizontalCenter }
+                anchors {
+                    top: myIcon.bottom
+                    horizontalCenter: parent.horizontalCenter
+                }
                 text: parent.name
             }
             MouseArea {
diff --git a/examples/quick/views/listview/content/PressAndHoldButton.qml b/examples/quick/views/listview/content/PressAndHoldButton.qml
index cdd2fb963d..51ab9435d2 100644
--- a/examples/quick/views/listview/content/PressAndHoldButton.qml
+++ b/examples/quick/views/listview/content/PressAndHoldButton.qml
@@ -8,7 +8,7 @@ Image {
 
     property int repeatDelay: 300
     property int repeatDuration: 75
-    property bool pressed: false
+    property bool pressed
 
     signal clicked
 
diff --git a/examples/quick/views/listview/content/SmallText.qml b/examples/quick/views/listview/content/SmallText.qml
index a808e3a27d..756610f4b3 100644
--- a/examples/quick/views/listview/content/SmallText.qml
+++ b/examples/quick/views/listview/content/SmallText.qml
@@ -4,6 +4,6 @@
 import QtQuick
 
 Text {
-    font.pixelSize: 12
+    font.pointSize: 9
 }
 
diff --git a/examples/quick/views/listview/displaymargin.qml b/examples/quick/views/listview/displaymargin.qml
index c4c32bdd64..0030b82b55 100644
--- a/examples/quick/views/listview/displaymargin.qml
+++ b/examples/quick/views/listview/displaymargin.qml
@@ -34,7 +34,8 @@ Item {
 
     Rectangle {
         id: header
-        width: parent.width; height: 40
+        width: parent.width
+        height: 40
         color: "#AAFF0000"
 
         Text {
@@ -47,7 +48,8 @@ Item {
     Rectangle {
         id: footer
         anchors.bottom: parent.bottom
-        width: parent.width; height: 40
+        width: parent.width
+        height: 40
         color: "#AAFF0000"
 
         Text {
diff --git a/examples/quick/views/listview/dynamiclist.qml b/examples/quick/views/listview/dynamiclist.qml
index fe32ce23d7..cd85d86aad 100644
--- a/examples/quick/views/listview/dynamiclist.qml
+++ b/examples/quick/views/listview/dynamiclist.qml
@@ -6,9 +6,12 @@ import "content"
 // This example shows how items can be dynamically added to and removed from
 // a ListModel, and how these list modifications can be animated.
 
+pragma ComponentBehavior: Bound
+
 Rectangle {
     id: container
-    width: 500; height: 400
+    width: 500
+    height: 400
     color: "#343434"
 
     // The model:
@@ -16,30 +19,48 @@ Rectangle {
         id: fruitModel
 
         ListElement {
-            name: "Apple"; cost: 2.45
+            name: "Apple"
+            cost: 2.45
             attributes: [
-                ListElement { description: "Core" },
-                ListElement { description: "Deciduous" }
+                ListElement {
+                    description: "Core"
+                },
+                ListElement {
+                    description: "Deciduous"
+                }
             ]
         }
         ListElement {
-            name: "Banana"; cost: 1.95
+            name: "Banana"
+            cost: 1.95
             attributes: [
-                ListElement { description: "Tropical" },
-                ListElement { description: "Seedless" }
+                ListElement {
+                    description: "Tropical"
+                },
+                ListElement {
+                    description: "Seedless"
+                }
             ]
         }
         ListElement {
-            name: "Cumquat"; cost: 3.25
+            name: "Cumquat"
+            cost: 3.25
             attributes: [
-                ListElement { description: "Citrus" }
+                ListElement {
+                    description: "Citrus"
+                }
             ]
         }
         ListElement {
-            name: "Durian"; cost: 9.95
+            name: "Durian"
+            cost: 9.95
             attributes: [
-                ListElement { description: "Tropical" },
-                ListElement { description: "Smelly" }
+                ListElement {
+                    description: "Tropical"
+                },
+                ListElement {
+                    description: "Smelly"
+                }
             ]
         }
     }
@@ -51,7 +72,8 @@ Rectangle {
         Item {
 //! [0]
             id: delegateItem
-            width: listView.width; height: 80
+            width: listView.width
+            height: 80
             clip: true
 
             required property int index
@@ -83,7 +105,7 @@ Rectangle {
             Column {
                 anchors {
                     left: arrows.right
-                    horizontalCenter: parent.horizontalCenter;
+                    horizontalCenter: parent.horizontalCenter
                     bottom: parent.verticalCenter
                 }
 
@@ -155,18 +177,42 @@ Rectangle {
 //! [1]
             SequentialAnimation {
                 id: addAnimation
-                PropertyAction { target: delegateItem; property: "height"; value: 0 }
-                NumberAnimation { target: delegateItem; property: "height"; to: 80; duration: 250; easing.type: Easing.InOutQuad }
+                PropertyAction {
+                    target: delegateItem
+                    property: "height"
+                    value: 0
+                }
+                NumberAnimation {
+                    target: delegateItem
+                    property: "height"
+                    to: 80
+                    duration: 250
+                    easing.type: Easing.InOutQuad
+                }
             }
             ListView.onAdd: addAnimation.start()
 
             SequentialAnimation {
                 id: removeAnimation
-                PropertyAction { target: delegateItem; property: "ListView.delayRemove"; value: true }
-                NumberAnimation { target: delegateItem; property: "height"; to: 0; duration: 250; easing.type: Easing.InOutQuad }
+                PropertyAction {
+                    target: delegateItem
+                    property: "ListView.delayRemove"
+                    value: true
+                }
+                NumberAnimation {
+                    target: delegateItem
+                    property: "height"
+                    to: 0
+                    duration: 250
+                    easing.type: Easing.InOutQuad
+                }
 
                 // Make sure delayRemove is set back to false so that the item can be destroyed
-                PropertyAction { target: delegateItem; property: "ListView.delayRemove"; value: false }
+                PropertyAction {
+                    target: delegateItem
+                    property: "ListView.delayRemove"
+                    value: false
+                }
             }
             ListView.onRemove: removeAnimation.start()
         }
@@ -177,8 +223,10 @@ Rectangle {
     ListView {
         id: listView
         anchors {
-            left: parent.left; top: parent.top;
-            right: parent.right; bottom: buttons.top;
+            left: parent.left
+            top: parent.top
+            right: parent.right
+            bottom: buttons.top
             margins: 20
         }
         model: fruitModel
@@ -187,11 +235,15 @@ Rectangle {
 
     Row {
         id: buttons
-        anchors { left: parent.left; bottom: parent.bottom; margins: 20 }
+        anchors {
+            left: parent.left
+            bottom: parent.bottom
+            margins: 20
+        }
         spacing: 10
 
         TextButton {
-            text: "Add an item"
+            text: qsTr("Add an item")
             onClicked: {
                 fruitModel.append({
                     "name": "Pizza Margarita",
@@ -202,7 +254,7 @@ Rectangle {
         }
 
         TextButton {
-            text: "Remove all items"
+            text: qsTr("Remove all items")
             onClicked: fruitModel.clear()
         }
     }
diff --git a/examples/quick/views/listview/expandingdelegates.qml b/examples/quick/views/listview/expandingdelegates.qml
index 26f2288922..5c1811a00a 100644
--- a/examples/quick/views/listview/expandingdelegates.qml
+++ b/examples/quick/views/listview/expandingdelegates.qml
@@ -8,7 +8,8 @@ import "content"
 
 Rectangle {
     id: page
-    width: 400; height: 240
+    width: 400
+    height: 240
     color: "black"
 
     // Delegate for the recipes.  This delegate has two modes:
@@ -31,13 +32,16 @@ Rectangle {
             // want to fade.
             property real detailsOpacity : 0
 //! [0]
-            width: listView.width
+            width: ListView.view.width
             height: 70
 
             // A simple rounded rectangle for the background
             Rectangle {
                 id: background
-                x: 2; y: 2; width: parent.width - x*2; height: parent.height - y*2
+                x: 2
+                y: 2
+                width: parent.width - x * 2
+                height: parent.height - y * 2
                 color: "ivory"
                 border.color: "orange"
                 radius: 5
@@ -58,26 +62,32 @@ Rectangle {
 
             Row {
                 id: topLayout
-                x: 10; y: 10; height: recipeImage.height; width: parent.width
+                x: 10
+                y: 10
+                height: recipeImage.height
+                width: parent.width
                 spacing: 10
 
                 Image {
                     id: recipeImage
-                    width: 50; height: 50
+                    width: 50
+                    height: 50
                     source: recipe.picture
                 }
 //! [1]
                 Column {
-                    width: background.width - recipeImage.width - 20; height: recipeImage.height
+                    width: background.width - recipeImage.width - 20
+                    height: recipeImage.height
                     spacing: 5
 
                     Text {
                         text: recipe.title
-                        font.bold: true; font.pointSize: 16
+                        font.bold: true
+                        font.pointSize: 16
                     }
 
                     SmallText {
-                        text: "Ingredients"
+                        text: qsTr("Ingredients")
                         font.bold: true
                         opacity: recipe.detailsOpacity
                     }
@@ -94,22 +104,32 @@ Rectangle {
 //! [2]
             Item {
                 id: details
-                x: 10; width: parent.width - 20
-
-                anchors { top: topLayout.bottom; topMargin: 10; bottom: parent.bottom; bottomMargin: 10 }
+                x: 10
+                width: parent.width - 20
+
+                anchors {
+                    top: topLayout.bottom
+                    topMargin: 10
+                    bottom: parent.bottom
+                    bottomMargin: 10
+                }
                 opacity: recipe.detailsOpacity
 //! [2]
                 SmallText {
                     id: methodTitle
                     anchors.top: parent.top
-                    text: "Method"
-                    font.pointSize: 12; font.bold: true
+                    text: qsTr("Method")
+                    font.pointSize: 12
+                    font.bold: true
                 }
 
                 Flickable {
                     id: flick
                     width: parent.width
-                    anchors { top: methodTitle.bottom; bottom: parent.bottom }
+                    anchors {
+                        top: methodTitle.bottom
+                        bottom: parent.bottom
+                    }
                     contentHeight: methodText.height
                     clip: true
 
@@ -122,13 +142,19 @@ Rectangle {
                 }
 
                 Image {
-                    anchors { right: flick.right; top: flick.top }
+                    anchors {
+                        right: flick.right
+                        top: flick.top
+                    }
                     source: "content/pics/moreUp.png"
                     opacity: flick.atYBeginning ? 0 : 1
                 }
 
                 Image {
-                    anchors { right: flick.right; bottom: flick.bottom }
+                    anchors {
+                        right: flick.right
+                        bottom: flick.bottom
+                    }
                     source: "content/pics/moreDown.png"
                     opacity: flick.atYEnd ? 0 : 1
                 }
@@ -138,9 +164,12 @@ Rectangle {
             // A button to close the detailed view, i.e. set the state back to default ('').
             TextButton {
                 y: 10
-                anchors { right: background.right; rightMargin: 10 }
+                anchors {
+                    right: background.right
+                    rightMargin: 10
+                }
                 opacity: recipe.detailsOpacity
-                text: "Close"
+                text: qsTr("Close")
 
                 onClicked: recipe.state = '';
             }
@@ -180,8 +209,14 @@ Rectangle {
             transitions: Transition {
                 // Make the state changes smooth
                 ParallelAnimation {
-                    ColorAnimation { property: "color"; duration: 500 }
-                    NumberAnimation { duration: 300; properties: "detailsOpacity,x,contentY,height,width" }
+                    ColorAnimation {
+                        property: "color"
+                        duration: 500
+                    }
+                    NumberAnimation {
+                        duration: 300
+                        properties: "detailsOpacity,x,contentY,height,width"
+                    }
                 }
             }
         }
@@ -192,7 +227,7 @@ Rectangle {
     ListView {
         id: listView
         anchors.fill: parent
-        model: RecipesModel {}
+        model: RecipesModel { }
         delegate: recipeDelegate
     }
 }
diff --git a/examples/quick/views/listview/highlight.qml b/examples/quick/views/listview/highlight.qml
index 137347203a..1f9b9c015c 100644
--- a/examples/quick/views/listview/highlight.qml
+++ b/examples/quick/views/listview/highlight.qml
@@ -9,13 +9,15 @@ import QtQuick
 import "content"
 
 Rectangle {
-    width: 200; height: 300
+    width: 200
+    height: 300
 
     // Define a delegate component. The component will be
     // instantiated for each visible item in the list.
     component PetDelegate: Item {
         id: pet
-        width: 200; height: 55
+        width: 200
+        height: 55
 
         required property int index
         required property string name
@@ -23,9 +25,15 @@ Rectangle {
         required property int age
 
         Column {
-            SmallText { text: 'Name: ' + pet.name }
-            SmallText { text: 'Type: ' + pet.type }
-            SmallText { text: 'Age: ' + pet.age }
+            SmallText {
+                text: 'Name: ' + pet.name
+            }
+            SmallText {
+                text: 'Type: ' + pet.type
+            }
+            SmallText {
+                text: 'Age: ' + pet.age
+            }
         }
         // indent the item if it is the current item
         states: State {
@@ -34,7 +42,10 @@ Rectangle {
             PropertyChanges { pet.x: 20 }
         }
         transitions: Transition {
-            NumberAnimation { properties: "x"; duration: 200 }
+            NumberAnimation {
+                properties: "x"
+                duration: 200
+            }
         }
         MouseArea {
             anchors.fill: parent
@@ -45,24 +56,31 @@ Rectangle {
 //! [0]
     // Define a highlight with customized movement between items.
     component HighlightBar : Rectangle {
-        width: 200; height: 50
+        width: 200
+        height: 50
         color: "#FFFF88"
-        y: listView.currentItem.y
-        Behavior on y { SpringAnimation { spring: 2; damping: 0.1 } }
+        y: ListView.view.currentItem.y
+        Behavior on y {
+            SpringAnimation {
+                spring: 2
+                damping: 0.1
+            }
+        }
     }
 
     ListView {
         id: listView
-        width: 200; height: parent.height
+        width: 200
+        height: parent.height
         x: 30
 
-        model: PetsModel {}
-        delegate: PetDelegate {}
+        model: PetsModel { }
+        delegate: PetDelegate { }
         focus: true
 
         // Set the highlight delegate. Note we must also set highlightFollowsCurrentItem
         // to false so the highlight delegate can control how the highlight is moved.
-        highlight: HighlightBar {}
+        highlight: HighlightBar { }
         highlightFollowsCurrentItem: false
     }
 //! [0]
diff --git a/examples/quick/views/listview/highlightranges.qml b/examples/quick/views/listview/highlightranges.qml
index 78f8b197d3..91304ae08b 100644
--- a/examples/quick/views/listview/highlightranges.qml
+++ b/examples/quick/views/listview/highlightranges.qml
@@ -4,6 +4,8 @@
 import QtQuick
 import "content"
 
+pragma ComponentBehavior: Bound
+
 //! [0]
 Rectangle {
     id: root
@@ -30,17 +32,26 @@ Rectangle {
                     }
         }
 
-        PauseAnimation { duration: 500 }
+        PauseAnimation {
+            duration: 500
+        }
     }
 //! [0]
-    MouseArea{
+    MouseArea {
         id: ma
         z: 1
         anchors.fill: parent
-        onClicked: { z = 1 - z; if (anim.running) anim.stop(); else anim.restart();}
+        onClicked: function () {
+            z = 1 - z;
+            if (anim.running)
+                anim.stop();
+            else
+                anim.restart();
+        }
     }
 
-    width: 320; height: 480
+    width: 320
+    height: 480
 
     // This example shows the same model in three different ListView items,
     // with different highlight ranges. The highlight ranges are set by the
@@ -68,12 +79,16 @@ Rectangle {
 //! [1]
     ListView {
         id: list1
-        height: 50; width: parent.width
-        model: PetsModel {id: aModel}
+        height: 50
+        width: parent.width
+        model: PetsModel {
+            id: aModel
+        }
         delegate: petDelegate
         orientation: ListView.Horizontal
-
-        highlight: Rectangle { color: "lightsteelblue" }
+        highlight: Rectangle {
+            color: "lightsteelblue"
+        }
         currentIndex: root.current
         onCurrentIndexChanged: root.current = currentIndex
         focus: true
@@ -82,29 +97,33 @@ Rectangle {
     ListView {
         id: list2
         y: 160
-        height: 50; width: parent.width
-        model: PetsModel {}
+        height: 50
+        width: parent.width
+        model: PetsModel { }
         delegate: petDelegate
         orientation: ListView.Horizontal
-
-        highlight: Rectangle { color: "yellow" }
+        highlight: Rectangle {
+            color: "yellow"
+        }
         currentIndex: root.current
-        preferredHighlightBegin: 80; preferredHighlightEnd: 220
+        preferredHighlightBegin: 80
+        preferredHighlightEnd: 220
         highlightRangeMode: ListView.ApplyRange
     }
 
     ListView {
         id: list3
         y: 320
-        height: 50; width: parent.width
+        height: 50
+        width: parent.width
         model: PetsModel {}
         delegate: petDelegate
         orientation: ListView.Horizontal
-
         highlight: Rectangle { color: "yellow" }
         currentIndex: root.current
         onCurrentIndexChanged: root.current = currentIndex
-        preferredHighlightBegin: 125; preferredHighlightEnd: 125
+        preferredHighlightBegin: 125
+        preferredHighlightEnd: 125
         highlightRangeMode: ListView.StrictlyEnforceRange
     }
 //! [1]
@@ -123,9 +142,15 @@ Rectangle {
 
             Column {
                 id: column
-                Text { text: 'Name: ' + petDelegateItem.name }
-                Text { text: 'Type: ' + petDelegateItem.type }
-                Text { text: 'Age: ' + petDelegateItem.age }
+                Text {
+                    text: 'Name: ' + petDelegateItem.name
+                }
+                Text {
+                    text: 'Type: ' + petDelegateItem.type
+                }
+                Text {
+                    text: 'Age: ' + petDelegateItem.age
+                }
             }
 
             MouseArea {
diff --git a/examples/quick/views/listview/sections.qml b/examples/quick/views/listview/sections.qml
index 5b2dfc67cc..83370958fa 100644
--- a/examples/quick/views/listview/sections.qml
+++ b/examples/quick/views/listview/sections.qml
@@ -5,7 +5,7 @@
 // the ListView.section attached property.
 
 import QtQuick
-import "content"
+import QtQuick.Controls
 
 Rectangle {
     id: container
@@ -14,21 +14,67 @@ Rectangle {
 
     ListModel {
         id: animalsModel
-        ListElement { name: "Ant"; size: "Tiny" }
-        ListElement { name: "Flea"; size: "Tiny" }
-        ListElement { name: "Parrot"; size: "Small" }
-        ListElement { name: "Guinea pig"; size: "Small" }
-        ListElement { name: "Rat"; size: "Small" }
-        ListElement { name: "Butterfly"; size: "Small" }
-        ListElement { name: "Dog"; size: "Medium" }
-        ListElement { name: "Cat"; size: "Medium" }
-        ListElement { name: "Pony"; size: "Medium" }
-        ListElement { name: "Koala"; size: "Medium" }
-        ListElement { name: "Horse"; size: "Large" }
-        ListElement { name: "Tiger"; size: "Large" }
-        ListElement { name: "Giraffe"; size: "Large" }
-        ListElement { name: "Elephant"; size: "Huge" }
-        ListElement { name: "Whale"; size: "Huge" }
+
+        ListElement {
+            name: "Ant"
+            size: "Tiny"
+        }
+        ListElement {
+            name: "Flea"
+            size: "Tiny"
+        }
+        ListElement {
+            name: "Parrot"
+            size: "Small"
+        }
+        ListElement {
+            name: "Guinea pig"
+            size: "Small"
+        }
+        ListElement {
+            name: "Rat"
+            size: "Small"
+        }
+        ListElement {
+            name: "Butterfly"
+            size: "Small"
+        }
+        ListElement {
+            name: "Dog"
+            size: "Medium"
+        }
+        ListElement {
+            name: "Cat"
+            size: "Medium"
+        }
+        ListElement {
+            name: "Pony"
+            size: "Medium"
+        }
+        ListElement {
+            name: "Koala"
+            size: "Medium"
+        }
+        ListElement {
+            name: "Horse"
+            size: "Large"
+        }
+        ListElement {
+            name: "Tiger"
+            size: "Large"
+        }
+        ListElement {
+            name: "Giraffe"
+            size: "Large"
+        }
+        ListElement {
+            name: "Elephant"
+            size: "Huge"
+        }
+        ListElement {
+            name: "Whale"
+            size: "Huge"
+        }
     }
 
 //! [0]
@@ -36,7 +82,7 @@ Rectangle {
     Component {
         id: sectionHeading
         Rectangle {
-            width: container.width
+            width: ListView.view.width
             height: childrenRect.height
             color: "lightsteelblue"
 
@@ -58,6 +104,7 @@ Rectangle {
         model: animalsModel
         delegate: Text {
             required property string name
+
             text: name
             font.pixelSize: 18
         }
@@ -73,19 +120,23 @@ Rectangle {
         anchors.bottom: parent.bottom
         anchors.bottomMargin: 1
         spacing: 1
-        ToggleButton {
-            label: "CurrentLabelAtStart"
-            onToggled: {
-                if (active)
+
+        CheckBox {
+            id: labelAtStartCheckBox
+            text: qsTr("CurrentLabelAtStart")
+            onClicked: {
+                if (checked)
                     view.section.labelPositioning |= ViewSection.CurrentLabelAtStart
                 else
                     view.section.labelPositioning &= ~ViewSection.CurrentLabelAtStart
             }
         }
-        ToggleButton {
-            label: "NextLabelAtEnd"
-            onToggled: {
-                if (active)
+
+        CheckBox {
+            id: labelAtEndCheckBox
+            text: qsTr("NextLabelAtEnd")
+            onClicked: {
+                if (checked)
                     view.section.labelPositioning |= ViewSection.NextLabelAtEnd
                 else
                     view.section.labelPositioning &= ~ViewSection.NextLabelAtEnd
diff --git a/examples/quick/views/objectmodel/objectmodel.qml b/examples/quick/views/objectmodel/objectmodel.qml
index 898ef7f9e2..f0b116a247 100644
--- a/examples/quick/views/objectmodel/objectmodel.qml
+++ b/examples/quick/views/objectmodel/objectmodel.qml
@@ -7,6 +7,8 @@
 import QtQuick
 import QtQml.Models
 
+pragma ComponentBehavior: Bound
+
 Rectangle {
     id: root
     color: "lightgray"
@@ -19,23 +21,41 @@ Rectangle {
         id: itemModel
 
         Rectangle {
-            width: view.width; height: view.height
+            width: view.width
+            height: view.height
             color: "#FFFEF0"
-            Text { text: "Page 1"; font.bold: true; anchors.centerIn: parent }
+
+            Text {
+                anchors.centerIn: parent
+                text: qsTr("Page 1")
+                font.bold: true
+            }
 
             Component.onDestruction: if (root.printDestruction) print("destroyed 1")
         }
         Rectangle {
-            width: view.width; height: view.height
+            width: view.width
+            height: view.height
             color: "#F0FFF7"
-            Text { text: "Page 2"; font.bold: true; anchors.centerIn: parent }
+
+            Text {
+                anchors.centerIn: parent
+                text: qsTr("Page 2")
+                font.bold: true
+            }
 
             Component.onDestruction: if (root.printDestruction) print("destroyed 2")
         }
         Rectangle {
-            width: view.width; height: view.height
+            width: view.width
+            height: view.height
             color: "#F4F0FF"
-            Text { text: "Page 3"; font.bold: true; anchors.centerIn: parent }
+
+            Text {
+                anchors.centerIn: parent
+                text: qsTr("Page 3")
+                font.bold: true
+            }
 
             Component.onDestruction: if (root.printDestruction) print("destroyed 3")
         }
@@ -43,18 +63,27 @@ Rectangle {
 
     ListView {
         id: view
-        anchors { fill: parent; bottomMargin: 30 }
+        anchors {
+            fill: parent
+            bottomMargin: 30
+        }
         model: itemModel
-        preferredHighlightBegin: 0; preferredHighlightEnd: 0
+        preferredHighlightBegin: 0
+        preferredHighlightEnd: 0
         highlightRangeMode: ListView.StrictlyEnforceRange
         orientation: ListView.Horizontal
-        snapMode: ListView.SnapOneItem; flickDeceleration: 2000
+        snapMode: ListView.SnapOneItem
+        flickDeceleration: 2000
         cacheBuffer: 200
     }
 //! [0]
     Rectangle {
-        width: root.width; height: 30
-        anchors { top: view.bottom; bottom: parent.bottom }
+        width: root.width
+        height: 30
+        anchors {
+            top: view.bottom
+            bottom: parent.bottom
+        }
         color: "gray"
 
         Row {
@@ -63,17 +92,18 @@ Rectangle {
 
             Repeater {
                 model: itemModel.count
-
-                Rectangle {
+                delegate: Rectangle {
                     required property int index
 
-                    width: 5; height: 5
+                    width: 5
+                    height: 5
                     radius: 3
-                    color: view.currentIndex == index ? "blue" : "white"
+                    color: view.currentIndex === index ? "blue" : "white"
 
                     MouseArea {
-                        width: 20; height: 20
                         anchors.centerIn: parent
+                        width: 20
+                        height: 20
                         onClicked: view.currentIndex = parent.index
                     }
                 }
diff --git a/examples/quick/views/package/Delegate.qml b/examples/quick/views/package/Delegate.qml
index 2e810aebec..7f3eeaa833 100644
--- a/examples/quick/views/package/Delegate.qml
+++ b/examples/quick/views/package/Delegate.qml
@@ -11,26 +11,50 @@ Package {
     required property int index
     required property string display
 
-    Text { id: listDelegate; width: parent.width; height: 25; text: 'Empty'; Package.name: 'list' }
-    Text { id: gridDelegate; width: parent.width / 2; height: 50; text: 'Empty'; Package.name: 'grid' }
+    Text {
+        id: listDelegate
+        width: parent.width
+        height: 25
+        text: 'Empty'
+        Package.name: 'list'
+    }
+
+    Text {
+        id: gridDelegate
+        width: parent.width / 2
+        height: 50
+        text: 'Empty'
+        Package.name: 'grid'
+    }
 
     Rectangle {
         id: wrapper
-        width: parent.width; height: 25
+        width: parent?.width ?? 0
+        height: 25
         color: 'lightsteelblue'
 
-        Text { text: delegate.display; anchors.centerIn: parent }
+        Text {
+            text: delegate.display
+            anchors.centerIn: parent
+        }
         state: delegate.upTo > delegate.index ? 'inGrid' : 'inList'
         states: [
             State {
                 name: 'inList'
-                ParentChange { target: wrapper; parent: listDelegate }
+                ParentChange {
+                    target: wrapper
+                    parent: listDelegate
+                }
             },
             State {
                 name: 'inGrid'
                 ParentChange {
-                    target: wrapper; parent: gridDelegate
-                    x: 0; y: 0; width: gridDelegate.width; height: gridDelegate.height
+                    target: wrapper
+                    parent: gridDelegate
+                    x: 0
+                    y: 0
+                    width: gridDelegate.width
+                    height: gridDelegate.height
                 }
             }
         ]
@@ -38,7 +62,10 @@ Package {
         transitions: [
             Transition {
                 ParentAnimation {
-                    NumberAnimation { properties: 'x,y,width,height'; duration: 300 }
+                    NumberAnimation {
+                        properties: 'x,y,width,height'
+                        duration: 300
+                    }
                 }
             }
         ]
diff --git a/examples/quick/views/package/view.qml b/examples/quick/views/package/view.qml
index 696557ed7c..a9a0c46198 100644
--- a/examples/quick/views/package/view.qml
+++ b/examples/quick/views/package/view.qml
@@ -4,16 +4,24 @@
 import QtQuick
 import QtQml.Models
 
+pragma ComponentBehavior: Bound
+
 Rectangle {
     id: root
     color: "white"
     width: 320
     height: 480
-    property int upTo: 0
+    property int upTo
     SequentialAnimation on upTo {
         loops: -1
-        NumberAnimation { to: 8; duration: 3500 }
-        NumberAnimation { to: 0; duration: 3500 }
+        NumberAnimation {
+            to: 8
+            duration: 3500
+        }
+        NumberAnimation {
+            to: 0
+            duration: 3500
+        }
     }
 
     ListModel {
@@ -38,14 +46,14 @@ Rectangle {
 
     ListView {
         id: lv
-        height: parent.height/2
+        height: parent.height / 2
         width: parent.width
 
         model: visualModel.parts.list
     }
     GridView {
-        y: parent.height/2
-        height: parent.height/2
+        y: parent.height / 2
+        height: parent.height / 2
         width: parent.width
         cellWidth: width / 2
         cellHeight: 50
diff --git a/examples/quick/views/pathview/pathview-example.qml b/examples/quick/views/pathview/pathview-example.qml
index 19fd470c04..f1ecd099c1 100644
--- a/examples/quick/views/pathview/pathview-example.qml
+++ b/examples/quick/views/pathview/pathview-example.qml
@@ -4,24 +4,47 @@
 import QtQuick
 
 Rectangle {
-    width: 400; height: 240
+    width: 400
+    height: 240
     color: "white"
 
     ListModel {
         id: appModel
-        ListElement { name: "Music"; icon: "pics/AudioPlayer_48.png" }
-        ListElement { name: "Movies"; icon: "pics/VideoPlayer_48.png" }
-        ListElement { name: "Camera"; icon: "pics/Camera_48.png" }
-        ListElement { name: "Calendar"; icon: "pics/DateBook_48.png" }
-        ListElement { name: "Messaging"; icon: "pics/EMail_48.png" }
-        ListElement { name: "Todo List"; icon: "pics/TodoList_48.png" }
-        ListElement { name: "Contacts"; icon: "pics/AddressBook_48.png" }
+        ListElement {
+            name: "Music"
+            icon: "pics/AudioPlayer_48.png"
+        }
+        ListElement {
+            name: "Movies"
+            icon: "pics/VideoPlayer_48.png"
+        }
+        ListElement {
+            name: "Camera"
+            icon: "pics/Camera_48.png"
+        }
+        ListElement {
+            name: "Calendar"
+            icon: "pics/DateBook_48.png"
+        }
+        ListElement {
+            name: "Messaging"
+            icon: "pics/EMail_48.png"
+        }
+        ListElement {
+            name: "Todo List"
+            icon: "pics/TodoList_48.png"
+        }
+        ListElement {
+            name: "Contacts"
+            icon: "pics/AddressBook_48.png"
+        }
     }
 
     Component {
         id: appDelegate
         Item {
-            width: 100; height: 100
+            width: 100
+            height: 100
             scale: PathView.iconScale
 
             required property string name
@@ -30,11 +53,15 @@ Rectangle {
 
             Image {
                 id: myIcon
-                y: 20; anchors.horizontalCenter: parent.horizontalCenter
+                y: 20
+                anchors.horizontalCenter: parent.horizontalCenter
                 source: parent.icon
             }
             Text {
-                anchors { top: myIcon.bottom; horizontalCenter: parent.horizontalCenter }
+                anchors {
+                    top: myIcon.bottom
+                    horizontalCenter: parent.horizontalCenter
+                }
                 text: parent.name
             }
 
@@ -47,7 +74,11 @@ Rectangle {
 
     Component {
         id: appHighlight
-        Rectangle { width: 80; height: 80; color: "lightsteelblue" }
+        Rectangle {
+            width: 80
+            height: 80
+            color: "lightsteelblue"
+        }
     }
 
     PathView {
@@ -62,11 +93,30 @@ Rectangle {
         path: Path {
             startX: 10
             startY: 50
-            PathAttribute { name: "iconScale"; value: 0.5 }
-            PathQuad { x: 200; y: 150; controlX: 50; controlY: 200 }
-            PathAttribute { name: "iconScale"; value: 1.0 }
-            PathQuad { x: 390; y: 50; controlX: 350; controlY: 200 }
-            PathAttribute { name: "iconScale"; value: 0.5 }
+            PathAttribute {
+                name: "iconScale"
+                value: 0.5
+            }
+            PathQuad {
+                x: 200
+                y: 150
+                controlX: 50
+                controlY: 200
+            }
+            PathAttribute {
+                name: "iconScale"
+                value: 1.0
+            }
+            PathQuad {
+                x: 390
+                y: 50
+                controlX: 350
+                controlY: 200
+            }
+            PathAttribute {
+                name: "iconScale"
+                value: 0.5
+            }
         }
     }
 }