Merge branch '4.7' of scm.dev.nokia.troll.no:qt/qt-qml into 4.7-integration

* '4.7' of scm.dev.nokia.troll.no:qt/qt-qml:
  Focus should be applied to focus scopes all the way up the chain, not
  Add focus docs snippets
  Fix doc for status, add Image::onLoaded.
  Don't crash due to recursive positioning.
  ListModel::get() shouldn't print warnings for invalid indices since it
  Add \brief to TextInput
  Add missing .pro
  Restructure the examples. They are now organized into various
  graphicsWidgets doc example was previously removed
  Doc fix
  Add a "priority" property to Keys and KeyNavigation

29 files changed, 887 insertions, 0 deletions

diff --git a/examples/declarative/modelviews/listview/content/ClickAutoRepeating.qml b/examples/declarative/modelviews/listview/content/ClickAutoRepeating.qml
new file mode 100644
index 0000000..f65c2b3
--- /dev/null
+++ b/examples/declarative/modelviews/listview/content/ClickAutoRepeating.qml
@@ -0,0 +1,31 @@
+import Qt 4.7
+
+Item {
+    id: page
+    property int repeatdelay: 300
+    property int repeatperiod: 75
+    property bool isPressed: false
+
+    signal pressed
+    signal released
+    signal clicked
+
+    SequentialAnimation on isPressed {
+        running: false
+        id: autoRepeat
+        PropertyAction { target: page; property: "isPressed"; value: true }
+        ScriptAction { script: page.pressed() }
+        ScriptAction { script: page.clicked() }
+        PauseAnimation { duration: repeatdelay }
+        SequentialAnimation {
+            loops: Animation.Infinite
+            ScriptAction { script: page.clicked() }
+            PauseAnimation { duration: repeatperiod }
+        }
+    }
+    MouseArea {
+        anchors.fill: parent
+        onPressed: autoRepeat.start()
+        onReleased: { autoRepeat.stop(); parent.isPressed = false; page.released() }
+    }
+}
diff --git a/examples/declarative/modelviews/listview/content/MediaButton.qml b/examples/declarative/modelviews/listview/content/MediaButton.qml
new file mode 100644
index 0000000..a625b4c
--- /dev/null
+++ b/examples/declarative/modelviews/listview/content/MediaButton.qml
@@ -0,0 +1,35 @@
+import Qt 4.7
+
+Item {
+    property variant text
+    signal clicked
+
+    id: container
+    Image {
+        id: normal
+        source: "pics/button.png"
+    }
+    Image {
+        id: pressed
+        source: "pics/button-pressed.png"
+        opacity: 0
+    }
+    MouseArea {
+        id: clickRegion
+        anchors.fill: normal
+        onClicked: { container.clicked(); }
+    }
+    Text {
+        font.bold: true
+        color: "white"
+        anchors.centerIn: normal
+        text: container.text
+    }
+    width: normal.width
+
+    states: State {
+        name: "Pressed"
+        when: clickRegion.pressed == true
+        PropertyChanges { target: pressed; opacity: 1 }
+    }
+}
diff --git a/examples/declarative/modelviews/listview/content/pics/add.png b/examples/declarative/modelviews/listview/content/pics/add.png
new file mode 100644
index 0000000..f29d84b
--- /dev/null
+++ b/examples/declarative/modelviews/listview/content/pics/add.png
diff --git a/examples/declarative/modelviews/listview/content/pics/archive-insert.png b/examples/declarative/modelviews/listview/content/pics/archive-insert.png
new file mode 100644
index 0000000..b706248
--- /dev/null
+++ b/examples/declarative/modelviews/listview/content/pics/archive-insert.png
diff --git a/examples/declarative/modelviews/listview/content/pics/archive-remove.png b/examples/declarative/modelviews/listview/content/pics/archive-remove.png
new file mode 100644
index 0000000..9640f6b
--- /dev/null
+++ b/examples/declarative/modelviews/listview/content/pics/archive-remove.png
diff --git a/examples/declarative/modelviews/listview/content/pics/button-pressed.png b/examples/declarative/modelviews/listview/content/pics/button-pressed.png
new file mode 100644
index 0000000..e434d32
--- /dev/null
+++ b/examples/declarative/modelviews/listview/content/pics/button-pressed.png
diff --git a/examples/declarative/modelviews/listview/content/pics/button.png b/examples/declarative/modelviews/listview/content/pics/button.png
new file mode 100644
index 0000000..56a63ce
--- /dev/null
+++ b/examples/declarative/modelviews/listview/content/pics/button.png
diff --git a/examples/declarative/modelviews/listview/content/pics/del.png b/examples/declarative/modelviews/listview/content/pics/del.png
new file mode 100644
index 0000000..1d753a3
--- /dev/null
+++ b/examples/declarative/modelviews/listview/content/pics/del.png
diff --git a/examples/declarative/modelviews/listview/content/pics/fruit-salad.jpg b/examples/declarative/modelviews/listview/content/pics/fruit-salad.jpg
new file mode 100644
index 0000000..da5a6b1
--- /dev/null
+++ b/examples/declarative/modelviews/listview/content/pics/fruit-salad.jpg
diff --git a/examples/declarative/modelviews/listview/content/pics/go-down.png b/examples/declarative/modelviews/listview/content/pics/go-down.png
new file mode 100644
index 0000000..63331a5
--- /dev/null
+++ b/examples/declarative/modelviews/listview/content/pics/go-down.png
diff --git a/examples/declarative/modelviews/listview/content/pics/go-up.png b/examples/declarative/modelviews/listview/content/pics/go-up.png
new file mode 100644
index 0000000..4459024
--- /dev/null
+++ b/examples/declarative/modelviews/listview/content/pics/go-up.png
diff --git a/examples/declarative/modelviews/listview/content/pics/hamburger.jpg b/examples/declarative/modelviews/listview/content/pics/hamburger.jpg
new file mode 100644
index 0000000..d0a15be
--- /dev/null
+++ b/examples/declarative/modelviews/listview/content/pics/hamburger.jpg
diff --git a/examples/declarative/modelviews/listview/content/pics/lemonade.jpg b/examples/declarative/modelviews/listview/content/pics/lemonade.jpg
new file mode 100644
index 0000000..db445c9
--- /dev/null
+++ b/examples/declarative/modelviews/listview/content/pics/lemonade.jpg
diff --git a/examples/declarative/modelviews/listview/content/pics/list-add.png b/examples/declarative/modelviews/listview/content/pics/list-add.png
new file mode 100644
index 0000000..e029787
--- /dev/null
+++ b/examples/declarative/modelviews/listview/content/pics/list-add.png
diff --git a/examples/declarative/modelviews/listview/content/pics/list-remove.png b/examples/declarative/modelviews/listview/content/pics/list-remove.png
new file mode 100644
index 0000000..2bb1a59
--- /dev/null
+++ b/examples/declarative/modelviews/listview/content/pics/list-remove.png
diff --git a/examples/declarative/modelviews/listview/content/pics/moreDown.png b/examples/declarative/modelviews/listview/content/pics/moreDown.png
new file mode 100644
index 0000000..31a35d5
--- /dev/null
+++ b/examples/declarative/modelviews/listview/content/pics/moreDown.png
diff --git a/examples/declarative/modelviews/listview/content/pics/moreUp.png b/examples/declarative/modelviews/listview/content/pics/moreUp.png
new file mode 100644
index 0000000..fefb9c9
--- /dev/null
+++ b/examples/declarative/modelviews/listview/content/pics/moreUp.png
diff --git a/examples/declarative/modelviews/listview/content/pics/pancakes.jpg b/examples/declarative/modelviews/listview/content/pics/pancakes.jpg
new file mode 100644
index 0000000..60c4396
--- /dev/null
+++ b/examples/declarative/modelviews/listview/content/pics/pancakes.jpg
diff --git a/examples/declarative/modelviews/listview/content/pics/trash.png b/examples/declarative/modelviews/listview/content/pics/trash.png
new file mode 100644
index 0000000..2042595
--- /dev/null
+++ b/examples/declarative/modelviews/listview/content/pics/trash.png
diff --git a/examples/declarative/modelviews/listview/content/pics/vegetable-soup.jpg b/examples/declarative/modelviews/listview/content/pics/vegetable-soup.jpg
new file mode 100644
index 0000000..9dce332
--- /dev/null
+++ b/examples/declarative/modelviews/listview/content/pics/vegetable-soup.jpg
diff --git a/examples/declarative/modelviews/listview/dummydata/MyPetsModel.qml b/examples/declarative/modelviews/listview/dummydata/MyPetsModel.qml
new file mode 100644
index 0000000..f15dda3
--- /dev/null
+++ b/examples/declarative/modelviews/listview/dummydata/MyPetsModel.qml
@@ -0,0 +1,61 @@
+import Qt 4.7
+
+// ListModel allows free form list models to be defined and populated.
+
+ListModel {
+    id: petsModel
+    ListElement {
+        name: "Polly"
+        type: "Parrot"
+        age: 12
+        size: "Small"
+    }
+    ListElement {
+        name: "Penny"
+        type: "Turtle"
+        age: 4
+        size: "Small"
+    }
+    ListElement {
+        name: "Warren"
+        type: "Rabbit"
+        age: 2
+        size: "Small"
+    }
+    ListElement {
+        name: "Spot"
+        type: "Dog"
+        age: 9
+        size: "Medium"
+    }
+    ListElement {
+        name: "Schrödinger"
+        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/modelviews/listview/dummydata/Recipes.qml b/examples/declarative/modelviews/listview/dummydata/Recipes.qml
new file mode 100644
index 0000000..f707c82
--- /dev/null
+++ b/examples/declarative/modelviews/listview/dummydata/Recipes.qml
@@ -0,0 +1,90 @@
+import Qt 4.7
+
+ListModel {
+    id: recipesModel
+    ListElement {
+        title: "Pancakes"
+        picture: "content/pics/pancakes.jpg"
+        ingredients: "<html> 
+                       <ul> 
+                        <li> 1 cup (150g) self-raising flour 
+                        <li> 1 tbs caster sugar 
+                        <li> 3/4 cup (185ml) milk 
+                        <li> 1 egg 
+                       </ul> 
+                      </html>"
+        method: "<html> 
+                  <ol> 
+                   <li> Sift flour and sugar together into a bowl. Add a pinch of salt. 
+                   <li> Beat milk and egg together, then add to dry ingredients. Beat until smooth. 
+                   <li> Pour mixture into a pan on medium heat and cook until bubbles appear on the surface. 
+                   <li> Turn over and cook other side until golden.  
+                  </ol>
+                 </html>"
+    }
+    ListElement {
+        title: "Fruit Salad"
+        picture: "content/pics/fruit-salad.jpg"
+        ingredients: "* Seasonal Fruit"
+        method: "* Chop fruit and place in a bowl."
+    }
+    ListElement {
+        title: "Vegetable Soup"
+        picture: "content/pics/vegetable-soup.jpg"
+        ingredients: "<html> 
+                       <ul> 
+                        <li> 1 onion 
+                        <li> 1 turnip 
+                        <li> 1 potato 
+                        <li> 1 carrot 
+                        <li> 1 head of celery 
+                        <li> 1 1/2 litres of water 
+                       </ul> 
+                      </html>"
+        method: "<html> 
+                  <ol> 
+                   <li> Chop vegetables. 
+                   <li> Boil in water until vegetables soften. 
+                   <li> Season with salt and pepper to taste. 
+                  </ol> 
+                 </html>"
+    }
+    ListElement {
+        title: "Hamburger"
+        picture: "content/pics/hamburger.jpg"
+        ingredients: "<html> 
+                       <ul> 
+                        <li> 500g minced beef 
+                        <li> Seasoning 
+                        <li> lettuce, tomato, onion, cheese 
+                        <li> 1 hamburger bun for each burger 
+                       </ul> 
+                      </html>"
+        method: "<html> 
+                  <ol> 
+                   <li> Mix the beef, together with seasoning, in a food processor. 
+                   <li> Shape the beef into burgers. 
+                   <li> Grill the burgers for about 5 mins on each side (until cooked through) 
+                   <li> Serve each burger on a bun with ketchup, cheese, lettuce, tomato and onion. 
+                  </ol> 
+                 </html>"
+    }
+    ListElement {
+        title: "Lemonade"
+        picture: "content/pics/lemonade.jpg"
+        ingredients: "<html> 
+                       <ul> 
+                        <li> 1 cup Lemon Juice 
+                        <li> 1 cup Sugar 
+                        <li> 6 Cups of Water (2 cups warm water, 4 cups cold water) 
+                       </ul> 
+                      </html>"
+        method: "<html> 
+                  <ol> 
+                   <li> Pour 2 cups of warm water into a pitcher and stir in sugar until it dissolves. 
+                   <li> Pour in lemon juice, stir again, and add 4 cups of cold water. 
+                   <li> Chill or serve over ice cubes. 
+                  </ol> 
+                 </html>"
+    }
+}
diff --git a/examples/declarative/modelviews/listview/dynamic.qml b/examples/declarative/modelviews/listview/dynamic.qml
new file mode 100644
index 0000000..693e88a
--- /dev/null
+++ b/examples/declarative/modelviews/listview/dynamic.qml
@@ -0,0 +1,208 @@
+import Qt 4.7
+import "content"
+import "../../ui-components/scrollbar"
+
+Rectangle {
+    id: container
+    width: 640; height: 480
+    color: "#343434"
+
+    ListModel {
+        id: fruitModel
+
+        ListElement {
+            name: "Apple"; cost: 2.45
+            attributes: [
+                ListElement { description: "Core" },
+                ListElement { description: "Deciduous" }
+            ]
+        }
+        ListElement {
+            name: "Banana"; cost: 1.95
+            attributes: [
+                ListElement { description: "Tropical" },
+                ListElement { description: "Seedless" }
+            ]
+        }
+        ListElement {
+            name: "Cumquat"; cost: 3.25
+            attributes: [
+                ListElement { description: "Citrus" }
+            ]
+        }
+        ListElement {
+            name: "Durian"; cost: 9.95
+            attributes: [
+                ListElement { description: "Tropical" },
+                ListElement { description: "Smelly" }
+            ]
+        }
+        ListElement {
+            name: "Elderberry"; cost: 0.05
+            attributes: [
+                ListElement { description: "Berry" }
+            ]
+        }
+        ListElement {
+            name: "Fig"; cost: 0.25
+            attributes: [
+                ListElement { description: "Flower" }
+            ]
+        }
+    }
+
+    Component {
+        id: fruitDelegate
+
+        Item {
+            width: container.width; height: 55
+
+            Column {
+                id: moveButtons
+                x: 5; width: childrenRect.width; anchors.verticalCenter: parent.verticalCenter
+
+                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 }
+
+                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: description; color: "White" }
+                        }
+                    }
+                }
+            }
+
+            Row {
+                id: itemButtons
+
+                anchors { right: removeButton.left; rightMargin: 35; verticalCenter: parent.verticalCenter }
+                width: childrenRect.width
+                spacing: 10
+
+                Image {
+                    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)
+                    }
+                }
+
+                Text { id: costText; text: '$'+Number(cost).toFixed(2); font.pixelSize: 15; color: "White"; font.bold: true; }
+
+                Image {
+                    source: "content/pics/list-remove.png"
+                    scale: clickDown.isPressed ? 0.9 : 1
+
+                    ClickAutoRepeating {
+                        id: clickDown
+                        anchors.fill: parent
+                        onClicked: fruitModel.setProperty(index, "cost", Math.max(0,cost-0.25))
+                    }
+                }
+            }
+            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) }
+            }
+        }
+    }
+
+    ListView {
+        id: view
+        anchors { top: parent.top; left: parent.left; right: parent.right; bottom: buttons.top }
+        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 }
+        }
+    }
+
+    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"}]
+                    })
+                }
+            }
+        }
+
+        Image {
+            source: "content/pics/archive-remove.png"
+
+            MouseArea {
+                anchors.fill: parent
+                onClicked: fruitModel.clear()
+            }
+        }
+    }
+}
diff --git a/examples/declarative/modelviews/listview/highlight.qml b/examples/declarative/modelviews/listview/highlight.qml
new file mode 100644
index 0000000..ade355d
--- /dev/null
+++ b/examples/declarative/modelviews/listview/highlight.qml
@@ -0,0 +1,55 @@
+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.
+
+    // 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: 50
+            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.
+            states: State {
+                name: "Current"
+                when: wrapper.ListView.isCurrentItem
+                PropertyChanges { target: wrapper; x: 10 }
+            }
+            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.
+    Component {
+        id: petHighlight
+        Rectangle {
+            width: 200; height: 50
+            color: "#FFFF88"
+            SpringFollow on y { to: list1.currentItem.y; spring: 3; damping: 0.1 }
+        }
+    }
+
+    ListView {
+        id: list1
+        width: 200; height: parent.height
+        model: MyPetsModel
+        delegate: petDelegate
+        highlight: petHighlight; highlightFollowsCurrentItem: false
+        focus: true
+    }
+}
diff --git a/examples/declarative/modelviews/listview/itemlist.qml b/examples/declarative/modelviews/listview/itemlist.qml
new file mode 100644
index 0000000..b73b3a3
--- /dev/null
+++ b/examples/declarative/modelviews/listview/itemlist.qml
@@ -0,0 +1,67 @@
+// This example demonstrates placing items in a view using
+// a VisualItemModel
+
+import Qt 4.7
+
+Rectangle {
+    color: "lightgray"
+    width: 240
+    height: 320
+
+    VisualItemModel {
+        id: itemModel
+
+        Rectangle {
+            width: view.width; height: view.height
+            color: "#FFFEF0"
+            Text { text: "Page 1"; font.bold: true; anchors.centerIn: parent }
+        }
+        Rectangle {
+            width: view.width; height: view.height
+            color: "#F0FFF7"
+            Text { text: "Page 2"; font.bold: true; anchors.centerIn: parent }
+        }
+        Rectangle {
+            width: view.width; height: view.height
+            color: "#F4F0FF"
+            Text { text: "Page 3"; font.bold: true; anchors.centerIn: parent }
+        }
+    }
+
+    ListView {
+        id: view
+        anchors { fill: parent; bottomMargin: 30 }
+        model: itemModel
+        preferredHighlightBegin: 0; preferredHighlightEnd: 0
+        highlightRangeMode: ListView.StrictlyEnforceRange
+        orientation: ListView.Horizontal
+        snapMode: ListView.SnapOneItem; flickDeceleration: 2000
+    }
+
+    Rectangle {
+        width: 240; height: 30
+        anchors { top: view.bottom; bottom: parent.bottom }
+        color: "gray"
+
+        Row {
+            anchors.centerIn: parent
+            spacing: 20
+
+            Repeater {
+                model: itemModel.count
+
+                Rectangle {
+                    width: 5; height: 5
+                    radius: 3
+                    color: view.currentIndex == index ? "blue" : "white"
+
+                    MouseArea {
+                        width: 20; height: 20
+                        anchors.centerIn: parent
+                        onClicked: view.currentIndex = index
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/examples/declarative/modelviews/listview/listview-example.qml b/examples/declarative/modelviews/listview/listview-example.qml
new file mode 100644
index 0000000..2e8cdda
--- /dev/null
+++ b/examples/declarative/modelviews/listview/listview-example.qml
@@ -0,0 +1,93 @@
+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 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 second list sets a highlight range which attempts to keep the
+    // 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.
+    //
+    // The third list sets the highlightRangeMode to StrictlyEnforceRange
+    // and sets a range smaller than the height of an item.  This
+    // forces the current item to change when the view is flicked,
+    // since the highlight is unable to move.
+    //
+    // Note that the first ListView sets its currentIndex to be equal to
+    // the third ListView's currentIndex.  By flicking List3 with
+    // the mouse, the current index of List1 will be changed.
+
+    ListView {
+        id: list1
+        width: 200; height: parent.height
+        model: MyPetsModel
+        delegate: petDelegate
+
+        highlight: petHighlight
+        currentIndex: list3.currentIndex
+        focus: true
+    }
+
+    ListView {
+        id: list2
+        x: 200; width: 200; height: parent.height
+        model: MyPetsModel
+        delegate: petDelegate
+
+        highlight: petHighlight
+        currentIndex: list1.currentIndex
+        preferredHighlightBegin: 80; preferredHighlightEnd: 220
+        highlightRangeMode: ListView.ApplyRange
+    }
+
+    ListView {
+        id: list3
+        x: 400; width: 200; height: parent.height
+        model: MyPetsModel
+        delegate: petDelegate
+
+        highlight: Rectangle { color: "lightsteelblue" }
+        currentIndex: list1.currentIndex
+        preferredHighlightBegin: 125; preferredHighlightEnd: 125
+        highlightRangeMode: ListView.StrictlyEnforceRange
+        flickDeceleration: 1000
+    }
+}
diff --git a/examples/declarative/modelviews/listview/listview.qmlproject b/examples/declarative/modelviews/listview/listview.qmlproject
new file mode 100644
index 0000000..d4909f8
--- /dev/null
+++ b/examples/declarative/modelviews/listview/listview.qmlproject
@@ -0,0 +1,16 @@
+import QmlProject 1.0
+
+Project {
+    /* Include .qml, .js, and image files from current directory and subdirectories */
+    QmlFiles {
+        directory: "."
+    }
+    JavaScriptFiles {
+        directory: "."
+    }
+    ImageFiles {
+        directory: "."
+    }
+    /* List of plugin directories passed to QML runtime */
+    // importPaths: [ " ../exampleplugin " ]
+}
diff --git a/examples/declarative/modelviews/listview/recipes.qml b/examples/declarative/modelviews/listview/recipes.qml
new file mode 100644
index 0000000..990e272
--- /dev/null
+++ b/examples/declarative/modelviews/listview/recipes.qml
@@ -0,0 +1,160 @@
+import Qt 4.7
+import "content"
+
+// This example illustrates expanding a list item to show a more detailed view
+
+Rectangle {
+    id: page
+    width: 400; height: 240
+    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.
+    Component {
+        id: recipeDelegate
+
+        Item {
+            id: wrapper
+
+            // Create a property to contain the visibility of the details.
+            // We can bind multiple element's opacity to this one property,
+            // rather than having a "PropertyChanges" line for each element we
+            // want to fade.
+            property real detailsOpacity : 0
+
+            width: list.width
+
+            // 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"
+                radius: 5
+            }
+
+            // This mouse region covers the entire delegate.
+            // 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';
+            }
+
+            // Layout the page.  Picture, title and ingredients at the top, method at the
+            // bottom.  Note that elements that should not be visible in the list
+            // mode have their opacity set to wrapper.detailsOpacity.
+            Row {
+                id: topLayout
+                x: 10; y: 10; height: recipePic.height; width: parent.width
+                spacing: 10
+
+                Image {
+                    id: recipePic
+                    source: picture; width: 48; height: 48
+                }
+
+                Column {
+                    width: background.width-recipePic.width-20; height: recipePic.height; 
+                    spacing: 5
+
+                    Text { id: name; text: title; font.bold: true; font.pointSize: 16 }
+
+                    Text {
+                        text: "Ingredients"
+                        font.pointSize: 12; font.bold: true
+                        opacity: wrapper.detailsOpacity
+                    }
+
+                    Text {
+                        text: ingredients
+                        wrapMode: Text.WordWrap
+                        width: parent.width
+                        opacity: wrapper.detailsOpacity
+                    }
+                }
+            }
+
+            Item {
+                id: details
+                x: 10; width: parent.width-20
+                anchors { top: topLayout.bottom; topMargin: 10; bottom: parent.bottom; bottomMargin: 10 }
+                opacity: wrapper.detailsOpacity
+
+                Text {
+                    id: methodTitle
+                    anchors.top: parent.top
+                    text: "Method"
+                    font.pointSize: 12; font.bold: true
+                }
+
+                Flickable {
+                    id: flick
+                    width: parent.width
+                    anchors { top: methodTitle.bottom; bottom: parent.bottom }
+                    contentHeight: methodText.height; clip: true
+
+                    Text { id: methodText; text: method; wrapMode: Text.WordWrap; width: details.width }
+                }
+
+                Image {
+                    anchors { right: flick.right; top: flick.top }
+                    source: "content/pics/moreUp.png"
+                    opacity: flick.atYBeginning ? 0 : 1
+                }
+
+                Image {
+                    anchors { right: flick.right; bottom: flick.bottom }
+                    source: "content/pics/moreDown.png"
+                    opacity: flick.atYEnd ? 0 : 1
+                }
+            }
+
+            // 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
+                text: "Close"
+
+                onClicked: wrapper.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
+
+                // Move the list so that this item is at the top.
+                PropertyChanges { target: wrapper.ListView.view; explicit: true; contentY: wrapper.y }
+
+                // Disallow flicking while we're in detailed view
+                PropertyChanges { target: wrapper.ListView.view; interactive: false }
+            }
+
+            transitions: Transition {
+                // Make the state changes smooth
+                ParallelAnimation {
+                    ColorAnimation { property: "color"; duration: 500 }
+                    NumberAnimation { duration: 300; properties: "detailsOpacity,x,contentY,height,width" }
+                }
+            }
+        }
+    }
+
+    // The actual list
+    ListView {
+        id: list
+        anchors.fill: parent
+        clip: true
+        model: Recipes
+        delegate: recipeDelegate
+    }
+}
diff --git a/examples/declarative/modelviews/listview/sections.qml b/examples/declarative/modelviews/listview/sections.qml
new file mode 100644
index 0000000..21f9f03
--- /dev/null
+++ b/examples/declarative/modelviews/listview/sections.qml
@@ -0,0 +1,71 @@
+import Qt 4.7
+
+//! [0]
+Rectangle {
+    width: 200
+    height: 240
+
+    // 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
+
+            Item {
+                id: desc
+                x: 5; height: layout.height + 4
+
+                Column {
+                    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
+        Rectangle { color: "#FFFF88" }
+    }
+
+    // The list
+    ListView {
+        id: myList
+
+        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
+            }
+        }
+    }
+}
+//! [0]