Initial import from the monolithic Qt.

This is the beginning of revision history for this module. If you
want to look at revision history older than this, please refer to the
Qt Git wiki for how to use Git history grafting. At the time of
writing, this wiki is located here:

http://qt.gitorious.org/qt/pages/GitIntroductionWithQt

If you have already performed the grafting and you don't see any
history beyond this commit, try running "git log" with the "--follow"
argument.

Branched from the monolithic repo, Qt master branch, at commit
896db169ea224deb96c59ce8af800d019de63f12

77 files changed, 5343 insertions, 0 deletions

diff --git a/examples/tutorials/gettingStarted/gsQml/core/button.qml b/examples/tutorials/gettingStarted/gsQml/core/button.qml
new file mode 100644
index 0000000000..1b53b77774
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/core/button.qml
@@ -0,0 +1,108 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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 1.0
+
+Rectangle {
+    //identifier of the item
+    id: button
+
+    //these properties act as constants, useable outside this QML file
+    property int buttonHeight: 75
+    property int buttonWidth: 150
+
+    //attaches to the Text element's text content
+    property string label
+    property color textColor: buttonLabel.color
+
+    //the color highlight when the mouse hovers on the rectangle
+    property color onHoverColor: "lightsteelblue"
+    property color borderColor: "transparent"
+
+    //buttonColor is set to the button's main color
+    property color buttonColor: "lightblue"
+
+    property real labelSize: 14
+
+    //set appearance properties
+    radius: 6
+    smooth: true
+    border { width: 2; color: borderColor }
+    width: buttonWidth; height: buttonHeight
+
+    Text {
+        id: buttonLabel
+        anchors.centerIn: parent
+        text: label     //bind the text to the parent's text
+        color: "#DCDCCC"
+        font.pointSize: labelSize
+    }
+
+    //buttonClick() is callable and a signal handler, onButtonClick is automatically created
+    signal buttonClick()
+
+    //define the clickable area to be the whole rectangle
+    MouseArea { 
+        id: buttonMouseArea
+        anchors.fill: parent    //stretch the area to the parent's dimension
+        onClicked: buttonClick()
+
+        //if true, then onEntered and onExited called if mouse hovers in the mouse area
+        //if false, a button must be clicked to detect the mouse hover
+        hoverEnabled: true
+
+        //display a border if the mouse hovers on the button mouse area
+        onEntered: parent.border.color = onHoverColor
+        //remove the border if the mouse exits the button mouse area
+        onExited:  parent.border.color = borderColor
+    }
+
+    //change the color of the button when pressed
+    color: buttonMouseArea.pressed ? Qt.darker(buttonColor, 1.5) : buttonColor
+    //animate the color whenever the color property changes
+    Behavior on color { ColorAnimation{ duration: 55 } }
+
+    //scale the button when pressed
+    scale: buttonMouseArea.pressed ? 1.1 : 1.00
+    //Animate the scale property change
+    Behavior on scale { NumberAnimation{ duration: 55 } }
+
+}
diff --git a/examples/tutorials/gettingStarted/gsQml/core/editMenu.qml b/examples/tutorials/gettingStarted/gsQml/core/editMenu.qml
new file mode 100644
index 0000000000..00729a737c
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/core/editMenu.qml
@@ -0,0 +1,105 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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 1.0
+
+Rectangle {
+    id: editMenu
+    height: 480; width:1000
+    color: "powderblue"
+    property color buttonBorderColor: "#7A8182"
+    property color buttonFillColor: "#61BDCACD"
+    property string menuName:"Edit"
+    gradient: Gradient {
+        GradientStop { position: 0.0; color: "#6A7570" }
+        GradientStop { position: 1.0; color: Qt.darker("#6A7570") }
+    }
+
+    Rectangle {
+        id:actionContainer
+         color:"transparent"
+        anchors.centerIn: parent
+        width: parent.width; height: parent.height / 5
+        Row {
+            anchors.centerIn: parent
+            spacing: parent.width/9
+            Button {
+                id: loadButton
+                buttonColor: buttonFillColor
+                label: "Copy"
+                labelSize: 16
+                borderColor: buttonBorderColor
+                height: actionContainer.height; width: actionContainer.width/6
+                onButtonClick: textArea.copy()
+                gradient: Gradient {
+                    GradientStop { position: 0.0; color: Qt.lighter(buttonFillColor,1.25) }
+                    GradientStop { position: 0.67; color: Qt.darker(buttonFillColor,1.3) }
+                }
+            }
+            Button {
+                id: saveButton
+                height: actionContainer.height; width: actionContainer.width/6
+                buttonColor: buttonFillColor
+                label: "Paste"
+                borderColor: buttonBorderColor
+                labelSize: 16
+                onButtonClick: textArea.paste()
+                gradient: Gradient {
+                    GradientStop { position: 0.0; color: Qt.lighter(buttonFillColor,1.25) }
+                    GradientStop { position: 0.67; color: Qt.darker(buttonFillColor,1.3) }
+                }
+            }
+            Button {
+                id: exitButton
+                label: "Select All"
+                height: actionContainer.height; width: actionContainer.width/6
+                labelSize: 16
+                buttonColor: buttonFillColor
+                borderColor:buttonBorderColor
+                onButtonClick: textArea.selectAll()
+                gradient: Gradient {
+                    GradientStop { position: 0.0; color: Qt.lighter(buttonFillColor,1.25) }
+                    GradientStop { position: 0.67; color: Qt.darker(buttonFillColor,1.3) }
+                }
+            }
+        }
+    }
+}
diff --git a/examples/tutorials/gettingStarted/gsQml/core/fileDialog.qml b/examples/tutorials/gettingStarted/gsQml/core/fileDialog.qml
new file mode 100644
index 0000000000..52c00b5e5c
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/core/fileDialog.qml
@@ -0,0 +1,163 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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 1.0
+
+Rectangle {
+    id:dialog
+    height: 200 * partition; width: 200
+    color: "transparent"
+
+    signal selectChanged()
+    signal notifyRefresh()
+    onNotifyRefresh:dirView.model = directory.files
+
+    property string selectedFile
+    property int selectedIndex: 0
+
+    Rectangle {
+        id: dirBox
+        radius: 10
+        anchors.centerIn:parent
+        height: parent.height -15; width: parent.width -30
+
+        Rectangle {
+            id:header
+            height: parent.height*0.1; width: parent.width
+            radius:3
+            z:1
+            gradient: Gradient {
+                GradientStop { position: 0.0; color: "#8C8F8C" }
+                GradientStop { position: 0.17; color: "#6A6D6A" }
+                GradientStop { position: 0.98;color: "#3F3F3F" }
+                GradientStop { position: 1.0; color: "#0e1B20" }
+            }
+            Text {
+                height: header.height; anchors.centerIn: header
+                text: "files:" 
+                color: "lightblue"
+                font.weight: Font.Light
+                font.italic: true
+            }
+        }
+        GridView {
+            id:dirView
+            width:parent.width; height:parent.height*.9
+            anchors.top: header.bottom
+            cellWidth: 100; cellHeight: 75
+            model: directory.files
+            delegate: dirDelegate
+            clip: true
+            highlightMoveDuration: 40
+        }
+        Component {
+            id: dirDelegate
+            Rectangle {
+                id:file
+                color: "transparent"
+                width: GridView.view.cellWidth; height: GridView.view.cellHeight
+
+                Text {
+                    id:fileName
+                    width: parent.width
+                    anchors.centerIn: parent
+                    text: name
+                    color: "#BDCACD"
+                    font.weight: GridView.view.currentIndex == index ?  Font.DemiBold : Font.Normal
+                    font.pointSize: GridView.view.currentIndex == index ?  12 : 10
+                    elide: Text.ElideMiddle
+                    horizontalAlignment: Text.AlignHCenter
+                }
+                Rectangle {
+                    id: selection
+                    width: parent.width; height: parent.height
+                    anchors.centerIn: parent
+                    radius: 10
+                    smooth: true
+                    scale: GridView.view.currentIndex == index ?  1 : 0.5
+                    opacity: GridView.view.currentIndex == index ?  1 : 0
+                    Text {
+                        id: overlay
+                        width: parent.width
+                        anchors.centerIn: parent
+                        text: name
+                        color: "#696167"
+                        font.weight: Font.DemiBold
+                        font.pointSize: 12
+                        smooth: true
+                        elide: Text.ElideMiddle
+                        horizontalAlignment: Text.AlignHCenter
+                    }
+                    Behavior on opacity { NumberAnimation{ duration: 45 } }
+                    Behavior on scale { NumberAnimation{ duration: 45 } }
+                    gradient: Gradient {
+                        GradientStop { position: 0.0; color: Qt.lighter("lightsteelblue",1.25) }
+                        GradientStop { position: 0.67; color: Qt.darker("lightsteelblue",1.3) }
+                    }
+                    border.color: "lightsteelblue"
+                    border.width: 1
+                }
+                MouseArea {
+                    id:fileMouseArea
+                    anchors.fill:parent
+                    hoverEnabled: true
+
+                    onClicked: {
+                        GridView.view.currentIndex = index
+                        selectedFile = directory.files[index].name
+                        selectChanged()
+                    }
+                    onEntered: {
+                            fileName.color = "lightsteelblue"
+                            fileName.font.weight = Font.DemiBold
+                        }
+                    onExited: {
+                            fileName.font.weight = Font.Normal
+                            fileName.color = "#BDCACD"
+                        }
+                }
+            }
+        }
+        gradient: Gradient {
+            GradientStop { position: 0.0; color: "#A5333333" }
+            GradientStop { position: 1.0; color: "#03333333" }
+        }
+    }
+}
diff --git a/examples/tutorials/gettingStarted/gsQml/core/fileMenu.qml b/examples/tutorials/gettingStarted/gsQml/core/fileMenu.qml
new file mode 100644
index 0000000000..e723313544
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/core/fileMenu.qml
@@ -0,0 +1,232 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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 1.0
+
+Rectangle {
+    id: fileMenu
+    height: 480; width:1000
+    property color buttonBorderColor: "#7F8487"
+    property color buttonFillColor: "#8FBDCACD"
+    property string fileContent:directory.fileContent
+
+    //the menuName is accessible from outside this QML file
+    property string menuName: "File"
+
+    //used to divide the screen into parts.
+    property real partition: 1/3
+
+    color: "#6C646A" 
+        gradient: Gradient {
+                        GradientStop { position: 0.0; color: "#6C646A" }
+                        GradientStop { position: 1.0; color: Qt.darker("#6A6D6A") }
+        }
+
+    Directory {
+        id:directory
+        filename: textInput.text
+        onDirectoryChanged:fileDialog.notifyRefresh()
+    }
+
+    Rectangle {
+        id:actionContainer
+
+        //make this rectangle invisible
+        color:"transparent"
+        anchors.left: parent.left
+
+        //the height is a good proportion that creates more space at the top of
+        //the column of buttons
+        width: fileMenu.width * partition; height: fileMenu.height
+
+        Column {
+            anchors.centerIn: parent
+            spacing: parent.height/32
+            Button {
+                id: saveButton
+                label: "Save"
+                borderColor: buttonBorderColor
+                buttonColor: buttonFillColor
+                width: actionContainer.width/ 1.3
+                height:actionContainer.height / 8
+                labelSize:24
+                onButtonClick: {
+                    directory.fileContent = textArea.textContent
+                    directory.filename = textInput.text
+                    directory.saveFile()
+                }
+                gradient: Gradient {
+                    GradientStop { position: 0.0; color: Qt.lighter(buttonFillColor,1.25) }
+                    GradientStop { position: 0.67; color: Qt.darker(buttonFillColor,1.3) }
+                }
+            }
+            Button {
+                id: loadButton
+                width: actionContainer.width/ 1.3
+                height:actionContainer.height/ 8
+                buttonColor: buttonFillColor
+                borderColor: buttonBorderColor
+                label: "Load"
+                labelSize:24
+                onButtonClick:{
+                    directory.filename = textInput.text
+                    directory.loadFile()
+                    textArea.textContent = directory.fileContent
+                }
+                gradient: Gradient {
+                    GradientStop { position: 0.0; color: Qt.lighter(buttonFillColor,1.25) }
+                    GradientStop { position: 0.67; color: Qt.darker(buttonFillColor,1.3) }
+                }
+            }
+            Button {
+                id: newButton
+                width: actionContainer.width/ 1.3
+                height: actionContainer.height/ 8
+                buttonColor: buttonFillColor
+                borderColor: buttonBorderColor
+                label: "New"
+                labelSize: 24
+                onButtonClick:{
+                    textArea.textContent = ""
+                    textInput.text = ""
+                }
+                gradient: Gradient {
+                    GradientStop { position: 0.0; color: Qt.lighter(buttonFillColor,1.25) }
+                    GradientStop { position: 0.67; color: Qt.darker(buttonFillColor,1.3) }
+                }
+
+            }
+            Rectangle {
+                id: space
+                width: actionContainer.width/ 1.3
+                height: actionContainer.height / 16
+                color: "transparent"
+            }
+            Button {
+                id: exitButton
+                width: actionContainer.width/ 1.3
+                height: actionContainer.height/ 8
+                label: "Exit"
+                labelSize: 24
+                buttonColor: buttonFillColor
+                borderColor: buttonBorderColor
+                onButtonClick: Qt.quit()
+                gradient: Gradient {
+                    GradientStop { position: 0.0; color: Qt.lighter(buttonFillColor,1.25) }
+                    GradientStop { position: 0.67; color: Qt.darker(buttonFillColor,1.3) }
+                }
+            }
+        }
+    }
+    Rectangle {
+        id:dialogContainer
+
+        width: 2*fileMenu.width * partition; height: fileMenu.height
+        anchors.right:parent.right
+        color: "transparent"
+
+        Column {
+            anchors.centerIn: parent
+            spacing: parent.height /640
+            FileDialog {
+                id:fileDialog
+                height: 2*dialogContainer.height * partition
+                width: dialogContainer.width
+                onSelectChanged: textInput.text = selectedFile
+            }
+
+            Rectangle {
+                id:lowerPartition
+                height: dialogContainer.height * partition; width: dialogContainer.width
+                color: "transparent"
+
+                Rectangle {
+                    id: nameField
+                    gradient: Gradient {
+                        GradientStop { position: 0.0; color: "#806F6F6F" }
+                        GradientStop { position: 1.0; color: "#136F6F6F" }
+                    }
+                    radius: 10
+                    anchors { centerIn:parent; leftMargin: 15; rightMargin: 15; topMargin: 15 }
+                    height: parent.height-15
+                    width: parent.width -20
+                    border { color: "#4A4A4A"; width:1 }
+
+                    TextInput {
+                        id: textInput
+                        z:2
+                        anchors { bottom: parent.bottom; topMargin: 10; horizontalCenter: parent.horizontalCenter }
+                        width: parent.width - 10
+                        height: parent.height -10
+                        font.pointSize: 40
+                        color: "lightsteelblue"
+                        focus: true
+                    }
+                    Text {
+                        id: textInstruction
+                        anchors.centerIn: parent
+                        text: "Select file name and press save or load"
+                        font {pointSize: 11; weight: Font.Light; italic: true}
+                        color: "lightblue"
+                        z: 2
+                        opacity: (textInput.text == "") ? 1 : 0
+                    }
+                    Text {
+                        id:fieldLabel
+                        anchors { top: parent.top; left: parent.left }
+                        text: "  file name: "
+                        font { pointSize: 11; weight: Font.Light; italic: true }
+                        color: "lightblue"
+                        z:2
+                    }
+                    MouseArea {
+                            anchors.centerIn:parent
+                            width: nameField.width; height: nameField.height
+                            onClicked: {
+                                textInput.text = ""
+                                textInput.focus = true
+                                textInput.forceFocus()
+                            }
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/examples/tutorials/gettingStarted/gsQml/core/menuBar.qml b/examples/tutorials/gettingStarted/gsQml/core/menuBar.qml
new file mode 100644
index 0000000000..4c4b71263a
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/core/menuBar.qml
@@ -0,0 +1,147 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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 1.0
+
+Rectangle {
+    id: menuBar
+    width: 1000; height:300
+    color:"transparent"
+    property color fileColor: "plum"
+    property color editColor: "powderblue"
+
+    property real partition: 1/10
+
+    Column {
+        anchors.fill: parent
+        //container for the header and the buttons
+        z: 1
+        Rectangle {
+            id: labelList
+            height:menuBar.height*partition
+            width: menuBar.width
+            color: "beige"
+            gradient: Gradient {
+                GradientStop { position: 0.0; color: "#8C8F8C" }
+                GradientStop { position: 0.17; color: "#6A6D6A" }
+                GradientStop { position: 0.98;color: "#3F3F3F" }
+                GradientStop { position: 1.0; color: "#0e1B20" }
+            }
+            Text {
+                height: parent.height
+                anchors { right: labelRow.left ; verticalCenter: parent.bottom }
+                text: "menu:    " 
+                color: "lightblue"
+                font { weight: Font.Light; italic: true }
+                smooth: true
+            }
+            //row displays its children in a vertical row
+            Row {
+                id: labelRow
+                anchors.centerIn: parent
+                spacing:40
+                Button {
+                    id: fileButton
+                    height: 20; width: 50
+                    label: "File"
+                    buttonColor : menuListView.currentIndex == 0? fileColor : Qt.darker(fileColor, 1.5)
+                    scale: menuListView.currentIndex == 0? 1.25: 1
+                    labelSize: menuListView.currentIndex == 0? 16:12
+                    radius: 1
+                    smooth:true
+                    //on a button click, change the list's currently selected item to FileMenu
+                    onButtonClick: menuListView.currentIndex = 0
+                    gradient: Gradient {
+                        GradientStop { position: 0.0; color: fileColor }
+                        GradientStop { position: 1.0; color: "#136F6F6F" }
+                    }
+                }
+                Button {
+                    id: editButton
+                    height: 20; width: 50
+                    buttonColor : menuListView.currentIndex == 1? Qt.darker(editColor, 1.5) : Qt.darker(editColor, 1.9)
+                    scale: menuListView.currentIndex == 1? 1.25: 1    
+                    label: "Edit"
+                    radius: 1
+                    labelSize: menuListView.currentIndex == 1? 16:12
+                    smooth:true
+                    //on a button click, change the list's currently selected item to EditMenu
+                    onButtonClick: menuListView.currentIndex = 1    
+                    gradient: Gradient {
+                        GradientStop { position: 0.0; color: editColor }
+                        GradientStop { position: 1.0; color: "#136F6F6F" }
+                    }
+                }
+            }
+        }
+
+        //list view will display a model according to a delegate
+        ListView {
+            id: menuListView
+            width:menuBar.width; height: 9*menuBar.height*partition
+
+            //the model contains the data
+            model: menuListModel
+
+            //control the movement of the menu switching
+            snapMode: ListView.SnapOneItem
+            orientation: ListView.Horizontal
+            boundsBehavior: Flickable.StopAtBounds 
+            flickDeceleration: 5000
+            highlightFollowsCurrentItem: true
+            highlightMoveDuration:240
+            highlightRangeMode: ListView.StrictlyEnforceRange
+        }
+    }
+    //a list of visual items already have delegates handling their display
+    VisualItemModel {
+        id: menuListModel
+
+        FileMenu {
+            id:fileMenu
+            width: menuListView.width; height: menuListView.height
+            color: fileColor
+        }
+        EditMenu {
+            color: editColor
+            width:  menuListView.width; height: menuListView.height
+        }
+    }
+}
diff --git a/examples/tutorials/gettingStarted/gsQml/core/qmldir b/examples/tutorials/gettingStarted/gsQml/core/qmldir
new file mode 100644
index 0000000000..bc40d0ceed
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/core/qmldir
@@ -0,0 +1,49 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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$
+**
+****************************************************************************/
+
+Button ./button.qml
+FileDialog ./fileDialog.qml
+TextArea ./textArea.qml
+TextEditor ./textEditor.qml
+EditMenu ./editMenu.qml
+MenuBar ./menuBar.qml
+FileMenu ./fileMenu.qml
+
+plugin FileDialog ../plugins
diff --git a/examples/tutorials/gettingStarted/gsQml/core/textArea.qml b/examples/tutorials/gettingStarted/gsQml/core/textArea.qml
new file mode 100644
index 0000000000..bf7b0beb70
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/core/textArea.qml
@@ -0,0 +1,87 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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 1.0
+
+Rectangle {
+    id:textArea
+
+    function paste() { textEdit.paste() }
+    function copy() { textEdit.copy() }
+    function selectAll() { textEdit.selectAll() }
+
+    width :400; height:400
+
+    property color fontColor: "white"
+    property alias textContent: textEdit.text
+    Flickable {
+        id: flickArea
+        width: parent.width; height: parent.height
+        anchors.fill:parent
+
+        boundsBehavior: Flickable.StopAtBounds
+        flickableDirection: Flickable.HorizontalFlick
+        interactive: true
+        //Will move the text Edit area to make the area visible when
+        //scrolled with keyboard strokes
+        function ensureVisible(r) {
+            if (contentX >= r.x)
+            contentX = r.x;
+            else if (contentX+width <= r.x+r.width)
+            contentX = r.x+r.width-width;
+            if (contentY >= r.y)
+            contentY = r.y;
+            else if (contentY+height <= r.y+r.height)
+            contentY = r.y+r.height-height;
+        }
+
+        TextEdit {
+            id: textEdit
+            anchors.fill:parent
+            width:parent.width; height:parent.height
+            color:fontColor
+            focus: true
+            wrapMode: TextEdit.Wrap
+            font.pointSize:10
+            onCursorRectangleChanged: flickArea.ensureVisible(cursorRectangle)
+            selectByMouse: true
+        }
+    }
+}
diff --git a/examples/tutorials/gettingStarted/gsQml/filedialog/dialogPlugin.cpp b/examples/tutorials/gettingStarted/gsQml/filedialog/dialogPlugin.cpp
new file mode 100644
index 0000000000..fde24d9c26
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/filedialog/dialogPlugin.cpp
@@ -0,0 +1,54 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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 "dialogPlugin.h"
+#include "directory.h"
+#include "file.h"
+#include <QtDeclarative/qdeclarative.h>
+
+void DialogPlugin::registerTypes(const char *uri)
+{
+    //register the class Directory into QML as a "Directory" element version 1.0
+    qmlRegisterType<Directory>(uri, 1, 0, "Directory");
+    qmlRegisterType<File>(uri,1,0,"File");
+}
+
+//FileDialog is the plugin name (same as the TARGET in the project file) and DialogPlugin is the plugin classs
+Q_EXPORT_PLUGIN2(FileDialog, DialogPlugin);
\ No newline at end of file
diff --git a/examples/tutorials/gettingStarted/gsQml/filedialog/dialogPlugin.h b/examples/tutorials/gettingStarted/gsQml/filedialog/dialogPlugin.h
new file mode 100644
index 0000000000..0dcb15be9a
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/filedialog/dialogPlugin.h
@@ -0,0 +1,57 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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 DIALOGPLUGIN_H
+#define DIALOGPLUGIN_H
+
+#include <QtDeclarative/QDeclarativeExtensionPlugin>
+
+class DialogPlugin : public QDeclarativeExtensionPlugin
+{
+    Q_OBJECT
+
+    public:
+        //registerTypes is inherited from QDeclarativeExtensionPlugin
+        void registerTypes(const char *uri);
+
+};
+
+#endif
+
diff --git a/examples/tutorials/gettingStarted/gsQml/filedialog/directory.cpp b/examples/tutorials/gettingStarted/gsQml/filedialog/directory.cpp
new file mode 100644
index 0000000000..c675fc9b4a
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/filedialog/directory.cpp
@@ -0,0 +1,224 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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 "directory.h"
+#include <QDebug>
+
+/*
+Directory constructor
+
+Initialize the saves directory and creates the file list
+*/
+Directory::Directory(QObject *parent) : QObject(parent)
+{
+    m_dir.cd( QDir::currentPath() );
+
+    //go to the saved directory. if not found, create save directory
+    m_saveDir = "saves";
+    if ( m_dir.cd(m_saveDir) == 0 ) {
+        m_dir.mkdir(m_saveDir);
+        m_dir.cd(m_saveDir);
+    }
+     m_filterList << "*.txt";
+    refresh();
+}
+
+/*
+Directory::filesNumber
+Return the number of Files
+*/
+int Directory::filesCount() const
+{
+    return m_fileList.size();
+}
+
+/*
+Function called to append data onto list property
+*/
+void appendFiles(QDeclarativeListProperty<File> * property, File * file)
+{
+    Q_UNUSED(property);
+    Q_UNUSED(file);
+    //Do nothing. can't add to a directory using this method
+}
+
+/*
+Function called to retrieve file in the list using an index
+*/
+File* fileAt(QDeclarativeListProperty<File> * property, int index)
+{
+    return static_cast< QList<File *> *>(property->data)->at(index);
+}
+
+/*
+Returns the number of files in the list
+*/
+int filesSize(QDeclarativeListProperty<File> * property) 
+{
+    return static_cast< QList<File *> *>(property->data)->size();
+}
+
+/*
+Function called to empty the list property contents
+*/
+void clearFilesPtr(QDeclarativeListProperty<File> *property)
+{
+    return static_cast< QList<File *> *>(property->data)->clear();
+}
+
+/*
+Returns the list of files as a QDeclarativeListProperty.
+*/
+QDeclarativeListProperty<File> Directory::files()
+{
+    refresh();
+    return QDeclarativeListProperty<File>( this, &m_fileList, &appendFiles, &filesSize, &fileAt,  &clearFilesPtr );
+}
+
+/*
+Return the name of the currently selected file
+*/
+QString Directory::filename() const
+{
+    return currentFile.name();
+}
+
+/*
+Return the file's content as a string.
+*/
+QString Directory::fileContent() const
+{
+    return m_fileContent;
+}
+
+/*
+Set the file name of the current file
+*/
+void Directory::setFilename(const QString &str)
+{
+    if( str != currentFile.name() ) {
+        currentFile.setName(str);
+        emit filenameChanged();
+    }
+}
+
+/*
+Set the content of the file as a string
+*/
+void Directory::setFileContent(const QString &str)
+{
+    if(str != m_fileContent){
+        m_fileContent = str;
+        emit fileContentChanged();
+    }
+}
+
+/*
+Called from QML to save the file using the filename and file content.
+Saving makes sure that the file has a .txt extension.
+*/
+void Directory::saveFile()
+{
+    if(currentFile.name().size() == 0){
+        qWarning()<< "Empty filename. no save";
+        return;
+    }
+    QString extendedName = currentFile.name();
+    if(!currentFile.name().endsWith(".txt")){
+        extendedName.append(".txt");
+    }
+    QFile file( m_dir.filePath(extendedName) );
+    if ( file.open(QFile::WriteOnly | QFile::Truncate) ) {
+        QTextStream outStream(&file);
+        outStream << m_fileContent;
+    }
+    file.close();
+    refresh();
+    emit directoryChanged();
+}
+
+/*
+Load the contents of a file.
+Only loads files with a .txt extension
+*/
+void Directory::loadFile()
+{
+    m_fileContent.clear();
+    QString extendedName = currentFile.name();
+    if( !currentFile.name().endsWith(".txt") ) {
+        extendedName.append(".txt");
+    }
+
+    QFile file( m_dir.filePath(extendedName) );
+    if ( file.open(QFile::ReadOnly ) ) {
+        QTextStream inStream(&file);
+
+        QString line;
+        do {
+            line = inStream.read(75);
+            m_fileContent.append(line);
+        } while ( !line.isNull() ) ;
+    }
+    file.close();
+}
+
+/*
+Reloads the content of the files list. This is to ensure that the newly
+created files are added onto the list.
+*/
+void Directory::refresh()
+{
+    m_dirFiles = m_dir.entryList(m_filterList,QDir::Files,QDir::Name);
+    m_fileList.clear();
+
+    File * file;
+    for(int i = 0; i < m_dirFiles.size() ; i ++) {
+        file = new File();
+
+        if( m_dirFiles.at(i).endsWith(".txt") ) {
+            QString name = m_dirFiles.at(i);
+            file->setName( name.remove(".txt",Qt::CaseSensitive) );
+        }
+        else {
+            file->setName(m_dirFiles.at(i));
+        }
+        m_fileList.append(file);
+    }
+}
\ No newline at end of file
diff --git a/examples/tutorials/gettingStarted/gsQml/filedialog/directory.h b/examples/tutorials/gettingStarted/gsQml/filedialog/directory.h
new file mode 100644
index 0000000000..6cad7549a6
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/filedialog/directory.h
@@ -0,0 +1,107 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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 DIRECTORY_H
+#define DIRECTORY_H
+
+#include "file.h"
+
+#include <QDir>
+#include <QStringList>
+#include <QTextStream>
+#include <QDeclarativeListProperty>
+#include <QObject>
+
+class Directory : public QObject {
+
+    Q_OBJECT
+
+    //number of files in the directory
+    Q_PROPERTY(int filesCount READ filesCount)
+
+    //list property containing file names as QString
+    Q_PROPERTY(QDeclarativeListProperty<File> files READ files CONSTANT )
+
+    //file name of the text file to read/write
+    Q_PROPERTY(QString filename READ filename WRITE setFilename NOTIFY filenameChanged)
+
+    //text content of the file
+    Q_PROPERTY(QString fileContent READ fileContent WRITE setFileContent NOTIFY fileContentChanged)
+
+    public:
+        Directory(QObject *parent = 0);
+
+        //properties' read functions
+        int filesCount() const;
+        QString filename() const;
+        QString fileContent() const;
+        QDeclarativeListProperty<File> files();
+
+        //properties' write functions
+        void setFilename(const QString &str);
+        void setFileContent(const QString &str);
+
+        //accessible from QML
+        Q_INVOKABLE void saveFile();
+        Q_INVOKABLE void loadFile();
+
+    signals:
+        void directoryChanged();
+        void filenameChanged();
+        void fileContentChanged();
+
+    private:
+        QDir m_dir;
+        QStringList m_dirFiles;
+        File currentFile;
+        QString m_saveDir;
+        QStringList m_filterList;
+
+        //contains the file data in QString format
+        QString m_fileContent;
+
+        //Registered to QML in a plugin. Accessible from QML as a property of Directory
+        QList<File *> m_fileList;
+
+        //refresh content of the directory 
+        void refresh();
+};
+
+#endif
diff --git a/examples/tutorials/gettingStarted/gsQml/filedialog/file.cpp b/examples/tutorials/gettingStarted/gsQml/filedialog/file.cpp
new file mode 100644
index 0000000000..44b0915a0a
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/filedialog/file.cpp
@@ -0,0 +1,57 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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 "file.h"
+
+File::File(QObject *parent) : QObject(parent)
+{
+    m_name = "";
+}
+
+QString File::name() const{
+    return m_name;
+}
+void File::setName(const QString &str){
+    if(str != m_name){
+        m_name = str;
+        emit nameChanged();
+    }
+}
\ No newline at end of file
diff --git a/examples/tutorials/gettingStarted/gsQml/filedialog/file.h b/examples/tutorials/gettingStarted/gsQml/filedialog/file.h
new file mode 100644
index 0000000000..21e8ebb05d
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/filedialog/file.h
@@ -0,0 +1,67 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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 FILE_H
+#define FILE_H
+
+
+#include <QString>
+#include <QObject>
+
+class File : public QObject{
+
+    Q_OBJECT
+
+    Q_PROPERTY(QString name READ name WRITE setName NOTIFY nameChanged)
+
+    public:
+        File(QObject *parent = 0);
+
+        QString name() const;
+        void setName(const QString &str);
+
+    signals:
+        void nameChanged();
+
+    private:
+        QString m_name;
+};
+
+#endif
\ No newline at end of file
diff --git a/examples/tutorials/gettingStarted/gsQml/filedialog/filedialog.pro b/examples/tutorials/gettingStarted/gsQml/filedialog/filedialog.pro
new file mode 100644
index 0000000000..d85787d00c
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/filedialog/filedialog.pro
@@ -0,0 +1,17 @@
+TEMPLATE = lib
+CONFIG += qt plugin
+QT += declarative
+
+DESTDIR +=  ../plugins
+OBJECTS_DIR = tmp
+MOC_DIR = tmp
+
+TARGET = FileDialog
+
+HEADERS +=     directory.h \
+        file.h \
+        dialogPlugin.h
+
+SOURCES +=    directory.cpp \
+        file.cpp \
+        dialogPlugin.cpp
diff --git a/examples/tutorials/gettingStarted/gsQml/filedialog/qmldir b/examples/tutorials/gettingStarted/gsQml/filedialog/qmldir
new file mode 100644
index 0000000000..c2b27dad58
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/filedialog/qmldir
@@ -0,0 +1 @@
+plugin FileDialog plugins
diff --git a/examples/tutorials/gettingStarted/gsQml/images/arrow.png b/examples/tutorials/gettingStarted/gsQml/images/arrow.png
new file mode 100644
index 0000000000..14978c2e56
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/images/arrow.png
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part0/Button.qml b/examples/tutorials/gettingStarted/gsQml/parts/part0/Button.qml
new file mode 100644
index 0000000000..1462b6c5d9
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part0/Button.qml
@@ -0,0 +1,55 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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$
+**
+****************************************************************************/
+
+//! [document]
+import QtQuick 1.0
+
+Rectangle {
+    id: simplebutton
+    color: "grey"    
+    width: 150; height: 75
+    
+    Text{
+        id: buttonLabel
+        anchors.centerIn: parent
+        text: "button label"    
+    }
+}
+//! [document]
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part1/Button.qml b/examples/tutorials/gettingStarted/gsQml/parts/part1/Button.qml
new file mode 100644
index 0000000000..540f31beec
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part1/Button.qml
@@ -0,0 +1,97 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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 1.0
+
+Rectangle {
+
+    //identifier of the item
+    id: button
+
+    property string label: "button label"
+
+    //these properties act as constants, useable outside this QML file
+    property int buttonHeight: 75
+    property int buttonWidth: 150
+
+    //the color highlight when the mouse hovers on the rectangle
+    property color onHoverColor: "gold"
+    property color borderColor: "white"
+
+    //buttonColor is set to the button's main color
+    property color buttonColor: "lightblue"
+
+    //set appearance properties
+    radius: 10
+    smooth: true
+    border{color: "white"; width: 3}
+    width: buttonWidth; height: buttonHeight
+
+    Text{
+        id: buttonLabel
+        anchors.centerIn: parent
+        text: label
+    }
+
+    //buttonClick() is callable and a signal handler, onButtonClick is automatically created
+    signal buttonClick()
+    onButtonClick: {
+        console.log(buttonLabel.text + " clicked" )
+    }
+
+    //define the clickable area to be the whole rectangle
+    MouseArea{
+        id: buttonMouseArea
+        anchors.fill: parent    //stretch the area to the parent's dimension
+        onClicked: buttonClick()
+
+        //if true, then onEntered and onExited called if mouse hovers in the mouse area
+        //if false, a button must be clicked to detect the mouse hover
+        hoverEnabled: true
+
+        //display a border if the mouse hovers on the button mouse area
+        onEntered: parent.border.color = onHoverColor
+        //remove the border if the mouse exits the button mouse area
+        onExited:  parent.border.color = borderColor
+    }
+
+    //change the color of the button when pressed
+    color: buttonMouseArea.pressed ? Qt.darker(buttonColor, 1.5) : buttonColor
+}
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part1/EditMenu.qml b/examples/tutorials/gettingStarted/gsQml/parts/part1/EditMenu.qml
new file mode 100644
index 0000000000..c4afc6edb3
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part1/EditMenu.qml
@@ -0,0 +1,76 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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 1.0
+
+Rectangle {
+    id: editMenu
+    height: 480; width:1000
+    color: "powderblue"
+    property string menuName:"Edit"
+
+    Rectangle{
+        id:actionContainer
+         color:"transparent"
+        anchors.centerIn: parent
+
+        width: parent.width; height: parent.height / 5
+        Row{
+            anchors.centerIn: parent
+            spacing: parent.width/6
+            Button{
+                id: loadButton
+                buttonColor: "lightgrey"
+                label: "Cut"
+            }
+
+            Button{
+                buttonColor: "grey"
+                id: saveButton
+                label: "Paste"
+            }
+            Button{
+                id: exitButton
+                label: "Select All"
+                buttonColor: "darkgrey"
+            }
+        }
+    }
+}
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part1/FileMenu.qml b/examples/tutorials/gettingStarted/gsQml/parts/part1/FileMenu.qml
new file mode 100644
index 0000000000..0bb01447f3
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part1/FileMenu.qml
@@ -0,0 +1,91 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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 1.0
+
+Rectangle {
+    id: fileMenu
+
+    //the menuName is accessible from outside this QML file
+    property string menuName: "File"
+
+    //generous amount of screen space that will allow the buttons to fit
+    height: 480; width:1000
+
+    color: "#6C646A"
+
+    //a sub-rectangle allows the flexibility of setting the row area
+    Rectangle{
+        id:actionContainer
+
+        //make this rectangle invisible
+        color:"transparent"
+        anchors.centerIn: parent
+
+        //the height is a good proportion that creates more space at the top of the row of buttons
+        width: parent.width; height: parent.height / 5
+
+        Row{
+            anchors.centerIn: parent
+            spacing: parent.width/6
+            Button{
+                id: loadButton
+                buttonColor: "lightgrey"
+                label: "Load"
+            }
+
+            Button{
+                buttonColor: "grey"
+                id: saveButton
+                label: "Save"
+            }
+            Button{
+                id: exitButton
+                label: "Exit"
+                buttonColor: "darkgrey"
+
+                //exit the application if the exitButton is clicked
+                onButtonClick:{
+                    Qt.quit()
+                }
+            }
+        }
+    }
+}
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part1/SimpleButton.qml b/examples/tutorials/gettingStarted/gsQml/parts/part1/SimpleButton.qml
new file mode 100644
index 0000000000..7247a90c53
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part1/SimpleButton.qml
@@ -0,0 +1,73 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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 1.0
+
+Rectangle {
+
+    //identifier of the item
+    id: simplebutton
+
+    //the rectangle's fill color
+    color: "grey"
+
+    //dimensions of the button
+    width: 150; height: 75
+
+    //A text element contains functionalities for creating texts
+    Text {
+        id: buttonLabel
+
+        //center the text inside the parent
+        anchors.centerIn: parent
+
+        //text property binds to the label displayed on the button
+        text: "button label"
+    }
+
+    //define the clickable area to be the whole rectangle
+    MouseArea {
+        id: buttonMouseArea
+        anchors.fill: parent    //anchor all sides of the mouse area to the rectangle's anchors
+
+        //onClicked handles valid mouse button clicks
+        onClicked: console.log(buttonLabel.text + " clicked" )
+    }
+}
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part1/pics/qml-texteditor1_button.png b/examples/tutorials/gettingStarted/gsQml/parts/part1/pics/qml-texteditor1_button.png
new file mode 100644
index 0000000000..aab64bcf39
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part1/pics/qml-texteditor1_button.png
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part1/pics/qml-texteditor1_editmenu.png b/examples/tutorials/gettingStarted/gsQml/parts/part1/pics/qml-texteditor1_editmenu.png
new file mode 100644
index 0000000000..d3ff66f2fd
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part1/pics/qml-texteditor1_editmenu.png
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part1/pics/qml-texteditor1_filemenu.png b/examples/tutorials/gettingStarted/gsQml/parts/part1/pics/qml-texteditor1_filemenu.png
new file mode 100644
index 0000000000..f2e2b0d990
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part1/pics/qml-texteditor1_filemenu.png
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part1/pics/qml-texteditor1_simplebutton.png b/examples/tutorials/gettingStarted/gsQml/parts/part1/pics/qml-texteditor1_simplebutton.png
new file mode 100644
index 0000000000..21ce50929b
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part1/pics/qml-texteditor1_simplebutton.png
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part1/qml-texteditor.qmlproject b/examples/tutorials/gettingStarted/gsQml/parts/part1/qml-texteditor.qmlproject
new file mode 100644
index 0000000000..d4909f8685
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part1/qml-texteditor.qmlproject
@@ -0,0 +1,16 @@
+import QmlProject 1.0
+
+Project {
+    /* Include .qml, .js, and image files from current directory and subdirectories */
+    QmlFiles {
+        directory: "."
+    }
+    JavaScriptFiles {
+        directory: "."
+    }
+    ImageFiles {
+        directory: "."
+    }
+    /* List of plugin directories passed to QML runtime */
+    // importPaths: [ " ../exampleplugin " ]
+}
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part2/Button.qml b/examples/tutorials/gettingStarted/gsQml/parts/part2/Button.qml
new file mode 100644
index 0000000000..54f5b2ca06
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part2/Button.qml
@@ -0,0 +1,99 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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 1.0
+
+Rectangle {
+
+    //identifier of the item
+    id: button
+
+    property string label: "button label"
+
+    //these properties act as constants, useable outside this QML file
+    property int buttonHeight: 75
+    property int buttonWidth: 150
+    
+    //the color highlight when the mouse hovers on the rectangle
+    property color onHoverColor: "gold"
+    property color borderColor: "white"
+
+    //buttonColor is set to the button's main color
+    property color buttonColor: "lightblue"    
+
+    //set appearance properties
+    radius:10
+    smooth: true
+    border{color: "white"; width: 3}
+    width: buttonWidth; height: buttonHeight
+    
+    Text{
+        id: buttonLabel
+        anchors.centerIn: parent
+        text: label
+    }
+
+    //buttonClick() is callable and a signal handler, onButtonClick is automatically created
+    signal buttonClick()
+    onButtonClick: {
+        console.log(buttonLabel.text + " clicked" )
+    }
+
+    //define the clickable area to be the whole rectangle
+    MouseArea{ 
+        id: buttonMouseArea
+        anchors.fill: parent    //stretch the area to the parent's dimension
+        onClicked: buttonClick()
+             
+        //if true, then onEntered and onExited called if mouse hovers in the mouse area
+                //if false, a button must be clicked to detect the mouse hover
+                hoverEnabled: true
+
+                //display a border if the mouse hovers on the button mouse area
+                onEntered: parent.border.color = onHoverColor
+                //remove the border if the mouse exits the button mouse area
+                onExited:  parent.border.color = borderColor
+        
+    }
+
+    //change the color of the button when pressed
+    color: buttonMouseArea.pressed ? Qt.darker(buttonColor, 1.5) : buttonColor
+
+}
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part2/EditMenu.qml b/examples/tutorials/gettingStarted/gsQml/parts/part2/EditMenu.qml
new file mode 100644
index 0000000000..cb83ec4b8a
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part2/EditMenu.qml
@@ -0,0 +1,77 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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 1.0
+
+Rectangle {
+    id: editMenu
+    height: 480; width:1000
+    color: "powderblue"
+    property string menuName:"Edit"
+
+    Rectangle{
+        id:actionContainer
+         color:"transparent"
+        anchors.centerIn: parent
+
+        width: parent.width; height: parent.height / 5
+        Row{
+            anchors.centerIn: parent
+            spacing: parent.width/6
+            Button{
+                id: loadButton
+                buttonColor: "lightgrey"
+                label: "Cut"
+            }
+            
+            Button{
+                buttonColor: "grey"
+                id: saveButton
+                label: "Paste"
+            }
+            Button{
+                id: exitButton
+                label: "Select All"
+                buttonColor: "darkgrey"
+            }
+        }
+    }
+
+}
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part2/FileMenu.qml b/examples/tutorials/gettingStarted/gsQml/parts/part2/FileMenu.qml
new file mode 100644
index 0000000000..3d89fbf880
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part2/FileMenu.qml
@@ -0,0 +1,92 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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 1.0
+
+Rectangle {
+    id: fileMenu
+
+    //the menuName is accessible from outside this QML file
+    property string menuName: "File"
+
+    //generous amount of screen space that will allow the buttons to fit
+    height: 480; width:1000
+
+    color: "#6C646A" 
+
+    //a sub-rectangle allows the flexibility of setting the row area 
+    Rectangle{
+        id:actionContainer
+
+        //make this rectangle invisible
+        color:"transparent"
+        anchors.centerIn: parent
+
+        //the height is a good proportion that creates more space at the top of the row of buttons
+        width: parent.width; height: parent.height / 5
+
+        Row{
+            anchors.centerIn: parent
+            spacing: parent.width/6
+            Button{
+                id: loadButton
+                buttonColor: "lightgrey"
+                label: "Load"
+            }
+            
+            Button{
+                buttonColor: "grey"
+                id: saveButton
+                label: "Save"
+            }
+            Button{
+                id: exitButton
+                label: "Exit"
+                buttonColor: "darkgrey"
+
+                //exit the application if the exitButton is clicked
+                onButtonClick:{
+                    Qt.quit()
+                }
+            }
+        }
+    }
+
+}
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part2/MenuBar.qml b/examples/tutorials/gettingStarted/gsQml/parts/part2/MenuBar.qml
new file mode 100644
index 0000000000..69e890669a
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part2/MenuBar.qml
@@ -0,0 +1,140 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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 1.0
+
+Rectangle {
+    id: menuBar
+    width: 1000
+    height:300
+
+    property color fileColor: "thistle"
+    property color editColor: "powderblue"
+
+    //container for the header and the buttons
+    Rectangle{
+        
+        id: labelList
+        height:parent.height/10
+        width: parent.width
+        color: "steelblue"
+        
+        //default z is 0, items with higher z values are shown on top of items with lower z values
+        z: 1
+
+        //row displays its children in a vertical row
+        Row{
+            anchors.centerIn: parent
+            spacing:40
+            Button{
+                height: 20
+                width: 50
+                label: "File"
+                id: fileButton
+                buttonColor : menuListView.currentIndex == 0? fileColor : Qt.darker(fileColor, 1.5)
+                scale: menuListView.currentIndex == 0? 1.25: 1
+                radius: 1
+
+                //on a button click, change the list's currently selected item to FileMenu
+                onButtonClick: {
+                    menuListView.currentIndex = 0
+                }
+            }
+            Button{
+                height: 20
+                width: 50
+                id: editButton
+                buttonColor : menuListView.currentIndex == 1?  editColor : Qt.darker(editColor, 1.5)
+                scale: menuListView.currentIndex == 1? 1.25: 1    
+                label: "Edit"
+                radius: 1
+
+                //on a button click, change the list's currently selected item to EditMenu
+                onButtonClick: {
+                    menuListView.currentIndex = 1    
+                }
+
+                
+            }
+
+
+        }
+    }
+
+    //a list of visual items already have delegates handling their display
+    VisualItemModel{
+        id: menuListModel
+
+        FileMenu{
+            width: menuListView.width
+            height: menuBar.height
+            color: fileColor
+        }
+        EditMenu{
+            color: editColor
+            width:  menuListView.width
+            height: menuBar.height
+            
+        }
+    }
+
+    //list view will display a model according to a delegate
+    ListView{
+        id: menuListView
+        anchors.fill:parent
+        anchors.bottom: parent.bottom
+        width:parent.width
+        height: parent.height
+
+        //the model contains the data
+        model: menuListModel
+
+        //control the movement of the menu switching
+        snapMode: ListView.SnapOneItem
+        orientation: ListView.Horizontal
+        boundsBehavior: Flickable.StopAtBounds 
+        flickDeceleration: 5000
+        highlightFollowsCurrentItem: true
+        highlightMoveDuration:240
+        highlightRangeMode: ListView.StrictlyEnforceRange
+    }
+
+
+}
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part2/pics/qml-texteditor2_menubar.png b/examples/tutorials/gettingStarted/gsQml/parts/part2/pics/qml-texteditor2_menubar.png
new file mode 100644
index 0000000000..da959a3468
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part2/pics/qml-texteditor2_menubar.png
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part2/qml-texteditor2.qmlproject b/examples/tutorials/gettingStarted/gsQml/parts/part2/qml-texteditor2.qmlproject
new file mode 100644
index 0000000000..d4909f8685
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part2/qml-texteditor2.qmlproject
@@ -0,0 +1,16 @@
+import QmlProject 1.0
+
+Project {
+    /* Include .qml, .js, and image files from current directory and subdirectories */
+    QmlFiles {
+        directory: "."
+    }
+    JavaScriptFiles {
+        directory: "."
+    }
+    ImageFiles {
+        directory: "."
+    }
+    /* List of plugin directories passed to QML runtime */
+    // importPaths: [ " ../exampleplugin " ]
+}
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part3/Button.qml b/examples/tutorials/gettingStarted/gsQml/parts/part3/Button.qml
new file mode 100644
index 0000000000..54f5b2ca06
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part3/Button.qml
@@ -0,0 +1,99 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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 1.0
+
+Rectangle {
+
+    //identifier of the item
+    id: button
+
+    property string label: "button label"
+
+    //these properties act as constants, useable outside this QML file
+    property int buttonHeight: 75
+    property int buttonWidth: 150
+    
+    //the color highlight when the mouse hovers on the rectangle
+    property color onHoverColor: "gold"
+    property color borderColor: "white"
+
+    //buttonColor is set to the button's main color
+    property color buttonColor: "lightblue"    
+
+    //set appearance properties
+    radius:10
+    smooth: true
+    border{color: "white"; width: 3}
+    width: buttonWidth; height: buttonHeight
+    
+    Text{
+        id: buttonLabel
+        anchors.centerIn: parent
+        text: label
+    }
+
+    //buttonClick() is callable and a signal handler, onButtonClick is automatically created
+    signal buttonClick()
+    onButtonClick: {
+        console.log(buttonLabel.text + " clicked" )
+    }
+
+    //define the clickable area to be the whole rectangle
+    MouseArea{ 
+        id: buttonMouseArea
+        anchors.fill: parent    //stretch the area to the parent's dimension
+        onClicked: buttonClick()
+             
+        //if true, then onEntered and onExited called if mouse hovers in the mouse area
+                //if false, a button must be clicked to detect the mouse hover
+                hoverEnabled: true
+
+                //display a border if the mouse hovers on the button mouse area
+                onEntered: parent.border.color = onHoverColor
+                //remove the border if the mouse exits the button mouse area
+                onExited:  parent.border.color = borderColor
+        
+    }
+
+    //change the color of the button when pressed
+    color: buttonMouseArea.pressed ? Qt.darker(buttonColor, 1.5) : buttonColor
+
+}
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part3/EditMenu.qml b/examples/tutorials/gettingStarted/gsQml/parts/part3/EditMenu.qml
new file mode 100644
index 0000000000..cb83ec4b8a
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part3/EditMenu.qml
@@ -0,0 +1,77 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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 1.0
+
+Rectangle {
+    id: editMenu
+    height: 480; width:1000
+    color: "powderblue"
+    property string menuName:"Edit"
+
+    Rectangle{
+        id:actionContainer
+         color:"transparent"
+        anchors.centerIn: parent
+
+        width: parent.width; height: parent.height / 5
+        Row{
+            anchors.centerIn: parent
+            spacing: parent.width/6
+            Button{
+                id: loadButton
+                buttonColor: "lightgrey"
+                label: "Cut"
+            }
+            
+            Button{
+                buttonColor: "grey"
+                id: saveButton
+                label: "Paste"
+            }
+            Button{
+                id: exitButton
+                label: "Select All"
+                buttonColor: "darkgrey"
+            }
+        }
+    }
+
+}
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part3/FileMenu.qml b/examples/tutorials/gettingStarted/gsQml/parts/part3/FileMenu.qml
new file mode 100644
index 0000000000..3d89fbf880
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part3/FileMenu.qml
@@ -0,0 +1,92 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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 1.0
+
+Rectangle {
+    id: fileMenu
+
+    //the menuName is accessible from outside this QML file
+    property string menuName: "File"
+
+    //generous amount of screen space that will allow the buttons to fit
+    height: 480; width:1000
+
+    color: "#6C646A" 
+
+    //a sub-rectangle allows the flexibility of setting the row area 
+    Rectangle{
+        id:actionContainer
+
+        //make this rectangle invisible
+        color:"transparent"
+        anchors.centerIn: parent
+
+        //the height is a good proportion that creates more space at the top of the row of buttons
+        width: parent.width; height: parent.height / 5
+
+        Row{
+            anchors.centerIn: parent
+            spacing: parent.width/6
+            Button{
+                id: loadButton
+                buttonColor: "lightgrey"
+                label: "Load"
+            }
+            
+            Button{
+                buttonColor: "grey"
+                id: saveButton
+                label: "Save"
+            }
+            Button{
+                id: exitButton
+                label: "Exit"
+                buttonColor: "darkgrey"
+
+                //exit the application if the exitButton is clicked
+                onButtonClick:{
+                    Qt.quit()
+                }
+            }
+        }
+    }
+
+}
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part3/MenuBar.qml b/examples/tutorials/gettingStarted/gsQml/parts/part3/MenuBar.qml
new file mode 100644
index 0000000000..69e890669a
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part3/MenuBar.qml
@@ -0,0 +1,140 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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 1.0
+
+Rectangle {
+    id: menuBar
+    width: 1000
+    height:300
+
+    property color fileColor: "thistle"
+    property color editColor: "powderblue"
+
+    //container for the header and the buttons
+    Rectangle{
+        
+        id: labelList
+        height:parent.height/10
+        width: parent.width
+        color: "steelblue"
+        
+        //default z is 0, items with higher z values are shown on top of items with lower z values
+        z: 1
+
+        //row displays its children in a vertical row
+        Row{
+            anchors.centerIn: parent
+            spacing:40
+            Button{
+                height: 20
+                width: 50
+                label: "File"
+                id: fileButton
+                buttonColor : menuListView.currentIndex == 0? fileColor : Qt.darker(fileColor, 1.5)
+                scale: menuListView.currentIndex == 0? 1.25: 1
+                radius: 1
+
+                //on a button click, change the list's currently selected item to FileMenu
+                onButtonClick: {
+                    menuListView.currentIndex = 0
+                }
+            }
+            Button{
+                height: 20
+                width: 50
+                id: editButton
+                buttonColor : menuListView.currentIndex == 1?  editColor : Qt.darker(editColor, 1.5)
+                scale: menuListView.currentIndex == 1? 1.25: 1    
+                label: "Edit"
+                radius: 1
+
+                //on a button click, change the list's currently selected item to EditMenu
+                onButtonClick: {
+                    menuListView.currentIndex = 1    
+                }
+
+                
+            }
+
+
+        }
+    }
+
+    //a list of visual items already have delegates handling their display
+    VisualItemModel{
+        id: menuListModel
+
+        FileMenu{
+            width: menuListView.width
+            height: menuBar.height
+            color: fileColor
+        }
+        EditMenu{
+            color: editColor
+            width:  menuListView.width
+            height: menuBar.height
+            
+        }
+    }
+
+    //list view will display a model according to a delegate
+    ListView{
+        id: menuListView
+        anchors.fill:parent
+        anchors.bottom: parent.bottom
+        width:parent.width
+        height: parent.height
+
+        //the model contains the data
+        model: menuListModel
+
+        //control the movement of the menu switching
+        snapMode: ListView.SnapOneItem
+        orientation: ListView.Horizontal
+        boundsBehavior: Flickable.StopAtBounds 
+        flickDeceleration: 5000
+        highlightFollowsCurrentItem: true
+        highlightMoveDuration:240
+        highlightRangeMode: ListView.StrictlyEnforceRange
+    }
+
+
+}
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part3/TextArea.qml b/examples/tutorials/gettingStarted/gsQml/parts/part3/TextArea.qml
new file mode 100644
index 0000000000..8fc8d4e1aa
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part3/TextArea.qml
@@ -0,0 +1,80 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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 1.0
+
+Rectangle {
+    id:textArea
+
+    width :400
+    height:400
+    color: "white"
+
+    Flickable{
+        id: flickArea
+
+        width: parent.width
+        height: parent.height
+        anchors.fill:parent
+
+        function ensureVisible(r){
+            if (contentX >= r.x)
+            contentX = r.x;
+            else if (contentX+width <= r.x+r.width)
+            contentX = r.x+r.width-width;
+            if (contentY >= r.y)
+            contentY = r.y;
+            else if (contentY+height <= r.y+r.height)
+            contentY = r.y+r.height-height;
+        }
+
+        TextEdit{
+            id: textEditor
+            anchors.fill:parent
+            width:parent.width; height:parent.height
+            color:"midnightblue"
+            focus: true
+            
+            wrapMode: TextEdit.Wrap
+
+            onCursorRectangleChanged: flickArea.ensureVisible(cursorRectangle)
+        }
+    }
+}
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part3/TextEditor.qml b/examples/tutorials/gettingStarted/gsQml/parts/part3/TextEditor.qml
new file mode 100644
index 0000000000..75890fa209
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part3/TextEditor.qml
@@ -0,0 +1,68 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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 1.0
+
+Rectangle {
+
+    id: screen
+    width: 1000; height: 1000
+    border.color:"black"
+    //the screen is partitioned into the MenuBar and TextArea. 1/3 of the screen is assigned to the MenuBar
+    property int partition: height/3
+    
+    MenuBar{
+        id:menuBar
+        height: partition
+        width:parent.width
+        z: 1
+    }
+
+
+    TextArea{
+        id:textArea
+        anchors.bottom:parent.bottom
+        y: partition
+        color: "azure"
+        height: partition*2
+        width:parent.width
+    }
+
+}
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part3/images/arrow.png b/examples/tutorials/gettingStarted/gsQml/parts/part3/images/arrow.png
new file mode 100644
index 0000000000..14978c2e56
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part3/images/arrow.png
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part3/pics/qml-texteditor3_texteditor.png b/examples/tutorials/gettingStarted/gsQml/parts/part3/pics/qml-texteditor3_texteditor.png
new file mode 100644
index 0000000000..d0623b5a79
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part3/pics/qml-texteditor3_texteditor.png
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part3/qml-texteditor3.qmlproject b/examples/tutorials/gettingStarted/gsQml/parts/part3/qml-texteditor3.qmlproject
new file mode 100644
index 0000000000..d4909f8685
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part3/qml-texteditor3.qmlproject
@@ -0,0 +1,16 @@
+import QmlProject 1.0
+
+Project {
+    /* Include .qml, .js, and image files from current directory and subdirectories */
+    QmlFiles {
+        directory: "."
+    }
+    JavaScriptFiles {
+        directory: "."
+    }
+    ImageFiles {
+        directory: "."
+    }
+    /* List of plugin directories passed to QML runtime */
+    // importPaths: [ " ../exampleplugin " ]
+}
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part4/Button.qml b/examples/tutorials/gettingStarted/gsQml/parts/part4/Button.qml
new file mode 100644
index 0000000000..706c8897bc
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part4/Button.qml
@@ -0,0 +1,109 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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 1.0
+
+Rectangle {
+
+    //identifier of the item
+    id: button
+
+    //these properties act as constants, useable outside this QML file
+    property int buttonHeight: 75
+    property int buttonWidth: 150
+    
+    //attaches to the Text element's text content
+    property string label
+    property color textColor: buttonLabel.color
+
+    //the color highlight when the mouse hovers on the rectangle
+    property color onHoverColor: "gold"
+    property color borderColor: "white"
+
+    //buttonColor is set to the button's main color
+    property color buttonColor: "lightblue"    
+
+    //set appearance properties
+    radius:10
+    smooth: true
+    border.color: "white"
+    border.width: 3
+    width: buttonWidth; height: buttonHeight
+    
+    Text{
+        id: buttonLabel
+        anchors.centerIn: parent
+        text: label //"button label"    //bind the text to the parent's text
+    }
+
+    //buttonClick() is callable and a signal handler, onButtonClick is automatically created
+    signal buttonClick()
+    onButtonClick: {
+        console.log(buttonLabel.text + " clicked" )
+    }
+
+    //define the clickable area to be the whole rectangle
+    MouseArea{ 
+        id: buttonMouseArea
+        anchors.fill: parent    //stretch the area to the parent's dimension
+        onClicked: buttonClick()
+             
+        //if true, then onEntered and onExited called if mouse hovers in the mouse area
+                //if false, a button must be clicked to detect the mouse hover
+                hoverEnabled: true
+
+                //display a border if the mouse hovers on the button mouse area
+                onEntered: parent.border.color = onHoverColor
+                //remove the border if the mouse exits the button mouse area
+                onExited:  parent.border.color = borderColor
+        
+    }
+
+    //change the color of the button when pressed
+    color: buttonMouseArea.pressed ? Qt.darker(buttonColor, 1.5) : buttonColor
+    //animate the color whenever the color property changes
+    Behavior on color { ColorAnimation{ duration: 55} }
+
+    //scale the button when pressed
+    scale: buttonMouseArea.pressed ? 1.1 : 1.00
+    //Animate the scale property change
+    Behavior on scale { NumberAnimation{ duration: 55} }
+
+}
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part4/EditMenu.qml b/examples/tutorials/gettingStarted/gsQml/parts/part4/EditMenu.qml
new file mode 100644
index 0000000000..a28679929a
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part4/EditMenu.qml
@@ -0,0 +1,81 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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 1.0
+
+Rectangle {
+    id: editMenu
+    height: 480; width:1000
+    color: "powderblue"
+    property string menuName:"Edit"
+        gradient: Gradient{
+                        GradientStop { position: 0.0; color: "#6A6F70" }
+                        GradientStop { position: 1.0; color: Qt.darker("#6A6D67") }
+    }
+
+    Rectangle{
+        id:actionContainer
+         color:"transparent"
+        anchors.centerIn: parent
+
+        width: parent.width; height: parent.height / 5
+        Row{
+            anchors.centerIn: parent
+            spacing: parent.width/6
+            Button{
+                id: loadButton
+                buttonColor: "lightgrey"
+                label: "Cut"
+            }
+            
+            Button{
+                buttonColor: "grey"
+                id: saveButton
+                label: "Paste"
+            }
+            Button{
+                id: exitButton
+                label: "Select All"
+                buttonColor: "darkgrey"
+            }
+        }
+    }
+
+}
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part4/FileMenu.qml b/examples/tutorials/gettingStarted/gsQml/parts/part4/FileMenu.qml
new file mode 100644
index 0000000000..70ead34b44
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part4/FileMenu.qml
@@ -0,0 +1,96 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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 1.0
+
+Rectangle {
+    id: fileMenu
+
+    //the menuName is accessible from outside this QML file
+    property string menuName: "File"
+
+    //generous amount of screen space that will allow the buttons to fit
+    height: 480; width:1000
+
+    color: "#6C646A" 
+        gradient: Gradient{
+                        GradientStop { position: 0.0; color: "#6C646A" }
+                        GradientStop { position: 1.0; color: Qt.darker("#6A6D6A") }
+        }
+
+    //a sub-rectangle allows the flexibility of setting the row area 
+    Rectangle{
+        id:actionContainer
+
+        //make this rectangle invisible
+        color:"transparent"
+        anchors.centerIn: parent
+
+        //the height is a good proportion that creates more space at the top of the row of buttons
+        width: parent.width; height: parent.height / 5
+
+        Row{
+            anchors.centerIn: parent
+            spacing: parent.width/6
+            Button{
+                id: loadButton
+                buttonColor: "lightgrey"
+                label: "Load"
+            }
+            
+            Button{
+                buttonColor: "grey"
+                id: saveButton
+                label: "Save"
+            }
+            Button{
+                id: exitButton
+                label: "Exit"
+                buttonColor: "darkgrey"
+
+                //exit the application if the exitButton is clicked
+                onButtonClick:{
+                    Qt.quit()
+                }
+            }
+        }
+    }
+
+}
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part4/MenuBar.qml b/examples/tutorials/gettingStarted/gsQml/parts/part4/MenuBar.qml
new file mode 100644
index 0000000000..ce42275232
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part4/MenuBar.qml
@@ -0,0 +1,146 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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 1.0
+
+Rectangle {
+    id: menuBar
+    width: 1000
+    height:300
+
+    property color fileColor: "plum"
+    property color editColor: "powderblue"
+
+    //container for the header and the buttons
+    Rectangle{
+        
+        id: labelList
+        height:parent.height/10
+        width: parent.width
+        color: "beige"
+        gradient: Gradient {
+                        GradientStop { position: 0.0; color: "#8C8F8C" }
+                        GradientStop { position: 0.17; color: "#6A6D6A" }
+                        GradientStop { position: 0.98;color: "#3F3F3F" }
+                        GradientStop { position: 1.0; color: "#0e1B20" }
+                }
+
+        //default z is 0, items with higher z values are shown on top of items with lower z values
+        z: 1
+
+        //row displays its children in a vertical row
+        Row{
+            anchors.centerIn: parent
+            spacing:40
+            Button{
+                height: 20
+                width: 50
+                label: "File"
+                id: fileButton
+                buttonColor : menuListView.currentIndex == 0? fileColor : Qt.darker(fileColor, 1.5)
+                scale: menuListView.currentIndex == 0? 1.25: 1
+                radius: 1
+
+                //on a button click, change the list's currently selected item to FileMenu
+                onButtonClick: {
+                    menuListView.currentIndex = 0
+                }
+            }
+            Button{
+                height: 20
+                width: 50
+                id: editButton
+                buttonColor : menuListView.currentIndex == 1?  editColor : Qt.darker(editColor, 1.5)
+                scale: menuListView.currentIndex == 1? 1.25: 1    
+                label: "Edit"
+                radius: 1
+
+                //on a button click, change the list's currently selected item to EditMenu
+                onButtonClick: {
+                    menuListView.currentIndex = 1    
+                }
+
+                
+            }
+
+
+        }
+    }
+
+    //a list of visual items already have delegates handling their display
+    VisualItemModel{
+        id: menuListModel
+
+        FileMenu{
+            width: menuListView.width
+            height: menuBar.height
+            color: fileColor
+        }
+        EditMenu{
+            color: editColor
+            width:  menuListView.width
+            height: menuBar.height
+            
+        }
+    }
+
+    //list view will display a model according to a delegate
+    ListView{
+        id: menuListView
+        anchors.fill:parent
+        anchors.bottom: parent.bottom
+        width:parent.width
+        height: parent.height
+
+        //the model contains the data
+        model: menuListModel
+
+        //control the movement of the menu switching
+        snapMode: ListView.SnapOneItem
+        orientation: ListView.Horizontal
+        boundsBehavior: Flickable.StopAtBounds 
+        flickDeceleration: 5000
+        highlightFollowsCurrentItem: true
+        highlightMoveDuration:240
+        highlightRangeMode: ListView.StrictlyEnforceRange
+    }
+
+
+}
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part4/SimpleButton.qml b/examples/tutorials/gettingStarted/gsQml/parts/part4/SimpleButton.qml
new file mode 100644
index 0000000000..31eac2e334
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part4/SimpleButton.qml
@@ -0,0 +1,59 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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 1.0
+
+Rectangle {
+    id: simplebutton
+    color: "grey"    
+    width: 150; height: 75
+    
+    Text{
+        id: buttonLabel
+        anchors.centerIn: parent
+        text: "button label"    
+    }
+
+    MouseArea{ 
+        id: buttonMouseArea
+        anchors.fill: parent
+        onClicked: console.log(buttonLabel.text + " clicked" )
+    }
+}
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part4/TextArea.qml b/examples/tutorials/gettingStarted/gsQml/parts/part4/TextArea.qml
new file mode 100644
index 0000000000..28af5a5039
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part4/TextArea.qml
@@ -0,0 +1,80 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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 1.0
+
+Rectangle {
+    id:textArea
+
+    width :400
+    height:400
+    property color fontColor: "white"
+    
+    Flickable{
+        id: flickArea
+
+        width: parent.width
+        height: parent.height
+        anchors.fill:parent
+
+        function ensureVisible(r){
+            if (contentX >= r.x)
+            contentX = r.x;
+            else if (contentX+width <= r.x+r.width)
+            contentX = r.x+r.width-width;
+            if (contentY >= r.y)
+            contentY = r.y;
+            else if (contentY+height <= r.y+r.height)
+            contentY = r.y+r.height-height;
+        }
+
+        TextEdit{
+            id: textEditor
+            anchors.fill:parent
+            width:parent.width; height:parent.height
+            color:fontColor
+            focus: true
+            
+            wrapMode: TextEdit.Wrap
+
+            onCursorRectangleChanged: flickArea.ensureVisible(cursorRectangle)
+        }
+    }
+}
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part4/TextEditor.qml b/examples/tutorials/gettingStarted/gsQml/parts/part4/TextEditor.qml
new file mode 100644
index 0000000000..4279df09a6
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part4/TextEditor.qml
@@ -0,0 +1,146 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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 1.0
+
+Rectangle {
+    id: screen
+    width: 1000; height: 1000
+    property int partition: height/3
+    state: "DRAWER_CLOSED"
+    
+    
+    //Item 1: MenuBar on the top portion of the screen
+    MenuBar{
+        id:menuBar
+        height: partition
+        //anchors.top:parent.top
+        width:parent.width
+        z:1
+    }
+
+
+    //Item 2: The editable text area
+    TextArea{
+        id:textArea
+        y:drawer.height
+        border.color: Qt.darker(color, 1.4)
+        border.width: 2
+        color: "#3F3F3F"
+        fontColor: "#DCDCCC"
+         height: partition*2
+        width:parent.width        
+    }
+
+    //Item 3: The drawer handle
+    Rectangle{
+        id:drawer
+        height:15
+        width: parent.width
+        border.color : "#6A6D6A"
+        border.width: 1
+
+        gradient: Gradient {
+            GradientStop { position: 0.0; color: "#8C8F8C" }
+            GradientStop { position: 0.17; color: "#6A6D6A" }
+            GradientStop { position: 0.77; color: "#3F3F3F" }
+            GradientStop { position: 1.0; color: "#6A6D6A" }
+            }
+
+        Image{
+            id: arrowIcon
+            source: "images/arrow.png"
+            anchors.horizontalCenter: parent.horizontalCenter
+            
+            Behavior{NumberAnimation{property: "rotation";easing.type: Easing.OutExpo }}
+        }
+        
+        MouseArea{
+            id: drawerMouseArea
+            anchors.fill:parent
+            onClicked:{
+                if (screen.state == "DRAWER_CLOSED"){
+                    screen.state = "DRAWER_OPEN"
+                    console.log("drawer OPEN")    
+                }
+                else if (screen.state == "DRAWER_OPEN"){
+                    screen.state = "DRAWER_CLOSED"
+                    console.log("drawer closed")
+                }
+            }
+
+            //if true, then onEntered and onExited called if mouse hovers in the mouse area
+            //if false, a button must be clicked to detect the mouse hover
+            hoverEnabled: true
+    
+            //display a border if the mouse hovers on the button mouse area
+            onEntered: parent.border.color = Qt.lighter("#6A6D6A")
+            //remove the border if the mouse exits the button mouse area
+            onExited:  parent.border.color = "#6A6D6A"
+        }
+    
+    }
+    states:[
+        State{
+            name: "DRAWER_OPEN"
+            PropertyChanges { target: menuBar; y:0}
+            PropertyChanges { target: textArea; y: partition + drawer.height}
+            PropertyChanges { target: drawer; y: partition}
+            PropertyChanges { target: arrowIcon; rotation: 180} 
+        },
+        State{
+            name: "DRAWER_CLOSED"
+            PropertyChanges { target: menuBar; y:-partition}
+            PropertyChanges { target: textArea; y: drawer.height; height: screen.height - drawer.height}
+            PropertyChanges { target: drawer; y: 0}
+            PropertyChanges { target: arrowIcon; rotation: 0} 
+        }
+
+    ]
+    transitions: [
+        Transition{
+            to: "*"
+            NumberAnimation { target: textArea; properties: "y, height"; duration: 100; easing.type:Easing.OutExpo }
+            NumberAnimation { target: menuBar; properties: "y"; duration: 100;easing.type: Easing.OutExpo }
+            NumberAnimation { target: drawer; properties: "y"; duration: 100;easing.type: Easing.OutExpo }
+        }
+    
+    ]
+}
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part4/images/arrow.png b/examples/tutorials/gettingStarted/gsQml/parts/part4/images/arrow.png
new file mode 100644
index 0000000000..14978c2e56
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part4/images/arrow.png
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part4/pics/qml-texteditor4_texteditor.png b/examples/tutorials/gettingStarted/gsQml/parts/part4/pics/qml-texteditor4_texteditor.png
new file mode 100644
index 0000000000..a195fb87c3
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part4/pics/qml-texteditor4_texteditor.png
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part4/qml-texteditor4.qmlproject b/examples/tutorials/gettingStarted/gsQml/parts/part4/qml-texteditor4.qmlproject
new file mode 100644
index 0000000000..d4909f8685
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part4/qml-texteditor4.qmlproject
@@ -0,0 +1,16 @@
+import QmlProject 1.0
+
+Project {
+    /* Include .qml, .js, and image files from current directory and subdirectories */
+    QmlFiles {
+        directory: "."
+    }
+    JavaScriptFiles {
+        directory: "."
+    }
+    ImageFiles {
+        directory: "."
+    }
+    /* List of plugin directories passed to QML runtime */
+    // importPaths: [ " ../exampleplugin " ]
+}
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part5/TextEditor.qml b/examples/tutorials/gettingStarted/gsQml/parts/part5/TextEditor.qml
new file mode 100644
index 0000000000..8c5bcf2be8
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part5/TextEditor.qml
@@ -0,0 +1,127 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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 1.0
+import "core"
+
+Rectangle {
+    id: screen
+    width: 1000; height: 1000
+    property int partition: height/3
+    state: "DRAWER_CLOSED"
+    
+    //Item 1: MenuBar on the top portion of the screen
+    MenuBar{
+        id:menuBar
+        height: screen.partition; width: screen.width
+        z:1
+    }
+    //Item 2: The editable text area
+    TextArea{
+        id:textArea
+        y:drawer.height
+        color: "#3F3F3F"
+        fontColor: "#DCDCCC"
+         height: partition*2; width:parent.width        
+    }
+    //Item 3: The drawer handle
+    Rectangle{
+        id:drawer
+        height:15; width: parent.width
+        border.color : "#6A6D6A"
+        border.width: 1
+        z:1
+        gradient: Gradient {
+                GradientStop { position: 0.0; color: "#8C8F8C" }
+                GradientStop { position: 0.17; color: "#6A6D6A" }
+                GradientStop { position: 0.77; color: "#3F3F3F" }
+                GradientStop { position: 1.0; color: "#6A6D6A" }
+            }
+        Image{
+            id: arrowIcon
+            source: "images/arrow.png"
+            anchors.horizontalCenter: parent.horizontalCenter
+            
+            Behavior{NumberAnimation{property: "rotation";easing.type: Easing.OutExpo }}
+        }
+        
+        MouseArea{
+            id: drawerMouseArea
+            anchors.fill:parent
+            hoverEnabled: true
+            onEntered: parent.border.color = Qt.lighter("#6A6D6A")
+            onExited:  parent.border.color = "#6A6D6A"
+            onClicked:{
+                if (screen.state == "DRAWER_CLOSED"){
+                    screen.state = "DRAWER_OPEN"
+                }
+                else if (screen.state == "DRAWER_OPEN"){
+                    screen.state = "DRAWER_CLOSED"
+                }
+            }
+        }
+    }
+
+    states:[
+        State{
+            name: "DRAWER_OPEN"
+            PropertyChanges { target: menuBar; y: 0}
+            PropertyChanges { target: textArea; y: partition + drawer.height}
+            PropertyChanges { target: drawer; y: partition}
+            PropertyChanges { target: arrowIcon; rotation: 180} 
+        },
+        State{
+            name: "DRAWER_CLOSED"
+            PropertyChanges { target: menuBar; y:-height; }
+            PropertyChanges { target: textArea; y: drawer.height; height: screen.height - drawer.height}
+            PropertyChanges { target: drawer; y: 0}
+            PropertyChanges { target: arrowIcon; rotation: 0} 
+        }
+    ]
+
+    transitions: [
+        Transition{
+            to: "*"
+            NumberAnimation { target: textArea; properties: "y, height"; duration: 100; easing.type:Easing.OutExpo }
+            NumberAnimation { target: menuBar; properties: "y"; duration: 100;easing.type: Easing.OutExpo }
+            NumberAnimation { target: drawer; properties: "y"; duration: 100;easing.type: Easing.OutExpo }
+        }
+    ]
+}
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part5/core/Button.qml b/examples/tutorials/gettingStarted/gsQml/parts/part5/core/Button.qml
new file mode 100644
index 0000000000..3daedc8a76
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part5/core/Button.qml
@@ -0,0 +1,109 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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 1.0
+
+Rectangle {
+
+    //identifier of the item
+    id: button
+
+    //these properties act as constants, useable outside this QML file
+    property int buttonHeight: 75
+    property int buttonWidth: 150
+    
+    //attaches to the Text element's text content
+    property string label
+    property color textColor: buttonLabel.color
+
+    //the color highlight when the mouse hovers on the rectangle
+    property color onHoverColor: "lightsteelblue"
+    property color borderColor: "transparent"
+
+    //buttonColor is set to the button's main color
+    property color buttonColor: "lightblue"    
+
+    property real labelSize: 14
+    //set appearance properties
+    radius:6
+    smooth: true
+    border.width: 2
+    border.color: borderColor
+    width: buttonWidth; height: buttonHeight
+    
+    Text{
+        id: buttonLabel
+        anchors.centerIn: parent
+        text: label     //bind the text to the parent's text
+        color: "#DCDCCC"
+        font.pointSize: labelSize
+    }
+
+    //buttonClick() is callable and a signal handler, onButtonClick is automatically created
+    signal buttonClick()
+
+    //define the clickable area to be the whole rectangle
+    MouseArea{ 
+        id: buttonMouseArea
+        anchors.fill: parent    //stretch the area to the parent's dimension
+        onClicked: buttonClick()
+             
+        //if true, then onEntered and onExited called if mouse hovers in the mouse area
+                //if false, a button must be clicked to detect the mouse hover
+                hoverEnabled: true
+
+                //display a border if the mouse hovers on the button mouse area
+                onEntered: parent.border.color = onHoverColor
+                //remove the border if the mouse exits the button mouse area
+                onExited:  parent.border.color = borderColor
+        
+    }
+
+    //change the color of the button when pressed
+    color: buttonMouseArea.pressed ? Qt.darker(buttonColor, 1.5) : buttonColor
+    //animate the color whenever the color property changes
+    Behavior on color { ColorAnimation{ duration: 55} }
+
+    //scale the button when pressed
+    scale: buttonMouseArea.pressed ? 1.1 : 1.00
+    //Animate the scale property change
+    Behavior on scale { NumberAnimation{ duration: 55} }
+
+}
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part5/core/EditMenu.qml b/examples/tutorials/gettingStarted/gsQml/parts/part5/core/EditMenu.qml
new file mode 100644
index 0000000000..7687fd7f56
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part5/core/EditMenu.qml
@@ -0,0 +1,110 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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 1.0
+
+Rectangle {
+    id: editMenu
+    height: 480; width:1000
+    color: "powderblue"
+    property color buttonBorderColor: "#7A8182"
+    property color buttonFillColor: "#61BDCACD"
+    property string menuName:"Edit"
+
+        gradient: Gradient{
+                        GradientStop { position: 0.0; color: "#6A7570" }
+                        GradientStop { position: 1.0; color: Qt.darker("#6A7570") }
+    }
+
+    Rectangle{
+        id:actionContainer
+         color:"transparent"
+        anchors.centerIn: parent
+        width: parent.width; height: parent.height / 5
+        Row{
+            anchors.centerIn: parent
+            spacing: parent.width/9
+            Button{
+                id: loadButton
+                buttonColor: buttonFillColor
+                label: "Copy"
+                labelSize:16
+                borderColor:buttonBorderColor
+                height: actionContainer.height
+                width: actionContainer.width/6
+                onButtonClick:textArea.copy()
+                gradient: Gradient {
+                    GradientStop { position: 0.0; color: Qt.lighter(buttonFillColor,1.25) }
+                    GradientStop { position: 0.67; color: Qt.darker(buttonFillColor,1.3) }
+                }
+            }
+            
+            Button{
+                id: saveButton
+                height: actionContainer.height
+                width: actionContainer.width/6                
+                buttonColor: buttonFillColor
+                label: "Paste"
+                borderColor:buttonBorderColor
+                labelSize:16
+                onButtonClick:textArea.paste()
+                gradient: Gradient {
+                    GradientStop { position: 0.0; color: Qt.lighter(buttonFillColor,1.25) }
+                    GradientStop { position: 0.67; color: Qt.darker(buttonFillColor,1.3) }
+                }
+            }
+            Button{
+                id: exitButton
+                label: "Select All"
+                height: actionContainer.height
+                width: actionContainer.width/6                
+                labelSize:16
+                buttonColor: buttonFillColor
+                borderColor:buttonBorderColor
+                onButtonClick:textArea.selectAll()
+                gradient: Gradient {
+                    GradientStop { position: 0.0; color: Qt.lighter(buttonFillColor,1.25) }
+                    GradientStop { position: 0.67; color: Qt.darker(buttonFillColor,1.3) }
+                }
+            }
+        }
+    }
+
+}
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part5/core/FileDialog.qml b/examples/tutorials/gettingStarted/gsQml/parts/part5/core/FileDialog.qml
new file mode 100644
index 0000000000..f1b1e849e9
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part5/core/FileDialog.qml
@@ -0,0 +1,170 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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 1.0
+
+Rectangle {
+    id:dialog
+    height: 200 * partition; width: 200
+    color: "transparent"
+    
+    signal selectChanged()
+    signal notifyRefresh()
+    onNotifyRefresh:dirView.model = directory.files
+
+    property string selectedFile
+    property int selectedIndex: 0
+
+    Rectangle{
+        id: dirBox
+        radius: 10
+        anchors.centerIn:parent
+        height: parent.height -15; width: parent.width -30
+        
+        Rectangle{
+            id:header
+            height:parent.height*0.1
+            width: parent.width
+            radius:3
+            z:1
+            gradient: Gradient {
+                GradientStop { position: 0.0; color: "#8C8F8C" }
+                GradientStop { position: 0.17; color: "#6A6D6A" }
+                GradientStop { position: 0.98;color: "#3F3F3F" }
+                GradientStop { position: 1.0; color: "#0e1B20" }
+            }
+            Text{
+                height: header.height
+                anchors.centerIn: header
+                text: "files:" 
+                color: "lightblue"
+                font.weight: Font.Light
+                font.italic: true
+            }
+        }
+        GridView{
+            id:dirView
+            width:parent.width
+            height:parent.height*.9
+            anchors.top: header.bottom
+            cellWidth: 100
+            cellHeight: 75
+//             highlight: Rectangle { width:cellWidth; height: cellHeight; color: "lightsteelblue" ;radius: 13}
+            model: directory.files
+            delegate: dirDelegate
+            clip: true
+            highlightMoveDuration:40
+        }
+
+        Component{
+            id:dirDelegate
+            
+            Rectangle{
+                id:file
+                color: "transparent"
+                width: GridView.view.cellWidth; height: GridView.view.cellHeight
+
+                Text{
+                    id:fileName
+                    width: parent.width
+                    anchors.centerIn:parent
+                    text: name
+                    color: "#BDCACD"
+                    font.weight: GridView.view.currentIndex == index ?  Font.DemiBold : Font.Normal
+                    font.pointSize: GridView.view.currentIndex == index ?  12 : 10
+                    elide: Text.ElideMiddle
+                    horizontalAlignment: Text.AlignHCenter
+                }
+                Rectangle{
+                    id:selection
+                    width:parent.width; height:parent.height
+                    anchors.centerIn: parent
+                    radius: 10
+                    smooth: true
+                    scale: GridView.view.currentIndex == index ?  1 : 0.5
+                    opacity: GridView.view.currentIndex == index ?  1 : 0
+                    Text{
+                        id:overlay
+                        width: parent.width
+                        anchors.centerIn:parent
+                        text: name
+                        color: "#696167"
+                        font.weight: Font.DemiBold
+                        font.pointSize: 12
+                        smooth:true
+                        elide: Text.ElideMiddle
+                        horizontalAlignment: Text.AlignHCenter
+                    }
+                    Behavior on opacity{ NumberAnimation{ duration: 45} }
+                    Behavior on scale { NumberAnimation{ duration: 45} }
+                    gradient: Gradient {
+                        GradientStop { position: 0.0; color: Qt.lighter("lightsteelblue",1.25) }
+                        GradientStop { position: 0.67; color: Qt.darker("lightsteelblue",1.3) }
+                    }
+                    border.color:"lightsteelblue"
+                    border.width:1
+                }
+                MouseArea{
+                    id:fileMouseArea
+                    anchors.fill:parent
+                    hoverEnabled: true
+                    
+                    onClicked:{
+                        GridView.view.currentIndex = index
+                        selectedFile = directory.files[index].name
+                        selectChanged()
+                    }
+                    onEntered:{     
+                            fileName.color = "lightsteelblue"
+                            fileName.font.weight = Font.DemiBold
+                        }
+                    onExited: {     
+                            fileName.font.weight = Font.Normal
+                            fileName.color = "#BDCACD"
+                        }
+                }
+            }
+        }
+        gradient: Gradient{
+            GradientStop { position: 0.0; color: "#A5333333" }
+            GradientStop { position: 1.0; color: "#03333333" }
+        }
+    }
+}
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part5/core/FileMenu.qml b/examples/tutorials/gettingStarted/gsQml/parts/part5/core/FileMenu.qml
new file mode 100644
index 0000000000..75b27ec1d3
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part5/core/FileMenu.qml
@@ -0,0 +1,232 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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 1.0
+
+Rectangle {
+    id: fileMenu
+    height: 480; width:1000
+    property color buttonBorderColor: "#7F8487"
+    property color buttonFillColor: "#8FBDCACD"
+    property string fileContent:directory.fileContent
+    
+    //the menuName is accessible from outside this QML file
+    property string menuName: "File"
+        
+    //used to divide the screen into parts.
+    property real partition: 1/3
+
+    color: "#6C646A" 
+        gradient: Gradient{
+                        GradientStop { position: 0.0; color: "#6C646A" }
+                        GradientStop { position: 1.0; color: Qt.darker("#6A6D6A") }
+        }
+
+    Directory{
+        id:directory
+        filename: textInput.text
+        onDirectoryChanged:fileDialog.notifyRefresh()
+    }
+
+    Rectangle{
+        id:actionContainer
+
+        //make this rectangle invisible
+        color:"transparent"
+        anchors.left: parent.left
+
+        //the height is a good proportion that creates more space at the top of the column of buttons
+        width: fileMenu.width * partition; height: fileMenu.height
+        
+        Column{
+            anchors.centerIn: parent
+            spacing: parent.height/32
+            Button{
+                id: saveButton
+                label: "Save"                
+                borderColor: buttonBorderColor
+                buttonColor: buttonFillColor
+                width: actionContainer.width/ 1.3
+                height:actionContainer.height / 8
+                labelSize:24
+                onButtonClick:{
+                    directory.fileContent = textArea.textContent
+                    directory.filename = textInput.text
+                    directory.saveFile()
+                }
+                gradient: Gradient {
+                    GradientStop { position: 0.0; color: Qt.lighter(buttonFillColor,1.25) }
+                    GradientStop { position: 0.67; color: Qt.darker(buttonFillColor,1.3) }
+                }
+    
+            }            
+            Button{
+                id: loadButton
+                width: actionContainer.width/ 1.3
+                height:actionContainer.height/ 8
+                buttonColor: buttonFillColor
+                borderColor: buttonBorderColor
+                label: "Load"
+                labelSize:24
+                onButtonClick:{
+                    directory.filename = textInput.text
+                    directory.loadFile()
+                    textArea.textContent = directory.fileContent
+                }
+                gradient: Gradient {
+                    GradientStop { position: 0.0; color: Qt.lighter(buttonFillColor,1.25) }
+                    GradientStop { position: 0.67; color: Qt.darker(buttonFillColor,1.3) }
+                }
+            }
+            Button{
+                id: newButton
+                width: actionContainer.width/ 1.3
+                height:actionContainer.height/ 8
+                buttonColor: buttonFillColor
+                borderColor: buttonBorderColor
+                label: "New"
+                labelSize:24
+                onButtonClick:{
+                    textArea.textContent = ""
+                    textInput.text = ""
+                }
+                gradient: Gradient {
+                    GradientStop { position: 0.0; color: Qt.lighter(buttonFillColor,1.25) }
+                    GradientStop { position: 0.67; color: Qt.darker(buttonFillColor,1.3) }
+                }
+
+            }
+            Rectangle{
+                id: space    
+                width: actionContainer.width/ 1.3
+                height:actionContainer.height / 16
+                color:"transparent"
+            }
+            Button{
+                id: exitButton
+                width: actionContainer.width/ 1.3
+                height:actionContainer.height/ 8                
+                label: "Exit"
+                labelSize:24
+                buttonColor: buttonFillColor
+                borderColor: buttonBorderColor
+                onButtonClick:Qt.quit()
+                gradient: Gradient {
+                    GradientStop { position: 0.0; color: Qt.lighter(buttonFillColor,1.25) }
+                    GradientStop { position: 0.67; color: Qt.darker(buttonFillColor,1.3) }
+                }
+            }
+        }
+    }
+
+    Rectangle{
+        id:dialogContainer
+
+        width: 2*fileMenu.width * partition; height: fileMenu.height
+        anchors.right:parent.right
+        color:"transparent"
+
+        Column {
+            anchors.centerIn: parent
+            spacing: parent.height /640
+            FileDialog{
+                id:fileDialog
+                height: 2*dialogContainer.height * partition; width: dialogContainer.width
+                onSelectChanged: textInput.text = selectedFile
+            }
+    
+            Rectangle{
+                id:lowerPartition
+                height: dialogContainer.height * partition; width: dialogContainer.width
+                color: "transparent"
+
+                Rectangle{
+                    id: nameField
+                    gradient: Gradient{
+                        GradientStop { position: 0.0; color: "#806F6F6F" }
+                        GradientStop { position: 1.0; color: "#136F6F6F" }
+                    }
+
+                    radius: 10
+                    anchors {centerIn:parent; leftMargin: 15; rightMargin: 15; topMargin: 15}
+                    height: parent.height-15; width: parent.width -20
+                    border {color:"#4A4A4A"; width:1}
+
+                    TextInput{
+                        id: textInput
+                        z:2
+                        anchors {bottom: parent.bottom; topMargin: 10; horizontalCenter:parent.horizontalCenter}
+                        width: parent.width - 10
+                        height: parent.height -10
+                        font.pointSize: 40
+                        color:"lightsteelblue"
+                        focus:true
+                    }
+                    Text{
+                        id: textInstruction
+                        anchors.centerIn:parent
+                        text: "Select file name and press save or load"
+                        font {pointSize: 11; weight:Font.Light; italic: true}
+                        color: "lightblue"
+                        z:2
+                        opacity: (textInput.text == "") ? 1: 0
+                    }
+                    Text{
+                        id:fieldLabel
+                        anchors {top: parent.top; left: parent.left}
+                        text: "  file name: "
+                        font {pointSize: 11; weight: Font.Light; italic: true}
+                        color: "lightblue"
+                        z:2
+                    }
+                    MouseArea{
+                            anchors.centerIn:parent
+                            width: nameField.width; height: nameField.height
+                            onClicked:{
+                                textInput.text = ""
+                                textInput.focus = true
+                                textInput.forceFocus()
+                            }
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part5/core/MenuBar.qml b/examples/tutorials/gettingStarted/gsQml/parts/part5/core/MenuBar.qml
new file mode 100644
index 0000000000..d56f833638
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part5/core/MenuBar.qml
@@ -0,0 +1,148 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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 1.0
+
+Rectangle {
+    id: menuBar
+    width: 1000; height:300
+    color:"transparent"
+    property color fileColor: "plum"
+    property color editColor: "powderblue"
+
+    property real partition: 1/10
+
+    Column{
+        anchors.fill: parent
+        //container for the header and the buttons
+        z: 1
+        Rectangle{
+            id: labelList
+            height:menuBar.height*partition
+            width: menuBar.width
+            color: "beige"
+            gradient: Gradient {
+                GradientStop { position: 0.0; color: "#8C8F8C" }
+                GradientStop { position: 0.17; color: "#6A6D6A" }
+                GradientStop { position: 0.98;color: "#3F3F3F" }
+                GradientStop { position: 1.0; color: "#0e1B20" }
+            }
+            Text{
+                height: parent.height
+                anchors {right: labelRow.left ; verticalCenter: parent.bottom}
+                text: "menu:    " 
+                color: "lightblue"
+                font {weight: Font.Light; italic: true}
+                smooth: true
+            }
+            
+            //row displays its children in a vertical row
+            Row{
+                id: labelRow
+                anchors.centerIn: parent
+                spacing:40
+                Button{
+                    id: fileButton
+                    height: 20; width: 50
+                    label: "File"
+                    buttonColor : menuListView.currentIndex == 0? fileColor : Qt.darker(fileColor, 1.5)
+                    scale: menuListView.currentIndex == 0? 1.25: 1
+                    labelSize: menuListView.currentIndex == 0? 16:12
+                    radius: 1
+                    smooth:true
+                    //on a button click, change the list's currently selected item to FileMenu
+                    onButtonClick: menuListView.currentIndex = 0
+                    gradient: Gradient{
+                        GradientStop { position: 0.0; color: fileColor }
+                        GradientStop { position: 1.0; color: "#136F6F6F" }
+                    }
+                }
+                Button{
+                    id: editButton
+                    height: 20; width: 50
+                    buttonColor : menuListView.currentIndex == 1?  Qt.darker(editColor, 1.5) : Qt.darker(editColor, 1.9)
+                    scale: menuListView.currentIndex == 1? 1.25: 1    
+                    label: "Edit"
+                    radius: 1
+                    labelSize: menuListView.currentIndex == 1? 16:12
+                    smooth:true
+                    //on a button click, change the list's currently selected item to EditMenu
+                    onButtonClick: menuListView.currentIndex = 1    
+                    gradient: Gradient{
+                        GradientStop { position: 0.0; color: editColor }
+                        GradientStop { position: 1.0; color: "#136F6F6F" }
+                    }
+                }
+            }
+        }    
+
+        //list view will display a model according to a delegate
+        ListView{
+            id: menuListView
+            width:menuBar.width; height: 9*menuBar.height*partition
+    
+            //the model contains the data
+            model: menuListModel
+    
+            //control the movement of the menu switching
+            snapMode: ListView.SnapOneItem
+            orientation: ListView.Horizontal
+            boundsBehavior: Flickable.StopAtBounds 
+            flickDeceleration: 5000
+            highlightFollowsCurrentItem: true
+            highlightMoveDuration:240
+            highlightRangeMode: ListView.StrictlyEnforceRange
+        }
+    }
+    //a list of visual items already have delegates handling their display
+    VisualItemModel{
+        id: menuListModel
+
+        FileMenu{
+            id:fileMenu
+            width: menuListView.width; height: menuListView.height
+            color: fileColor
+        }
+        EditMenu{
+            color: editColor
+            width:  menuListView.width; height: menuListView.height
+        }
+    }
+}
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part5/core/TextArea.qml b/examples/tutorials/gettingStarted/gsQml/parts/part5/core/TextArea.qml
new file mode 100644
index 0000000000..0a9cb5121b
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part5/core/TextArea.qml
@@ -0,0 +1,86 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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 1.0
+
+Rectangle {
+    id:textArea
+
+    function paste(){ textEdit.paste()}
+    function copy() { textEdit.copy() }
+    function selectAll() { textEdit.selectAll() }
+
+    width :400; height:400
+
+    property color fontColor: "white"
+    property alias textContent: textEdit.text
+    Flickable{
+        id: flickArea
+        width: parent.width; height: parent.height
+        anchors.fill:parent
+
+        boundsBehavior: Flickable.StopAtBounds
+        flickableDirection: Flickable.HorizontalFlick
+        interactive: true
+        //Will move the text Edit area to make the area visible when scrolled with keyboard strokes
+        function ensureVisible(r){
+            if (contentX >= r.x)
+            contentX = r.x;
+            else if (contentX+width <= r.x+r.width)
+            contentX = r.x+r.width-width;
+            if (contentY >= r.y)
+            contentY = r.y;
+            else if (contentY+height <= r.y+r.height)
+            contentY = r.y+r.height-height;
+        }
+
+        TextEdit{
+            id: textEdit
+            anchors.fill:parent
+            width:parent.width; height:parent.height
+            color:fontColor
+            focus: true
+            wrapMode: TextEdit.Wrap
+            font.pointSize:10
+            onCursorRectangleChanged: flickArea.ensureVisible(cursorRectangle)
+            selectByMouse: true
+        }
+    }
+}
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part5/core/qmldir b/examples/tutorials/gettingStarted/gsQml/parts/part5/core/qmldir
new file mode 100644
index 0000000000..3f22778a99
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part5/core/qmldir
@@ -0,0 +1,13 @@
+
+Button ./Button.qml
+FileDialog ./FileDialog.qml
+TextArea ./TextArea.qml
+TextEditor ./TextEditor.qml
+EditMenu ./EditMenu.qml
+MenuBar ./MenuBar.qml
+
+plugin FileDialog ../plugins
+
+
+
+
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part5/filedialog/dialogPlugin.cpp b/examples/tutorials/gettingStarted/gsQml/parts/part5/filedialog/dialogPlugin.cpp
new file mode 100644
index 0000000000..03f0384b25
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part5/filedialog/dialogPlugin.cpp
@@ -0,0 +1,57 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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 "dialogPlugin.h"
+#include "directory.h"
+#include "file.h"
+#include <QtDeclarative/qdeclarative.h>
+
+void DialogPlugin::registerTypes(const char *uri){
+    
+    //register the class Directory into QML as a "Directory" element version 1.0
+    qmlRegisterType<Directory>(uri, 1, 0, "Directory");
+    qmlRegisterType<File>(uri,1,0,"File");
+    
+    //qRegisterMetaType<QDeclarativeListProperty<QString> > ("QDeclarativeListProperty<QString>");
+        
+}
+
+//FileDialog is the plugin name (same as the TARGET in the project file) and DialogPlugin is the plugin classs
+Q_EXPORT_PLUGIN2(FileDialog, DialogPlugin);
\ No newline at end of file
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part5/filedialog/dialogPlugin.h b/examples/tutorials/gettingStarted/gsQml/parts/part5/filedialog/dialogPlugin.h
new file mode 100644
index 0000000000..27fc47cca6
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part5/filedialog/dialogPlugin.h
@@ -0,0 +1,57 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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 DIALOGPLUGIN_H
+#define DIALOGPLUGIN_H
+
+#include <QtDeclarative/QDeclarativeExtensionPlugin>
+
+class DialogPlugin : public QDeclarativeExtensionPlugin
+{
+    Q_OBJECT
+    
+    public:
+        //registerTypes is inherited from QDeclarativeExtensionPlugin
+        void registerTypes(const char *uri);
+        
+};
+
+#endif
+
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part5/filedialog/directory.cpp b/examples/tutorials/gettingStarted/gsQml/parts/part5/filedialog/directory.cpp
new file mode 100644
index 0000000000..338c742f2c
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part5/filedialog/directory.cpp
@@ -0,0 +1,219 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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 "directory.h"
+#include <QDebug>
+
+/*
+Directory constructor
+
+Initialize the saves directory and creates the file list
+*/
+Directory::Directory(QObject *parent) : QObject(parent)
+{
+    
+
+    m_dir.cd( QDir::currentPath());
+    
+    //go to the saved directory. if not found, create save directory
+    m_saveDir = "saves";
+    if (m_dir.cd(m_saveDir) == 0){
+        m_dir.mkdir(m_saveDir);
+        m_dir.cd(m_saveDir);
+    }
+     m_filterList << "*.txt";
+
+    refresh();
+}
+
+/*
+Directory::filesNumber
+Return the number of Files
+*/
+int Directory::    filesCount() const{
+    return m_fileList.size();
+}
+
+/*
+Function called to append data onto list property
+*/
+void appendFiles(QDeclarativeListProperty<File> * property, File * file){
+    //Do nothing. can't add to a directory using this method
+}
+
+/*
+Function called to retrieve file in the list using an index
+*/
+File* fileAt(QDeclarativeListProperty<File> * property, int index){
+    return static_cast< QList<File *> *>(property->data)->at(index);
+}
+
+/*
+Returns the number of files in the list
+*/
+int filesSize(QDeclarativeListProperty<File> * property){
+    return static_cast< QList<File *> *>(property->data)->size();
+}
+
+/*
+Function called to empty the list property contents
+*/
+void clearFilesPtr(QDeclarativeListProperty<File> *property){
+    return static_cast< QList<File *> *>(property->data)->clear();
+}
+
+/*
+Returns the list of files as a QDeclarativeListProperty.
+*/
+QDeclarativeListProperty<File> Directory::files(){
+
+    refresh();
+//     return QDeclarativeListProperty<QString>(this,m_filePtrList);        //not recommended in the docs
+    return QDeclarativeListProperty<File>( this, &m_fileList, &appendFiles, &filesSize, &fileAt,  &clearFilesPtr );
+}
+
+/*
+Return te name of the currently selected file
+*/
+QString Directory::filename() const{
+    return currentFile.name();
+}
+
+/*
+Return the file's content as a string.
+*/
+QString Directory::fileContent() const{
+    return m_fileContent;
+}
+
+/*
+Set the file name of the current file
+*/
+void Directory::setFilename(const QString &str){
+    if(str != currentFile.name()){
+        currentFile.setName(str);
+        emit filenameChanged();
+    }
+}
+
+/*
+Set the content of the file as a string
+*/
+void Directory::setFileContent(const QString &str){
+    if(str != m_fileContent){
+        m_fileContent = str;
+        emit fileContentChanged();
+    }    
+}
+
+/*
+Called from QML to save the file using the filename and file content.
+Saving makes sure that the file has a .txt extension.
+*/
+void Directory::saveFile(){
+    
+    if(currentFile.name().size() == 0){
+        qWarning()<< "Empty filename. no save";
+        return;
+    }
+        
+    QString extendedName = currentFile.name();
+    if(!currentFile.name().endsWith(".txt")){
+        extendedName.append(".txt");
+    }
+    
+    QFile file( m_dir.filePath(extendedName) );
+    if (file.open(QFile::WriteOnly | QFile::Truncate)){
+        QTextStream outStream(&file);
+        outStream << m_fileContent;
+    }
+    file.close();
+    refresh();
+    emit directoryChanged();
+}
+
+/*
+Load the contents of a file.
+Only loads files with a .txt extension
+*/
+void Directory::loadFile(){
+
+    m_fileContent.clear();
+    QString extendedName = currentFile.name();
+    if(!currentFile.name().endsWith(".txt")){
+        extendedName.append(".txt");
+    }
+    
+    QFile file( m_dir.filePath(extendedName) );
+    if (file.open(QFile::ReadOnly )){
+        QTextStream inStream(&file);
+        
+        QString line;
+        do{
+            line = inStream.read(75);
+            m_fileContent.append(line);
+        }while (!line .isNull());
+    }
+    file.close();
+}
+
+/*
+Reloads the content of the files list. This is to ensure that the newly
+created files are added onto the list.
+*/
+void Directory::refresh(){
+    m_dirFiles = m_dir.entryList(m_filterList,QDir::Files,QDir::Name);
+    m_fileList.clear();
+    
+    File * file;
+    for(int i = 0; i < m_dirFiles.size() ; i ++){
+        
+        file = new File();
+        
+        if(m_dirFiles.at(i).endsWith(".txt")){
+            QString name = m_dirFiles.at(i);
+            file->setName( name.remove(".txt",Qt::CaseSensitive));
+        }
+        else{
+            file->setName(m_dirFiles.at(i));
+        }
+        m_fileList.append(file);
+    }
+}
\ No newline at end of file
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part5/filedialog/directory.h b/examples/tutorials/gettingStarted/gsQml/parts/part5/filedialog/directory.h
new file mode 100644
index 0000000000..00aff95b8a
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part5/filedialog/directory.h
@@ -0,0 +1,108 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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 DIRECTORY_H
+#define DIRECTORY_H
+
+#include "file.h"
+
+#include <QDir>
+#include <QStringList>
+#include <QTextStream>
+#include <QDeclarativeListProperty>
+#include <QObject>
+
+class Directory : public QObject{
+
+    Q_OBJECT
+    
+    //number of files in the directory
+    Q_PROPERTY(int filesCount READ filesCount)
+        
+    //list property containing file names as QString
+    Q_PROPERTY(QDeclarativeListProperty<File> files READ files CONSTANT )
+    
+    //file name of the text file to read/write
+    Q_PROPERTY(QString filename READ filename WRITE setFilename NOTIFY filenameChanged)
+    
+    //text content of the file
+    Q_PROPERTY(QString fileContent READ fileContent WRITE setFileContent NOTIFY fileContentChanged)
+    
+    public:
+        Directory(QObject *parent = 0);
+        
+        //properties' read functions
+        int filesCount() const;
+        QString filename() const;
+        QString fileContent() const;
+        QDeclarativeListProperty<File> files();
+
+        //properties' write functions
+        void setFilename(const QString &str);
+        void setFileContent(const QString &str);
+        
+        //accessible from QML
+        Q_INVOKABLE void saveFile();
+        Q_INVOKABLE void loadFile();
+    
+    signals:
+        void directoryChanged();
+        void filenameChanged();
+        void fileContentChanged();
+        
+    private:
+        QDir m_dir;
+        QStringList m_dirFiles;        
+        File currentFile;      
+        QString m_saveDir;
+        QStringList m_filterList;    
+        
+        //contains the file data in QString format
+        QString m_fileContent;
+        
+        //Registered to QML in a plugin. Accessible from QML as a property of Directory
+        QList<File *> m_fileList;
+
+        //refresh content of the directory 
+        void refresh();
+};
+
+
+#endif
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part5/filedialog/file.cpp b/examples/tutorials/gettingStarted/gsQml/parts/part5/filedialog/file.cpp
new file mode 100644
index 0000000000..afbb33083f
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part5/filedialog/file.cpp
@@ -0,0 +1,56 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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 "file.h"
+
+File::File(QObject *parent) : QObject(parent)
+{
+    m_name = "";
+}
+
+QString File::name() const{
+    return m_name;
+}
+void File::setName(const QString &str){
+    if(str != m_name){
+        m_name = str;
+        emit nameChanged();
+    }
+}
\ No newline at end of file
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part5/filedialog/file.h b/examples/tutorials/gettingStarted/gsQml/parts/part5/filedialog/file.h
new file mode 100644
index 0000000000..09bd03960e
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part5/filedialog/file.h
@@ -0,0 +1,67 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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 FILE_H
+#define FILE_H
+
+
+#include <QString>
+#include <QObject>
+
+class File : public QObject{
+    
+    Q_OBJECT
+    
+    Q_PROPERTY(QString name READ name WRITE setName NOTIFY nameChanged)
+    
+    public:
+        File(QObject *parent = 0);
+        
+        QString name() const;
+        void setName(const QString &str);
+        
+    signals:
+        void nameChanged();
+        
+    private:
+        QString m_name;
+};
+
+#endif
\ No newline at end of file
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part5/filedialog/filedialog.pro b/examples/tutorials/gettingStarted/gsQml/parts/part5/filedialog/filedialog.pro
new file mode 100644
index 0000000000..6247747003
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part5/filedialog/filedialog.pro
@@ -0,0 +1,17 @@
+TEMPLATE = lib
+CONFIG += qt plugin
+QT += declarative
+
+DESTDIR +=  ../plugins
+OBJECTS_DIR = tmp
+MOC_DIR = tmp
+
+TARGET = FileDialog
+
+HEADERS += 	directory.h \
+		file.h \
+		dialogPlugin.h
+
+SOURCES +=	directory.cpp \
+		file.cpp \
+		dialogPlugin.cpp
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part5/filedialog/qmldir b/examples/tutorials/gettingStarted/gsQml/parts/part5/filedialog/qmldir
new file mode 100644
index 0000000000..c2b27dad58
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part5/filedialog/qmldir
@@ -0,0 +1 @@
+plugin FileDialog plugins
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part5/images/arrow.png b/examples/tutorials/gettingStarted/gsQml/parts/part5/images/arrow.png
new file mode 100644
index 0000000000..14978c2e56
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part5/images/arrow.png
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part5/pics/qml-texteditor5_editmenu.png b/examples/tutorials/gettingStarted/gsQml/parts/part5/pics/qml-texteditor5_editmenu.png
new file mode 100644
index 0000000000..27feed5e82
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part5/pics/qml-texteditor5_editmenu.png
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part5/pics/qml-texteditor5_filemenu.png b/examples/tutorials/gettingStarted/gsQml/parts/part5/pics/qml-texteditor5_filemenu.png
new file mode 100644
index 0000000000..4d8f9f22b2
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part5/pics/qml-texteditor5_filemenu.png
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part5/pics/qml-texteditor5_newfile.png b/examples/tutorials/gettingStarted/gsQml/parts/part5/pics/qml-texteditor5_newfile.png
new file mode 100644
index 0000000000..680acfe839
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part5/pics/qml-texteditor5_newfile.png
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part5/qml-texteditor5.qmlproject b/examples/tutorials/gettingStarted/gsQml/parts/part5/qml-texteditor5.qmlproject
new file mode 100644
index 0000000000..ed034dff3f
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part5/qml-texteditor5.qmlproject
@@ -0,0 +1,18 @@
+import QmlProject 1.0
+
+Project {
+    /* Include .qml, .js, and image files from current directory and subdirectories */
+    QmlFiles {
+        directory: "."
+	directory: "core"
+	directory: "filedialog"
+    }
+    JavaScriptFiles {
+        directory: "."
+    }
+    ImageFiles {
+        directory: "."
+    }
+    /* List of plugin directories passed to QML runtime */
+    importPaths: [ " ./plugins " ]
+}
diff --git a/examples/tutorials/gettingStarted/gsQml/pics/qml-texteditor5_editmenu.png b/examples/tutorials/gettingStarted/gsQml/pics/qml-texteditor5_editmenu.png
new file mode 100644
index 0000000000..27feed5e82
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/pics/qml-texteditor5_editmenu.png
diff --git a/examples/tutorials/gettingStarted/gsQml/pics/qml-texteditor5_filemenu.png b/examples/tutorials/gettingStarted/gsQml/pics/qml-texteditor5_filemenu.png
new file mode 100644
index 0000000000..4d8f9f22b2
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/pics/qml-texteditor5_filemenu.png
diff --git a/examples/tutorials/gettingStarted/gsQml/pics/qml-texteditor5_newfile.png b/examples/tutorials/gettingStarted/gsQml/pics/qml-texteditor5_newfile.png
new file mode 100644
index 0000000000..680acfe839
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/pics/qml-texteditor5_newfile.png
diff --git a/examples/tutorials/gettingStarted/gsQml/texteditor.pro b/examples/tutorials/gettingStarted/gsQml/texteditor.pro
new file mode 100644
index 0000000000..aa5306cceb
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/texteditor.pro
@@ -0,0 +1,4 @@
+TEMPLATE      = subdirs
+SUBDIRS       = \
+                filedialog\
+
diff --git a/examples/tutorials/gettingStarted/gsQml/texteditor.qml b/examples/tutorials/gettingStarted/gsQml/texteditor.qml
new file mode 100644
index 0000000000..20fc9c2035
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/texteditor.qml
@@ -0,0 +1,132 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module 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 1.0
+import "core"
+
+Rectangle {
+    id: screen
+    width: 1000; height: 1000
+    property int partition: height/3
+    border { width: 1; color: "#DCDCCC"}
+    state: "DRAWER_CLOSED"
+
+    //Item 1: MenuBar on the top portion of the screen
+    MenuBar {
+        id:menuBar
+        height: screen.partition; width: screen.width
+        z: 1
+    }
+
+    //Item 2: The editable text area
+    TextArea {
+        id: textArea
+        y: drawer.height
+        color: "#3F3F3F"
+        fontColor: "#DCDCCC"
+         height: partition*2; width:parent.width
+    }
+
+    //Item 3: The drawer handle
+    Rectangle {
+        id: drawer
+        height: 15; width: parent.width
+        border { color : "#6A6D6A"; width: 1 }
+        z: 1
+        gradient: Gradient {
+                GradientStop { position: 0.0; color: "#8C8F8C" }
+                GradientStop { position: 0.17; color: "#6A6D6A" }
+                GradientStop { position: 0.77; color: "#3F3F3F" }
+                GradientStop { position: 1.0; color: "#6A6D6A" }
+            }
+        Image {
+            id: arrowIcon
+            source: "images/arrow.png"
+            anchors.horizontalCenter: parent.horizontalCenter
+            Behavior{ NumberAnimation { property: "rotation"; easing.type: Easing.OutExpo } }
+        }
+
+        MouseArea {
+            id: drawerMouseArea
+            anchors.fill: parent
+            hoverEnabled: true
+            onEntered: parent.border.color = Qt.lighter("#6A6D6A")
+            onExited:  parent.border.color = "#6A6D6A"
+            onClicked: {
+                if (screen.state == "DRAWER_CLOSED") {
+                    screen.state = "DRAWER_OPEN"
+                }
+                else if (screen.state == "DRAWER_OPEN"){
+                    screen.state = "DRAWER_CLOSED"
+                }
+            }
+        }
+    }
+
+//! [states]
+    states:[
+        State {
+            name: "DRAWER_OPEN"
+            PropertyChanges { target: menuBar; y: 0}
+            PropertyChanges { target: textArea; y: partition + drawer.height}
+            PropertyChanges { target: drawer; y: partition}
+            PropertyChanges { target: arrowIcon; rotation: 180} 
+        },
+        State {
+            name: "DRAWER_CLOSED"
+            PropertyChanges { target: menuBar; y:-height; }
+            PropertyChanges { target: textArea; y: drawer.height; height: screen.height - drawer.height }
+            PropertyChanges { target: drawer; y: 0 }
+            PropertyChanges { target: arrowIcon; rotation: 0 }
+        }
+    ]
+//! [states]
+
+//! [transitions]
+    transitions: [
+        Transition {
+            to: "*"
+            NumberAnimation { target: textArea; properties: "y, height"; duration: 100; easing.type:Easing.OutExpo }
+            NumberAnimation { target: menuBar; properties: "y"; duration: 100; easing.type: Easing.OutExpo }
+            NumberAnimation { target: drawer; properties: "y"; duration: 100; easing.type: Easing.OutExpo }
+        }
+    ]
+//! [transitions]
+}