Doc: Added missing examples and snippets.

Task-number: QTBUG-14238

56 files changed, 3732 insertions, 0 deletions

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 0000000..ffd4be4
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part0/Button.qml
@@ -0,0 +1,55 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 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 0000000..bb70cfd
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part1/Button.qml
@@ -0,0 +1,97 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 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 0000000..460f5e9
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part1/EditMenu.qml
@@ -0,0 +1,76 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 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 0000000..65de4f1
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part1/FileMenu.qml
@@ -0,0 +1,91 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 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 0000000..5bb50f8
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part1/SimpleButton.qml
@@ -0,0 +1,73 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 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 0000000..aab64bc
--- /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 0000000..d3ff66f
--- /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 0000000..f2e2b0d
--- /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 0000000..21ce509
--- /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 0000000..d4909f8
--- /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 0000000..39ac591
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part2/Button.qml
@@ -0,0 +1,99 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 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 0000000..fdd06d5
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part2/EditMenu.qml
@@ -0,0 +1,77 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 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 0000000..bd6669b
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part2/FileMenu.qml
@@ -0,0 +1,92 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 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 0000000..8065804
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part2/MenuBar.qml
@@ -0,0 +1,140 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 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 0000000..da959a3
--- /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 0000000..d4909f8
--- /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 0000000..39ac591
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part3/Button.qml
@@ -0,0 +1,99 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 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 0000000..fdd06d5
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part3/EditMenu.qml
@@ -0,0 +1,77 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 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 0000000..bd6669b
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part3/FileMenu.qml
@@ -0,0 +1,92 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 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 0000000..8065804
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part3/MenuBar.qml
@@ -0,0 +1,140 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 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 0000000..b0bf664
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part3/TextArea.qml
@@ -0,0 +1,80 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 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 0000000..7f0e650
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part3/TextEditor.qml
@@ -0,0 +1,68 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 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 0000000..14978c2
--- /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 0000000..d0623b5
--- /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 0000000..d4909f8
--- /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 0000000..36833f5
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part4/Button.qml
@@ -0,0 +1,109 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 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 0000000..f0a0e36
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part4/EditMenu.qml
@@ -0,0 +1,81 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 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 0000000..d257d6a
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part4/FileMenu.qml
@@ -0,0 +1,96 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 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 0000000..5b0dbf8
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part4/MenuBar.qml
@@ -0,0 +1,146 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 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 0000000..d360faa
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part4/SimpleButton.qml
@@ -0,0 +1,59 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 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 0000000..4eedf34
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part4/TextArea.qml
@@ -0,0 +1,80 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 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 0000000..d218bba
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part4/TextEditor.qml
@@ -0,0 +1,146 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 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 0000000..14978c2
--- /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 0000000..a195fb8
--- /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 0000000..d4909f8
--- /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 0000000..4adcf05
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part5/TextEditor.qml
@@ -0,0 +1,127 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 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 0000000..c0c1f77
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part5/core/Button.qml
@@ -0,0 +1,109 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 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 0000000..4338d25
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part5/core/EditMenu.qml
@@ -0,0 +1,110 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 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 0000000..af9d82c
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part5/core/FileDialog.qml
@@ -0,0 +1,170 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 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 0000000..1d671e4
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part5/core/FileMenu.qml
@@ -0,0 +1,232 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 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 0000000..657e5dc
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part5/core/MenuBar.qml
@@ -0,0 +1,148 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 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 0000000..d58c159
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part5/core/TextArea.qml
@@ -0,0 +1,86 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 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 0000000..3f22778
--- /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/cppPlugins.pro b/examples/tutorials/gettingStarted/gsQml/parts/part5/filedialog/cppPlugins.pro
new file mode 100644
index 0000000..6247747
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part5/filedialog/cppPlugins.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/dialogPlugin.cpp b/examples/tutorials/gettingStarted/gsQml/parts/part5/filedialog/dialogPlugin.cpp
new file mode 100644
index 0000000..7ea44ce
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part5/filedialog/dialogPlugin.cpp
@@ -0,0 +1,57 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 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 0000000..188e070
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part5/filedialog/dialogPlugin.h
@@ -0,0 +1,57 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 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 0000000..cddfa03
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part5/filedialog/directory.cpp
@@ -0,0 +1,219 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 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 0000000..417df68
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part5/filedialog/directory.h
@@ -0,0 +1,108 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 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 0000000..f4a360a
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part5/filedialog/file.cpp
@@ -0,0 +1,56 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 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 0000000..b27a143
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part5/filedialog/file.h
@@ -0,0 +1,67 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 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/qmldir b/examples/tutorials/gettingStarted/gsQml/parts/part5/filedialog/qmldir
new file mode 100644
index 0000000..c2b27da
--- /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 0000000..14978c2
--- /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 0000000..27feed5
--- /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 0000000..4d8f9f2
--- /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 0000000..680acfe
--- /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 0000000..ed034df
--- /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 " ]
+}