Start of examples refactor

This is the general reorg of the examples directory structure, plus additional
guidelines.

calculator, animations and accessibility have been updated to the new standards
and tested, as an example.

Task-number: QTBUG-24133
Change-Id: I76c3b86751d3195ba2a5474ff23afb875765e9a4
Reviewed-by: Alan Alpert <alan.alpert@nokia.com>

127 files changed, 7716 insertions, 0 deletions

diff --git a/examples/tutorials/dynamicview/dynamicview1/PetsModel.qml b/examples/tutorials/dynamicview/dynamicview1/PetsModel.qml
new file mode 100644
index 0000000000..f07613c968
--- /dev/null
+++ b/examples/tutorials/dynamicview/dynamicview1/PetsModel.qml
@@ -0,0 +1,102 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+//![0]
+import QtQuick 2.0
+
+ListModel {
+    ListElement {
+        name: "Polly"
+        type: "Parrot"
+        age: 12
+        size: "Small"
+    }
+    ListElement {
+        name: "Penny"
+        type: "Turtle"
+        age: 4
+        size: "Small"
+    }
+//![0]
+    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"
+    }
+//![1]
+}
+//![1]
diff --git a/examples/tutorials/dynamicview/dynamicview1/dynamicview.qml b/examples/tutorials/dynamicview/dynamicview1/dynamicview.qml
new file mode 100644
index 0000000000..1a9dd453ce
--- /dev/null
+++ b/examples/tutorials/dynamicview/dynamicview1/dynamicview.qml
@@ -0,0 +1,90 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+//![0]
+import QtQuick 2.0
+
+Rectangle {
+    id: root
+
+    width: 300; height: 400
+
+//![1]
+    Component {
+        id: dragDelegate
+
+        Rectangle {
+            id: content
+
+            anchors { left: parent.left; right: parent.right }
+            height: column.implicitHeight + 4
+
+            border.width: 1
+            border.color: "lightsteelblue"
+
+            radius: 2
+
+            Column {
+                id: column
+                anchors { fill: parent; margins: 2 }
+
+                Text { text: 'Name: ' + name }
+                Text { text: 'Type: ' + type }
+                Text { text: 'Age: ' + age }
+                Text { text: 'Size: ' + size }
+            }
+        }
+    }
+//![1]
+//![2]
+    ListView {
+        id: view
+
+        anchors { fill: parent; margins: 2 }
+
+        model: PetsModel {}
+        delegate: dragDelegate
+
+        spacing: 4
+        cacheBuffer: 50
+    }
+//![2]
+}
+//![0]
diff --git a/examples/tutorials/dynamicview/dynamicview2/PetsModel.qml b/examples/tutorials/dynamicview/dynamicview2/PetsModel.qml
new file mode 100644
index 0000000000..4f2087d95e
--- /dev/null
+++ b/examples/tutorials/dynamicview/dynamicview2/PetsModel.qml
@@ -0,0 +1,98 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+ListModel {
+    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/tutorials/dynamicview/dynamicview2/dynamicview.qml b/examples/tutorials/dynamicview/dynamicview2/dynamicview.qml
new file mode 100644
index 0000000000..9e654a685c
--- /dev/null
+++ b/examples/tutorials/dynamicview/dynamicview2/dynamicview.qml
@@ -0,0 +1,121 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Rectangle {
+    id: root
+
+    width: 300; height: 400
+
+//![0]
+    Component {
+        id: dragDelegate
+
+//![1]
+        MouseArea {
+            id: dragArea
+
+            property bool held: false
+
+            anchors { left: parent.left; right: parent.right }
+            height: content.height
+
+            drag.target: held ? content : undefined
+            drag.axis: Drag.YAxis
+
+            onPressAndHold: held = true
+            onReleased: held = false
+
+            Rectangle {
+                id: content
+//![1]
+                anchors {
+                    horizontalCenter: parent.horizontalCenter
+                    verticalCenter: parent.verticalCenter
+                }
+                width: dragArea.width; height: column.implicitHeight + 4
+
+                border.width: 1
+                border.color: "lightsteelblue"
+//![3]
+                color: dragArea.held ? "lightsteelblue" : "white"
+                Behavior on color { ColorAnimation { duration: 100 } }
+//![3]
+                radius: 2
+//![4]
+                states: State {
+                    when: dragArea.held
+
+                    ParentChange { target: content; parent: root }
+                    AnchorChanges {
+                        target: content
+                        anchors { horizontalCenter: undefined; verticalCenter: undefined }
+                    }
+                }
+//![4]
+                Column {
+                    id: column
+                    anchors { fill: parent; margins: 2 }
+
+                    Text { text: 'Name: ' + name }
+                    Text { text: 'Type: ' + type }
+                    Text { text: 'Age: ' + age }
+                    Text { text: 'Size: ' + size }
+                }
+//![2]
+            }
+        }
+//![2]
+    }
+//![0]
+
+    ListView {
+        id: view
+
+        anchors { fill: parent; margins: 2 }
+
+        model: PetsModel {}
+        delegate: dragDelegate
+
+        spacing: 4
+        cacheBuffer: 50
+    }
+}
diff --git a/examples/tutorials/dynamicview/dynamicview3/PetsModel.qml b/examples/tutorials/dynamicview/dynamicview3/PetsModel.qml
new file mode 100644
index 0000000000..4f2087d95e
--- /dev/null
+++ b/examples/tutorials/dynamicview/dynamicview3/PetsModel.qml
@@ -0,0 +1,98 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+ListModel {
+    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/tutorials/dynamicview/dynamicview3/dynamicview.qml b/examples/tutorials/dynamicview/dynamicview3/dynamicview.qml
new file mode 100644
index 0000000000..5a579f78d9
--- /dev/null
+++ b/examples/tutorials/dynamicview/dynamicview3/dynamicview.qml
@@ -0,0 +1,143 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+//![0]
+Rectangle {
+    id: root
+
+    width: 300; height: 400
+
+    Component {
+        id: dragDelegate
+
+        MouseArea {
+            id: dragArea
+
+            property bool held: false
+
+            anchors { left: parent.left; right: parent.right }
+            height: content.height
+
+            drag.target: held ? content : undefined
+            drag.axis: Drag.YAxis
+
+            onPressAndHold: held = true
+            onReleased: held = false
+
+            Rectangle {
+                id: content
+//![0]
+                anchors {
+                    horizontalCenter: parent.horizontalCenter
+                    verticalCenter: parent.verticalCenter
+                }
+                width: dragArea.width; height: column.implicitHeight + 4
+
+                border.width: 1
+                border.color: "lightsteelblue"
+
+                color: dragArea.held ? "lightsteelblue" : "white"
+                Behavior on color { ColorAnimation { duration: 100 } }
+
+                radius: 2
+//![1]
+                Drag.active: dragArea.held
+                Drag.source: dragArea
+                Drag.hotSpot.x: width / 2
+                Drag.hotSpot.y: height / 2
+//![1]
+                states: State {
+                    when: dragArea.held
+
+                    ParentChange { target: content; parent: root }
+                    AnchorChanges {
+                        target: content
+                        anchors { horizontalCenter: undefined; verticalCenter: undefined }
+                    }
+                }
+
+                Column {
+                    id: column
+                    anchors { fill: parent; margins: 2 }
+
+                    Text { text: 'Name: ' + name }
+                    Text { text: 'Type: ' + type }
+                    Text { text: 'Age: ' + age }
+                    Text { text: 'Size: ' + size }
+                }
+//![2]
+            }
+//![3]
+            DropArea {
+                anchors { fill: parent; margins: 10 }
+
+                onEntered: {
+                    visualModel.items.move(
+                            drag.source.VisualDataModel.itemsIndex,
+                            dragArea.VisualDataModel.itemsIndex)
+                }
+            }
+//![3]
+        }
+    }
+//![2]
+//![4]
+    VisualDataModel {
+        id: visualModel
+
+        model: PetsModel {}
+        delegate: dragDelegate
+    }
+
+    ListView {
+        id: view
+
+        anchors { fill: parent; margins: 2 }
+
+        model: visualModel
+
+        spacing: 4
+        cacheBuffer: 50
+    }
+//![4]
+//![5]
+}
+//![5]
diff --git a/examples/tutorials/dynamicview/dynamicview4/ListSelector.qml b/examples/tutorials/dynamicview/dynamicview4/ListSelector.qml
new file mode 100644
index 0000000000..c6b8287beb
--- /dev/null
+++ b/examples/tutorials/dynamicview/dynamicview4/ListSelector.qml
@@ -0,0 +1,120 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Item {
+    id: selector
+
+    property alias list: view.model
+    property alias selectedIndex: view.currentIndex
+    property alias label: labelText.text
+    property bool expanded
+
+    width: 100; height: labelText.implicitHeight + 26
+
+    Rectangle {
+        anchors { left: parent.left; right: parent.right; bottom: parent.bottom; }
+
+        height: labelText.implicitHeight + 4 + (expanded ? 20 * view.count : 20)
+        Behavior on height { NumberAnimation { duration: 300 } }
+
+        radius: 2
+        border.width: 1
+        border.color: "yellow"
+        color: "yellow"
+
+        MouseArea {
+            anchors.fill: parent
+
+            onClicked: selector.expanded = !selector.expanded
+
+            Text {
+                id: labelText
+                anchors { left: parent.left; top: parent.top; margins: 2 }
+            }
+
+            Rectangle {
+                anchors {
+                    left: parent.left; top: labelText.bottom;
+                    right: parent.right; bottom: parent.bottom;
+                    margins: 2
+                    leftMargin: 10
+                }
+
+                radius: 2
+                color: "white"
+
+                ListView {
+                    id: view
+
+                    anchors.fill: parent
+
+                    clip: true
+
+                    delegate: Text {
+                        anchors { left: parent.left; right: parent.right }
+                        height: 20
+
+                        verticalAlignment: Text.AlignVCenter
+
+                        text: modelData
+
+                        MouseArea {
+                            anchors.fill: parent
+
+                            onClicked: {
+                                view.currentIndex = index
+                                selector.expanded = !selector.expanded
+                            }
+                        }
+                    }
+                    highlight: Rectangle {
+                        anchors { left: parent.left; right: parent.right }
+                        height: 20
+                        radius: 2
+
+                        color: "yellow"
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/examples/tutorials/dynamicview/dynamicview4/PetsModel.qml b/examples/tutorials/dynamicview/dynamicview4/PetsModel.qml
new file mode 100644
index 0000000000..4f2087d95e
--- /dev/null
+++ b/examples/tutorials/dynamicview/dynamicview4/PetsModel.qml
@@ -0,0 +1,98 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+ListModel {
+    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/tutorials/dynamicview/dynamicview4/dynamicview.qml b/examples/tutorials/dynamicview/dynamicview4/dynamicview.qml
new file mode 100644
index 0000000000..9bd4e0c438
--- /dev/null
+++ b/examples/tutorials/dynamicview/dynamicview4/dynamicview.qml
@@ -0,0 +1,219 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Rectangle {
+    id: root
+
+    width: 300; height: 400
+
+    Component {
+        id: dragDelegate
+
+        MouseArea {
+            id: dragArea
+
+            property bool held: false
+
+            anchors { left: parent.left; right: parent.right }
+            height: content.height
+
+            enabled: visualModel.sortOrder == visualModel.lessThan.length
+
+            drag.target: held ? content : undefined
+            drag.axis: Drag.YAxis
+
+            onPressAndHold: held = true
+            onReleased: held = false
+
+            Rectangle {
+                id: content
+
+                anchors {
+                    horizontalCenter: parent.horizontalCenter
+                    verticalCenter: parent.verticalCenter
+                }
+                width: dragArea.width; height: column.implicitHeight + 4
+
+                border.width: 1
+                border.color: "lightsteelblue"
+
+                color: dragArea.held ? "lightsteelblue" : "white"
+                Behavior on color { ColorAnimation { duration: 100 } }
+
+                radius: 2
+
+                Drag.active: dragArea.held
+                Drag.source: dragArea
+                Drag.hotSpot.x: width / 2
+                Drag.hotSpot.y: height / 2
+
+                states: State {
+                    when: dragArea.held
+
+                    ParentChange { target: content; parent: root }
+                    AnchorChanges {
+                        target: content
+                        anchors { horizontalCenter: undefined; verticalCenter: undefined }
+                    }
+                }
+
+                Column {
+                    id: column
+                    anchors { fill: parent; margins: 2 }
+
+                    Text { text: 'Name: ' + name }
+                    Text { text: 'Type: ' + type }
+                    Text { text: 'Age: ' + age }
+                    Text { text: 'Size: ' + size }
+                }
+            }
+
+            DropArea {
+                anchors { fill: parent; margins: 10 }
+
+                onEntered: {
+                    visualModel.items.move(
+                            drag.source.VisualDataModel.itemsIndex,
+                            dragArea.VisualDataModel.itemsIndex)
+                }
+            }
+        }
+    }
+//![0]
+    VisualDataModel {
+        id: visualModel
+//![4]
+        property var lessThan: [
+            function(left, right) { return left.name < right.name },
+            function(left, right) { return left.type < right.type },
+            function(left, right) { return left.age < right.age },
+            function(left, right) {
+                if (left.size == "Small")
+                    return true
+                else if (right.size == "Small")
+                    return false
+                else if (left.size == "Medium")
+                    return true
+                else
+                    return false
+            }
+        ]
+//![4]
+//![6]
+
+        property int sortOrder: orderSelector.selectedIndex
+        onSortOrderChanged: items.setGroups(0, items.count, "unsorted")
+
+//![6]
+//![3]
+        function insertPosition(lessThan, item) {
+            var lower = 0
+            var upper = items.count
+            while (lower < upper) {
+                var middle = Math.floor(lower + (upper - lower) / 2)
+                var result = lessThan(item.model, items.get(middle).model);
+                if (result) {
+                    upper = middle
+                } else {
+                    lower = middle + 1
+                }
+            }
+            return lower
+        }
+
+        function sort(lessThan) {
+            while (unsortedItems.count > 0) {
+                var item = unsortedItems.get(0)
+                var index = insertPosition(lessThan, item)
+
+                item.groups = "items"
+                items.move(item.itemsIndex, index)
+            }
+        }
+//![3]
+
+//![1]
+        items.includeByDefault: false
+//![5]
+        groups: VisualDataGroup {
+            id: unsortedItems
+            name: "unsorted"
+
+            includeByDefault: true
+//![1]
+            onChanged: {
+                if (visualModel.sortOrder == visualModel.lessThan.length)
+                    setGroups(0, count, "items")
+                else
+                    visualModel.sort(visualModel.lessThan[visualModel.sortOrder])
+            }
+//![2]
+        }
+//![2]
+//![5]
+        model: PetsModel {}
+        delegate: dragDelegate
+    }
+//![0]
+    ListView {
+        id: view
+
+        anchors {
+            left: parent.left; top: parent.top; right: parent.right; bottom: orderSelector.top;
+            margins: 2
+        }
+
+        model: visualModel
+
+        spacing: 4
+        cacheBuffer: 50
+    }
+
+    ListSelector {
+        id: orderSelector
+
+        anchors { left: parent.left; right: parent.right; bottom: parent.bottom; margins: 2 }
+
+        label: "Sort By"
+        list: [ "Name", "Type", "Age", "Size", "Custom" ]
+    }
+}
diff --git a/examples/tutorials/extending/chapter1-basics/app.qml b/examples/tutorials/extending/chapter1-basics/app.qml
new file mode 100644
index 0000000000..6f0c1d3a23
--- /dev/null
+++ b/examples/tutorials/extending/chapter1-basics/app.qml
@@ -0,0 +1,60 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+//![0]
+import Charts 1.0
+import QtQuick 2.0
+
+Item {
+    width: 300; height: 200
+
+    PieChart {
+        id: aPieChart
+        anchors.centerIn: parent
+        width: 100; height: 100
+        name: "A simple pie chart"
+        color: "red"
+    }
+
+    Text {
+        anchors { bottom: parent.bottom; horizontalCenter: parent.horizontalCenter; bottomMargin: 20 }
+        text: aPieChart.name
+    }
+}
+//![0]
diff --git a/examples/tutorials/extending/chapter1-basics/chapter1-basics.pro b/examples/tutorials/extending/chapter1-basics/chapter1-basics.pro
new file mode 100644
index 0000000000..affc57ce1f
--- /dev/null
+++ b/examples/tutorials/extending/chapter1-basics/chapter1-basics.pro
@@ -0,0 +1,5 @@
+QT += declarative quick
+
+HEADERS += piechart.h
+SOURCES += piechart.cpp \
+           main.cpp
diff --git a/examples/tutorials/extending/chapter1-basics/main.cpp b/examples/tutorials/extending/chapter1-basics/main.cpp
new file mode 100644
index 0000000000..ed9e412bd6
--- /dev/null
+++ b/examples/tutorials/extending/chapter1-basics/main.cpp
@@ -0,0 +1,57 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+//![0]
+#include "piechart.h"
+#include <QtQuick/QQuickView>
+#include <QGuiApplication>
+
+int main(int argc, char *argv[])
+{
+    QGuiApplication app(argc, argv);
+
+    qmlRegisterType<PieChart>("Charts", 1, 0, "PieChart");
+
+    QQuickView view;
+    view.setResizeMode(QQuickView::SizeRootObjectToView);
+    view.setSource(QUrl::fromLocalFile("app.qml"));
+    view.show();
+    return app.exec();
+}
+//![0]
diff --git a/examples/tutorials/extending/chapter1-basics/piechart.cpp b/examples/tutorials/extending/chapter1-basics/piechart.cpp
new file mode 100644
index 0000000000..bc81d6a3a0
--- /dev/null
+++ b/examples/tutorials/extending/chapter1-basics/piechart.cpp
@@ -0,0 +1,79 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+#include "piechart.h"
+#include <QPainter>
+
+//![0]
+PieChart::PieChart(QQuickItem *parent)
+    : QQuickPaintedItem(parent)
+{
+}
+//![0]
+
+QString PieChart::name() const
+{
+    return m_name;
+}
+
+void PieChart::setName(const QString &name)
+{
+    m_name = name;
+}
+
+QColor PieChart::color() const
+{
+    return m_color;
+}
+
+void PieChart::setColor(const QColor &color)
+{
+    m_color = color;
+}
+
+//![1]
+void PieChart::paint(QPainter *painter)
+{
+    QPen pen(m_color, 2);
+    painter->setPen(pen);
+    painter->setRenderHints(QPainter::HighQualityAntialiasing, true);
+    painter->drawPie(boundingRect(), 90 * 16, 290 * 16);
+}
+//![1]
+
diff --git a/examples/tutorials/extending/chapter1-basics/piechart.h b/examples/tutorials/extending/chapter1-basics/piechart.h
new file mode 100644
index 0000000000..71a8786e7d
--- /dev/null
+++ b/examples/tutorials/extending/chapter1-basics/piechart.h
@@ -0,0 +1,71 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+#ifndef PIECHART_H
+#define PIECHART_H
+
+//![0]
+#include <QtQuick/QQuickPaintedItem>
+#include <QColor>
+
+class PieChart : public QQuickPaintedItem
+{
+    Q_OBJECT
+    Q_PROPERTY(QString name READ name WRITE setName)
+    Q_PROPERTY(QColor color READ color WRITE setColor)
+
+public:
+    PieChart(QQuickItem *parent = 0);
+
+    QString name() const;
+    void setName(const QString &name);
+
+    QColor color() const;
+    void setColor(const QColor &color);
+
+    void paint(QPainter *painter);
+
+private:
+    QString m_name;
+    QColor m_color;
+};
+//![0]
+
+#endif
+
diff --git a/examples/tutorials/extending/chapter2-methods/app.qml b/examples/tutorials/extending/chapter2-methods/app.qml
new file mode 100644
index 0000000000..eee0933734
--- /dev/null
+++ b/examples/tutorials/extending/chapter2-methods/app.qml
@@ -0,0 +1,66 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+//![0]
+import Charts 1.0
+import QtQuick 2.0
+
+Item {
+    width: 300; height: 200
+
+    PieChart {
+        id: aPieChart
+        anchors.centerIn: parent
+        width: 100; height: 100
+        color: "red"
+
+        onChartCleared: console.log("The chart has been cleared")
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: aPieChart.clearChart()
+    }
+
+    Text {
+        anchors { bottom: parent.bottom; horizontalCenter: parent.horizontalCenter; bottomMargin: 20 }
+        text: "Click anywhere to clear the chart"
+    }
+}
+//![0]
diff --git a/examples/tutorials/extending/chapter2-methods/chapter2-methods.pro b/examples/tutorials/extending/chapter2-methods/chapter2-methods.pro
new file mode 100644
index 0000000000..affc57ce1f
--- /dev/null
+++ b/examples/tutorials/extending/chapter2-methods/chapter2-methods.pro
@@ -0,0 +1,5 @@
+QT += declarative quick
+
+HEADERS += piechart.h
+SOURCES += piechart.cpp \
+           main.cpp
diff --git a/examples/tutorials/extending/chapter2-methods/main.cpp b/examples/tutorials/extending/chapter2-methods/main.cpp
new file mode 100644
index 0000000000..ed9e412bd6
--- /dev/null
+++ b/examples/tutorials/extending/chapter2-methods/main.cpp
@@ -0,0 +1,57 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+//![0]
+#include "piechart.h"
+#include <QtQuick/QQuickView>
+#include <QGuiApplication>
+
+int main(int argc, char *argv[])
+{
+    QGuiApplication app(argc, argv);
+
+    qmlRegisterType<PieChart>("Charts", 1, 0, "PieChart");
+
+    QQuickView view;
+    view.setResizeMode(QQuickView::SizeRootObjectToView);
+    view.setSource(QUrl::fromLocalFile("app.qml"));
+    view.show();
+    return app.exec();
+}
+//![0]
diff --git a/examples/tutorials/extending/chapter2-methods/piechart.cpp b/examples/tutorials/extending/chapter2-methods/piechart.cpp
new file mode 100644
index 0000000000..71be74e943
--- /dev/null
+++ b/examples/tutorials/extending/chapter2-methods/piechart.cpp
@@ -0,0 +1,84 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+#include "piechart.h"
+#include <QPainter>
+
+PieChart::PieChart(QQuickItem *parent)
+    : QQuickPaintedItem(parent)
+{
+}
+
+QString PieChart::name() const
+{
+    return m_name;
+}
+
+void PieChart::setName(const QString &name)
+{
+    m_name = name;
+}
+
+QColor PieChart::color() const
+{
+    return m_color;
+}
+
+void PieChart::setColor(const QColor &color)
+{
+    m_color = color;
+}
+
+void PieChart::paint(QPainter *painter)
+{
+    QPen pen(m_color, 2);
+    painter->setPen(pen);
+    painter->setRenderHints(QPainter::HighQualityAntialiasing, true);
+    painter->drawPie(boundingRect(), 90 * 16, 290 * 16);
+}
+
+//![0]
+void PieChart::clearChart()
+{
+    setColor(QColor(Qt::transparent));
+    update();
+
+    emit chartCleared();
+}
+//![0]
diff --git a/examples/tutorials/extending/chapter2-methods/piechart.h b/examples/tutorials/extending/chapter2-methods/piechart.h
new file mode 100644
index 0000000000..7650d6e8d7
--- /dev/null
+++ b/examples/tutorials/extending/chapter2-methods/piechart.h
@@ -0,0 +1,84 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+#ifndef PIECHART_H
+#define PIECHART_H
+
+#include <QtQuick/QQuickPaintedItem>
+#include <QColor>
+
+//![0]
+class PieChart : public QQuickPaintedItem
+{
+//![0]
+    Q_OBJECT
+    Q_PROPERTY(QString name READ name WRITE setName)
+    Q_PROPERTY(QColor color READ color WRITE setColor)
+
+//![1]
+public:
+//![1]
+
+    PieChart(QQuickItem *parent = 0);
+
+    QString name() const;
+    void setName(const QString &name);
+
+    QColor color() const;
+    void setColor(const QColor &color);
+
+    void paint(QPainter *painter);
+
+//![2]
+    Q_INVOKABLE void clearChart();
+
+signals:
+    void chartCleared();
+//![2]
+
+private:
+    QString m_name;
+    QColor m_color;
+
+//![3]
+};
+//![3]
+
+#endif
+
diff --git a/examples/tutorials/extending/chapter3-bindings/app.qml b/examples/tutorials/extending/chapter3-bindings/app.qml
new file mode 100644
index 0000000000..4ad929132c
--- /dev/null
+++ b/examples/tutorials/extending/chapter3-bindings/app.qml
@@ -0,0 +1,74 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+//![0]
+import Charts 1.0
+import QtQuick 2.0
+
+Item {
+    width: 300; height: 200
+
+    Row {
+        anchors.centerIn: parent
+        spacing: 20
+
+        PieChart {
+            id: chartA
+            width: 100; height: 100
+            color: "red"
+        }
+
+        PieChart {
+            id: chartB
+            width: 100; height: 100
+            color: chartA.color
+        }
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: { chartA.color = "blue" }
+    }
+
+    Text {
+        anchors { bottom: parent.bottom; horizontalCenter: parent.horizontalCenter; bottomMargin: 20 }
+        text: "Click anywhere to change the chart color"
+    }
+}
+//![0]
diff --git a/examples/tutorials/extending/chapter3-bindings/chapter3-bindings.pro b/examples/tutorials/extending/chapter3-bindings/chapter3-bindings.pro
new file mode 100644
index 0000000000..affc57ce1f
--- /dev/null
+++ b/examples/tutorials/extending/chapter3-bindings/chapter3-bindings.pro
@@ -0,0 +1,5 @@
+QT += declarative quick
+
+HEADERS += piechart.h
+SOURCES += piechart.cpp \
+           main.cpp
diff --git a/examples/tutorials/extending/chapter3-bindings/main.cpp b/examples/tutorials/extending/chapter3-bindings/main.cpp
new file mode 100644
index 0000000000..ed9e412bd6
--- /dev/null
+++ b/examples/tutorials/extending/chapter3-bindings/main.cpp
@@ -0,0 +1,57 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+//![0]
+#include "piechart.h"
+#include <QtQuick/QQuickView>
+#include <QGuiApplication>
+
+int main(int argc, char *argv[])
+{
+    QGuiApplication app(argc, argv);
+
+    qmlRegisterType<PieChart>("Charts", 1, 0, "PieChart");
+
+    QQuickView view;
+    view.setResizeMode(QQuickView::SizeRootObjectToView);
+    view.setSource(QUrl::fromLocalFile("app.qml"));
+    view.show();
+    return app.exec();
+}
+//![0]
diff --git a/examples/tutorials/extending/chapter3-bindings/piechart.cpp b/examples/tutorials/extending/chapter3-bindings/piechart.cpp
new file mode 100644
index 0000000000..2a392125da
--- /dev/null
+++ b/examples/tutorials/extending/chapter3-bindings/piechart.cpp
@@ -0,0 +1,86 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+#include "piechart.h"
+#include <QPainter>
+
+PieChart::PieChart(QQuickItem *parent)
+    : QQuickPaintedItem(parent)
+{
+}
+
+QString PieChart::name() const
+{
+    return m_name;
+}
+
+void PieChart::setName(const QString &name)
+{
+    m_name = name;
+}
+
+QColor PieChart::color() const
+{
+    return m_color;
+}
+
+//![0]
+void PieChart::setColor(const QColor &color)
+{
+    if (color != m_color) {
+        m_color = color;
+        update();   // repaint with the new color
+        emit colorChanged();
+    }
+}
+//![0]
+
+void PieChart::paint(QPainter *painter)
+{
+    QPen pen(m_color, 2);
+    painter->setPen(pen);
+    painter->setRenderHints(QPainter::HighQualityAntialiasing, true);
+    painter->drawPie(boundingRect(), 90 * 16, 290 * 16);
+}
+
+void PieChart::clearChart()
+{
+    setColor(QColor(Qt::transparent));
+    update();
+}
diff --git a/examples/tutorials/extending/chapter3-bindings/piechart.h b/examples/tutorials/extending/chapter3-bindings/piechart.h
new file mode 100644
index 0000000000..77075b5727
--- /dev/null
+++ b/examples/tutorials/extending/chapter3-bindings/piechart.h
@@ -0,0 +1,84 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+#ifndef PIECHART_H
+#define PIECHART_H
+
+#include <QColor>
+#include <QtQuick/QQuickPaintedItem>
+
+//![0]
+class PieChart : public QQuickPaintedItem
+{
+//![0]
+    Q_OBJECT
+    Q_PROPERTY(QString name READ name WRITE setName)
+
+//![1]
+    Q_PROPERTY(QColor color READ color WRITE setColor NOTIFY colorChanged)
+public:
+//![1]
+
+    PieChart(QQuickItem *parent = 0);
+
+    QString name() const;
+    void setName(const QString &name);
+
+    QColor color() const;
+    void setColor(const QColor &color);
+
+    void paint(QPainter *painter);
+
+    Q_INVOKABLE void clearChart();
+
+//![2]
+signals:
+    void colorChanged();
+//![2]
+
+private:
+    QString m_name;
+    QColor m_color;
+
+//![3]
+};
+//![3]
+
+#endif
+
diff --git a/examples/tutorials/extending/chapter4-customPropertyTypes/app.qml b/examples/tutorials/extending/chapter4-customPropertyTypes/app.qml
new file mode 100644
index 0000000000..06490773f4
--- /dev/null
+++ b/examples/tutorials/extending/chapter4-customPropertyTypes/app.qml
@@ -0,0 +1,60 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+//![0]
+import Charts 1.0
+import QtQuick 2.0
+
+Item {
+    width: 300; height: 200
+
+    PieChart {
+        id: chart
+        anchors.centerIn: parent
+        width: 100; height: 100
+
+        pieSlice: PieSlice { 
+            anchors.fill: parent
+            color: "red" 
+        }
+    }
+
+    Component.onCompleted: console.log("The pie is colored " + chart.pieSlice.color)
+}
+//![0]
diff --git a/examples/tutorials/extending/chapter4-customPropertyTypes/chapter4-customPropertyTypes.pro b/examples/tutorials/extending/chapter4-customPropertyTypes/chapter4-customPropertyTypes.pro
new file mode 100644
index 0000000000..6724fa0375
--- /dev/null
+++ b/examples/tutorials/extending/chapter4-customPropertyTypes/chapter4-customPropertyTypes.pro
@@ -0,0 +1,7 @@
+QT += declarative quick
+
+HEADERS += piechart.h \
+           pieslice.h 
+SOURCES += piechart.cpp \
+           pieslice.cpp \
+           main.cpp
diff --git a/examples/tutorials/extending/chapter4-customPropertyTypes/main.cpp b/examples/tutorials/extending/chapter4-customPropertyTypes/main.cpp
new file mode 100644
index 0000000000..537ea766fc
--- /dev/null
+++ b/examples/tutorials/extending/chapter4-customPropertyTypes/main.cpp
@@ -0,0 +1,66 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+#include "piechart.h"
+#include "pieslice.h"
+
+#include <QtQuick/QQuickView>
+#include <QGuiApplication>
+
+//![0]
+int main(int argc, char *argv[])
+{
+//![0]
+    QGuiApplication app(argc, argv);
+
+    qmlRegisterType<PieChart>("Charts", 1, 0, "PieChart");
+
+//![1]
+    qmlRegisterType<PieSlice>("Charts", 1, 0, "PieSlice");
+//![1]
+
+    QQuickView view;
+    view.setResizeMode(QQuickView::SizeRootObjectToView);
+    view.setSource(QUrl::fromLocalFile("app.qml"));
+    view.show();
+    return app.exec();
+
+//![2]
+}
+//![2]
diff --git a/examples/tutorials/extending/chapter4-customPropertyTypes/piechart.cpp b/examples/tutorials/extending/chapter4-customPropertyTypes/piechart.cpp
new file mode 100644
index 0000000000..3cf9bdc00c
--- /dev/null
+++ b/examples/tutorials/extending/chapter4-customPropertyTypes/piechart.cpp
@@ -0,0 +1,70 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+#include "piechart.h"
+#include "pieslice.h"
+
+PieChart::PieChart(QQuickItem *parent)
+    : QQuickItem(parent)
+{
+}
+
+QString PieChart::name() const
+{
+    return m_name;
+}
+
+void PieChart::setName(const QString &name)
+{
+    m_name = name;
+}
+
+PieSlice *PieChart::pieSlice() const
+{
+    return m_pieSlice;
+}
+
+//![0]
+void PieChart::setPieSlice(PieSlice *pieSlice)
+{
+    m_pieSlice = pieSlice;
+    pieSlice->setParentItem(this);
+}
+//![0]
+
diff --git a/examples/tutorials/extending/chapter4-customPropertyTypes/piechart.h b/examples/tutorials/extending/chapter4-customPropertyTypes/piechart.h
new file mode 100644
index 0000000000..b89db5a2b1
--- /dev/null
+++ b/examples/tutorials/extending/chapter4-customPropertyTypes/piechart.h
@@ -0,0 +1,78 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+#ifndef PIECHART_H
+#define PIECHART_H
+
+#include <QtQuick/QQuickItem>
+
+class PieSlice;
+
+//![0]
+class PieChart : public QQuickItem
+{
+    Q_OBJECT
+    Q_PROPERTY(PieSlice* pieSlice READ pieSlice WRITE setPieSlice)
+//![0]
+    Q_PROPERTY(QString name READ name WRITE setName)
+
+//![1]
+public:
+//![1]
+
+    PieChart(QQuickItem *parent = 0);
+
+    QString name() const;
+    void setName(const QString &name);
+
+//![2]
+    PieSlice *pieSlice() const;
+    void setPieSlice(PieSlice *pieSlice);
+//![2]
+
+private:
+    QString m_name;
+    PieSlice *m_pieSlice;
+
+//![3]
+};
+//![3]
+
+#endif
+
diff --git a/examples/tutorials/extending/chapter4-customPropertyTypes/pieslice.cpp b/examples/tutorials/extending/chapter4-customPropertyTypes/pieslice.cpp
new file mode 100644
index 0000000000..654a46fc8d
--- /dev/null
+++ b/examples/tutorials/extending/chapter4-customPropertyTypes/pieslice.cpp
@@ -0,0 +1,66 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+#include "pieslice.h"
+
+#include <QPainter>
+
+PieSlice::PieSlice(QQuickItem *parent)
+    : QQuickPaintedItem(parent)
+{
+}
+
+QColor PieSlice::color() const
+{
+    return m_color;
+}
+
+void PieSlice::setColor(const QColor &color)
+{
+    m_color = color;
+}
+
+void PieSlice::paint(QPainter *painter)
+{
+    QPen pen(m_color, 2);
+    painter->setPen(pen);
+    painter->setRenderHints(QPainter::HighQualityAntialiasing, true);
+    painter->drawPie(boundingRect(), 90 * 16, 290 * 16);
+}
+
diff --git a/examples/tutorials/extending/chapter4-customPropertyTypes/pieslice.h b/examples/tutorials/extending/chapter4-customPropertyTypes/pieslice.h
new file mode 100644
index 0000000000..8fc445d471
--- /dev/null
+++ b/examples/tutorials/extending/chapter4-customPropertyTypes/pieslice.h
@@ -0,0 +1,66 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+#ifndef PIESLICE_H
+#define PIESLICE_H
+
+#include <QtQuick/QQuickPaintedItem>
+#include <QColor>
+
+//![0]
+class PieSlice : public QQuickPaintedItem
+{
+    Q_OBJECT
+    Q_PROPERTY(QColor color READ color WRITE setColor)
+
+public:
+    PieSlice(QQuickItem *parent = 0);
+
+    QColor color() const;
+    void setColor(const QColor &color);
+
+    void paint(QPainter *painter);
+
+private:
+    QColor m_color;
+};
+//![0]
+
+#endif
+
diff --git a/examples/tutorials/extending/chapter5-listproperties/app.qml b/examples/tutorials/extending/chapter5-listproperties/app.qml
new file mode 100644
index 0000000000..37b0626948
--- /dev/null
+++ b/examples/tutorials/extending/chapter5-listproperties/app.qml
@@ -0,0 +1,70 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+//![0]
+import Charts 1.0
+import QtQuick 2.0
+
+Item {
+    width: 300; height: 200
+
+    PieChart {
+        anchors.centerIn: parent
+        width: 100; height: 100
+
+        slices: [
+            PieSlice { 
+                anchors.fill: parent
+                color: "red"
+                fromAngle: 0; angleSpan: 110 
+            },
+            PieSlice { 
+                anchors.fill: parent
+                color: "black"
+                fromAngle: 110; angleSpan: 50 
+            },
+            PieSlice { 
+                anchors.fill: parent
+                color: "blue"
+                fromAngle: 160; angleSpan: 100
+            }
+        ]
+    }
+}
+//![0]
diff --git a/examples/tutorials/extending/chapter5-listproperties/chapter5-listproperties.pro b/examples/tutorials/extending/chapter5-listproperties/chapter5-listproperties.pro
new file mode 100644
index 0000000000..6724fa0375
--- /dev/null
+++ b/examples/tutorials/extending/chapter5-listproperties/chapter5-listproperties.pro
@@ -0,0 +1,7 @@
+QT += declarative quick
+
+HEADERS += piechart.h \
+           pieslice.h 
+SOURCES += piechart.cpp \
+           pieslice.cpp \
+           main.cpp
diff --git a/examples/tutorials/extending/chapter5-listproperties/main.cpp b/examples/tutorials/extending/chapter5-listproperties/main.cpp
new file mode 100644
index 0000000000..59587733eb
--- /dev/null
+++ b/examples/tutorials/extending/chapter5-listproperties/main.cpp
@@ -0,0 +1,58 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+#include "piechart.h"
+#include "pieslice.h"
+
+#include <QtQuick/QQuickView>
+#include <QGuiApplication>
+
+int main(int argc, char *argv[])
+{
+    QGuiApplication app(argc, argv);
+
+    qmlRegisterType<PieChart>("Charts", 1, 0, "PieChart");
+    qmlRegisterType<PieSlice>("Charts", 1, 0, "PieSlice");
+
+    QQuickView view;
+    view.setResizeMode(QQuickView::SizeRootObjectToView);
+    view.setSource(QUrl::fromLocalFile("app.qml"));
+    view.show();
+    return app.exec();
+}
diff --git a/examples/tutorials/extending/chapter5-listproperties/piechart.cpp b/examples/tutorials/extending/chapter5-listproperties/piechart.cpp
new file mode 100644
index 0000000000..bfcb607e60
--- /dev/null
+++ b/examples/tutorials/extending/chapter5-listproperties/piechart.cpp
@@ -0,0 +1,72 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+#include "piechart.h"
+#include "pieslice.h"
+
+PieChart::PieChart(QQuickItem *parent)
+    : QQuickItem(parent)
+{
+}
+
+QString PieChart::name() const
+{
+    return m_name;
+}
+
+void PieChart::setName(const QString &name)
+{
+    m_name = name;
+}
+
+//![0]
+QDeclarativeListProperty<PieSlice> PieChart::slices() 
+{
+    return QDeclarativeListProperty<PieSlice>(this, 0, &PieChart::append_slice);
+}
+
+void PieChart::append_slice(QDeclarativeListProperty<PieSlice> *list, PieSlice *slice)
+{
+    PieChart *chart = qobject_cast<PieChart *>(list->object);
+    if (chart) {
+        slice->setParentItem(chart);
+        chart->m_slices.append(slice);
+    }
+}
+//![0]
diff --git a/examples/tutorials/extending/chapter5-listproperties/piechart.h b/examples/tutorials/extending/chapter5-listproperties/piechart.h
new file mode 100644
index 0000000000..9beabda5f3
--- /dev/null
+++ b/examples/tutorials/extending/chapter5-listproperties/piechart.h
@@ -0,0 +1,75 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+#ifndef PIECHART_H
+#define PIECHART_H
+
+#include <QtQuick/QQuickItem>
+
+class PieSlice;
+
+//![0]
+class PieChart : public QQuickItem
+{
+    Q_OBJECT
+    Q_PROPERTY(QDeclarativeListProperty<PieSlice> slices READ slices)
+//![0]
+    Q_PROPERTY(QString name READ name WRITE setName)
+
+//![1]
+public:
+//![1]
+    PieChart(QQuickItem *parent = 0);
+
+    QString name() const;
+    void setName(const QString &name);
+
+//![2]
+    QDeclarativeListProperty<PieSlice> slices();
+
+private:
+    static void append_slice(QDeclarativeListProperty<PieSlice> *list, PieSlice *slice);
+
+    QString m_name;
+    QList<PieSlice *> m_slices;
+};
+//![2]
+
+#endif
+
diff --git a/examples/tutorials/extending/chapter5-listproperties/pieslice.cpp b/examples/tutorials/extending/chapter5-listproperties/pieslice.cpp
new file mode 100644
index 0000000000..5bca2d58d8
--- /dev/null
+++ b/examples/tutorials/extending/chapter5-listproperties/pieslice.cpp
@@ -0,0 +1,86 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+#include "pieslice.h"
+
+#include <QPainter>
+
+PieSlice::PieSlice(QQuickItem *parent)
+    : QQuickPaintedItem(parent)
+{
+}
+
+QColor PieSlice::color() const
+{
+    return m_color;
+}
+
+void PieSlice::setColor(const QColor &color)
+{
+    m_color = color;
+}
+
+int PieSlice::fromAngle() const
+{
+    return m_fromAngle;
+}
+
+void PieSlice::setFromAngle(int angle)
+{
+    m_fromAngle = angle;
+}
+
+int PieSlice::angleSpan() const
+{
+    return m_angleSpan;
+}
+
+void PieSlice::setAngleSpan(int angle)
+{
+    m_angleSpan = angle;
+}
+
+void PieSlice::paint(QPainter *painter)
+{
+    QPen pen(m_color, 2);
+    painter->setPen(pen);
+    painter->setRenderHints(QPainter::HighQualityAntialiasing, true);
+    painter->drawPie(boundingRect(), m_fromAngle * 16, m_angleSpan * 16);
+}
+
diff --git a/examples/tutorials/extending/chapter5-listproperties/pieslice.h b/examples/tutorials/extending/chapter5-listproperties/pieslice.h
new file mode 100644
index 0000000000..f6497fcbae
--- /dev/null
+++ b/examples/tutorials/extending/chapter5-listproperties/pieslice.h
@@ -0,0 +1,76 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+#ifndef PIESLICE_H
+#define PIESLICE_H
+
+#include <QtQuick/QQuickPaintedItem>
+#include <QColor>
+
+//![0]
+class PieSlice : public QQuickPaintedItem
+{
+    Q_OBJECT
+    Q_PROPERTY(QColor color READ color WRITE setColor)
+    Q_PROPERTY(int fromAngle READ fromAngle WRITE setFromAngle)
+    Q_PROPERTY(int angleSpan READ angleSpan WRITE setAngleSpan)
+//![0]
+
+public:
+    PieSlice(QQuickItem *parent = 0);
+
+    QColor color() const;
+    void setColor(const QColor &color);
+
+    int fromAngle() const;
+    void setFromAngle(int angle);
+
+    int angleSpan() const;
+    void setAngleSpan(int span);
+
+    void paint(QPainter *painter);
+
+private:
+    QColor m_color;
+    int m_fromAngle;
+    int m_angleSpan;
+};
+
+#endif
+
diff --git a/examples/tutorials/extending/chapter6-plugins/ChartsPlugin/qmldir b/examples/tutorials/extending/chapter6-plugins/ChartsPlugin/qmldir
new file mode 100644
index 0000000000..72650d8243
--- /dev/null
+++ b/examples/tutorials/extending/chapter6-plugins/ChartsPlugin/qmldir
@@ -0,0 +1 @@
+plugin chartsplugin
\ No newline at end of file
diff --git a/examples/tutorials/extending/chapter6-plugins/app.qml b/examples/tutorials/extending/chapter6-plugins/app.qml
new file mode 100644
index 0000000000..b6eac44e27
--- /dev/null
+++ b/examples/tutorials/extending/chapter6-plugins/app.qml
@@ -0,0 +1,69 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.0
+import "ChartsPlugin" 1.0
+
+Item {
+    width: 300; height: 200
+
+    PieChart {
+        anchors.centerIn: parent
+        width: 100; height: 100
+
+        slices: [
+            PieSlice { 
+                anchors.fill: parent
+                color: "red"
+                fromAngle: 0; angleSpan: 110 
+            },
+            PieSlice { 
+                anchors.fill: parent
+                color: "black"
+                fromAngle: 110; angleSpan: 50 
+            },
+            PieSlice { 
+                anchors.fill: parent
+                color: "blue"
+                fromAngle: 160; angleSpan: 100
+            }
+        ]
+    }
+}
+
diff --git a/examples/tutorials/extending/chapter6-plugins/chapter6-plugins.pro b/examples/tutorials/extending/chapter6-plugins/chapter6-plugins.pro
new file mode 100644
index 0000000000..c243ec4572
--- /dev/null
+++ b/examples/tutorials/extending/chapter6-plugins/chapter6-plugins.pro
@@ -0,0 +1,18 @@
+TEMPLATE = lib
+CONFIG += qt plugin
+QT += declarative quick
+
+DESTDIR = ChartsPlugin
+TARGET = chartsplugin
+
+OBJECTS_DIR = tmp
+MOC_DIR = tmp
+
+HEADERS += piechart.h \
+           pieslice.h \
+           chartsplugin.h
+
+SOURCES += piechart.cpp \
+           pieslice.cpp \
+           chartsplugin.cpp
+
diff --git a/examples/tutorials/extending/chapter6-plugins/chartsplugin.cpp b/examples/tutorials/extending/chapter6-plugins/chartsplugin.cpp
new file mode 100644
index 0000000000..d75f810964
--- /dev/null
+++ b/examples/tutorials/extending/chapter6-plugins/chartsplugin.cpp
@@ -0,0 +1,53 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+#include "chartsplugin.h"
+//![0]
+#include "piechart.h"
+#include "pieslice.h"
+#include <qdeclarative.h>
+
+void ChartsPlugin::registerTypes(const char *uri)
+{
+    qmlRegisterType<PieChart>(uri, 1, 0, "PieChart");
+    qmlRegisterType<PieSlice>(uri, 1, 0, "PieSlice");
+}
+
+//![0]
+
diff --git a/examples/tutorials/extending/chapter6-plugins/chartsplugin.h b/examples/tutorials/extending/chapter6-plugins/chartsplugin.h
new file mode 100644
index 0000000000..863564b09c
--- /dev/null
+++ b/examples/tutorials/extending/chapter6-plugins/chartsplugin.h
@@ -0,0 +1,57 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+#ifndef CHARTSPLUGIN_H
+#define CHARTSPLUGIN_H
+
+//![0]
+#include <QDeclarativeExtensionPlugin>
+
+class ChartsPlugin : public QDeclarativeExtensionPlugin
+{
+    Q_OBJECT
+    Q_PLUGIN_METADATA(IID "org.qt-project.Qt.QDeclarativeExtensionInterface" FILE "chartsplugin.json")
+
+public:
+    void registerTypes(const char *uri);
+};
+//![0]
+
+#endif
+
diff --git a/examples/tutorials/extending/chapter6-plugins/piechart.cpp b/examples/tutorials/extending/chapter6-plugins/piechart.cpp
new file mode 100644
index 0000000000..2a8f40289e
--- /dev/null
+++ b/examples/tutorials/extending/chapter6-plugins/piechart.cpp
@@ -0,0 +1,71 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+#include "piechart.h"
+#include "pieslice.h"
+
+PieChart::PieChart(QQuickItem *parent)
+    : QQuickItem(parent)
+{
+}
+
+QString PieChart::name() const
+{
+    return m_name;
+}
+
+void PieChart::setName(const QString &name)
+{
+    m_name = name;
+}
+
+QDeclarativeListProperty<PieSlice> PieChart::slices() 
+{
+    return QDeclarativeListProperty<PieSlice>(this, 0, &PieChart::append_slice);
+}
+
+void PieChart::append_slice(QDeclarativeListProperty<PieSlice> *list, PieSlice *slice)
+{
+    PieChart *chart = qobject_cast<PieChart *>(list->object);
+    if (chart) {
+        slice->setParentItem(chart);
+        chart->m_slices.append(slice);
+    }
+}
+
diff --git a/examples/tutorials/extending/chapter6-plugins/piechart.h b/examples/tutorials/extending/chapter6-plugins/piechart.h
new file mode 100644
index 0000000000..fe6b96afdc
--- /dev/null
+++ b/examples/tutorials/extending/chapter6-plugins/piechart.h
@@ -0,0 +1,69 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+#ifndef PIECHART_H
+#define PIECHART_H
+
+#include <QtQuick/QQuickItem>
+
+class PieSlice;
+
+class PieChart : public QQuickItem
+{
+    Q_OBJECT
+    Q_PROPERTY(QDeclarativeListProperty<PieSlice> slices READ slices)
+    Q_PROPERTY(QString name READ name WRITE setName)
+
+public:
+    PieChart(QQuickItem *parent = 0);
+
+    QString name() const;
+    void setName(const QString &name);
+
+    QDeclarativeListProperty<PieSlice> slices();
+
+private:
+    static void append_slice(QDeclarativeListProperty<PieSlice> *list, PieSlice *slice);
+
+    QString m_name;
+    QList<PieSlice *> m_slices;
+};
+
+#endif
+
diff --git a/examples/tutorials/extending/chapter6-plugins/pieslice.cpp b/examples/tutorials/extending/chapter6-plugins/pieslice.cpp
new file mode 100644
index 0000000000..5bca2d58d8
--- /dev/null
+++ b/examples/tutorials/extending/chapter6-plugins/pieslice.cpp
@@ -0,0 +1,86 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+#include "pieslice.h"
+
+#include <QPainter>
+
+PieSlice::PieSlice(QQuickItem *parent)
+    : QQuickPaintedItem(parent)
+{
+}
+
+QColor PieSlice::color() const
+{
+    return m_color;
+}
+
+void PieSlice::setColor(const QColor &color)
+{
+    m_color = color;
+}
+
+int PieSlice::fromAngle() const
+{
+    return m_fromAngle;
+}
+
+void PieSlice::setFromAngle(int angle)
+{
+    m_fromAngle = angle;
+}
+
+int PieSlice::angleSpan() const
+{
+    return m_angleSpan;
+}
+
+void PieSlice::setAngleSpan(int angle)
+{
+    m_angleSpan = angle;
+}
+
+void PieSlice::paint(QPainter *painter)
+{
+    QPen pen(m_color, 2);
+    painter->setPen(pen);
+    painter->setRenderHints(QPainter::HighQualityAntialiasing, true);
+    painter->drawPie(boundingRect(), m_fromAngle * 16, m_angleSpan * 16);
+}
+
diff --git a/examples/tutorials/extending/chapter6-plugins/pieslice.h b/examples/tutorials/extending/chapter6-plugins/pieslice.h
new file mode 100644
index 0000000000..8a636fb3e7
--- /dev/null
+++ b/examples/tutorials/extending/chapter6-plugins/pieslice.h
@@ -0,0 +1,74 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+#ifndef PIESLICE_H
+#define PIESLICE_H
+
+#include <QtQuick/QQuickPaintedItem>
+#include <QColor>
+
+class PieSlice : public QQuickPaintedItem
+{
+    Q_OBJECT
+    Q_PROPERTY(QColor color READ color WRITE setColor)
+    Q_PROPERTY(int fromAngle READ fromAngle WRITE setFromAngle)
+    Q_PROPERTY(int angleSpan READ angleSpan WRITE setAngleSpan)
+
+public:
+    PieSlice(QQuickItem *parent = 0);
+
+    QColor color() const;
+    void setColor(const QColor &color);
+
+    int fromAngle() const;
+    void setFromAngle(int angle);
+
+    int angleSpan() const;
+    void setAngleSpan(int span);
+
+    void paint(QPainter *painter);
+
+private:
+    QColor m_color;
+    int m_fromAngle;
+    int m_angleSpan;
+};
+
+#endif
+
diff --git a/examples/tutorials/extending/extending.pro b/examples/tutorials/extending/extending.pro
new file mode 100644
index 0000000000..967473fda0
--- /dev/null
+++ b/examples/tutorials/extending/extending.pro
@@ -0,0 +1,10 @@
+TEMPLATE = subdirs
+
+SUBDIRS += \
+    chapter1-basics \
+    chapter2-methods \
+    chapter3-bindings \
+    chapter4-customPropertyTypes \
+    chapter5-listproperties \
+    chapter6-plugins 
+
diff --git a/examples/tutorials/helloworld/Cell.qml b/examples/tutorials/helloworld/Cell.qml
new file mode 100644
index 0000000000..7140dcb2c1
--- /dev/null
+++ b/examples/tutorials/helloworld/Cell.qml
@@ -0,0 +1,72 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+//![0]
+import QtQuick 2.0
+
+//![1]
+Item {
+    id: container
+//![4]
+    property alias cellColor: rectangle.color
+//![4]
+//![5]
+    signal clicked(color cellColor)
+//![5]
+
+    width: 40; height: 25
+//![1]
+
+//![2]
+    Rectangle {
+        id: rectangle
+        border.color: "white"
+        anchors.fill: parent
+    }
+//![2]
+
+//![3]
+    MouseArea {
+        anchors.fill: parent
+        onClicked: container.clicked(container.cellColor)
+    }
+//![3]
+}
+//![0]
diff --git a/examples/tutorials/helloworld/tutorial1.qml b/examples/tutorials/helloworld/tutorial1.qml
new file mode 100644
index 0000000000..f0eb42d696
--- /dev/null
+++ b/examples/tutorials/helloworld/tutorial1.qml
@@ -0,0 +1,63 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+//![0]
+//![3]
+import QtQuick 2.0
+//![3]
+
+//![1]
+Rectangle {
+    id: page
+    width: 500; height: 200
+    color: "lightgray"
+//![1]
+
+//![2]
+    Text {
+        id: helloText
+        text: "Hello world!"
+        y: 30
+        anchors.horizontalCenter: page.horizontalCenter
+        font.pointSize: 24; font.bold: true
+    }
+//![2]
+}
+//![0]
diff --git a/examples/tutorials/helloworld/tutorial2.qml b/examples/tutorials/helloworld/tutorial2.qml
new file mode 100644
index 0000000000..c5c045aace
--- /dev/null
+++ b/examples/tutorials/helloworld/tutorial2.qml
@@ -0,0 +1,72 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+//![0]
+import QtQuick 2.0
+
+Rectangle {
+    id: page
+    width: 500; height: 200
+    color: "lightgray"
+
+    Text {
+        id: helloText
+        text: "Hello world!"
+        y: 30
+        anchors.horizontalCenter: page.horizontalCenter
+        font.pointSize: 24; font.bold: true
+    }
+
+    Grid {
+        id: colorPicker
+        x: 4; anchors.bottom: page.bottom; anchors.bottomMargin: 4
+        rows: 2; columns: 3; spacing: 3
+
+//![1]
+        Cell { cellColor: "red"; onClicked: helloText.color = cellColor }
+//![1]
+        Cell { cellColor: "green"; onClicked: helloText.color = cellColor }
+        Cell { cellColor: "blue"; onClicked: helloText.color = cellColor }
+        Cell { cellColor: "yellow"; onClicked: helloText.color = cellColor }
+        Cell { cellColor: "steelblue"; onClicked: helloText.color = cellColor }
+        Cell { cellColor: "black"; onClicked: helloText.color = cellColor }
+    }
+}
+//![0]
diff --git a/examples/tutorials/helloworld/tutorial3.qml b/examples/tutorials/helloworld/tutorial3.qml
new file mode 100644
index 0000000000..c804bfca1d
--- /dev/null
+++ b/examples/tutorials/helloworld/tutorial3.qml
@@ -0,0 +1,91 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+//![0]
+import QtQuick 2.0
+
+Rectangle {
+    id: page
+    width: 500; height: 200
+    color: "lightgray"
+
+    Text {
+        id: helloText
+        text: "Hello world!"
+        y: 30
+        anchors.horizontalCenter: page.horizontalCenter
+        font.pointSize: 24; font.bold: true
+
+//![1]
+        MouseArea { id: mouseArea; anchors.fill: parent }
+//![1]
+
+//![2]
+        states: State {
+            name: "down"; when: mouseArea.pressed == true
+            PropertyChanges { target: helloText; y: 160; rotation: 180; color: "red" }
+        }
+//![2]
+
+//![3]
+        transitions: Transition {
+            from: ""; to: "down"; reversible: true
+            ParallelAnimation {
+                NumberAnimation { properties: "y,rotation"; duration: 500; easing.type: Easing.InOutQuad }
+                ColorAnimation { duration: 500 }
+            }
+        }
+//![3]
+    }
+
+    Grid {
+        id: colorPicker
+        x: 4; anchors.bottom: page.bottom; anchors.bottomMargin: 4
+        rows: 2; columns: 3; spacing: 3
+
+        Cell { cellColor: "red"; onClicked: helloText.color = cellColor }
+        Cell { cellColor: "green"; onClicked: helloText.color = cellColor }
+        Cell { cellColor: "blue"; onClicked: helloText.color = cellColor }
+        Cell { cellColor: "yellow"; onClicked: helloText.color = cellColor }
+        Cell { cellColor: "steelblue"; onClicked: helloText.color = cellColor }
+        Cell { cellColor: "black"; onClicked: helloText.color = cellColor }
+    }
+}
+//![0]
diff --git a/examples/tutorials/samegame/samegame1/Block.qml b/examples/tutorials/samegame/samegame1/Block.qml
new file mode 100644
index 0000000000..32ef8c2bba
--- /dev/null
+++ b/examples/tutorials/samegame/samegame1/Block.qml
@@ -0,0 +1,53 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+//![0]
+import QtQuick 2.0
+
+Item {
+    id: block
+
+    Image {
+        id: img
+        anchors.fill: parent
+        source: "../shared/pics/redStone.png"
+    }
+}
+//![0]
diff --git a/examples/tutorials/samegame/samegame1/Button.qml b/examples/tutorials/samegame/samegame1/Button.qml
new file mode 100644
index 0000000000..6d1d1268de
--- /dev/null
+++ b/examples/tutorials/samegame/samegame1/Button.qml
@@ -0,0 +1,83 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+//![0]
+import QtQuick 2.0
+
+Rectangle {
+    id: container
+
+    property string text: "Button"
+
+    signal clicked
+
+    width: buttonLabel.width + 20; height: buttonLabel.height + 5
+    border { width: 1; color: Qt.darker(activePalette.button) }
+    smooth: true
+    radius: 8
+
+    // color the button with a gradient
+    gradient: Gradient {
+        GradientStop {
+            position: 0.0
+            color: {
+                if (mouseArea.pressed)
+                    return activePalette.dark
+                else
+                    return activePalette.light
+            }
+        }
+        GradientStop { position: 1.0; color: activePalette.button }
+    }
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        onClicked: container.clicked();
+    }
+
+    Text {
+        id: buttonLabel
+        anchors.centerIn: container
+        color: activePalette.buttonText
+        text: container.text
+    }
+}
+//![0]
diff --git a/examples/tutorials/samegame/samegame1/samegame.qml b/examples/tutorials/samegame/samegame1/samegame.qml
new file mode 100644
index 0000000000..73e2cc31fd
--- /dev/null
+++ b/examples/tutorials/samegame/samegame1/samegame.qml
@@ -0,0 +1,82 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+//![0]
+import QtQuick 2.0
+
+Rectangle {
+    id: screen
+
+    width: 490; height: 720
+
+    SystemPalette { id: activePalette }
+
+    Item {
+        width: parent.width
+        anchors { top: parent.top; bottom: toolBar.top }
+
+        Image {
+            id: background
+            anchors.fill: parent
+            source: "../shared/pics/background.jpg"
+            fillMode: Image.PreserveAspectCrop
+        }
+    }
+
+    Rectangle {
+        id: toolBar
+        width: parent.width; height: 30
+        color: activePalette.window
+        anchors.bottom: screen.bottom
+
+        Button {
+            anchors { left: parent.left; verticalCenter: parent.verticalCenter }
+            text: "New Game" 
+            onClicked: console.log("This doesn't do anything yet...")
+        }
+
+        Text {
+            id: score
+            anchors { right: parent.right; verticalCenter: parent.verticalCenter }
+            text: "Score: Who knows?"
+        }
+    }
+}
+//![0]
diff --git a/examples/tutorials/samegame/samegame1/samegame1.qmlproject b/examples/tutorials/samegame/samegame1/samegame1.qmlproject
new file mode 100644
index 0000000000..42ffacf4f8
--- /dev/null
+++ b/examples/tutorials/samegame/samegame1/samegame1.qmlproject
@@ -0,0 +1,16 @@
+import QmlProject 1.1
+
+Project {
+    mainFile: "samegame.qml"
+
+    /* Include .qml, .js, and image files from current directory and subdirectories */
+    QmlFiles {
+        directory: "."
+    }
+    JavaScriptFiles {
+        directory: "."
+    }
+    ImageFiles {
+        directory: "."
+    }
+}
diff --git a/examples/tutorials/samegame/samegame2/Block.qml b/examples/tutorials/samegame/samegame2/Block.qml
new file mode 100644
index 0000000000..8056b39480
--- /dev/null
+++ b/examples/tutorials/samegame/samegame2/Block.qml
@@ -0,0 +1,51 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Item {
+    id: block
+
+    Image {
+        id: img
+        anchors.fill: parent
+        source: "../shared/pics/redStone.png"
+    }
+}
diff --git a/examples/tutorials/samegame/samegame2/Button.qml b/examples/tutorials/samegame/samegame2/Button.qml
new file mode 100644
index 0000000000..248c20cf0f
--- /dev/null
+++ b/examples/tutorials/samegame/samegame2/Button.qml
@@ -0,0 +1,81 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Rectangle {
+    id: container
+
+    property string text: "Button"
+
+    signal clicked
+
+    width: buttonLabel.width + 20; height: buttonLabel.height + 5
+    border { width: 1; color: Qt.darker(activePalette.button) }
+    smooth: true
+    radius: 8
+
+    // color the button with a gradient
+    gradient: Gradient {
+        GradientStop {
+            position: 0.0
+            color: {
+                if (mouseArea.pressed)
+                    return activePalette.dark
+                else
+                    return activePalette.light
+            }
+        }
+        GradientStop { position: 1.0; color: activePalette.button }
+    }
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        onClicked: container.clicked();
+    }
+
+    Text {
+        id: buttonLabel
+        anchors.centerIn: container
+        color: activePalette.buttonText
+        text: container.text
+    }
+}
diff --git a/examples/tutorials/samegame/samegame2/samegame.js b/examples/tutorials/samegame/samegame2/samegame.js
new file mode 100644
index 0000000000..c749dc17b1
--- /dev/null
+++ b/examples/tutorials/samegame/samegame2/samegame.js
@@ -0,0 +1,63 @@
+//![0]
+var blockSize = 40;
+var maxColumn = 10;
+var maxRow = 15;
+var maxIndex = maxColumn * maxRow;
+var board = new Array(maxIndex);
+var component;
+
+//Index function used instead of a 2D array
+function index(column, row) {
+    return column + (row * maxColumn);
+}
+
+function startNewGame() {
+    //Delete blocks from previous game
+    for (var i = 0; i < maxIndex; i++) {
+        if (board[i] != null)
+            board[i].destroy();
+    }
+
+    //Calculate board size
+    maxColumn = Math.floor(background.width / blockSize);
+    maxRow = Math.floor(background.height / blockSize);
+    maxIndex = maxRow * maxColumn;
+
+    //Initialize Board
+    board = new Array(maxIndex);
+    for (var column = 0; column < maxColumn; column++) {
+        for (var row = 0; row < maxRow; row++) {
+            board[index(column, row)] = null;
+            createBlock(column, row);
+        }
+    }
+}
+
+function createBlock(column, row) {
+    if (component == null)
+        component = Qt.createComponent("Block.qml");
+
+    // Note that if Block.qml was not a local file, component.status would be
+    // Loading and we should wait for the component's statusChanged() signal to
+    // know when the file is downloaded and ready before calling createObject().
+    if (component.status == Component.Ready) {
+        var dynamicObject = component.createObject(background);
+        if (dynamicObject == null) {
+            console.log("error creating block");
+            console.log(component.errorString());
+            return false;
+        }
+        dynamicObject.x = column * blockSize;
+        dynamicObject.y = row * blockSize;
+        dynamicObject.width = blockSize;
+        dynamicObject.height = blockSize;
+        board[index(column, row)] = dynamicObject;
+    } else {
+        console.log("error loading block component");
+        console.log(component.errorString());
+        return false;
+    }
+    return true;
+}
+//![0]
+
diff --git a/examples/tutorials/samegame/samegame2/samegame.qml b/examples/tutorials/samegame/samegame2/samegame.qml
new file mode 100644
index 0000000000..c50010e97d
--- /dev/null
+++ b/examples/tutorials/samegame/samegame2/samegame.qml
@@ -0,0 +1,85 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+//![2]
+import "samegame.js" as SameGame
+//![2]
+
+Rectangle {
+    id: screen
+
+    width: 490; height: 720
+
+    SystemPalette { id: activePalette }
+
+    Item {
+        width: parent.width
+        anchors { top: parent.top; bottom: toolBar.top }
+
+        Image {
+            id: background
+            anchors.fill: parent
+            source: "../shared/pics/background.jpg"
+            fillMode: Image.PreserveAspectCrop
+        }
+    }
+
+    Rectangle {
+        id: toolBar
+        width: parent.width; height: 32
+        color: activePalette.window
+        anchors.bottom: screen.bottom
+
+//![1]
+        Button {
+            anchors { left: parent.left; verticalCenter: parent.verticalCenter }
+            text: "New Game"
+            onClicked: SameGame.startNewGame()
+        }
+//![1]
+
+        Text {
+            id: score
+            anchors { right: parent.right; verticalCenter: parent.verticalCenter }
+            text: "Score: Who knows?"
+        }
+    }
+}
diff --git a/examples/tutorials/samegame/samegame2/samegame2.qmlproject b/examples/tutorials/samegame/samegame2/samegame2.qmlproject
new file mode 100644
index 0000000000..42ffacf4f8
--- /dev/null
+++ b/examples/tutorials/samegame/samegame2/samegame2.qmlproject
@@ -0,0 +1,16 @@
+import QmlProject 1.1
+
+Project {
+    mainFile: "samegame.qml"
+
+    /* Include .qml, .js, and image files from current directory and subdirectories */
+    QmlFiles {
+        directory: "."
+    }
+    JavaScriptFiles {
+        directory: "."
+    }
+    ImageFiles {
+        directory: "."
+    }
+}
diff --git a/examples/tutorials/samegame/samegame3/Block.qml b/examples/tutorials/samegame/samegame3/Block.qml
new file mode 100644
index 0000000000..9c41048fcb
--- /dev/null
+++ b/examples/tutorials/samegame/samegame3/Block.qml
@@ -0,0 +1,63 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+//![0]
+import QtQuick 2.0
+
+Item {
+    id: block
+
+    property int type: 0
+
+    Image {
+        id: img
+
+        anchors.fill: parent
+        source: {
+            if (type == 0)
+                return "../shared/pics/redStone.png";
+            else if (type == 1) 
+                return "../shared/pics/blueStone.png";
+            else
+                return "../shared/pics/greenStone.png";
+        }
+    }
+}
+//![0]
diff --git a/examples/tutorials/samegame/samegame3/Button.qml b/examples/tutorials/samegame/samegame3/Button.qml
new file mode 100644
index 0000000000..248c20cf0f
--- /dev/null
+++ b/examples/tutorials/samegame/samegame3/Button.qml
@@ -0,0 +1,81 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Rectangle {
+    id: container
+
+    property string text: "Button"
+
+    signal clicked
+
+    width: buttonLabel.width + 20; height: buttonLabel.height + 5
+    border { width: 1; color: Qt.darker(activePalette.button) }
+    smooth: true
+    radius: 8
+
+    // color the button with a gradient
+    gradient: Gradient {
+        GradientStop {
+            position: 0.0
+            color: {
+                if (mouseArea.pressed)
+                    return activePalette.dark
+                else
+                    return activePalette.light
+            }
+        }
+        GradientStop { position: 1.0; color: activePalette.button }
+    }
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        onClicked: container.clicked();
+    }
+
+    Text {
+        id: buttonLabel
+        anchors.centerIn: container
+        color: activePalette.buttonText
+        text: container.text
+    }
+}
diff --git a/examples/tutorials/samegame/samegame3/Dialog.qml b/examples/tutorials/samegame/samegame3/Dialog.qml
new file mode 100644
index 0000000000..df1fa37d6a
--- /dev/null
+++ b/examples/tutorials/samegame/samegame3/Dialog.qml
@@ -0,0 +1,71 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+//![0]
+import QtQuick 2.0
+
+Rectangle {
+    id: container
+
+    function show(text) {
+        dialogText.text = text;
+        container.opacity = 1;
+    }
+
+    function hide() {
+        container.opacity = 0;
+    }
+
+    width: dialogText.width + 20
+    height: dialogText.height + 20
+    opacity: 0
+
+    Text {
+        id: dialogText
+        anchors.centerIn: parent
+        text: ""
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: hide();
+    }
+}
+//![0]
diff --git a/examples/tutorials/samegame/samegame3/samegame.js b/examples/tutorials/samegame/samegame3/samegame.js
new file mode 100644
index 0000000000..df5bdfb049
--- /dev/null
+++ b/examples/tutorials/samegame/samegame3/samegame.js
@@ -0,0 +1,174 @@
+/* This script file handles the game logic */
+var maxColumn = 10;
+var maxRow = 15;
+var maxIndex = maxColumn * maxRow;
+var board = new Array(maxIndex);
+var component;
+
+//Index function used instead of a 2D array
+function index(column, row) {
+    return column + (row * maxColumn);
+}
+
+function startNewGame() {
+    //Calculate board size
+    maxColumn = Math.floor(gameCanvas.width / gameCanvas.blockSize);
+    maxRow = Math.floor(gameCanvas.height / gameCanvas.blockSize);
+    maxIndex = maxRow * maxColumn;
+
+    //Close dialogs
+    dialog.hide();
+
+    //Initialize Board
+    board = new Array(maxIndex);
+    gameCanvas.score = 0;
+    for (var column = 0; column < maxColumn; column++) {
+        for (var row = 0; row < maxRow; row++) {
+            board[index(column, row)] = null;
+            createBlock(column, row);
+        }
+    }
+}
+
+function createBlock(column, row) {
+    if (component == null)
+        component = Qt.createComponent("Block.qml");
+
+    // Note that if Block.qml was not a local file, component.status would be
+    // Loading and we should wait for the component's statusChanged() signal to
+    // know when the file is downloaded and ready before calling createObject().
+    if (component.status == Component.Ready) {
+        var dynamicObject = component.createObject(gameCanvas);
+        if (dynamicObject == null) {
+            console.log("error creating block");
+            console.log(component.errorString());
+            return false;
+        }
+        dynamicObject.type = Math.floor(Math.random() * 3);
+        dynamicObject.x = column * gameCanvas.blockSize;
+        dynamicObject.y = row * gameCanvas.blockSize;
+        dynamicObject.width = gameCanvas.blockSize;
+        dynamicObject.height = gameCanvas.blockSize;
+        board[index(column, row)] = dynamicObject;
+    } else {
+        console.log("error loading block component");
+        console.log(component.errorString());
+        return false;
+    }
+    return true;
+}
+
+var fillFound; //Set after a floodFill call to the number of blocks found
+var floodBoard; //Set to 1 if the floodFill reaches off that node
+
+//![1]
+function handleClick(xPos, yPos) {
+    var column = Math.floor(xPos / gameCanvas.blockSize);
+    var row = Math.floor(yPos / gameCanvas.blockSize);
+    if (column >= maxColumn || column < 0 || row >= maxRow || row < 0)
+        return;
+    if (board[index(column, row)] == null)
+        return;
+    //If it's a valid block, remove it and all connected (does nothing if it's not connected)
+    floodFill(column, row, -1);
+    if (fillFound <= 0)
+        return;
+    gameCanvas.score += (fillFound - 1) * (fillFound - 1);
+    shuffleDown();
+    victoryCheck();
+}
+//![1]
+
+function floodFill(column, row, type) {
+    if (board[index(column, row)] == null)
+        return;
+    var first = false;
+    if (type == -1) {
+        first = true;
+        type = board[index(column, row)].type;
+
+        //Flood fill initialization
+        fillFound = 0;
+        floodBoard = new Array(maxIndex);
+    }
+    if (column >= maxColumn || column < 0 || row >= maxRow || row < 0)
+        return;
+    if (floodBoard[index(column, row)] == 1 || (!first && type != board[index(column, row)].type))
+        return;
+    floodBoard[index(column, row)] = 1;
+    floodFill(column + 1, row, type);
+    floodFill(column - 1, row, type);
+    floodFill(column, row + 1, type);
+    floodFill(column, row - 1, type);
+    if (first == true && fillFound == 0)
+        return;     //Can't remove single blocks
+    board[index(column, row)].opacity = 0;
+    board[index(column, row)] = null;
+    fillFound += 1;
+}
+
+function shuffleDown() {
+    //Fall down
+    for (var column = 0; column < maxColumn; column++) {
+        var fallDist = 0;
+        for (var row = maxRow - 1; row >= 0; row--) {
+            if (board[index(column, row)] == null) {
+                fallDist += 1;
+            } else {
+                if (fallDist > 0) {
+                    var obj = board[index(column, row)];
+                    obj.y += fallDist * gameCanvas.blockSize;
+                    board[index(column, row + fallDist)] = obj;
+                    board[index(column, row)] = null;
+                }
+            }
+        }
+    }
+    //Fall to the left
+    var fallDist = 0;
+    for (var column = 0; column < maxColumn; column++) {
+        if (board[index(column, maxRow - 1)] == null) {
+            fallDist += 1;
+        } else {
+            if (fallDist > 0) {
+                for (var row = 0; row < maxRow; row++) {
+                    var obj = board[index(column, row)];
+                    if (obj == null)
+                        continue;
+                    obj.x -= fallDist * gameCanvas.blockSize;
+                    board[index(column - fallDist, row)] = obj;
+                    board[index(column, row)] = null;
+                }
+            }
+        }
+    }
+}
+
+//![2]
+function victoryCheck() {
+    //Award bonus points if no blocks left
+    var deservesBonus = true;
+    for (var column = maxColumn - 1; column >= 0; column--)
+        if (board[index(column, maxRow - 1)] != null)
+        deservesBonus = false;
+    if (deservesBonus)
+        gameCanvas.score += 500;
+
+    //Check whether game has finished
+    if (deservesBonus || !(floodMoveCheck(0, maxRow - 1, -1)))
+        dialog.show("Game Over. Your score is " + gameCanvas.score);
+}
+//![2]
+
+//only floods up and right, to see if it can find adjacent same-typed blocks 
+function floodMoveCheck(column, row, type) {
+    if (column >= maxColumn || column < 0 || row >= maxRow || row < 0)
+        return false;
+    if (board[index(column, row)] == null)
+        return false;
+    var myType = board[index(column, row)].type;
+    if (type == myType)
+        return true;
+    return floodMoveCheck(column + 1, row, myType) || floodMoveCheck(column, row - 1, board[index(column, row)].type);
+}
+
diff --git a/examples/tutorials/samegame/samegame3/samegame.qml b/examples/tutorials/samegame/samegame3/samegame.qml
new file mode 100644
index 0000000000..f14829ef63
--- /dev/null
+++ b/examples/tutorials/samegame/samegame3/samegame.qml
@@ -0,0 +1,109 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+//![0]
+import QtQuick 2.0
+import "samegame.js" as SameGame
+
+Rectangle {
+    id: screen
+
+    width: 490; height: 720
+
+    SystemPalette { id: activePalette }
+
+    Item {
+        width: parent.width
+        anchors { top: parent.top; bottom: toolBar.top }
+
+        Image {
+            id: background
+            anchors.fill: parent
+            source: "../shared/pics/background.jpg"
+            fillMode: Image.PreserveAspectCrop
+        }
+
+//![1]
+        Item {
+            id: gameCanvas
+
+            property int score: 0
+            property int blockSize: 40
+
+            width: parent.width - (parent.width % blockSize)
+            height: parent.height - (parent.height % blockSize)
+            anchors.centerIn: parent
+
+            MouseArea {
+                anchors.fill: parent
+                onClicked: SameGame.handleClick(mouse.x, mouse.y)
+            }
+        }
+//![1]
+    }
+
+//![2]
+    Dialog {
+        id: dialog
+        anchors.centerIn: parent
+        z: 100
+    }
+//![2]
+
+    Rectangle {
+        id: toolBar
+        width: parent.width; height: 30
+        color: activePalette.window
+        anchors.bottom: screen.bottom
+
+        Button {
+            anchors { left: parent.left; verticalCenter: parent.verticalCenter }
+            text: "New Game"
+            onClicked: SameGame.startNewGame()
+        }
+
+        Text {
+            id: score
+            anchors { right: parent.right; verticalCenter: parent.verticalCenter }
+            text: "Score: Who knows?"
+        }
+    }
+}
+//![0]
diff --git a/examples/tutorials/samegame/samegame3/samegame3.qmlproject b/examples/tutorials/samegame/samegame3/samegame3.qmlproject
new file mode 100644
index 0000000000..42ffacf4f8
--- /dev/null
+++ b/examples/tutorials/samegame/samegame3/samegame3.qmlproject
@@ -0,0 +1,16 @@
+import QmlProject 1.1
+
+Project {
+    mainFile: "samegame.qml"
+
+    /* Include .qml, .js, and image files from current directory and subdirectories */
+    QmlFiles {
+        directory: "."
+    }
+    JavaScriptFiles {
+        directory: "."
+    }
+    ImageFiles {
+        directory: "."
+    }
+}
diff --git a/examples/tutorials/samegame/samegame4/content/BoomBlock.qml b/examples/tutorials/samegame/samegame4/content/BoomBlock.qml
new file mode 100644
index 0000000000..3786b9c0d1
--- /dev/null
+++ b/examples/tutorials/samegame/samegame4/content/BoomBlock.qml
@@ -0,0 +1,122 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import Qt.labs.particles 1.0
+
+Item {
+    id: block
+
+    property int type: 0
+    property bool dying: false
+
+    //![1]
+    property bool spawned: false
+
+    Behavior on x {
+        enabled: spawned;
+        SpringAnimation{ spring: 2; damping: 0.2 }
+    }
+    Behavior on y {
+        SpringAnimation{ spring: 2; damping: 0.2 }
+    }
+    //![1]
+
+    //![2]
+    Image {
+        id: img
+
+        anchors.fill: parent
+        source: {
+            if (type == 0)
+                return "../../shared/pics/redStone.png";
+            else if (type == 1)
+                return "../../shared/pics/blueStone.png";
+            else
+                return "../../shared/pics/greenStone.png";
+        }
+        opacity: 0
+
+        Behavior on opacity {
+            NumberAnimation { properties:"opacity"; duration: 200 }
+        }
+    }
+    //![2]
+
+    //![3]
+    Particles {
+        id: particles
+
+        width: 1; height: 1
+        anchors.centerIn: parent
+
+        emissionRate: 0
+        lifeSpan: 700; lifeSpanDeviation: 600
+        angle: 0; angleDeviation: 360;
+        velocity: 100; velocityDeviation: 30
+        source: {
+            if (type == 0)
+                return "../../shared/pics/redStar.png";
+            else if (type == 1) 
+                return "../../shared/pics/blueStar.png";
+            else
+                return "../../shared/pics/greenStar.png";
+        }
+    }
+    //![3]
+
+    //![4]
+    states: [
+        State {
+            name: "AliveState"
+            when: spawned == true && dying == false
+            PropertyChanges { target: img; opacity: 1 }
+        },
+
+        State {
+            name: "DeathState"
+            when: dying == true
+            StateChangeScript { script: particles.burst(50); }
+            PropertyChanges { target: img; opacity: 0 }
+            StateChangeScript { script: block.destroy(1000); }
+        }
+    ]
+    //![4]
+}
diff --git a/examples/tutorials/samegame/samegame4/content/Button.qml b/examples/tutorials/samegame/samegame4/content/Button.qml
new file mode 100644
index 0000000000..248c20cf0f
--- /dev/null
+++ b/examples/tutorials/samegame/samegame4/content/Button.qml
@@ -0,0 +1,81 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Rectangle {
+    id: container
+
+    property string text: "Button"
+
+    signal clicked
+
+    width: buttonLabel.width + 20; height: buttonLabel.height + 5
+    border { width: 1; color: Qt.darker(activePalette.button) }
+    smooth: true
+    radius: 8
+
+    // color the button with a gradient
+    gradient: Gradient {
+        GradientStop {
+            position: 0.0
+            color: {
+                if (mouseArea.pressed)
+                    return activePalette.dark
+                else
+                    return activePalette.light
+            }
+        }
+        GradientStop { position: 1.0; color: activePalette.button }
+    }
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        onClicked: container.clicked();
+    }
+
+    Text {
+        id: buttonLabel
+        anchors.centerIn: container
+        color: activePalette.buttonText
+        text: container.text
+    }
+}
diff --git a/examples/tutorials/samegame/samegame4/content/Dialog.qml b/examples/tutorials/samegame/samegame4/content/Dialog.qml
new file mode 100644
index 0000000000..984b3ddb6a
--- /dev/null
+++ b/examples/tutorials/samegame/samegame4/content/Dialog.qml
@@ -0,0 +1,107 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+//![0]
+Rectangle {
+    id: container
+//![0]
+
+//![1]
+    property string inputText: textInput.text
+    signal closed
+
+    function show(text) {
+        dialogText.text = text;
+        container.opacity = 1;
+        textInput.opacity = 0;
+    }
+
+    function showWithInput(text) {
+        show(text);
+        textInput.opacity = 1;
+        textInput.focus = true;
+        textInput.text = ""
+    }
+
+    function hide() {
+        textInput.focus = false;
+        container.opacity = 0;
+        container.closed();
+    }
+//![1]
+
+    width: dialogText.width + textInput.width + 20
+    height: dialogText.height + 20
+    opacity: 0
+    visible: opacity > 0
+
+    Text {
+        id: dialogText
+        anchors { verticalCenter: parent.verticalCenter; left: parent.left; leftMargin: 10 }
+        text: ""
+    }
+
+//![2]
+    TextInput {
+        id: textInput
+        anchors { verticalCenter: parent.verticalCenter; left: dialogText.right }
+        width: 80
+        text: ""
+
+        onAccepted: container.hide()    // close dialog when Enter is pressed
+    }
+//![2]
+
+    MouseArea {
+        anchors.fill: parent
+
+        onClicked:  {
+            if (textInput.text == "" && textInput.opacity > 0)
+                textInput.openSoftwareInputPanel();
+            else
+                hide();
+        }
+    }
+
+//![3]
+}
+//![3]
diff --git a/examples/tutorials/samegame/samegame4/content/samegame.js b/examples/tutorials/samegame/samegame4/content/samegame.js
new file mode 100755
index 0000000000..7bb7243914
--- /dev/null
+++ b/examples/tutorials/samegame/samegame4/content/samegame.js
@@ -0,0 +1,226 @@
+/* This script file handles the game logic */
+.import QtQuick.LocalStorage 2.0 as Sql
+
+var maxColumn = 10;
+var maxRow = 15;
+var maxIndex = maxColumn * maxRow;
+var board = new Array(maxIndex);
+var component;
+var scoresURL = "";
+var gameDuration;
+
+//Index function used instead of a 2D array
+function index(column, row) {
+    return column + (row * maxColumn);
+}
+
+function startNewGame() {
+    //Delete blocks from previous game
+    for (var i = 0; i < maxIndex; i++) {
+        if (board[i] != null)
+            board[i].destroy();
+    }
+
+    //Calculate board size
+    maxColumn = Math.floor(gameCanvas.width / gameCanvas.blockSize);
+    maxRow = Math.floor(gameCanvas.height / gameCanvas.blockSize);
+    maxIndex = maxRow * maxColumn;
+
+    //Close dialogs
+    nameInputDialog.hide();
+    dialog.hide();
+
+    //Initialize Board
+    board = new Array(maxIndex);
+    gameCanvas.score = 0;
+    for (var column = 0; column < maxColumn; column++) {
+        for (var row = 0; row < maxRow; row++) {
+            board[index(column, row)] = null;
+            createBlock(column, row);
+        }
+    }
+
+    gameDuration = new Date();
+}
+
+function createBlock(column, row) {
+    if (component == null)
+        component = Qt.createComponent("content/BoomBlock.qml");
+
+    // Note that if Block.qml was not a local file, component.status would be
+    // Loading and we should wait for the component's statusChanged() signal to
+    // know when the file is downloaded and ready before calling createObject().
+    if (component.status == Component.Ready) {
+        var dynamicObject = component.createObject(gameCanvas);
+        if (dynamicObject == null) {
+            console.log("error creating block");
+            console.log(component.errorString());
+            return false;
+        }
+        dynamicObject.type = Math.floor(Math.random() * 3);
+        dynamicObject.x = column * gameCanvas.blockSize;
+        dynamicObject.y = row * gameCanvas.blockSize;
+        dynamicObject.width = gameCanvas.blockSize;
+        dynamicObject.height = gameCanvas.blockSize;
+        dynamicObject.spawned = true;
+        board[index(column, row)] = dynamicObject;
+    } else {
+        console.log("error loading block component");
+        console.log(component.errorString());
+        return false;
+    }
+    return true;
+}
+
+var fillFound; //Set after a floodFill call to the number of blocks found
+var floodBoard; //Set to 1 if the floodFill reaches off that node
+
+function handleClick(xPos, yPos) {
+    var column = Math.floor(xPos / gameCanvas.blockSize);
+    var row = Math.floor(yPos / gameCanvas.blockSize);
+    if (column >= maxColumn || column < 0 || row >= maxRow || row < 0)
+        return;
+    if (board[index(column, row)] == null)
+        return;
+    //If it's a valid block, remove it and all connected (does nothing if it's not connected)
+    floodFill(column, row, -1);
+    if (fillFound <= 0)
+        return;
+    gameCanvas.score += (fillFound - 1) * (fillFound - 1);
+    shuffleDown();
+    victoryCheck();
+}
+
+function floodFill(column, row, type) {
+    if (board[index(column, row)] == null)
+        return;
+    var first = false;
+    if (type == -1) {
+        first = true;
+        type = board[index(column, row)].type;
+
+        //Flood fill initialization
+        fillFound = 0;
+        floodBoard = new Array(maxIndex);
+    }
+    if (column >= maxColumn || column < 0 || row >= maxRow || row < 0)
+        return;
+    if (floodBoard[index(column, row)] == 1 || (!first && type != board[index(column, row)].type))
+        return;
+    floodBoard[index(column, row)] = 1;
+    floodFill(column + 1, row, type);
+    floodFill(column - 1, row, type);
+    floodFill(column, row + 1, type);
+    floodFill(column, row - 1, type);
+    if (first == true && fillFound == 0)
+        return;     //Can't remove single blocks
+    board[index(column, row)].dying = true;
+    board[index(column, row)] = null;
+    fillFound += 1;
+}
+
+function shuffleDown() {
+    //Fall down
+    for (var column = 0; column < maxColumn; column++) {
+        var fallDist = 0;
+        for (var row = maxRow - 1; row >= 0; row--) {
+            if (board[index(column, row)] == null) {
+                fallDist += 1;
+            } else {
+                if (fallDist > 0) {
+                    var obj = board[index(column, row)];
+                    obj.y = (row + fallDist) * gameCanvas.blockSize;
+                    board[index(column, row + fallDist)] = obj;
+                    board[index(column, row)] = null;
+                }
+            }
+        }
+    }
+    //Fall to the left
+    fallDist = 0;
+    for (column = 0; column < maxColumn; column++) {
+        if (board[index(column, maxRow - 1)] == null) {
+            fallDist += 1;
+        } else {
+            if (fallDist > 0) {
+                for (row = 0; row < maxRow; row++) {
+                    obj = board[index(column, row)];
+                    if (obj == null)
+                        continue;
+                    obj.x = (column - fallDist) * gameCanvas.blockSize;
+                    board[index(column - fallDist, row)] = obj;
+                    board[index(column, row)] = null;
+                }
+            }
+        }
+    }
+}
+
+//![3]
+function victoryCheck() {
+//![3]
+    //Award bonus points if no blocks left
+    var deservesBonus = true;
+    for (var column = maxColumn - 1; column >= 0; column--)
+        if (board[index(column, maxRow - 1)] != null)
+        deservesBonus = false;
+    if (deservesBonus)
+        gameCanvas.score += 500;
+
+//![4]
+    //Check whether game has finished
+    if (deservesBonus || !(floodMoveCheck(0, maxRow - 1, -1))) {
+        gameDuration = new Date() - gameDuration;
+        nameInputDialog.showWithInput("You won! Please enter your name: ");
+    }
+}
+//![4]
+
+//only floods up and right, to see if it can find adjacent same-typed blocks 
+function floodMoveCheck(column, row, type) {
+    if (column >= maxColumn || column < 0 || row >= maxRow || row < 0)
+        return false;
+    if (board[index(column, row)] == null)
+        return false;
+    var myType = board[index(column, row)].type;
+    if (type == myType)
+        return true;
+    return floodMoveCheck(column + 1, row, myType) || floodMoveCheck(column, row - 1, board[index(column, row)].type);
+}
+
+//![2]
+function saveHighScore(name) {
+    if (scoresURL != "")
+        sendHighScore(name);
+
+    var db = Sql.openDatabaseSync("SameGameScores", "1.0", "Local SameGame High Scores", 100);
+    var dataStr = "INSERT INTO Scores VALUES(?, ?, ?, ?)";
+    var data = [name, gameCanvas.score, maxColumn + "x" + maxRow, Math.floor(gameDuration / 1000)];
+    db.transaction(function(tx) {
+        tx.executeSql('CREATE TABLE IF NOT EXISTS Scores(name TEXT, score NUMBER, gridSize TEXT, time NUMBER)');
+        tx.executeSql(dataStr, data);
+
+        var rs = tx.executeSql('SELECT * FROM Scores WHERE gridSize = "12x17" ORDER BY score desc LIMIT 10');
+        var r = "\nHIGH SCORES for a standard sized grid\n\n"
+        for (var i = 0; i < rs.rows.length; i++) {
+            r += (i + 1) + ". " + rs.rows.item(i).name + ' got ' + rs.rows.item(i).score + ' points in ' + rs.rows.item(i).time + ' seconds.\n';
+        }
+        dialog.show(r);
+    });
+}
+//![2]
+
+//![1]
+function sendHighScore(name) {
+    var postman = new XMLHttpRequest()
+        var postData = "name=" + name + "&score=" + gameCanvas.score + "&gridSize=" + maxColumn + "x" + maxRow + "&time=" + Math.floor(gameDuration / 1000);
+    postman.open("POST", scoresURL, true);
+    postman.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+    postman.onreadystatechange = function() {
+        if (postman.readyState == postman.DONE) {
+            dialog.show("Your score has been uploaded.");
+        }
+    }
+    postman.send(postData);
+}
+//![1]
diff --git a/examples/tutorials/samegame/samegame4/highscores/README b/examples/tutorials/samegame/samegame4/highscores/README
new file mode 100644
index 0000000000..eaa00fae37
--- /dev/null
+++ b/examples/tutorials/samegame/samegame4/highscores/README
@@ -0,0 +1 @@
+The SameGame example can interface with a simple PHP script to store XML high score data on a remote server. We do not have a publically accessible server available for this use, but if you have access to a PHP capable webserver you can copy the files (score_data.xml, score.php, score_style.xsl) to it and alter the highscore_server variable at the top of the samegame.js file to point to it.
diff --git a/examples/tutorials/samegame/samegame4/highscores/score_data.xml b/examples/tutorials/samegame/samegame4/highscores/score_data.xml
new file mode 100755
index 0000000000..c3fd90d9cf
--- /dev/null
+++ b/examples/tutorials/samegame/samegame4/highscores/score_data.xml
@@ -0,0 +1,2 @@
+<record><score>1000000</score><name>Alan the Tester</name><gridSize>0x0</gridSize><seconds>0</seconds></record>
+<record><score>6213</score><name>Alan</name><gridSize>12x17</gridSize><seconds>51</seconds></record>
diff --git a/examples/tutorials/samegame/samegame4/highscores/score_style.xsl b/examples/tutorials/samegame/samegame4/highscores/score_style.xsl
new file mode 100755
index 0000000000..670354c965
--- /dev/null
+++ b/examples/tutorials/samegame/samegame4/highscores/score_style.xsl
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="ISO-8859-1"?>
+<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+<xsl:template match="/">
+  <html>
+  <head><title>SameGame High Scores</title></head>
+  <body>
+  <h2>SameGame High Scores</h2>
+    <table border="1">
+      <tr bgcolor="lightsteelblue">
+        <th>Name</th>
+        <th>Score</th>
+        <th>Grid Size</th>
+        <th>Time, s</th>
+      </tr>
+      <xsl:for-each select="records/record">
+      <xsl:sort select="score" data-type="number" order="descending"/>
+      <tr>
+        <td><xsl:value-of select="name"/></td>
+        <td><xsl:value-of select="score"/></td>
+        <td><xsl:value-of select="gridSize"/></td>
+        <td><xsl:value-of select="seconds"/></td>
+      </tr>
+      </xsl:for-each>
+    </table>
+  </body>
+  </html>
+</xsl:template>
+</xsl:stylesheet>
diff --git a/examples/tutorials/samegame/samegame4/highscores/scores.php b/examples/tutorials/samegame/samegame4/highscores/scores.php
new file mode 100755
index 0000000000..daf480e21b
--- /dev/null
+++ b/examples/tutorials/samegame/samegame4/highscores/scores.php
@@ -0,0 +1,31 @@
+<?php
+    $score = $_POST["score"];
+    echo "<html>";
+    echo "<head><title>SameGame High Scores</title></head><body>";
+    if($score > 0){#Sending in a new high score
+        $name = $_POST["name"];
+        $grid = $_POST["gridSize"];
+        $time = $_POST["time"];
+        if($name == "")
+            $name = "Anonymous";
+	$file = fopen("score_data.xml", "a");
+        $ret = fwrite($file, "<record><score>". $score . "</score><name>" 
+            . $name . "</name><gridSize>" . $grid . "</gridSize><seconds>"
+            . $time . "</seconds></record>\n");
+        echo "Your score has been recorded. Thanks for playing!";
+        if($ret == False)
+            echo "<br/> There was an error though, so don't expect to see that score again.";
+    }else{#Read high score list
+        #Now uses XSLT to display. So just print the file. With XML cruft added.
+        #Note that firefox at least won't apply the XSLT on a php file. So redirecting
+	$file = fopen("scores.xml", "w");
+        $ret = fwrite($file, '<?xml version="1.0" encoding="ISO-8859-1"?>' . "\n"
+            . '<?xml-stylesheet type="text/xsl" href="score_style.xsl"?>' . "\n"
+            . "<records>\n" . file_get_contents("score_data.xml") . "</records>\n");
+        if($ret == False)
+            echo "There was an internal error. Sorry.";
+        else
+            echo '<script type="text/javascript">window.location.replace("scores.xml")</script>';
+    }
+    echo "</body></html>";
+?>
diff --git a/examples/tutorials/samegame/samegame4/samegame.qml b/examples/tutorials/samegame/samegame4/samegame.qml
new file mode 100644
index 0000000000..c21b8de8bd
--- /dev/null
+++ b/examples/tutorials/samegame/samegame4/samegame.qml
@@ -0,0 +1,115 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import "content"
+import "content/samegame.js" as SameGame
+
+Rectangle {
+    id: screen
+
+    width: 490; height: 720
+
+    SystemPalette { id: activePalette }
+
+    Item {
+        width: parent.width
+        anchors { top: parent.top; bottom: toolBar.top }
+
+        Image {
+            id: background
+            anchors.fill: parent
+            source: "../shared/pics/background.jpg"
+            fillMode: Image.PreserveAspectCrop
+        }
+
+        Item {
+            id: gameCanvas
+            property int score: 0
+            property int blockSize: 40
+
+            anchors.centerIn: parent
+            width: parent.width - (parent.width % blockSize);
+            height: parent.height - (parent.height % blockSize);
+
+            MouseArea {
+                anchors.fill: parent; onClicked: SameGame.handleClick(mouse.x,mouse.y);
+            }
+        }
+    }
+
+    Dialog {
+        id: dialog
+        anchors.centerIn: parent
+        z: 100
+    }
+
+    //![0]
+    Dialog {
+        id: nameInputDialog
+        anchors.centerIn: parent
+        z: 100
+
+        onClosed: {
+            if (nameInputDialog.inputText != "")
+                SameGame.saveHighScore(nameInputDialog.inputText);
+        }
+    }
+    //![0]
+
+    Rectangle {
+        id: toolBar
+        width: parent.width; height: 30
+        color: activePalette.window
+        anchors.bottom: screen.bottom
+
+        Button {
+            anchors { left: parent.left; verticalCenter: parent.verticalCenter }
+            text: "New Game"
+            onClicked: SameGame.startNewGame()
+        }
+
+        Text {
+            id: score
+            anchors { right: parent.right; verticalCenter: parent.verticalCenter }
+            text: "Score: " + gameCanvas.score
+        }
+    }
+}
diff --git a/examples/tutorials/samegame/samegame4/samegame4.qmlproject b/examples/tutorials/samegame/samegame4/samegame4.qmlproject
new file mode 100644
index 0000000000..42ffacf4f8
--- /dev/null
+++ b/examples/tutorials/samegame/samegame4/samegame4.qmlproject
@@ -0,0 +1,16 @@
+import QmlProject 1.1
+
+Project {
+    mainFile: "samegame.qml"
+
+    /* Include .qml, .js, and image files from current directory and subdirectories */
+    QmlFiles {
+        directory: "."
+    }
+    JavaScriptFiles {
+        directory: "."
+    }
+    ImageFiles {
+        directory: "."
+    }
+}
diff --git a/examples/tutorials/samegame/shared/pics/background.jpg b/examples/tutorials/samegame/shared/pics/background.jpg
new file mode 100644
index 0000000000..903d395c8d
--- /dev/null
+++ b/examples/tutorials/samegame/shared/pics/background.jpg
diff --git a/examples/tutorials/samegame/shared/pics/blueStar.png b/examples/tutorials/samegame/shared/pics/blueStar.png
new file mode 100644
index 0000000000..ff9588f80a
--- /dev/null
+++ b/examples/tutorials/samegame/shared/pics/blueStar.png
diff --git a/examples/tutorials/samegame/shared/pics/blueStone.png b/examples/tutorials/samegame/shared/pics/blueStone.png
new file mode 100644
index 0000000000..20e43c75b6
--- /dev/null
+++ b/examples/tutorials/samegame/shared/pics/blueStone.png
diff --git a/examples/tutorials/samegame/shared/pics/greenStar.png b/examples/tutorials/samegame/shared/pics/greenStar.png
new file mode 100644
index 0000000000..cd06854719
--- /dev/null
+++ b/examples/tutorials/samegame/shared/pics/greenStar.png
diff --git a/examples/tutorials/samegame/shared/pics/greenStone.png b/examples/tutorials/samegame/shared/pics/greenStone.png
new file mode 100644
index 0000000000..b568a1900c
--- /dev/null
+++ b/examples/tutorials/samegame/shared/pics/greenStone.png
diff --git a/examples/tutorials/samegame/shared/pics/redStar.png b/examples/tutorials/samegame/shared/pics/redStar.png
new file mode 100644
index 0000000000..0a4dffe583
--- /dev/null
+++ b/examples/tutorials/samegame/shared/pics/redStar.png
diff --git a/examples/tutorials/samegame/shared/pics/redStone.png b/examples/tutorials/samegame/shared/pics/redStone.png
new file mode 100644
index 0000000000..36b09a2686
--- /dev/null
+++ b/examples/tutorials/samegame/shared/pics/redStone.png
diff --git a/examples/tutorials/samegame/shared/pics/star.png b/examples/tutorials/samegame/shared/pics/star.png
new file mode 100644
index 0000000000..defbde53ca
--- /dev/null
+++ b/examples/tutorials/samegame/shared/pics/star.png
diff --git a/examples/tutorials/samegame/shared/pics/yellowStone.png b/examples/tutorials/samegame/shared/pics/yellowStone.png
new file mode 100644
index 0000000000..b1ce76212c
--- /dev/null
+++ b/examples/tutorials/samegame/shared/pics/yellowStone.png
diff --git a/examples/tutorials/ui-components/dialcontrol/content/Dial.qml b/examples/tutorials/ui-components/dialcontrol/content/Dial.qml
new file mode 100644
index 0000000000..c61adee364
--- /dev/null
+++ b/examples/tutorials/ui-components/dialcontrol/content/Dial.qml
@@ -0,0 +1,86 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Item {
+    id: root
+    property real value : 0
+
+    width: 210; height: 210
+
+    Image { source: "background.png" }
+
+//! [needle_shadow]
+    Image {
+        x: 96
+        y: 35
+        source: "needle_shadow.png"
+        transform: Rotation {
+            origin.x: 9; origin.y: 67
+            angle: needleRotation.angle
+        }
+    }
+//! [needle_shadow]
+//! [needle]
+    Image {
+        id: needle
+        x: 98; y: 33
+        smooth: true
+        source: "needle.png"
+        transform: Rotation {
+            id: needleRotation
+            origin.x: 5; origin.y: 65
+            //! [needle angle]
+            angle: Math.min(Math.max(-130, root.value*2.6 - 130), 133)
+            Behavior on angle {
+                SpringAnimation {
+                    spring: 1.4
+                    damping: .15
+                }
+            }
+            //! [needle angle]
+        }
+    }
+//! [needle]
+//! [overlay]
+    Image { x: 21; y: 18; source: "overlay.png" }
+//! [overlay]
+}
diff --git a/examples/tutorials/ui-components/dialcontrol/content/QuitButton.qml b/examples/tutorials/ui-components/dialcontrol/content/QuitButton.qml
new file mode 100644
index 0000000000..702b892d23
--- /dev/null
+++ b/examples/tutorials/ui-components/dialcontrol/content/QuitButton.qml
@@ -0,0 +1,52 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+Image {
+    source: "quit.png"
+    scale: quitMouse.pressed ? 0.8 : 1.0
+    smooth: quitMouse.pressed
+    MouseArea {
+        id: quitMouse
+        anchors.fill: parent
+        anchors.margins: -10
+        onClicked: Qt.quit()
+    }
+}
diff --git a/examples/tutorials/ui-components/dialcontrol/content/background.png b/examples/tutorials/ui-components/dialcontrol/content/background.png
new file mode 100644
index 0000000000..75d555d7ab
--- /dev/null
+++ b/examples/tutorials/ui-components/dialcontrol/content/background.png
diff --git a/examples/tutorials/ui-components/dialcontrol/content/needle.png b/examples/tutorials/ui-components/dialcontrol/content/needle.png
new file mode 100644
index 0000000000..2d19f75039
--- /dev/null
+++ b/examples/tutorials/ui-components/dialcontrol/content/needle.png
diff --git a/examples/tutorials/ui-components/dialcontrol/content/needle_shadow.png b/examples/tutorials/ui-components/dialcontrol/content/needle_shadow.png
new file mode 100644
index 0000000000..8d8a928cc5
--- /dev/null
+++ b/examples/tutorials/ui-components/dialcontrol/content/needle_shadow.png
diff --git a/examples/tutorials/ui-components/dialcontrol/content/overlay.png b/examples/tutorials/ui-components/dialcontrol/content/overlay.png
new file mode 100644
index 0000000000..3860a7b590
--- /dev/null
+++ b/examples/tutorials/ui-components/dialcontrol/content/overlay.png
diff --git a/examples/tutorials/ui-components/dialcontrol/content/quit.png b/examples/tutorials/ui-components/dialcontrol/content/quit.png
new file mode 100644
index 0000000000..b822057d4e
--- /dev/null
+++ b/examples/tutorials/ui-components/dialcontrol/content/quit.png
diff --git a/examples/tutorials/ui-components/dialcontrol/dialcontrol.qml b/examples/tutorials/ui-components/dialcontrol/dialcontrol.qml
new file mode 100644
index 0000000000..d645b34aa4
--- /dev/null
+++ b/examples/tutorials/ui-components/dialcontrol/dialcontrol.qml
@@ -0,0 +1,98 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+//! [imports]
+import QtQuick 2.0
+import "content"
+//! [imports]
+
+//! [0]
+Rectangle {
+    color: "#545454"
+    width: 300; height: 300
+
+    // Dial with a slider to adjust it
+    Dial {
+        id: dial
+        anchors.centerIn: parent
+        value: slider.x * 100 / (container.width - 34)
+    }
+
+    Rectangle {
+        id: container
+        anchors { bottom: parent.bottom; left: parent.left
+            right: parent.right; leftMargin: 20; rightMargin: 20
+            bottomMargin: 10
+        }
+        height: 16
+
+        radius: 8
+        opacity: 0.7
+        smooth: true
+        gradient: Gradient {
+            GradientStop { position: 0.0; color: "gray" }
+            GradientStop { position: 1.0; color: "white" }
+        }
+
+        Rectangle {
+            id: slider
+            x: 1; y: 1; width: 30; height: 14
+            radius: 6
+            smooth: true
+            gradient: Gradient {
+                GradientStop { position: 0.0; color: "#424242" }
+                GradientStop { position: 1.0; color: "black" }
+            }
+
+            MouseArea {
+                anchors.fill: parent
+                anchors.margins: -16 // Increase mouse area a lot outside the slider
+                drag.target: parent; drag.axis: Drag.XAxis
+                drag.minimumX: 2; drag.maximumX: container.width - 32
+            }
+        }
+    }
+    QuitButton {
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.margins: 10
+    }
+}
+//! [0]
diff --git a/examples/tutorials/ui-components/flipable/content/5_heart.png b/examples/tutorials/ui-components/flipable/content/5_heart.png
new file mode 100644
index 0000000000..fb59d81453
--- /dev/null
+++ b/examples/tutorials/ui-components/flipable/content/5_heart.png
diff --git a/examples/tutorials/ui-components/flipable/content/9_club.png b/examples/tutorials/ui-components/flipable/content/9_club.png
new file mode 100644
index 0000000000..2545001904
--- /dev/null
+++ b/examples/tutorials/ui-components/flipable/content/9_club.png
diff --git a/examples/tutorials/ui-components/flipable/content/Card.qml b/examples/tutorials/ui-components/flipable/content/Card.qml
new file mode 100644
index 0000000000..6006ea14fc
--- /dev/null
+++ b/examples/tutorials/ui-components/flipable/content/Card.qml
@@ -0,0 +1,80 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Flipable {
+    id: container
+
+    property alias source: frontImage.source
+    property bool flipped: true
+    property int xAxis: 0
+    property int yAxis: 0
+    property int angle: 0
+
+    width: front.width; height: front.height 
+
+    front: Image { id: frontImage; smooth: true }
+    back: Image { source: "back.png"; smooth: true }
+
+    state: "back"
+
+    MouseArea { anchors.fill: parent; onClicked: container.flipped = !container.flipped }
+
+    transform: Rotation {
+        id: rotation; origin.x: container.width / 2; origin.y: container.height / 2
+        axis.x: container.xAxis; axis.y: container.yAxis; axis.z: 0
+    }
+
+    states: State {
+        name: "back"; when: container.flipped
+        PropertyChanges { target: rotation; angle: container.angle }
+    }
+
+    transitions: Transition {
+        ParallelAnimation {
+            NumberAnimation { target: rotation; properties: "angle"; duration: 600 }
+            SequentialAnimation {
+                NumberAnimation { target: container; property: "scale"; to: 0.75; duration: 300 }
+                NumberAnimation { target: container; property: "scale"; to: 1.0; duration: 300 }
+            }
+        }
+    }
+}
diff --git a/examples/tutorials/ui-components/flipable/content/back.png b/examples/tutorials/ui-components/flipable/content/back.png
new file mode 100644
index 0000000000..f715d7487e
--- /dev/null
+++ b/examples/tutorials/ui-components/flipable/content/back.png
diff --git a/examples/tutorials/ui-components/flipable/flipable.qml b/examples/tutorials/ui-components/flipable/flipable.qml
new file mode 100644
index 0000000000..4af64afc53
--- /dev/null
+++ b/examples/tutorials/ui-components/flipable/flipable.qml
@@ -0,0 +1,55 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import "content"
+
+Rectangle {
+    id: window
+    
+    width: 480; height: 320
+    color: "darkgreen"
+
+    Row {
+        anchors.centerIn: parent; spacing: 30
+        Card { source: "content/9_club.png"; angle: 180; yAxis: 1 }
+        Card { source: "content/5_heart.png"; angle: 540; xAxis: 1 }
+    }
+}
diff --git a/examples/tutorials/ui-components/progressbar/content/ProgressBar.qml b/examples/tutorials/ui-components/progressbar/content/ProgressBar.qml
new file mode 100644
index 0000000000..c9be8d7336
--- /dev/null
+++ b/examples/tutorials/ui-components/progressbar/content/ProgressBar.qml
@@ -0,0 +1,83 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Item {
+    id: progressbar
+
+    property int minimum: 0
+    property int maximum: 100
+    property int value: 0
+    property alias color: gradient1.color
+    property alias secondColor: gradient2.color
+
+    width: 250; height: 23
+    clip: true
+
+    BorderImage {
+        source: "background.png"
+        width: parent.width; height: parent.height
+        border { left: 4; top: 4; right: 4; bottom: 4 }
+    }
+
+    Rectangle {
+        id: highlight
+
+        property int widthDest: ((progressbar.width * (value - minimum)) / (maximum - minimum) - 6)
+
+        width: highlight.widthDest
+        Behavior on width { SmoothedAnimation { velocity: 1200 } }
+
+        anchors { left: parent.left; top: parent.top; bottom: parent.bottom; margins: 3 }
+        radius: 1
+        gradient: Gradient {
+            GradientStop { id: gradient1; position: 0.0 }
+            GradientStop { id: gradient2; position: 1.0 }
+        }
+
+    }
+    Text {
+        anchors { right: highlight.right; rightMargin: 6; verticalCenter: parent.verticalCenter }
+        color: "white"
+        font.bold: true
+        text: Math.floor((value - minimum) / (maximum - minimum) * 100) + '%'
+    }
+}
diff --git a/examples/tutorials/ui-components/progressbar/content/background.png b/examples/tutorials/ui-components/progressbar/content/background.png
new file mode 100644
index 0000000000..9044226f85
--- /dev/null
+++ b/examples/tutorials/ui-components/progressbar/content/background.png
diff --git a/examples/tutorials/ui-components/progressbar/main.qml b/examples/tutorials/ui-components/progressbar/main.qml
new file mode 100644
index 0000000000..367e4c1265
--- /dev/null
+++ b/examples/tutorials/ui-components/progressbar/main.qml
@@ -0,0 +1,73 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import "content"
+
+Rectangle {
+    id: main
+
+    width: 600; height: 405
+    color: "#edecec"
+
+    Flickable {
+        anchors.fill: parent
+        contentHeight: column.height + 20
+
+        Column {
+            id: column
+            x: 10; y: 10
+            spacing: 10
+
+            Repeater {
+                model: 25
+
+                ProgressBar {
+                    property int r: Math.floor(Math.random() * 5000 + 1000)
+                    width: main.width - 20
+
+                    NumberAnimation on value { duration: r; from: 0; to: 100; loops: Animation.Infinite }
+                    ColorAnimation on color { duration: r; from: "lightsteelblue"; to: "thistle"; loops: Animation.Infinite }
+                    ColorAnimation on secondColor { duration: r; from: "steelblue"; to: "#CD96CD"; loops: Animation.Infinite }
+                }
+            }
+        }
+    }
+}
diff --git a/examples/tutorials/ui-components/scrollbar/ScrollBar.qml b/examples/tutorials/ui-components/scrollbar/ScrollBar.qml
new file mode 100644
index 0000000000..a3d0d3841c
--- /dev/null
+++ b/examples/tutorials/ui-components/scrollbar/ScrollBar.qml
@@ -0,0 +1,74 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Item {
+    id: scrollBar
+
+    // The properties that define the scrollbar's state.
+    // position and pageSize are in the range 0.0 - 1.0.  They are relative to the
+    // height of the page, i.e. a pageSize of 0.5 means that you can see 50%
+    // of the height of the view.
+    // orientation can be either Qt.Vertical or Qt.Horizontal
+    property real position
+    property real pageSize
+    property variant orientation : Qt.Vertical
+
+    // A light, semi-transparent background
+    Rectangle {
+        id: background
+        anchors.fill: parent
+        radius: orientation == Qt.Vertical ? (width/2 - 1) : (height/2 - 1)
+        color: "white"
+        opacity: 0.3
+    }
+
+    // Size the bar to the required size, depending upon the orientation.
+    Rectangle {
+        x: orientation == Qt.Vertical ? 1 : (scrollBar.position * (scrollBar.width-2) + 1)
+        y: orientation == Qt.Vertical ? (scrollBar.position * (scrollBar.height-2) + 1) : 1
+        width: orientation == Qt.Vertical ? (parent.width-2) : (scrollBar.pageSize * (scrollBar.width-2))
+        height: orientation == Qt.Vertical ? (scrollBar.pageSize * (scrollBar.height-2)) : (parent.height-2)
+        radius: orientation == Qt.Vertical ? (width/2 - 1) : (height/2 - 1)
+        color: "black"
+        opacity: 0.7
+    }
+}
diff --git a/examples/tutorials/ui-components/scrollbar/main.qml b/examples/tutorials/ui-components/scrollbar/main.qml
new file mode 100644
index 0000000000..a7d602b437
--- /dev/null
+++ b/examples/tutorials/ui-components/scrollbar/main.qml
@@ -0,0 +1,93 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Rectangle {
+    width: 640
+    height: 480
+
+    // Create a flickable to view a large image.
+    Flickable {
+        id: view
+        anchors.fill: parent
+        contentWidth: picture.width
+        contentHeight: picture.height
+
+        Image {
+            id: picture
+            source: "pics/niagara_falls.jpg"
+            asynchronous: true
+        }
+
+        // Only show the scrollbars when the view is moving.
+        states: State {
+            name: "ShowBars"
+            when: view.movingVertically || view.movingHorizontally
+            PropertyChanges { target: verticalScrollBar; opacity: 1 }
+            PropertyChanges { target: horizontalScrollBar; opacity: 1 }
+        }
+
+        transitions: Transition {
+            NumberAnimation { properties: "opacity"; duration: 400 }
+        }
+    }
+
+    // Attach scrollbars to the right and bottom edges of the view.
+    ScrollBar {
+        id: verticalScrollBar
+        width: 12; height: view.height-12
+        anchors.right: view.right
+        opacity: 0
+        orientation: Qt.Vertical
+        position: view.visibleArea.yPosition
+        pageSize: view.visibleArea.heightRatio
+    }
+
+    ScrollBar {
+        id: horizontalScrollBar
+        width: view.width-12; height: 12
+        anchors.bottom: view.bottom
+        opacity: 0
+        orientation: Qt.Horizontal
+        position: view.visibleArea.xPosition
+        pageSize: view.visibleArea.widthRatio
+    }
+}
diff --git a/examples/tutorials/ui-components/scrollbar/pics/niagara_falls.jpg b/examples/tutorials/ui-components/scrollbar/pics/niagara_falls.jpg
new file mode 100644
index 0000000000..e625c0d3e6
--- /dev/null
+++ b/examples/tutorials/ui-components/scrollbar/pics/niagara_falls.jpg
diff --git a/examples/tutorials/ui-components/scrollbar/scrollbar.qmlproject b/examples/tutorials/ui-components/scrollbar/scrollbar.qmlproject
new file mode 100644
index 0000000000..e5a8bf02ca
--- /dev/null
+++ b/examples/tutorials/ui-components/scrollbar/scrollbar.qmlproject
@@ -0,0 +1,16 @@
+import QmlProject 1.1
+
+Project {
+    mainFile: "main.qml"
+
+    /* Include .qml, .js, and image files from current directory and subdirectories */
+    QmlFiles {
+        directory: "."
+    }
+    JavaScriptFiles {
+        directory: "."
+    }
+    ImageFiles {
+        directory: "."
+    }
+}
diff --git a/examples/tutorials/ui-components/searchbox/SearchBox.qml b/examples/tutorials/ui-components/searchbox/SearchBox.qml
new file mode 100644
index 0000000000..6f6f486412
--- /dev/null
+++ b/examples/tutorials/ui-components/searchbox/SearchBox.qml
@@ -0,0 +1,109 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+FocusScope {
+    id: focusScope
+    width: 250; height: 28
+
+    BorderImage {
+        source: "images/lineedit-bg.png"
+        width: parent.width; height: parent.height
+        border { left: 4; top: 4; right: 4; bottom: 4 }
+    }
+
+    BorderImage {
+        source: "images/lineedit-bg-focus.png"
+        width: parent.width; height: parent.height
+        border { left: 4; top: 4; right: 4; bottom: 4 }
+        visible: parent.activeFocus ? true : false
+    }
+
+    Text {
+        id: typeSomething
+        anchors.fill: parent; anchors.leftMargin: 8
+        verticalAlignment: Text.AlignVCenter
+        text: "Type something..."
+        color: "gray"
+        font.italic: true
+    }
+
+    MouseArea { 
+        anchors.fill: parent
+        onClicked: { focusScope.focus = true; textInput.openSoftwareInputPanel(); } 
+    }
+
+    TextInput {
+        id: textInput
+        anchors { left: parent.left; leftMargin: 8; right: clear.left; rightMargin: 8; verticalCenter: parent.verticalCenter }
+        focus: true
+        selectByMouse: true
+    }
+
+    Image {
+        id: clear
+        anchors { right: parent.right; rightMargin: 8; verticalCenter: parent.verticalCenter }
+        source: "images/clear.png"
+        opacity: 0
+
+        MouseArea { 
+            anchors.fill: parent
+            onClicked: { textInput.text = ''; focusScope.focus = true; textInput.openSoftwareInputPanel(); }
+        }
+    }
+
+    states: State {
+        name: "hasText"; when: textInput.text != ''
+        PropertyChanges { target: typeSomething; opacity: 0 }
+        PropertyChanges { target: clear; opacity: 1 }
+    }
+
+    transitions: [
+        Transition {
+            from: ""; to: "hasText"
+            NumberAnimation { exclude: typeSomething; properties: "opacity" }
+        },
+        Transition {
+            from: "hasText"; to: ""
+            NumberAnimation { properties: "opacity" }
+        }
+    ]
+}
diff --git a/examples/tutorials/ui-components/searchbox/images/clear.png b/examples/tutorials/ui-components/searchbox/images/clear.png
new file mode 100644
index 0000000000..91eb270695
--- /dev/null
+++ b/examples/tutorials/ui-components/searchbox/images/clear.png
diff --git a/examples/tutorials/ui-components/searchbox/images/lineedit-bg-focus.png b/examples/tutorials/ui-components/searchbox/images/lineedit-bg-focus.png
new file mode 100644
index 0000000000..bbfac38d2d
--- /dev/null
+++ b/examples/tutorials/ui-components/searchbox/images/lineedit-bg-focus.png
diff --git a/examples/tutorials/ui-components/searchbox/images/lineedit-bg.png b/examples/tutorials/ui-components/searchbox/images/lineedit-bg.png
new file mode 100644
index 0000000000..9044226f85
--- /dev/null
+++ b/examples/tutorials/ui-components/searchbox/images/lineedit-bg.png
diff --git a/examples/tutorials/ui-components/searchbox/main.qml b/examples/tutorials/ui-components/searchbox/main.qml
new file mode 100644
index 0000000000..6e9731cf9c
--- /dev/null
+++ b/examples/tutorials/ui-components/searchbox/main.qml
@@ -0,0 +1,60 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Rectangle {
+    id: page
+    width: 500; height: 250
+    color: "#edecec"
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: page.focus = false;
+    }
+    Column {
+        anchors { horizontalCenter: parent.horizontalCenter; verticalCenter: parent.verticalCenter }
+        spacing: 10
+
+        SearchBox { id: search1; KeyNavigation.tab: search2; KeyNavigation.backtab: search3; focus: true }
+        SearchBox { id: search2; KeyNavigation.tab: search3; KeyNavigation.backtab: search1 }
+        SearchBox { id: search3; KeyNavigation.tab: search1; KeyNavigation.backtab: search2 }
+    }
+}
diff --git a/examples/tutorials/ui-components/searchbox/searchbox.qmlproject b/examples/tutorials/ui-components/searchbox/searchbox.qmlproject
new file mode 100644
index 0000000000..e5a8bf02ca
--- /dev/null
+++ b/examples/tutorials/ui-components/searchbox/searchbox.qmlproject
@@ -0,0 +1,16 @@
+import QmlProject 1.1
+
+Project {
+    mainFile: "main.qml"
+
+    /* Include .qml, .js, and image files from current directory and subdirectories */
+    QmlFiles {
+        directory: "."
+    }
+    JavaScriptFiles {
+        directory: "."
+    }
+    ImageFiles {
+        directory: "."
+    }
+}
diff --git a/examples/tutorials/ui-components/slideswitch/content/Switch.qml b/examples/tutorials/ui-components/slideswitch/content/Switch.qml
new file mode 100644
index 0000000000..981fc16673
--- /dev/null
+++ b/examples/tutorials/ui-components/slideswitch/content/Switch.qml
@@ -0,0 +1,117 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+//![0]
+import QtQuick 2.0
+
+Item {
+    id: toggleswitch
+    width: background.width; height: background.height
+
+//![1]
+    property bool on: false
+//![1]
+
+//![2]
+    function toggle() {
+        if (toggleswitch.state == "on")
+            toggleswitch.state = "off";
+        else 
+            toggleswitch.state = "on";
+    }
+//![2]
+
+//![3]
+    function releaseSwitch() {
+        if (knob.x == 1) {
+            if (toggleswitch.state == "off") return;
+        }
+        if (knob.x == 78) {
+            if (toggleswitch.state == "on") return;
+        }
+        toggle();
+    }
+//![3]
+
+//![4]
+    Image {
+        id: background
+        source: "background.png"
+        MouseArea { anchors.fill: parent; onClicked: toggle() }
+    }
+//![4]
+
+//![5]
+    Image {
+        id: knob
+        x: 1; y: 2
+        source: "knob.png"
+
+        MouseArea {
+            anchors.fill: parent
+            drag.target: knob; drag.axis: Drag.XAxis; drag.minimumX: 1; drag.maximumX: 78
+            onClicked: toggle()
+            onReleased: releaseSwitch()
+        }
+    }
+//![5]
+
+//![6]
+    states: [
+        State {
+            name: "on"
+            PropertyChanges { target: knob; x: 78 }
+            PropertyChanges { target: toggleswitch; on: true }
+        },
+        State {
+            name: "off"
+            PropertyChanges { target: knob; x: 1 }
+            PropertyChanges { target: toggleswitch; on: false }
+        }
+    ]
+//![6]
+
+//![7]
+    transitions: Transition {
+        NumberAnimation { properties: "x"; easing.type: Easing.InOutQuad; duration: 200 }
+    }
+//![7]
+}
+//![0]
diff --git a/examples/tutorials/ui-components/slideswitch/content/background.png b/examples/tutorials/ui-components/slideswitch/content/background.png
new file mode 100644
index 0000000000..d736815870
--- /dev/null
+++ b/examples/tutorials/ui-components/slideswitch/content/background.png
diff --git a/examples/tutorials/ui-components/slideswitch/content/background.svg b/examples/tutorials/ui-components/slideswitch/content/background.svg
new file mode 100644
index 0000000000..f920d3e47a
--- /dev/null
+++ b/examples/tutorials/ui-components/slideswitch/content/background.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 13.0.2, SVG Export Plug-In  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
+]>
+<svg version="1.1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+	 x="0px" y="0px" width="130px" height="56px" viewBox="0 0 130 56" enable-background="new 0 0 130 56" xml:space="preserve">
+<defs>
+</defs>
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-37.5005" y1="-66" x2="-37.5005" y2="-121.9985" gradientTransform="matrix(1 0 0 -1 102.5 -66)">
+	<stop  offset="0.0056" style="stop-color:#000000"/>
+	<stop  offset="1" style="stop-color:#EAECEF"/>
+</linearGradient>
+<path fill="url(#SVGID_1_)" d="M101.998,55.998H28c-15.439,0-28-12.562-28-28C0,12.56,12.561,0,28,0h73.998
+	c15.439,0,28,12.559,28,27.998C129.998,43.438,117.438,55.998,101.998,55.998L101.998,55.998z"/>
+<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="-5.5" y1="-132.1338" x2="-69.5002" y2="-55.8613" gradientTransform="matrix(1 0 0 -1 102.5 -66)">
+	<stop  offset="0.0056" style="stop-color:#000000"/>
+	<stop  offset="1" style="stop-color:#828385"/>
+</linearGradient>
+<path fill="url(#SVGID_2_)" d="M127.999,27.998c0,14.359-11.642,26-26,26h-74c-14.359,0-26-11.641-26-26l0,0
+	c0-14.359,11.641-26,26-26h74C116.357,1.998,127.999,13.639,127.999,27.998L127.999,27.998z"/>
+</svg>
diff --git a/examples/tutorials/ui-components/slideswitch/content/knob.png b/examples/tutorials/ui-components/slideswitch/content/knob.png
new file mode 100644
index 0000000000..ee0a436f84
--- /dev/null
+++ b/examples/tutorials/ui-components/slideswitch/content/knob.png
diff --git a/examples/tutorials/ui-components/slideswitch/content/knob.svg b/examples/tutorials/ui-components/slideswitch/content/knob.svg
new file mode 100644
index 0000000000..fb6933718e
--- /dev/null
+++ b/examples/tutorials/ui-components/slideswitch/content/knob.svg
@@ -0,0 +1,867 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 13.0.2, SVG Export Plug-In  -->
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://web.resource.org/cc/"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   x="0px"
+   y="0px"
+   width="52px"
+   height="52px"
+   viewBox="0 0 52 52"
+   enable-background="new 0 0 52 52"
+   xml:space="preserve"
+   id="svg3883"
+   sodipodi:version="0.32"
+   inkscape:version="0.44.1"
+   sodipodi:docname="knob_on.svg"
+   sodipodi:docbase="/local/axel/embeddedwidgets/embeddedstories/skins/svgslideswitch/MetallicBrush"><metadata
+   id="metadata4200"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><sodipodi:namedview
+   inkscape:window-height="640"
+   inkscape:window-width="937"
+   inkscape:pageshadow="2"
+   inkscape:pageopacity="0.0"
+   guidetolerance="10.0"
+   gridtolerance="10.0"
+   objecttolerance="10.0"
+   borderopacity="1.0"
+   bordercolor="#666666"
+   pagecolor="#ffffff"
+   id="base"
+   inkscape:zoom="8.3653846"
+   inkscape:cx="26.000002"
+   inkscape:cy="26"
+   inkscape:window-x="0"
+   inkscape:window-y="0"
+   inkscape:current-layer="svg3883" />
+<defs
+   id="defs3885">
+</defs>
+<linearGradient
+   id="SVGID_1_"
+   gradientUnits="userSpaceOnUse"
+   x1="-59.7866"
+   y1="-115.917"
+   x2="-93.2123"
+   y2="-76.0818"
+   gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+	<stop
+   offset="0.0056"
+   style="stop-color:#000000"
+   id="stop3888" />
+	<stop
+   offset="1"
+   style="stop-color:#EAECEF"
+   id="stop3890" />
+</linearGradient>
+<circle
+   cx="26"
+   cy="26"
+   r="26"
+   id="circle3892"
+   style="fill:url(#SVGID_1_)"
+   sodipodi:cx="26"
+   sodipodi:cy="26"
+   sodipodi:rx="26"
+   sodipodi:ry="26"
+   transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+   id="SVGID_2_"
+   gradientUnits="userSpaceOnUse"
+   x1="-100.5"
+   y1="-96"
+   x2="-52.5"
+   y2="-96"
+   gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+	<stop
+   offset="0.0056"
+   style="stop-color:#8AADCE"
+   id="stop3895" />
+	<stop
+   offset="0.5"
+   style="stop-color:#EAECEF"
+   id="stop3897" />
+	<stop
+   offset="0.6043"
+   style="stop-color:#E7EAED"
+   id="stop3899" />
+	<stop
+   offset="0.6751"
+   style="stop-color:#DEE4E7"
+   id="stop3901" />
+	<stop
+   offset="0.7358"
+   style="stop-color:#CFD9DD"
+   id="stop3903" />
+	<stop
+   offset="0.791"
+   style="stop-color:#B9CACF"
+   id="stop3905" />
+	<stop
+   offset="0.8425"
+   style="stop-color:#9EB6BD"
+   id="stop3907" />
+	<stop
+   offset="0.891"
+   style="stop-color:#7B9EA7"
+   id="stop3909" />
+	<stop
+   offset="0.9374"
+   style="stop-color:#53828C"
+   id="stop3911" />
+	<stop
+   offset="0.9809"
+   style="stop-color:#25626E"
+   id="stop3913" />
+	<stop
+   offset="1"
+   style="stop-color:#0E525F"
+   id="stop3915" />
+</linearGradient>
+<circle
+   cx="26"
+   cy="26"
+   r="24"
+   id="circle3917"
+   style="fill:url(#SVGID_2_)"
+   sodipodi:cx="26"
+   sodipodi:cy="26"
+   sodipodi:rx="24"
+   sodipodi:ry="24"
+   transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+   id="SVGID_3_"
+   gradientUnits="userSpaceOnUse"
+   x1="-98.6328"
+   y1="-96"
+   x2="-54.3672"
+   y2="-96"
+   gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+	<stop
+   offset="0.0056"
+   style="stop-color:#8AADCE"
+   id="stop3920" />
+	<stop
+   offset="0.073"
+   style="stop-color:#8FAECB"
+   id="stop3922" />
+	<stop
+   offset="0.5"
+   style="stop-color:#EAECEF"
+   id="stop3924" />
+	<stop
+   offset="0.5902"
+   style="stop-color:#E7E9ED"
+   id="stop3926" />
+	<stop
+   offset="0.618"
+   style="stop-color:#E4E7EB"
+   id="stop3928" />
+	<stop
+   offset="0.6697"
+   style="stop-color:#E0E4E9"
+   id="stop3930" />
+	<stop
+   offset="0.7211"
+   style="stop-color:#D4DCE1"
+   id="stop3932" />
+	<stop
+   offset="0.7722"
+   style="stop-color:#C0CFD5"
+   id="stop3934" />
+	<stop
+   offset="0.809"
+   style="stop-color:#ADC2C9"
+   id="stop3936" />
+	<stop
+   offset="1"
+   style="stop-color:#0E525F"
+   id="stop3938" />
+</linearGradient>
+<circle
+   cx="26"
+   cy="26"
+   r="22.132999"
+   id="circle3940"
+   style="fill:url(#SVGID_3_)"
+   sodipodi:cx="26"
+   sodipodi:cy="26"
+   sodipodi:rx="22.132999"
+   sodipodi:ry="22.132999"
+   transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+   id="SVGID_4_"
+   gradientUnits="userSpaceOnUse"
+   x1="-96.7671"
+   y1="-96"
+   x2="-56.2324"
+   y2="-96"
+   gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+	<stop
+   offset="0.0056"
+   style="stop-color:#8AADCE"
+   id="stop3943" />
+	<stop
+   offset="0.073"
+   style="stop-color:#86A7C4"
+   id="stop3945" />
+	<stop
+   offset="0.5"
+   style="stop-color:#EAECEF"
+   id="stop3947" />
+	<stop
+   offset="0.577"
+   style="stop-color:#E7EAED"
+   id="stop3949" />
+	<stop
+   offset="0.618"
+   style="stop-color:#E1E6EA"
+   id="stop3951" />
+	<stop
+   offset="0.6697"
+   style="stop-color:#DDE3E8"
+   id="stop3953" />
+	<stop
+   offset="0.7211"
+   style="stop-color:#D1DBE1"
+   id="stop3955" />
+	<stop
+   offset="0.7722"
+   style="stop-color:#BDCDD5"
+   id="stop3957" />
+	<stop
+   offset="0.809"
+   style="stop-color:#AAC0CA"
+   id="stop3959" />
+	<stop
+   offset="1"
+   style="stop-color:#0E525F"
+   id="stop3961" />
+</linearGradient>
+<circle
+   cx="26"
+   cy="26"
+   r="20.267"
+   id="circle3963"
+   style="fill:url(#SVGID_4_)"
+   sodipodi:cx="26"
+   sodipodi:cy="26"
+   sodipodi:rx="20.267"
+   sodipodi:ry="20.267"
+   transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+   id="SVGID_5_"
+   gradientUnits="userSpaceOnUse"
+   x1="-94.8999"
+   y1="-96"
+   x2="-58.0996"
+   y2="-96"
+   gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+	<stop
+   offset="0.0056"
+   style="stop-color:#8AADCE"
+   id="stop3966" />
+	<stop
+   offset="0.073"
+   style="stop-color:#7E9FBC"
+   id="stop3968" />
+	<stop
+   offset="0.5"
+   style="stop-color:#EAECEF"
+   id="stop3970" />
+	<stop
+   offset="0.5709"
+   style="stop-color:#E6E9ED"
+   id="stop3972" />
+	<stop
+   offset="0.618"
+   style="stop-color:#DFE4E9"
+   id="stop3974" />
+	<stop
+   offset="0.6687"
+   style="stop-color:#DBE1E7"
+   id="stop3976" />
+	<stop
+   offset="0.7193"
+   style="stop-color:#CFD9E0"
+   id="stop3978" />
+	<stop
+   offset="0.7695"
+   style="stop-color:#BBCCD6"
+   id="stop3980" />
+	<stop
+   offset="0.809"
+   style="stop-color:#A6BECA"
+   id="stop3982" />
+	<stop
+   offset="1"
+   style="stop-color:#0E525F"
+   id="stop3984" />
+</linearGradient>
+<circle
+   cx="26"
+   cy="26"
+   r="18.4"
+   id="circle3986"
+   style="fill:url(#SVGID_5_)"
+   sodipodi:cx="26"
+   sodipodi:cy="26"
+   sodipodi:rx="18.4"
+   sodipodi:ry="18.4"
+   transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+   id="SVGID_6_"
+   gradientUnits="userSpaceOnUse"
+   x1="-93.0332"
+   y1="-96"
+   x2="-59.9668"
+   y2="-96"
+   gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+	<stop
+   offset="0.0056"
+   style="stop-color:#8AADCE"
+   id="stop3989" />
+	<stop
+   offset="0.073"
+   style="stop-color:#7697B4"
+   id="stop3991" />
+	<stop
+   offset="0.5"
+   style="stop-color:#EAECEF"
+   id="stop3993" />
+	<stop
+   offset="0.5636"
+   style="stop-color:#E6E9ED"
+   id="stop3995" />
+	<stop
+   offset="0.618"
+   style="stop-color:#DCE2E8"
+   id="stop3997" />
+	<stop
+   offset="0.6687"
+   style="stop-color:#D8DFE6"
+   id="stop3999" />
+	<stop
+   offset="0.7193"
+   style="stop-color:#CCD7E0"
+   id="stop4001" />
+	<stop
+   offset="0.7695"
+   style="stop-color:#B8CAD5"
+   id="stop4003" />
+	<stop
+   offset="0.809"
+   style="stop-color:#A3BCCA"
+   id="stop4005" />
+	<stop
+   offset="1"
+   style="stop-color:#0E525F"
+   id="stop4007" />
+</linearGradient>
+<circle
+   cx="26"
+   cy="26"
+   r="16.533001"
+   id="circle4009"
+   style="fill:url(#SVGID_6_)"
+   sodipodi:cx="26"
+   sodipodi:cy="26"
+   sodipodi:rx="16.533001"
+   sodipodi:ry="16.533001"
+   transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+   id="SVGID_7_"
+   gradientUnits="userSpaceOnUse"
+   x1="-91.167"
+   y1="-96"
+   x2="-61.833"
+   y2="-96"
+   gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+	<stop
+   offset="0.0056"
+   style="stop-color:#8AADCE"
+   id="stop4012" />
+	<stop
+   offset="0.073"
+   style="stop-color:#6D8FAD"
+   id="stop4014" />
+	<stop
+   offset="0.5"
+   style="stop-color:#EAECEF"
+   id="stop4016" />
+	<stop
+   offset="0.5605"
+   style="stop-color:#E5E8EC"
+   id="stop4018" />
+	<stop
+   offset="0.618"
+   style="stop-color:#DAE1E7"
+   id="stop4020" />
+	<stop
+   offset="0.6679"
+   style="stop-color:#D6DEE5"
+   id="stop4022" />
+	<stop
+   offset="0.7175"
+   style="stop-color:#CAD6DF"
+   id="stop4024" />
+	<stop
+   offset="0.7669"
+   style="stop-color:#B6C9D6"
+   id="stop4026" />
+	<stop
+   offset="0.809"
+   style="stop-color:#9FBACB"
+   id="stop4028" />
+	<stop
+   offset="1"
+   style="stop-color:#0E525F"
+   id="stop4030" />
+</linearGradient>
+<circle
+   cx="26"
+   cy="26"
+   r="14.667"
+   id="circle4032"
+   style="fill:url(#SVGID_7_)"
+   sodipodi:cx="26"
+   sodipodi:cy="26"
+   sodipodi:rx="14.667"
+   sodipodi:ry="14.667"
+   transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+   id="SVGID_8_"
+   gradientUnits="userSpaceOnUse"
+   x1="-89.2998"
+   y1="-96"
+   x2="-63.7002"
+   y2="-96"
+   gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+	<stop
+   offset="0.0056"
+   style="stop-color:#8AADCE"
+   id="stop4035" />
+	<stop
+   offset="0.073"
+   style="stop-color:#6587A5"
+   id="stop4037" />
+	<stop
+   offset="0.5"
+   style="stop-color:#EAECEF"
+   id="stop4039" />
+	<stop
+   offset="0.5588"
+   style="stop-color:#E4E8EC"
+   id="stop4041" />
+	<stop
+   offset="0.618"
+   style="stop-color:#D8DFE7"
+   id="stop4043" />
+	<stop
+   offset="0.6675"
+   style="stop-color:#D4DCE5"
+   id="stop4045" />
+	<stop
+   offset="0.7167"
+   style="stop-color:#C8D5E0"
+   id="stop4047" />
+	<stop
+   offset="0.7657"
+   style="stop-color:#B4C8D6"
+   id="stop4049" />
+	<stop
+   offset="0.809"
+   style="stop-color:#9CB8CB"
+   id="stop4051" />
+	<stop
+   offset="1"
+   style="stop-color:#0E525F"
+   id="stop4053" />
+</linearGradient>
+<circle
+   cx="26"
+   cy="26"
+   r="12.8"
+   id="circle4055"
+   style="fill:url(#SVGID_8_)"
+   sodipodi:cx="26"
+   sodipodi:cy="26"
+   sodipodi:rx="12.8"
+   sodipodi:ry="12.8"
+   transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+   id="SVGID_9_"
+   gradientUnits="userSpaceOnUse"
+   x1="-87.4331"
+   y1="-96"
+   x2="-65.5664"
+   y2="-96"
+   gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+	<stop
+   offset="0.0056"
+   style="stop-color:#8AADCE"
+   id="stop4058" />
+	<stop
+   offset="0.073"
+   style="stop-color:#5D809D"
+   id="stop4060" />
+	<stop
+   offset="0.5"
+   style="stop-color:#EAECEF"
+   id="stop4062" />
+	<stop
+   offset="0.5567"
+   style="stop-color:#E3E7EC"
+   id="stop4064" />
+	<stop
+   offset="0.618"
+   style="stop-color:#D5DDE6"
+   id="stop4066" />
+	<stop
+   offset="0.6671"
+   style="stop-color:#D1DAE4"
+   id="stop4068" />
+	<stop
+   offset="0.7159"
+   style="stop-color:#C5D3DF"
+   id="stop4070" />
+	<stop
+   offset="0.7645"
+   style="stop-color:#B1C6D6"
+   id="stop4072" />
+	<stop
+   offset="0.809"
+   style="stop-color:#98B5CB"
+   id="stop4074" />
+	<stop
+   offset="1"
+   style="stop-color:#0E525F"
+   id="stop4076" />
+</linearGradient>
+<circle
+   cx="26"
+   cy="26"
+   r="10.933"
+   id="circle4078"
+   style="fill:url(#SVGID_9_)"
+   sodipodi:cx="26"
+   sodipodi:cy="26"
+   sodipodi:rx="10.933"
+   sodipodi:ry="10.933"
+   transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+   id="SVGID_10_"
+   gradientUnits="userSpaceOnUse"
+   x1="-85.5659"
+   y1="-96"
+   x2="-67.4336"
+   y2="-96"
+   gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+	<stop
+   offset="0.0056"
+   style="stop-color:#8AADCE"
+   id="stop4081" />
+	<stop
+   offset="0.073"
+   style="stop-color:#547896"
+   id="stop4083" />
+	<stop
+   offset="0.5"
+   style="stop-color:#EAECEF"
+   id="stop4085" />
+	<stop
+   offset="0.5588"
+   style="stop-color:#E1E6EB"
+   id="stop4087" />
+	<stop
+   offset="0.618"
+   style="stop-color:#D3DCE5"
+   id="stop4089" />
+	<stop
+   offset="0.6663"
+   style="stop-color:#CFD9E3"
+   id="stop4091" />
+	<stop
+   offset="0.7143"
+   style="stop-color:#C3D2DF"
+   id="stop4093" />
+	<stop
+   offset="0.7621"
+   style="stop-color:#AFC5D7"
+   id="stop4095" />
+	<stop
+   offset="0.809"
+   style="stop-color:#94B3CC"
+   id="stop4097" />
+	<stop
+   offset="1"
+   style="stop-color:#0E525F"
+   id="stop4099" />
+</linearGradient>
+<circle
+   cx="26"
+   cy="26"
+   r="9.066"
+   id="circle4101"
+   style="fill:url(#SVGID_10_)"
+   sodipodi:cx="26"
+   sodipodi:cy="26"
+   sodipodi:rx="9.066"
+   sodipodi:ry="9.066"
+   transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+   id="SVGID_11_"
+   gradientUnits="userSpaceOnUse"
+   x1="-83.7002"
+   y1="-96"
+   x2="-69.2998"
+   y2="-96"
+   gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+	<stop
+   offset="0.0056"
+   style="stop-color:#8AADCE"
+   id="stop4104" />
+	<stop
+   offset="0.073"
+   style="stop-color:#4C708E"
+   id="stop4106" />
+	<stop
+   offset="0.5"
+   style="stop-color:#EAECEF"
+   id="stop4108" />
+	<stop
+   offset="0.5625"
+   style="stop-color:#DEE4EA"
+   id="stop4110" />
+	<stop
+   offset="0.618"
+   style="stop-color:#D0DAE4"
+   id="stop4112" />
+	<stop
+   offset="0.6663"
+   style="stop-color:#CCD7E2"
+   id="stop4114" />
+	<stop
+   offset="0.7143"
+   style="stop-color:#C0D0DE"
+   id="stop4116" />
+	<stop
+   offset="0.7621"
+   style="stop-color:#ACC3D6"
+   id="stop4118" />
+	<stop
+   offset="0.809"
+   style="stop-color:#91B1CC"
+   id="stop4120" />
+	<stop
+   offset="1"
+   style="stop-color:#0E525F"
+   id="stop4122" />
+</linearGradient>
+<circle
+   cx="26"
+   cy="26"
+   r="7.1999998"
+   id="circle4124"
+   style="fill:url(#SVGID_11_)"
+   sodipodi:cx="26"
+   sodipodi:cy="26"
+   sodipodi:rx="7.1999998"
+   sodipodi:ry="7.1999998"
+   transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+   id="SVGID_12_"
+   gradientUnits="userSpaceOnUse"
+   x1="-81.833"
+   y1="-96"
+   x2="-71.167"
+   y2="-96"
+   gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+	<stop
+   offset="0.0056"
+   style="stop-color:#8AADCE"
+   id="stop4127" />
+	<stop
+   offset="0.073"
+   style="stop-color:#446986"
+   id="stop4129" />
+	<stop
+   offset="0.5"
+   style="stop-color:#EAECEF"
+   id="stop4131" />
+	<stop
+   offset="0.5757"
+   style="stop-color:#D9E0E8"
+   id="stop4133" />
+	<stop
+   offset="0.618"
+   style="stop-color:#CED8E3"
+   id="stop4135" />
+	<stop
+   offset="0.6655"
+   style="stop-color:#CAD5E2"
+   id="stop4137" />
+	<stop
+   offset="0.7129"
+   style="stop-color:#BECEDD"
+   id="stop4139" />
+	<stop
+   offset="0.7601"
+   style="stop-color:#AAC1D6"
+   id="stop4141" />
+	<stop
+   offset="0.807"
+   style="stop-color:#8EB0CC"
+   id="stop4143" />
+	<stop
+   offset="0.809"
+   style="stop-color:#8DAFCC"
+   id="stop4145" />
+	<stop
+   offset="1"
+   style="stop-color:#0E525F"
+   id="stop4147" />
+</linearGradient>
+<circle
+   cx="26"
+   cy="26"
+   r="5.3330002"
+   id="circle4149"
+   style="fill:url(#SVGID_12_)"
+   sodipodi:cx="26"
+   sodipodi:cy="26"
+   sodipodi:rx="5.3330002"
+   sodipodi:ry="5.3330002"
+   transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+   id="SVGID_13_"
+   gradientUnits="userSpaceOnUse"
+   x1="-79.9658"
+   y1="-96"
+   x2="-73.0342"
+   y2="-96"
+   gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+	<stop
+   offset="0.0056"
+   style="stop-color:#8AADCE"
+   id="stop4152" />
+	<stop
+   offset="0.073"
+   style="stop-color:#3B617F"
+   id="stop4154" />
+	<stop
+   offset="0.5"
+   style="stop-color:#EAECEF"
+   id="stop4156" />
+	<stop
+   offset="0.6087"
+   style="stop-color:#CED9E3"
+   id="stop4158" />
+	<stop
+   offset="0.618"
+   style="stop-color:#CBD7E2"
+   id="stop4160" />
+	<stop
+   offset="0.6655"
+   style="stop-color:#C7D4E1"
+   id="stop4162" />
+	<stop
+   offset="0.7129"
+   style="stop-color:#BBCDDD"
+   id="stop4164" />
+	<stop
+   offset="0.7601"
+   style="stop-color:#A7C0D6"
+   id="stop4166" />
+	<stop
+   offset="0.807"
+   style="stop-color:#8BAECD"
+   id="stop4168" />
+	<stop
+   offset="0.809"
+   style="stop-color:#8AADCD"
+   id="stop4170" />
+	<stop
+   offset="1"
+   style="stop-color:#0E525F"
+   id="stop4172" />
+</linearGradient>
+<circle
+   cx="26"
+   cy="26"
+   r="3.4660001"
+   id="circle4174"
+   style="fill:url(#SVGID_13_)"
+   sodipodi:cx="26"
+   sodipodi:cy="26"
+   sodipodi:rx="3.4660001"
+   sodipodi:ry="3.4660001"
+   transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+   id="SVGID_14_"
+   gradientUnits="userSpaceOnUse"
+   x1="-78.1001"
+   y1="-96"
+   x2="-74.9004"
+   y2="-96"
+   gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+	<stop
+   offset="0.0056"
+   style="stop-color:#8AADCE"
+   id="stop4177" />
+	<stop
+   offset="0.073"
+   style="stop-color:#335977"
+   id="stop4179" />
+	<stop
+   offset="0.5"
+   style="stop-color:#EAECEF"
+   id="stop4181" />
+	<stop
+   offset="0.618"
+   style="stop-color:#C9D5E1"
+   id="stop4183" />
+	<stop
+   offset="0.6648"
+   style="stop-color:#C5D3E0"
+   id="stop4185" />
+	<stop
+   offset="0.7114"
+   style="stop-color:#B9CBDC"
+   id="stop4187" />
+	<stop
+   offset="0.758"
+   style="stop-color:#A5BFD6"
+   id="stop4189" />
+	<stop
+   offset="0.8042"
+   style="stop-color:#89ADCE"
+   id="stop4191" />
+	<stop
+   offset="0.809"
+   style="stop-color:#86ABCD"
+   id="stop4193" />
+	<stop
+   offset="1"
+   style="stop-color:#0E525F"
+   id="stop4195" />
+</linearGradient>
+<circle
+   cx="26"
+   cy="26"
+   r="1.6"
+   id="circle4197"
+   style="fill:url(#SVGID_14_)"
+   sodipodi:cx="26"
+   sodipodi:cy="26"
+   sodipodi:rx="1.6"
+   sodipodi:ry="1.6"
+   transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+</svg>
\ No newline at end of file
diff --git a/examples/tutorials/ui-components/slideswitch/slideswitch.qml b/examples/tutorials/ui-components/slideswitch/slideswitch.qml
new file mode 100644
index 0000000000..60a331407c
--- /dev/null
+++ b/examples/tutorials/ui-components/slideswitch/slideswitch.qml
@@ -0,0 +1,51 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import "content"
+
+Rectangle {
+    color: "white"
+    width: 400; height: 250
+
+//![0]
+    Switch { anchors.centerIn: parent; on: false }
+//![0]
+}
diff --git a/examples/tutorials/ui-components/spinner/content/Spinner.qml b/examples/tutorials/ui-components/spinner/content/Spinner.qml
new file mode 100644
index 0000000000..d7bbeb33ee
--- /dev/null
+++ b/examples/tutorials/ui-components/spinner/content/Spinner.qml
@@ -0,0 +1,70 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Image {
+    property alias model: view.model
+    property alias delegate: view.delegate
+    property alias currentIndex: view.currentIndex
+    property real itemHeight: 30
+
+    source: "spinner-bg.png"
+    clip: true
+
+    PathView {
+        id: view
+        anchors.fill: parent
+
+        pathItemCount: height/itemHeight
+        preferredHighlightBegin: 0.5
+        preferredHighlightEnd: 0.5
+        highlight: Image { source: "spinner-select.png"; width: view.width; height: itemHeight+4 }
+        dragMargin: view.width/2
+
+        path: Path {
+            startX: view.width/2; startY: -itemHeight/2
+            PathLine { x: view.width/2; y: view.pathItemCount*itemHeight + itemHeight }
+        }
+    }
+
+    Keys.onDownPressed: view.incrementCurrentIndex()
+    Keys.onUpPressed: view.decrementCurrentIndex()
+}
diff --git a/examples/tutorials/ui-components/spinner/content/spinner-bg.png b/examples/tutorials/ui-components/spinner/content/spinner-bg.png
new file mode 100644
index 0000000000..b3556f1f9f
--- /dev/null
+++ b/examples/tutorials/ui-components/spinner/content/spinner-bg.png
diff --git a/examples/tutorials/ui-components/spinner/content/spinner-select.png b/examples/tutorials/ui-components/spinner/content/spinner-select.png
new file mode 100644
index 0000000000..95a17a1fe2
--- /dev/null
+++ b/examples/tutorials/ui-components/spinner/content/spinner-select.png
diff --git a/examples/tutorials/ui-components/spinner/main.qml b/examples/tutorials/ui-components/spinner/main.qml
new file mode 100644
index 0000000000..7584c98396
--- /dev/null
+++ b/examples/tutorials/ui-components/spinner/main.qml
@@ -0,0 +1,61 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import "content"
+
+Rectangle {
+    width: 240; height: 320
+
+    Column {
+        y: 20; x: 20; spacing: 20
+
+        Spinner {
+            id: spinner
+            width: 200; height: 240
+            focus: true
+            model: 20
+            itemHeight: 30
+            delegate: Text { font.pixelSize: 25; text: index; height: 30 }
+        }
+
+        Text { text: "Current item index: " + spinner.currentIndex }
+    }
+}
diff --git a/examples/tutorials/ui-components/spinner/spinner.qmlproject b/examples/tutorials/ui-components/spinner/spinner.qmlproject
new file mode 100644
index 0000000000..e5a8bf02ca
--- /dev/null
+++ b/examples/tutorials/ui-components/spinner/spinner.qmlproject
@@ -0,0 +1,16 @@
+import QmlProject 1.1
+
+Project {
+    mainFile: "main.qml"
+
+    /* Include .qml, .js, and image files from current directory and subdirectories */
+    QmlFiles {
+        directory: "."
+    }
+    JavaScriptFiles {
+        directory: "."
+    }
+    ImageFiles {
+        directory: "."
+    }
+}
diff --git a/examples/tutorials/ui-components/tabwidget/TabWidget.qml b/examples/tutorials/ui-components/tabwidget/TabWidget.qml
new file mode 100644
index 0000000000..560ed1f58a
--- /dev/null
+++ b/examples/tutorials/ui-components/tabwidget/TabWidget.qml
@@ -0,0 +1,102 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Item {
+    id: tabWidget
+
+    // Setting the default property to stack.children means any child items
+    // of the TabWidget are actually added to the 'stack' item's children.
+    // See the "Property Binding"
+    // documentation for details on default properties.
+    default property alias content: stack.children
+
+    property int current: 0
+
+    onCurrentChanged: setOpacities()
+    Component.onCompleted: setOpacities()
+
+    function setOpacities() {
+        for (var i = 0; i < stack.children.length; ++i) {
+            stack.children[i].opacity = (i == current ? 1 : 0)
+        }
+    }
+
+    Row {
+        id: header
+
+        Repeater {
+            model: stack.children.length
+            delegate: Rectangle {
+                width: tabWidget.width / stack.children.length; height: 36
+
+                Rectangle {
+                    width: parent.width; height: 1
+                    anchors { bottom: parent.bottom; bottomMargin: 1 }
+                    color: "#acb2c2"
+                }
+                BorderImage {
+                    anchors { fill: parent; leftMargin: 2; topMargin: 5; rightMargin: 1 }
+                    border { left: 7; right: 7 }
+                    source: "tab.png"
+                    visible: tabWidget.current == index
+                }
+                Text {
+                    horizontalAlignment: Qt.AlignHCenter; verticalAlignment: Qt.AlignVCenter
+                    anchors.fill: parent
+                    text: stack.children[index].title
+                    elide: Text.ElideRight
+                    font.bold: tabWidget.current == index
+                }
+                MouseArea {
+                    anchors.fill: parent
+                    onClicked: tabWidget.current = index
+                }
+            }
+        }
+    }
+
+    Item {
+        id: stack
+        width: tabWidget.width
+        anchors.top: header.bottom; anchors.bottom: tabWidget.bottom
+    }
+}
diff --git a/examples/tutorials/ui-components/tabwidget/main.qml b/examples/tutorials/ui-components/tabwidget/main.qml
new file mode 100644
index 0000000000..df99c11b7d
--- /dev/null
+++ b/examples/tutorials/ui-components/tabwidget/main.qml
@@ -0,0 +1,99 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+TabWidget {
+    id: tabs
+    width: 640; height: 480
+
+    Rectangle {
+        property string title: "Red"
+        anchors.fill: parent
+        color: "#e3e3e3"
+
+        Rectangle {
+            anchors.fill: parent; anchors.margins: 20
+            color: "#ff7f7f"
+            Text {
+                width: parent.width - 20
+                anchors.centerIn: parent; horizontalAlignment: Qt.AlignHCenter
+                text: "Roses are red"
+                font.pixelSize: 20
+                wrapMode: Text.WordWrap
+            }
+        }
+    }
+
+    Rectangle {
+        property string title: "Green"
+        anchors.fill: parent
+        color: "#e3e3e3"
+
+        Rectangle {
+            anchors.fill: parent; anchors.margins: 20
+            color: "#7fff7f"
+            Text {
+                width: parent.width - 20
+                anchors.centerIn: parent; horizontalAlignment: Qt.AlignHCenter
+                text: "Flower stems are green"
+                font.pixelSize: 20
+                wrapMode: Text.WordWrap
+            }
+        }
+    }
+
+    Rectangle {
+        property string title: "Blue"
+        anchors.fill: parent; color: "#e3e3e3"
+
+        Rectangle {
+            anchors.fill: parent; anchors.margins: 20
+            color: "#7f7fff"
+            Text {
+                width: parent.width - 20
+                anchors.centerIn: parent; horizontalAlignment: Qt.AlignHCenter
+                text: "Violets are blue"
+                font.pixelSize: 20
+                wrapMode: Text.WordWrap
+            }
+        }
+    }
+}
diff --git a/examples/tutorials/ui-components/tabwidget/tab.png b/examples/tutorials/ui-components/tabwidget/tab.png
new file mode 100644
index 0000000000..ad8021605f
--- /dev/null
+++ b/examples/tutorials/ui-components/tabwidget/tab.png
diff --git a/examples/tutorials/ui-components/tabwidget/tabwidget.qmlproject b/examples/tutorials/ui-components/tabwidget/tabwidget.qmlproject
new file mode 100644
index 0000000000..e5a8bf02ca
--- /dev/null
+++ b/examples/tutorials/ui-components/tabwidget/tabwidget.qmlproject
@@ -0,0 +1,16 @@
+import QmlProject 1.1
+
+Project {
+    mainFile: "main.qml"
+
+    /* Include .qml, .js, and image files from current directory and subdirectories */
+    QmlFiles {
+        directory: "."
+    }
+    JavaScriptFiles {
+        directory: "."
+    }
+    ImageFiles {
+        directory: "."
+    }
+}