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>

6 files changed, 38 insertions, 23 deletions

diff --git a/examples/quick/particles/affectors/content/customaffector.qml b/examples/quick/particles/affectors/content/customaffector.qml
index 71646bcf39..6fabfb3ab2 100644
--- a/examples/quick/particles/affectors/content/customaffector.qml
+++ b/examples/quick/particles/affectors/content/customaffector.qml
@@ -81,7 +81,7 @@ Item {
             property real velocity: 1.5
             width: parent.width
             height: parent.height - 100
-            onAffectParticles: {
+            onAffectParticles: (particles, dt) => {
             /*  //Linear movement
                 if (particle.r == 0) {
                     particle.r = Math.random() > 0.5 ? -1 : 1;
@@ -117,7 +117,7 @@ Item {
             width: parent.width + 120
             height: 100
             anchors.bottom: parent.bottom
-            onAffectParticles: {
+            onAffectParticles: (particles, dt) => {
                 for (var i=0; i<particles.length; i++) {
                     var particle = particles[i];
                     var pseudoRand = (Math.floor(particle.t*1327) % 10) + 1;
diff --git a/examples/quick/particles/affectors/content/groupgoal.qml b/examples/quick/particles/affectors/content/groupgoal.qml
index 6472a3b450..9910531a98 100644
--- a/examples/quick/particles/affectors/content/groupgoal.qml
+++ b/examples/quick/particles/affectors/content/groupgoal.qml
@@ -62,7 +62,7 @@ Rectangle {
     Text {
         color: "white"
         anchors.right: parent.right
-        text: score
+        text: root.score
     }
 
     ParticleSystem {
@@ -96,7 +96,7 @@ Rectangle {
         ParticleGroup {
             name: "lit"
             duration: 10000
-            onEntered: score++;
+            onEntered: root.score++
             TrailEmitter {
                 id: fireballFlame
                 group: "flame"
diff --git a/examples/quick/particles/emitters/content/burstandpulse.qml b/examples/quick/particles/emitters/content/burstandpulse.qml
index 8bd19ed8ed..d3c38c2360 100644
--- a/examples/quick/particles/emitters/content/burstandpulse.qml
+++ b/examples/quick/particles/emitters/content/burstandpulse.qml
@@ -52,6 +52,8 @@ import QtQuick 2.0
 import QtQuick.Particles 2.0
 
 Rectangle {
+    id: root
+
     width: 320
     height: 480
     color: "black"
@@ -63,12 +65,12 @@ Rectangle {
         repeat: true
         onTriggered: {
         //! [0]
-            if (lastWasPulse) {
+            if (root.lastWasPulse) {
                 burstEmitter.burst(500);
-                lastWasPulse = false;
+                root.lastWasPulse = false;
             } else {
                 pulseEmitter.pulse(500);
-                lastWasPulse = true;
+                root.lastWasPulse = true;
             }
         //! [0]
         }
diff --git a/examples/quick/particles/emitters/content/customemitter.qml b/examples/quick/particles/emitters/content/customemitter.qml
index aa8ca6b2f9..f6aea13d08 100644
--- a/examples/quick/particles/emitters/content/customemitter.qml
+++ b/examples/quick/particles/emitters/content/customemitter.qml
@@ -79,7 +79,7 @@ ParticleSystem {
         size: 12
         anchors.centerIn: parent
         //! [0]
-        onEmitParticles: {
+        onEmitParticles: (particles) => {
             for (var i=0; i<particles.length; i++) {
                 var particle = particles[i];
                 particle.startSize = Math.max(02,Math.min(492,Math.tan(particle.t/2)*24));
@@ -90,8 +90,8 @@ ParticleSystem {
                 theta /= 6.0;
                 theta *= 2.0*Math.PI;
                 theta += sys.convert(sys.petalRotation);//Convert from degrees to radians
-                particle.initialVX = petalLength * Math.cos(theta);
-                particle.initialVY = petalLength * Math.sin(theta);
+                particle.initialVX = sys.petalLength * Math.cos(theta);
+                particle.initialVY = sys.petalLength * Math.sin(theta);
                 particle.initialAX = particle.initialVX * -0.5;
                 particle.initialAY = particle.initialVY * -0.5;
             }
diff --git a/examples/quick/particles/imageparticle/content/sharing.qml b/examples/quick/particles/imageparticle/content/sharing.qml
index a24d9fd7c7..13b0dadf85 100644
--- a/examples/quick/particles/imageparticle/content/sharing.qml
+++ b/examples/quick/particles/imageparticle/content/sharing.qml
@@ -56,6 +56,8 @@ import QtQuick 2.0
 import QtQuick.Particles 2.0
 
 Rectangle {
+    id: root
+
     property real delegateHeight: 65
     width: 200; height: 300
     gradient: Gradient {
@@ -66,20 +68,26 @@ Rectangle {
     // Define a delegate component.  A component will be
     // instantiated for each visible item in the list.
     component PetDelegate: Item {
-        id: wrapper
-        width: 200; height: delegateHeight
+        id: pet
+        width: 200; height: root.delegateHeight
         z: 10
+
+        required property int index
+        required property string name
+        required property string type
+        required property int age
+
         Column {
-            Text {color: "white"; text: name; font.pixelSize: 18 }
-            Text {color: "white"; text: 'Type: ' + type; font.pixelSize: 14 }
-            Text {color: "white"; text: 'Age: ' + age; font.pixelSize: 14 }
+            Text {color: "white"; text: pet.name; font.pixelSize: 18 }
+            Text {color: "white"; text: 'Type: ' + pet.type; font.pixelSize: 14 }
+            Text {color: "white"; text: 'Age: ' + pet.age; font.pixelSize: 14 }
         }
-        MouseArea { anchors.fill: parent; onClicked: listView.currentIndex = index; }
+        MouseArea { anchors.fill: parent; onClicked: listView.currentIndex = pet.index; }
         // indent the item if it is the current item
         states: State {
             name: "Current"
-            when: wrapper.ListView.isCurrentItem
-            PropertyChanges { target: wrapper; x: 20 }
+            when: pet.ListView.isCurrentItem
+            PropertyChanges { target: pet; x: 20 }
         }
         transitions: Transition {
             NumberAnimation { properties: "x"; duration: 200 }
@@ -89,7 +97,7 @@ Rectangle {
     // Define a highlight with customized movement between items.
     component HighlightBar : Rectangle {
         z: 0
-        width: 200; height: delegateHeight
+        width: 200; height: root.delegateHeight
         gradient: Gradient {
             GradientStop { position: 0.0; color: "#99FF99" }
             GradientStop { position: 1.0; color: "#88FF88" }
diff --git a/examples/quick/particles/itemparticle/particleview.qml b/examples/quick/particles/itemparticle/particleview.qml
index 3b412e37e5..8eb18dc283 100644
--- a/examples/quick/particles/itemparticle/particleview.qml
+++ b/examples/quick/particles/itemparticle/particleview.qml
@@ -156,7 +156,7 @@ Item {
         interval: 800
         onTriggered: {
             force.enabled = false;
-            mp.take(alertItem, true);
+            mp.take(root.alertItem, true);
             centerEmitter.burst(1);
         }
     }
@@ -216,6 +216,11 @@ Item {
     Component {
         id: theDelegate
         Image {
+            required property int index
+            required property string title
+            required property string media
+            required property string thumbnail
+
             id: image
             antialiasing: true;
             source: thumbnail
@@ -237,7 +242,7 @@ Item {
                 width: parent.paintedWidth + 1
                 height: parent.paintedHeight + 1
                 color: "black"
-                opacity: darken * (1 - depth)
+                opacity: image.darken * (1 - image.depth)
                 antialiasing: true;
             }
             Text {
@@ -247,7 +252,7 @@ Item {
                 width: parent.paintedWidth - 4
                 horizontalAlignment: Text.AlignHCenter
                 elide: Text.ElideRight
-                text: title
+                text: image.title
                 color: "black"
             }
             ItemParticle.onDetached: mp.take(image); // respawns
@@ -277,7 +282,7 @@ Item {
                 }
                 PropertyChanges {
                     target: image
-                    source: media
+                    source: image.media
                     x: 0
                     y: 0
                     width: root.width