Avoid discouraged patterns in examples

In particular, use required properties where applicable, explicitly
import QtQml where we use it, avoid unqualified access into the root
scope of a component, use JavaScript functions with explicit parameters
as signal handlers.

Change-Id: I3eaaba47cc3c7a2a12d488e36f9eec145cedbb0e
Reviewed-by: Fabian Kosmale <fabian.kosmale@qt.io>
Reviewed-by: Shawn Rutledge <shawn.rutledge@qt.io>

8 files changed, 110 insertions, 66 deletions

diff --git a/examples/quick/views/listview/content/PressAndHoldButton.qml b/examples/quick/views/listview/content/PressAndHoldButton.qml
index 527394eb4d..6d633c0264 100644
--- a/examples/quick/views/listview/content/PressAndHoldButton.qml
+++ b/examples/quick/views/listview/content/PressAndHoldButton.qml
@@ -72,12 +72,12 @@ Image {
 
         PropertyAction { target: container; property: "pressed"; value: true }
         ScriptAction { script: container.clicked() }
-        PauseAnimation { duration: repeatDelay }
+        PauseAnimation { duration: container.repeatDelay }
 
         SequentialAnimation {
             loops: Animation.Infinite
             ScriptAction { script: container.clicked() }
-            PauseAnimation { duration: repeatDuration }
+            PauseAnimation { duration: container.repeatDuration }
         }
     }
 
diff --git a/examples/quick/views/listview/content/ToggleButton.qml b/examples/quick/views/listview/content/ToggleButton.qml
index 0a2747a683..890a94570b 100644
--- a/examples/quick/views/listview/content/ToggleButton.qml
+++ b/examples/quick/views/listview/content/ToggleButton.qml
@@ -63,6 +63,6 @@ Rectangle {
     Text { id: text; anchors.centerIn: parent; font.pixelSize: 14 }
     MouseArea {
         anchors.fill: parent
-        onClicked: { active = !active; root.toggled() }
+        onClicked: { root.active = !root.active; root.toggled() }
     }
 }
diff --git a/examples/quick/views/listview/displaymargin.qml b/examples/quick/views/listview/displaymargin.qml
index e0024e72a9..19261caaa6 100644
--- a/examples/quick/views/listview/displaymargin.qml
+++ b/examples/quick/views/listview/displaymargin.qml
@@ -68,10 +68,13 @@ Item {
             width: parent.width
             height: 25
             color: index % 2 ? "steelblue" : "lightsteelblue"
+
+            required property int index
+
             Text {
                 anchors.centerIn: parent
                 color: "white"
-                text: "Item " + (index + 1)
+                text: "Item " + (parent.index + 1)
             }
         }
     }
diff --git a/examples/quick/views/listview/dynamiclist.qml b/examples/quick/views/listview/dynamiclist.qml
index bfc697d094..f37aab98e2 100644
--- a/examples/quick/views/listview/dynamiclist.qml
+++ b/examples/quick/views/listview/dynamiclist.qml
@@ -101,6 +101,11 @@ Rectangle {
             width: listView.width; height: 80
             clip: true
 
+            required property int index
+            required property string name
+            required property real cost
+            required property var attributes
+
             Column {
                 id: arrows
                 anchors {
@@ -109,10 +114,16 @@ Rectangle {
                 }
                 Image {
                     source: "content/pics/arrow-up.png"
-                    MouseArea { anchors.fill: parent; onClicked: fruitModel.move(index, index-1, 1) }
+                    MouseArea {
+                        anchors.fill: parent
+                        onClicked: fruitModel.move(delegateItem.index, delegateItem.index - 1, 1)
+                    }
                 }
                 Image { source: "content/pics/arrow-down.png"
-                    MouseArea { anchors.fill: parent; onClicked: fruitModel.move(index, index+1, 1) }
+                    MouseArea {
+                        anchors.fill: parent
+                        onClicked: fruitModel.move(delegateItem.index, delegateItem.index + 1, 1)
+                    }
                 }
             }
 
@@ -125,7 +136,7 @@ Rectangle {
 
                 Text {
                     anchors.horizontalCenter: parent.horizontalCenter
-                    text: name
+                    text: delegateItem.name
                     font.pixelSize: 15
                     color: "white"
                 }
@@ -133,8 +144,12 @@ Rectangle {
                     anchors.horizontalCenter: parent.horizontalCenter
                     spacing: 5
                     Repeater {
-                        model: attributes
-                        Text { text: description; color: "White" }
+                        model: delegateItem.attributes
+                        Text {
+                            required property string description
+                            text: description
+                            color: "White"
+                        }
                     }
                 }
             }
@@ -154,13 +169,13 @@ Rectangle {
                     PressAndHoldButton {
                         anchors.verticalCenter: parent.verticalCenter
                         source: "content/pics/plus-sign.png"
-                        onClicked: fruitModel.setProperty(index, "cost", cost + 0.25)
+                        onClicked: fruitModel.setProperty(delegateItem.index, "cost", delegateItem.cost + 0.25)
                     }
 
                     Text {
                         id: costText
                         anchors.verticalCenter: parent.verticalCenter
-                        text: '$' + Number(cost).toFixed(2)
+                        text: '$' + Number(delegateItem.cost).toFixed(2)
                         font.pixelSize: 15
                         color: "white"
                         font.bold: true
@@ -169,12 +184,16 @@ Rectangle {
                     PressAndHoldButton {
                         anchors.verticalCenter: parent.verticalCenter
                         source: "content/pics/minus-sign.png"
-                        onClicked: fruitModel.setProperty(index, "cost", Math.max(0,cost-0.25))
+                        onClicked: fruitModel.setProperty(delegateItem.index, "cost",
+                                                          Math.max(0, delegateItem.cost - 0.25))
                     }
 
                     Image {
                         source: "content/pics/list-delete.png"
-                        MouseArea { anchors.fill:parent; onClicked: fruitModel.remove(index) }
+                        MouseArea {
+                            anchors.fill: parent
+                            onClicked: fruitModel.remove(delegateItem.index)
+                        }
                     }
                 }
             }
diff --git a/examples/quick/views/listview/expandingdelegates.qml b/examples/quick/views/listview/expandingdelegates.qml
index 1308e8441d..6ed1d8c341 100644
--- a/examples/quick/views/listview/expandingdelegates.qml
+++ b/examples/quick/views/listview/expandingdelegates.qml
@@ -67,6 +67,11 @@ Rectangle {
         Item {
             id: recipe
 
+            required property string title
+            required property string picture
+            required property string ingredients
+            required property string method
+
             // Create a property to contain the visibility of the details.
             // We can bind multiple element's opacity to this one property,
             // rather than having a "PropertyChanges" line for each element we
@@ -106,7 +111,7 @@ Rectangle {
                 Image {
                     id: recipeImage
                     width: 50; height: 50
-                    source: picture
+                    source: recipe.picture
                 }
 //! [1]
                 Column {
@@ -114,7 +119,7 @@ Rectangle {
                     spacing: 5
 
                     Text {
-                        text: title
+                        text: recipe.title
                         font.bold: true; font.pointSize: 16
                     }
 
@@ -125,7 +130,7 @@ Rectangle {
                     }
 
                     SmallText {
-                        text: ingredients
+                        text: recipe.ingredients
                         wrapMode: Text.WordWrap
                         width: parent.width
                         opacity: recipe.detailsOpacity
@@ -155,7 +160,12 @@ Rectangle {
                     contentHeight: methodText.height
                     clip: true
 
-                    Text { id: methodText; text: method; wrapMode: Text.WordWrap; width: details.width }
+                    Text {
+                        id: methodText
+                        text: recipe.method
+                        wrapMode: Text.WordWrap
+                        width: details.width
+                    }
                 }
 
                 Image {
diff --git a/examples/quick/views/listview/highlight.qml b/examples/quick/views/listview/highlight.qml
index 5b03d30f25..092b4d59bd 100644
--- a/examples/quick/views/listview/highlight.qml
+++ b/examples/quick/views/listview/highlight.qml
@@ -58,44 +58,44 @@ import "content"
 Rectangle {
     width: 200; height: 300
 
-    // Define a delegate component.  A component will be
+    // Define a delegate component. The component will be
     // instantiated for each visible item in the list.
-    Component {
-        id: petDelegate
-        Item {
-            id: wrapper
-            width: 200; height: 55
-            Column {
-                SmallText { text: 'Name: ' + name }
-                SmallText { text: 'Type: ' + type }
-                SmallText { text: 'Age: ' + age }
-            }
-            // indent the item if it is the current item
-            states: State {
-                name: "Current"
-                when: wrapper.ListView.isCurrentItem
-                PropertyChanges { target: wrapper; x: 20 }
-            }
-            transitions: Transition {
-                NumberAnimation { properties: "x"; duration: 200 }
-            }
-            MouseArea {
-                anchors.fill: parent
-                onClicked: wrapper.ListView.view.currentIndex = index
-            }
+    component PetDelegate: Item {
+        id: pet
+        width: 200; height: 55
+
+        required property int index
+        required property string name
+        required property string type
+        required property int age
+
+        Column {
+            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 {
+            name: "Current"
+            when: pet.ListView.isCurrentItem
+            PropertyChanges { target: pet; x: 20 }
+        }
+        transitions: Transition {
+            NumberAnimation { properties: "x"; duration: 200 }
+        }
+        MouseArea {
+            anchors.fill: parent
+            onClicked: pet.ListView.view.currentIndex = pet.index
         }
     }
 
 //! [0]
     // Define a highlight with customized movement between items.
-    Component {
-        id: highlightBar
-        Rectangle {
-            width: 200; height: 50
-            color: "#FFFF88"
-            y: listView.currentItem.y;
-            Behavior on y { SpringAnimation { spring: 2; damping: 0.1 } }
-        }
+    component HighlightBar : Rectangle {
+        width: 200; height: 50
+        color: "#FFFF88"
+        y: listView.currentItem.y
+        Behavior on y { SpringAnimation { spring: 2; damping: 0.1 } }
     }
 
     ListView {
@@ -104,12 +104,12 @@ Rectangle {
         x: 30
 
         model: PetsModel {}
-        delegate: petDelegate
+        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 7bc9ab7fe1..dafd064332 100644
--- a/examples/quick/views/listview/highlightranges.qml
+++ b/examples/quick/views/listview/highlightranges.qml
@@ -62,17 +62,17 @@ Rectangle {
         loops: -1
         running: true
         ScriptAction {
-            script: if (increasing) {
-                        current++;
-                        if (current >= aModel.count -1) {
-                            current = aModel.count - 1;
-                            increasing = !increasing;
+            script: if (root.increasing) {
+                        root.current++;
+                        if (root.current >= aModel.count -1) {
+                            root.current = aModel.count - 1;
+                            root.increasing = !root.increasing;
                         }
                     } else {
-                        current--;
-                        if (current <= 0) {
-                            current = 0;
-                            increasing = !increasing;
+                        root.current--;
+                        if (root.current <= 0) {
+                            root.current = 0;
+                            root.increasing = !root.increasing;
                         }
                     }
         }
@@ -161,16 +161,22 @@ Rectangle {
         Item {
             width: 160
             height: column.height
+
+            required property int index
+            required property string name
+            required property string type
+            required property int age
+
             Column {
                 id: column
-                Text { text: 'Name: ' + name }
-                Text { text: 'Type: ' + type }
-                Text { text: 'Age: ' + age }
+                Text { text: 'Name: ' + parent.name }
+                Text { text: 'Type: ' + parent.type }
+                Text { text: 'Age: ' + parent.age }
             }
 
             MouseArea {
                 anchors.fill: parent
-                onClicked: root.current = index
+                onClicked: root.current = parent.index
             }
         }
     }
diff --git a/examples/quick/views/listview/sections.qml b/examples/quick/views/listview/sections.qml
index 75b0f5c6d9..d51ed89789 100644
--- a/examples/quick/views/listview/sections.qml
+++ b/examples/quick/views/listview/sections.qml
@@ -87,8 +87,10 @@ Rectangle {
             height: childrenRect.height
             color: "lightsteelblue"
 
+            required property string section
+
             Text {
-                text: section
+                text: parent.section
                 font.bold: true
                 font.pixelSize: 20
             }
@@ -101,7 +103,11 @@ Rectangle {
         anchors.bottom: buttonBar.top
         width: parent.width
         model: animalsModel
-        delegate: Text { text: name; font.pixelSize: 18 }
+        delegate: Text {
+            required property string name
+            text: name
+            font.pixelSize: 18
+        }
 
         section.property: "size"
         section.criteria: ViewSection.FullString