Clean up list examples

9 files changed, 240 insertions, 348 deletions

diff --git a/examples/declarative/modelviews/listview/dummydata/MyPetsModel.qml b/examples/declarative/modelviews/listview/PetsModel.qml
index 70cdcdd..70cdcdd 100644
--- a/examples/declarative/modelviews/listview/dummydata/MyPetsModel.qml
+++ b/examples/declarative/modelviews/listview/PetsModel.qml
diff --git a/examples/declarative/modelviews/listview/dummydata/Recipes.qml b/examples/declarative/modelviews/listview/RecipesModel.qml
index 03ab961..03ab961 100644
--- a/examples/declarative/modelviews/listview/dummydata/Recipes.qml
+++ b/examples/declarative/modelviews/listview/RecipesModel.qml
diff --git a/examples/declarative/modelviews/listview/content/ClickAutoRepeating.qml b/examples/declarative/modelviews/listview/content/PressAndHoldButton.qml
index dc23b78..7c174e3 100644
--- a/examples/declarative/modelviews/listview/content/ClickAutoRepeating.qml
+++ b/examples/declarative/modelviews/listview/content/PressAndHoldButton.qml
@@ -40,32 +40,40 @@
 
 import Qt 4.7
 
-Item {
-    id: page
-    property int repeatdelay: 300
-    property int repeatperiod: 75
-    property bool isPressed: false
+Image {
+    id: container
+
+    property int repeatDelay: 300
+    property int repeatDuration: 75
+    property bool pressed: false
 
-    signal pressed
-    signal released
     signal clicked
 
-    SequentialAnimation on isPressed {
+    scale: pressed ? 0.9 : 1
+
+    SequentialAnimation on pressed {
+        id: autoRepeatClicks
         running: false
-        id: autoRepeat
-        PropertyAction { target: page; property: "isPressed"; value: true }
-        ScriptAction { script: page.pressed() }
-        ScriptAction { script: page.clicked() }
-        PauseAnimation { duration: repeatdelay }
+
+        PropertyAction { target: container; property: "pressed"; value: true }
+        ScriptAction { script: container.clicked() }
+        PauseAnimation { duration: repeatDelay }
+
         SequentialAnimation {
             loops: Animation.Infinite
-            ScriptAction { script: page.clicked() }
-            PauseAnimation { duration: repeatperiod }
+            ScriptAction { script: container.clicked() }
+            PauseAnimation { duration: repeatDuration }
         }
     }
+
     MouseArea {
         anchors.fill: parent
-        onPressed: autoRepeat.start()
-        onReleased: { autoRepeat.stop(); parent.isPressed = false; page.released() }
+
+        onPressed: autoRepeatClicks.start()
+        onReleased: { 
+            autoRepeatClicks.stop()
+            container.pressed = false
+        }
     }
 }
+
diff --git a/examples/declarative/modelviews/listview/content/MediaButton.qml b/examples/declarative/modelviews/listview/content/TextButton.qml
index 2aed6e0..ded7a11 100644
--- a/examples/declarative/modelviews/listview/content/MediaButton.qml
+++ b/examples/declarative/modelviews/listview/content/TextButton.qml
@@ -40,36 +40,39 @@
 
 import Qt 4.7
 
-Item {
-    property variant text
+Rectangle {
+    id: container
+
+    property alias text: label.text
+
     signal clicked
 
-    id: container
-    Image {
-        id: normal
-        source: "pics/button.png"
-    }
-    Image {
-        id: pressed
-        source: "pics/button-pressed.png"
-        opacity: 0
+    width: label.width + 20; height: label.height + 6
+    smooth: true
+    radius: 10
+
+    gradient: Gradient {
+        GradientStop { id: gradientStop; position: 0.0; color: palette.light }
+        GradientStop { position: 1.0; color: palette.button }
     }
+
+    SystemPalette { id: palette }
+
     MouseArea {
-        id: clickRegion
-        anchors.fill: normal
-        onClicked: { container.clicked(); }
+        id: mouseArea
+        anchors.fill: parent
+        onClicked: { container.clicked() }
     }
+
     Text {
-        font.bold: true
-        color: "white"
-        anchors.centerIn: normal
-        text: container.text
+        id: label
+        anchors.centerIn: parent
     }
-    width: normal.width
 
     states: State {
-        name: "Pressed"
-        when: clickRegion.pressed == true
-        PropertyChanges { target: pressed; opacity: 1 }
+        name: "pressed"
+        when: mouseArea.pressed
+        PropertyChanges { target: gradientStop; color: palette.dark }
     }
 }
+
diff --git a/examples/declarative/modelviews/listview/dynamiclist.qml b/examples/declarative/modelviews/listview/dynamiclist.qml
index df2e094..0e290f5 100644
--- a/examples/declarative/modelviews/listview/dynamiclist.qml
+++ b/examples/declarative/modelviews/listview/dynamiclist.qml
@@ -37,16 +37,18 @@
 ** $QT_END_LICENSE$
 **
 ****************************************************************************/
-
 import Qt 4.7
 import "content"
-import "../../ui-components/scrollbar"
+
+// This example shows how items can be dynamically added to and removed from
+// a ListModel, and how these list modifications can be animated.
 
 Rectangle {
     id: container
     width: 640; height: 480
     color: "#343434"
 
+    // The model:
     ListModel {
         id: fruitModel
 
@@ -77,55 +79,43 @@ Rectangle {
                 ListElement { description: "Smelly" }
             ]
         }
-        ListElement {
-            name: "Elderberry"; cost: 0.05
-            attributes: [
-                ListElement { description: "Berry" }
-            ]
-        }
-        ListElement {
-            name: "Fig"; cost: 0.25
-            attributes: [
-                ListElement { description: "Flower" }
-            ]
-        }
     }
 
+    // The delegate for each fruit in the model:
     Component {
-        id: fruitDelegate
-
+        id: listDelegate
+        
         Item {
-            id: wrapper
-            width: container.width; height: 55
+            id: delegateItem
+            width: listView.width; height: 55
+            clip: true
 
-            Column {
-                id: moveButtons
-                x: 5; width: childrenRect.width; anchors.verticalCenter: parent.verticalCenter
+            Row {
+                anchors.verticalCenter: parent.verticalCenter
+                spacing: 10
 
-                Image {
-                    source: "content/pics/go-up.png"
-                    MouseArea { anchors.fill: parent; onClicked: fruitModel.move(index,index-1,1) }
-                }
-                Image { source: "content/pics/go-down.png"
-                    MouseArea { anchors.fill: parent; onClicked: fruitModel.move(index,index+1,1) }
+                Column {
+                    Image {
+                        source: "content/pics/go-up.png"
+                        MouseArea { anchors.fill: parent; onClicked: fruitModel.move(index,index-1,1) }
+                    }
+                    Image { source: "content/pics/go-down.png"
+                        MouseArea { anchors.fill: parent; onClicked: fruitModel.move(index,index+1,1) }
+                    }
                 }
-            }
 
-            Column {
-                anchors { right: itemButtons.left; verticalCenter: parent.verticalCenter; left: moveButtons.right; leftMargin: 10 }
+                Column {
+                    anchors.verticalCenter: parent.verticalCenter
 
-                Text {
-                    id: label
-                    width: parent.width
-                    color: "White"
-                    font.bold: true; font.pixelSize: 15
-                    text: name; elide: Text.ElideRight
-                }
-                Row {
-                    spacing: 5
-                    Repeater {
-                        model: attributes
-                        Component {
+                    Text { 
+                        text: name
+                        font.pixelSize: 15
+                        color: "white"
+                    }
+                    Row {
+                        spacing: 5
+                        Repeater {
+                            model: attributes
                             Text { text: description; color: "White" }
                         }
                     }
@@ -133,149 +123,81 @@ Rectangle {
             }
 
             Row {
-                id: itemButtons
-
-                anchors { right: removeButton.left; rightMargin: 35; verticalCenter: parent.verticalCenter }
-                width: childrenRect.width
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.right: parent.right
                 spacing: 10
 
-                Image {
+                PressAndHoldButton {
+                    anchors.verticalCenter: parent.verticalCenter
                     source: "content/pics/list-add.png"
-                    scale: clickUp.isPressed ? 0.9 : 1
-
-                    ClickAutoRepeating {
-                        id: clickUp
-                        anchors.fill: parent
-                        onClicked: fruitModel.setProperty(index, "cost", cost+0.25)
-                    }
+                    onClicked: fruitModel.setProperty(index, "cost", cost + 0.25)
                 }
 
-                Text { id: costText; text: '$'+Number(cost).toFixed(2); font.pixelSize: 15; color: "White"; font.bold: true; }
+                Text { 
+                    id: costText
+                    anchors.verticalCenter: parent.verticalCenter
+                    text: '$' + Number(cost).toFixed(2)
+                    font.pixelSize: 15
+                    color: "white"
+                    font.bold: true
+                }
 
-                Image {
+                PressAndHoldButton {
+                    anchors.verticalCenter: parent.verticalCenter
                     source: "content/pics/list-remove.png"
-                    scale: clickDown.isPressed ? 0.9 : 1
+                    onClicked: fruitModel.setProperty(index, "cost", Math.max(0,cost-0.25))
+                }
 
-                    ClickAutoRepeating {
-                        id: clickDown
-                        anchors.fill: parent
-                        onClicked: fruitModel.setProperty(index, "cost", Math.max(0,cost-0.25))
-                    }
+                Image {
+                    source: "content/pics/archive-remove.png"
+                    MouseArea { anchors.fill:parent; onClicked: fruitModel.remove(index) }
                 }
             }
-            Image {
-                id: removeButton
-                anchors { verticalCenter: parent.verticalCenter; right: parent.right; rightMargin: 10 }
-                source: "content/pics/archive-remove.png"
 
-                MouseArea { anchors.fill:parent; onClicked: fruitModel.remove(index) }
+            // Animate adding and removing of items:
+
+            ListView.onAdd: SequentialAnimation {
+                PropertyAction { target: delegateItem; property: "height"; value: 0 }
+                NumberAnimation { target: delegateItem; property: "height"; to: 55; duration: 250; easing.type: Easing.InOutQuad }
             }
 
-            // Animate adding and removing items
-            ListView.delayRemove: true // so that the item is not destroyed immediately
-            ListView.onAdd: state = "add"
-            ListView.onRemove: state = "remove"
-            states: [
-                State {
-                    name: "add"
-                    PropertyChanges { target: wrapper; height: 55; clip: true }
-                },
-                State {
-                    name: "remove"
-                    PropertyChanges { target: wrapper; height: 0; clip: true }
-                }
-            ]
-            transitions: [
-                Transition {
-                    to: "add"
-                    SequentialAnimation {
-                        NumberAnimation { properties: "height"; from: 0; to: 55 }
-                        PropertyAction { target: wrapper; property: "state"; value: "" }
-                    }
-                },
-                Transition {
-                    to: "remove"
-                    SequentialAnimation {
-                        NumberAnimation { properties: "height" }
-                        // Make sure delayRemove is set back to false so that the item can be destroyed
-                        PropertyAction { target: wrapper; property: "ListView.delayRemove"; value: false }
-                    }
-                }
-            ]
+            ListView.onRemove: SequentialAnimation {
+                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 }
+            }
         }
     }
 
+    // The view:
     ListView {
-        id: view
-        anchors { top: parent.top; left: parent.left; right: parent.right; bottom: buttons.top }
+        id: listView
+        anchors.fill: parent; anchors.margins: 20
         model: fruitModel
-        delegate: fruitDelegate
-    }
-
-    // Attach scrollbar to the right edge of the view.
-    ScrollBar {
-        id: verticalScrollBar
-
-        width: 8; height: view.height; anchors.right: view.right
-        opacity: 0
-        orientation: Qt.Vertical
-        position: view.visibleArea.yPosition
-        pageSize: view.visibleArea.heightRatio
-
-        // Only show the scrollbar when the view is moving.
-        states: State {
-            name: "ShowBars"; when: view.movingVertically
-            PropertyChanges { target: verticalScrollBar; opacity: 1 }
-        }
-        transitions: Transition {
-            NumberAnimation { properties: "opacity"; duration: 400 }
-        }
+        delegate: listDelegate
     }
 
     Row {
-        id: buttons
-
-        x: 8; width: childrenRect.width; height: childrenRect.height
-        anchors { bottom: parent.bottom; bottomMargin: 8 }
-        spacing: 8
-
-        Image {
-            source: "content/pics/archive-insert.png"
-
-            MouseArea {
-                anchors.fill: parent
-                onClicked: {
-                    fruitModel.append({
-                        "name": "Pizza Margarita",
-                        "cost": 5.95,
-                        "attributes": [{"description": "Cheese"},{"description": "Tomato"}]
-                    })
-                }
-            }
-        }
-
-        Image {
-            source: "content/pics/archive-insert.png"
-
-            MouseArea {
-                anchors.fill: parent;
-                onClicked: {
-                    fruitModel.insert(0, {
-                        "name": "Pizza Supreme",
-                        "cost": 9.95,
-                        "attributes": [{"description": "Cheese"},{"description": "Tomato"},{"description": "The Works"}]
-                    })
-                }
+        anchors { left: parent.left; bottom: parent.bottom; margins: 20 }
+        spacing: 10
+
+        TextButton { 
+            text: "Add an item"
+            onClicked: {
+                fruitModel.append({
+                    "name": "Pizza Margarita",
+                    "cost": 5.95,
+                    "attributes": [{"description": "Cheese"}, {"description": "Tomato"}]
+                })
             }
         }
 
-        Image {
-            source: "content/pics/archive-remove.png"
-
-            MouseArea {
-                anchors.fill: parent
-                onClicked: fruitModel.clear()
-            }
+        TextButton { 
+            text: "Remove all items" 
+            onClicked: fruitModel.clear()
         }
     }
 }
+
diff --git a/examples/declarative/modelviews/listview/expandingdelegates.qml b/examples/declarative/modelviews/listview/expandingdelegates.qml
index f4b97ea..94ea48f 100644
--- a/examples/declarative/modelviews/listview/expandingdelegates.qml
+++ b/examples/declarative/modelviews/listview/expandingdelegates.qml
@@ -41,7 +41,7 @@
 import Qt 4.7
 import "content"
 
-// This example illustrates expanding a list item to show a more detailed view
+// This example illustrates expanding a list item to show a more detailed view.
 
 Rectangle {
     id: page
@@ -49,13 +49,13 @@ Rectangle {
     color: "black"
 
     // Delegate for the recipes.  This delegate has two modes:
-    // 1. the list mode (default), which just shows the picture and title of the recipe.
-    // 2. the details mode, which also shows the ingredients and method.
+    // 1. List mode (default), which just shows the picture and title of the recipe.
+    // 2. Details mode, which also shows the ingredients and method.
     Component {
         id: recipeDelegate
 
         Item {
-            id: wrapper
+            id: recipe
 
             // Create a property to contain the visibility of the details.
             // We can bind multiple element's opacity to this one property,
@@ -63,14 +63,15 @@ Rectangle {
             // want to fade.
             property real detailsOpacity : 0
 
-            width: list.width
+            width: listView.width
+            height: 70
 
             // A simple rounded rectangle for the background
             Rectangle {
                 id: background
-                x: 1; y: 2; width: parent.width - 2; height: parent.height - 4
-                color: "#FEFFEE"
-                border.color: "#FFBE4F"
+                x: 2; y: 2; width: parent.width - x*2; height: parent.height - y*2
+                color: "ivory"
+                border.color: "orange"
                 radius: 5
             }
 
@@ -78,50 +79,53 @@ Rectangle {
             // When clicked it changes mode to 'Details'.  If we are already
             // in Details mode, then no change will happen.
             MouseArea {
-                id: pageMouse
                 anchors.fill: parent
-                onClicked: wrapper.state = 'Details';
+                onClicked: recipe.state = 'Details';
             }
 
-            // Layout the page.  Picture, title and ingredients at the top, method at the
+            // Lay out the page: picture, title and ingredients at the top, and method at the
             // bottom.  Note that elements that should not be visible in the list
-            // mode have their opacity set to wrapper.detailsOpacity.
+            // mode have their opacity set to recipe.detailsOpacity.
             Row {
                 id: topLayout
-                x: 10; y: 10; height: recipePic.height; width: parent.width
+                x: 10; y: 10; height: recipeImage.height; width: parent.width
                 spacing: 10
 
                 Image {
-                    id: recipePic
-                    source: picture; width: 48; height: 48
+                    id: recipeImage
+                    width: 50; height: 50
+                    source: picture
                 }
 
                 Column {
-                    width: background.width-recipePic.width-20; height: recipePic.height; 
+                    width: background.width - recipeImage.width - 20; height: recipeImage.height
                     spacing: 5
 
-                    Text { id: name; text: title; font.bold: true; font.pointSize: 16 }
+                    Text { 
+                        text: title
+                        font.bold: true; font.pointSize: 16
+                    }
 
                     Text {
                         text: "Ingredients"
                         font.pointSize: 12; font.bold: true
-                        opacity: wrapper.detailsOpacity
+                        opacity: recipe.detailsOpacity
                     }
 
                     Text {
                         text: ingredients
                         wrapMode: Text.WordWrap
                         width: parent.width
-                        opacity: wrapper.detailsOpacity
+                        opacity: recipe.detailsOpacity
                     }
                 }
             }
 
             Item {
                 id: details
-                x: 10; width: parent.width-20
+                x: 10; width: parent.width - 20
                 anchors { top: topLayout.bottom; topMargin: 10; bottom: parent.bottom; bottomMargin: 10 }
-                opacity: wrapper.detailsOpacity
+                opacity: recipe.detailsOpacity
 
                 Text {
                     id: methodTitle
@@ -153,30 +157,28 @@ Rectangle {
             }
 
             // A button to close the detailed view, i.e. set the state back to default ('').
-            MediaButton {
-                y: 10; anchors { right: background.right; rightMargin: 5 }
-                opacity: wrapper.detailsOpacity
+            TextButton {
+                y: 10
+                anchors { right: background.right; rightMargin: 10 }
+                opacity: recipe.detailsOpacity
                 text: "Close"
 
-                onClicked: wrapper.state = '';
+                onClicked: recipe.state = '';
             }
 
-            // Set the default height to the height of the picture, plus margin.
-            height: 68
-
             states: State {
                 name: "Details"
 
                 PropertyChanges { target: background; color: "white" }
-                PropertyChanges { target: recipePic; width: 128; height: 128 } // Make picture bigger
-                PropertyChanges { target: wrapper; detailsOpacity: 1; x: 0 } // Make details visible
-                PropertyChanges { target: wrapper; height: list.height } // Fill the entire list area with the detailed view
+                PropertyChanges { target: recipeImage; width: 130; height: 130 } // Make picture bigger
+                PropertyChanges { target: recipe; detailsOpacity: 1; x: 0 } // Make details visible
+                PropertyChanges { target: recipe; height: listView.height } // Fill the entire list area with the detailed view
 
                 // Move the list so that this item is at the top.
-                PropertyChanges { target: wrapper.ListView.view; explicit: true; contentY: wrapper.y }
+                PropertyChanges { target: recipe.ListView.view; explicit: true; contentY: recipe.y }
 
                 // Disallow flicking while we're in detailed view
-                PropertyChanges { target: wrapper.ListView.view; interactive: false }
+                PropertyChanges { target: recipe.ListView.view; interactive: false }
             }
 
             transitions: Transition {
@@ -191,10 +193,10 @@ Rectangle {
 
     // The actual list
     ListView {
-        id: list
+        id: listView
         anchors.fill: parent
-        clip: true
-        model: Recipes
+        model: RecipesModel {}
         delegate: recipeDelegate
+        clip: true
     }
 }
diff --git a/examples/declarative/modelviews/listview/highlight.qml b/examples/declarative/modelviews/listview/highlight.qml
index 239272a..5748974 100644
--- a/examples/declarative/modelviews/listview/highlight.qml
+++ b/examples/declarative/modelviews/listview/highlight.qml
@@ -41,12 +41,7 @@
 import Qt 4.7
 
 Rectangle {
-    width: 400; height: 300
-
-    // MyPets model is defined in dummydata/MyPetsModel.qml
-    // The launcher automatically loads files in dummydata/* to assist
-    // development without a real data source.
-    // This one contains my pets.
+    width: 200; height: 300
 
     // Define a delegate component.  A component will be
     // instantiated for each visible item in the list.
@@ -54,42 +49,45 @@ Rectangle {
         id: petDelegate
         Item {
             id: wrapper
-            width: 200; height: 50
+            width: 200; height: 55
             Column {
                 Text { text: 'Name: ' + name }
                 Text { text: 'Type: ' + type }
                 Text { text: 'Age: ' + age }
             }
-            // Use the ListView.isCurrentItem attached property to
-            // indent the item if it is the current item.
+            // indent the item if it is the current item
             states: State {
                 name: "Current"
                 when: wrapper.ListView.isCurrentItem
-                PropertyChanges { target: wrapper; x: 10 }
+                PropertyChanges { target: wrapper; x: 20 }
             }
             transitions: Transition {
                 NumberAnimation { properties: "x"; duration: 200 } 
             }
         }
     }
-    // Specify a highlight with custom movement.  Note that highlightFollowsCurrentItem
-    // is set to false in the ListView so that we can control how the
-    // highlight moves to the current item.
+
+    // Define a highlight with customised movement between items.
     Component {
-        id: petHighlight
+        id: highlightBar
         Rectangle {
             width: 200; height: 50
             color: "#FFFF88"
-            SpringFollow on y { to: list1.currentItem.y; spring: 3; damping: 0.1 }
+            SpringFollow on y { to: listView.currentItem.y; spring: 3; damping: 0.1 }
         }
     }
 
     ListView {
-        id: list1
+        id: listView
         width: 200; height: parent.height
-        model: MyPetsModel
+
+        model: PetsModel {}
         delegate: petDelegate
-        highlight: petHighlight; highlightFollowsCurrentItem: false
         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
+        highlightFollowsCurrentItem: false
     }
 }
diff --git a/examples/declarative/modelviews/listview/highlightranges.qml b/examples/declarative/modelviews/listview/highlightranges.qml
index a8a95c4..162d8b7 100644
--- a/examples/declarative/modelviews/listview/highlightranges.qml
+++ b/examples/declarative/modelviews/listview/highlightranges.qml
@@ -43,46 +43,20 @@ import Qt 4.7
 Rectangle {
     width: 600; height: 300
 
-    // MyPets model is defined in dummydata/MyPetsModel.qml
-    // The viewer automatically loads files in dummydata/* to assist
-    // development without a real data source.
-    // This one contains my pets.
-
-    // Define a delegate component.  A component will be
-    // instantiated for each visible item in the list.
-    Component {
-        id: petDelegate
-        Item {
-            width: 200; height: 50
-            Column {
-                Text { text: 'Name: ' + name }
-                Text { text: 'Type: ' + type }
-                Text { text: 'Age: ' + age }
-            }
-        }
-    }
-
-    // Define a highlight component.  Just one of these will be instantiated
-    // by each ListView and placed behind the current item.
-    Component {
-        id: petHighlight
-        Rectangle { color: "#FFFF88" }
-    }
-
     // Show the model in three lists, with different highlight ranges.
     // preferredHighlightBegin and preferredHighlightEnd set the
     // range in which to attempt to maintain the highlight.
     //
-    // Note that the second and third ListView
-    // set their currentIndex to be the same as the first, and that
-    // the first ListView is given keyboard focus.
+    // The second and third ListView set their currentIndex to be the
+    // same as the first, and the first ListView is given keyboard focus.
     //
-    // The default mode allows the currentItem to move freely
-    // within the visible area.  If it would move outside the visible
-    // area, the view is scrolled to keep it visible.
+    // The first list does not set a highlight range, so its currentItem
+    // can move freely within the visible area. If it moves outside the
+    // visible area, the view is automatically scrolled to keep the current
+    // item visible.
     //
     // The second list sets a highlight range which attempts to keep the
-    // current item within the the bounds of the range, however
+    // current item within the the bounds of the range. However,
     // items will not scroll beyond the beginning or end of the view,
     // forcing the highlight to move outside the range at the ends.
     //
@@ -98,21 +72,22 @@ Rectangle {
     ListView {
         id: list1
         width: 200; height: parent.height
-        model: MyPetsModel
+        model: PetsModel {}
         delegate: petDelegate
 
-        highlight: petHighlight
+        highlight: Rectangle { color: "lightsteelblue" }
         currentIndex: list3.currentIndex
         focus: true
     }
 
     ListView {
         id: list2
-        x: 200; width: 200; height: parent.height
-        model: MyPetsModel
+        x: list1.width
+        width: 200; height: parent.height
+        model: PetsModel {}
         delegate: petDelegate
 
-        highlight: petHighlight
+        highlight: Rectangle { color: "yellow" }
         currentIndex: list1.currentIndex
         preferredHighlightBegin: 80; preferredHighlightEnd: 220
         highlightRangeMode: ListView.ApplyRange
@@ -120,14 +95,25 @@ Rectangle {
 
     ListView {
         id: list3
-        x: 400; width: 200; height: parent.height
-        model: MyPetsModel
+        x: list1.width + list2.width
+        width: 200; height: parent.height
+        model: PetsModel {}
         delegate: petDelegate
 
-        highlight: Rectangle { color: "lightsteelblue" }
+        highlight: Rectangle { color: "yellow" }
         currentIndex: list1.currentIndex
         preferredHighlightBegin: 125; preferredHighlightEnd: 125
         highlightRangeMode: ListView.StrictlyEnforceRange
-        flickDeceleration: 1000
+    }
+
+    // The delegate for each list
+    Component {
+        id: petDelegate
+        Column {
+            width: 200
+            Text { text: 'Name: ' + name }
+            Text { text: 'Type: ' + type }
+            Text { text: 'Age: ' + age }
+        }
     }
 }
diff --git a/examples/declarative/modelviews/listview/sections.qml b/examples/declarative/modelviews/listview/sections.qml
index d2f9aba..8c038a0 100644
--- a/examples/declarative/modelviews/listview/sections.qml
+++ b/examples/declarative/modelviews/listview/sections.qml
@@ -42,70 +42,43 @@ import Qt 4.7
 
 //! [0]
 Rectangle {
+    id: container
     width: 200
-    height: 240
+    height: 250
 
-    // MyPets model is defined in dummydata/MyPetsModel.qml
-    // The viewer automatically loads files in dummydata/* to assist
-    // development without a real data source.
-    // This one contains my pets.
-
-    // Define a delegate component that includes a separator for sections.
-    Component {
-        id: petDelegate
-
-        Item {
-            id: wrapper
-            width: 200
-            height: desc.height // height is the combined height of the description and the section separator
+    ListModel {
+        id: animalsModel
+        ListElement { name: "Parrot"; size: "Small" }
+        ListElement { name: "Guinea pig"; size: "Small" }
+        ListElement { name: "Dog"; size: "Medium" }
+        ListElement { name: "Cat"; size: "Medium" }
+        ListElement { name: "Elephant"; size: "Large" }
+    }
 
-            Item {
-                id: desc
-                x: 5; height: layout.height + 4
+    // The delegate for each section header
+    Component { 
+        id: sectionHeading
+        Rectangle {
+            width: container.width
+            height: childrenRect.height
+            color: "lightsteelblue"
 
-                Column {
-                    id: layout
-                    y: 2
-                    Text { text: 'Name: ' + name }
-                    Text { text: 'Type: ' + type }
-                    Text { text: 'Age: ' + age }
-                }
+            Text {
+                text: section
+                font.bold: true
             }
         }
     }
 
-    // Define a highlight component.  Just one of these will be instantiated
-    // by each ListView and placed behind the current item.
-    Component {
-        id: petHighlight
-        Rectangle { color: "#FFFF88" }
-    }
-
-    // The list
     ListView {
-        id: myList
+        anchors.fill: parent
+        model: animalsModel
+        delegate: Text { text: name }
 
-        width: 200; height: parent.height
-        model: MyPetsModel
-        delegate: petDelegate
-        highlight: petHighlight
-        focus: true
-
-        // The sectionExpression is simply the size of the pet.
-        // We use this to determine which section we are in above.
         section.property: "size"
         section.criteria: ViewSection.FullString
-        section.delegate: Rectangle {
-            color: "lightsteelblue"
-            width: 200
-            height: 20
-            Text {
-                x: 2; height: parent.height
-                verticalAlignment: Text.AlignVCenter
-                text: section
-                font.bold: true
-            }
-        }
+        section.delegate: sectionHeading
     }
 }
 //! [0]
+