1 files changed, 34 insertions, 34 deletions
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]