Use inline components for sharing example

Change-Id: I9390982bfefa35e6db6c8516c62ba091c231be8a
Reviewed-by: Fabian Kosmale <fabian.kosmale@qt.io>

1 files changed, 38 insertions, 44 deletions

diff --git a/examples/quick/particles/imageparticle/content/sharing.qml b/examples/quick/particles/imageparticle/content/sharing.qml
index 1018a8e8ba..a24d9fd7c7 100644
--- a/examples/quick/particles/imageparticle/content/sharing.qml
+++ b/examples/quick/particles/imageparticle/content/sharing.qml
@@ -65,53 +65,47 @@ Rectangle {
 
     // Define a delegate component.  A component will be
     // instantiated for each visible item in the list.
-    Component {
-        id: petDelegate
-        Item {
-            id: wrapper
-            width: 200; height: delegateHeight
-            z: 10
-            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 }
-            }
-            MouseArea { anchors.fill: parent; onClicked: listView.currentIndex = index; }
-            // 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 }
-            }
+    component PetDelegate: Item {
+        id: wrapper
+        width: 200; height: delegateHeight
+        z: 10
+        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 }
+        }
+        MouseArea { anchors.fill: parent; onClicked: listView.currentIndex = index; }
+        // 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 }
         }
     }
 
     // Define a highlight with customized movement between items.
-    Component {
-        id: highlightBar
-        Rectangle {
-            z: 0
-            width: 200; height: delegateHeight
-            gradient: Gradient {
-                GradientStop { position: 0.0; color: "#99FF99" }
-                GradientStop { position: 1.0; color: "#88FF88" }
-            }
-            y: listView.currentItem.y;
-            Behavior on y { SpringAnimation { spring: 2; damping: 0.2 } }
-            //! [1]
-            ImageParticle {
-                anchors.fill: parent
-                system: particles
-                source: "../../images/flower.png"
-                color: "red"
-                clip: true
-                alpha: 1.0
-            }
-            //! [1]
+    component HighlightBar : Rectangle {
+        z: 0
+        width: 200; height: delegateHeight
+        gradient: Gradient {
+            GradientStop { position: 0.0; color: "#99FF99" }
+            GradientStop { position: 1.0; color: "#88FF88" }
+        }
+        y: listView.currentItem.y;
+        Behavior on y { SpringAnimation { spring: 2; damping: 0.2 } }
+        //! [1]
+        ImageParticle {
+            anchors.fill: parent
+            system: particles
+            source: "../../images/flower.png"
+            color: "red"
+            clip: true
+            alpha: 1.0
         }
+        //! [1]
     }
 
     ListView {
@@ -119,12 +113,12 @@ Rectangle {
         width: 200; height: parent.height
 
         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
 
         ParticleSystem { id: particles }