2 files changed, 98 insertions, 20 deletions
diff --git a/examples/declarative/listview/dummydata/MyPetsModel.qml b/examples/declarative/listview/dummydata/MyPetsModel.qml
index def8cf3..1c96b7f 100644
--- a/examples/declarative/listview/dummydata/MyPetsModel.qml
+++ b/examples/declarative/listview/dummydata/MyPetsModel.qml
@@ -1,50 +1,59 @@
 // ListModel allows free form list models to be defined and populated.
 // Be sure to name the file the same as the id.
 ListModel2 {
-    id: MyPetsModel
+    id: MyListElementsModel
     ListElement {
-        name: "Rover"
-        type: "Dog"
-        age: 5
+        name: "Polly"
+        type: "Parrot"
+        age: 12
+        size: "Small"
     }
     ListElement {
-        name: "Whiskers"
-        type: "Cat"
-        age: 2
+        name: "Penny"
+        type: "Turtle"
+        age: 4
+        size: "Small"
     }
     ListElement {
         name: "Warren"
         type: "Rabbit"
         age: 2
-    }
-    ListElement {
-        name: "Polly"
-        type: "Parrot"
-        age: 12
+        size: "Small"
     }
     ListElement {
         name: "Spot"
         type: "Dog"
         age: 9
+        size: "Medium"
     }
     ListElement {
-        name: "Tiny"
-        type: "Elephant"
-        age: 15
-    }
-    ListElement {
-        name: "Penny"
-        type: "Turtle"
-        age: 4
+        name: "Whiskers"
+        type: "Cat"
+        age: 2
+        size: "Medium"
     }
     ListElement {
         name: "Joey"
         type: "Kangaroo"
         age: 1
+        size: "Medium"
     }
     ListElement {
         name: "Kimba"
         type: "Bunny"
         age: 65
+        size: "Large"
+    }
+    ListElement {
+        name: "Rover"
+        type: "Dog"
+        age: 5
+        size: "Large"
+    }
+    ListElement {
+        name: "Tiny"
+        type: "Elephant"
+        age: 15
+        size: "Large"
     }
 }
diff --git a/examples/declarative/listview/sections.qml b/examples/declarative/listview/sections.qml
new file mode 100644
index 0000000..60acd62
--- /dev/null
+++ b/examples/declarative/listview/sections.qml
@@ -0,0 +1,69 @@
+//! [0]
+Rect {
+    width: 200
+    height: 240
+    color: "white"
+    // 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
+            // My height is the combined height of the description and the section separator
+            height: Separator.height + Desc.height
+            Rect {
+                id: Separator
+                color: "lightsteelblue"
+                width: parent.width
+                // Only show the section separator when we are the beginning of a new section
+                // Note that for this to work nicely, the list must be ordered by section.
+                height: Wrapper.ListView.prevSection != Wrapper.ListView.section ? 20 : 0
+                opacity: Wrapper.ListView.prevSection != Wrapper.ListView.section ? 1 : 0
+                Text {
+                    text: Wrapper.ListView.section; font.bold: true
+                    x: 2; height: parent.height; vAlign: 'AlignVCenter'
+                }
+            }
+            Item {
+                id: Desc
+                x: 5
+                height: Layout.height + 4
+                anchors.top: Separator.bottom
+                VerticalLayout {
+                    id: Layout
+                    y: 2
+                    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
+        Rect {
+            color: "#FFFF88"
+        }
+    }
+    // The list
+    ListView {
+        id: List
+        width: 200
+        height: parent.height
+        model: MyPetsModel
+        delegate: PetDelegate
+        highlight: PetHighlight
+        // The sectionExpression is simply the size of the pet.
+        // We use this to determine which section we are in above.
+        sectionExpression: "size"
+        focus: true
+    }
+}
+//! [0]