Adding Getting Started files. Auto test passes.

20 files changed, 1603 insertions, 0 deletions

diff --git a/examples/tutorials/gettingStarted/gsQml/core/button.qml b/examples/tutorials/gettingStarted/gsQml/core/button.qml
new file mode 100644
index 0000000..dd5dcad
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/core/button.qml
@@ -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$
+**
+****************************************************************************/
+
+
+import Qt 4.7
+
+Rectangle {
+    //identifier of the item
+    id: button
+
+    //these properties act as constants, useable outside this QML file
+    property int buttonHeight: 75
+    property int buttonWidth: 150
+
+    //attaches to the Text element's text content
+    property string label
+    property color textColor: buttonLabel.color
+
+    //the color highlight when the mouse hovers on the rectangle
+    property color onHoverColor: "lightsteelblue"
+    property color borderColor: "transparent"
+
+    //buttonColor is set to the button's main color
+    property color buttonColor: "lightblue"
+
+    property real labelSize: 14
+
+    //set appearance properties
+    radius: 6
+    smooth: true
+    border { width: 2; color: borderColor }
+    width: buttonWidth; height: buttonHeight
+
+    Text {
+        id: buttonLabel
+        anchors.centerIn: parent
+        text: label     //bind the text to the parent's text
+        color: "#DCDCCC"
+        font.pointSize: labelSize
+    }
+
+    //buttonClick() is callable and a signal handler, onButtonClick is automatically created
+    signal buttonClick()
+
+    //define the clickable area to be the whole rectangle
+    MouseArea { 
+        id: buttonMouseArea
+        anchors.fill: parent    //stretch the area to the parent's dimension
+        onClicked: buttonClick()
+
+        //if true, then onEntered and onExited called if mouse hovers in the mouse area
+        //if false, a button must be clicked to detect the mouse hover
+        hoverEnabled: true
+
+        //display a border if the mouse hovers on the button mouse area
+        onEntered: parent.border.color = onHoverColor
+        //remove the border if the mouse exits the button mouse area
+        onExited:  parent.border.color = borderColor
+    }
+
+    //change the color of the button when pressed
+    color: buttonMouseArea.pressed ? Qt.darker(buttonColor, 1.5) : buttonColor
+    //animate the color whenever the color property changes
+    Behavior on color { ColorAnimation{ duration: 55 } }
+
+    //scale the button when pressed
+    scale: buttonMouseArea.pressed ? 1.1 : 1.00
+    //Animate the scale property change
+    Behavior on scale { NumberAnimation{ duration: 55 } }
+
+}
\ No newline at end of file
diff --git a/examples/tutorials/gettingStarted/gsQml/core/editMenu.qml b/examples/tutorials/gettingStarted/gsQml/core/editMenu.qml
new file mode 100644
index 0000000..7f47d9f
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/core/editMenu.qml
@@ -0,0 +1,105 @@
+/****************************************************************************
+**
+** 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 Qt 4.7
+
+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) }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/examples/tutorials/gettingStarted/gsQml/core/fileDialog.qml b/examples/tutorials/gettingStarted/gsQml/core/fileDialog.qml
new file mode 100644
index 0000000..425f717
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/core/fileDialog.qml
@@ -0,0 +1,163 @@
+/****************************************************************************
+**
+** 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 Qt 4.7
+
+Rectangle {
+    id:dialog
+    height: 200 * partition; width: 200
+    color: "transparent"
+
+    signal selectChanged()
+    signal notifyRefresh()
+    onNotifyRefresh:dirView.model = directory.files
+
+    property string selectedFile
+    property int selectedIndex: 0
+
+    Rectangle {
+        id: dirBox
+        radius: 10
+        anchors.centerIn:parent
+        height: parent.height -15; width: parent.width -30
+
+        Rectangle {
+            id:header
+            height: parent.height*0.1; width: parent.width
+            radius:3
+            z:1
+            gradient: Gradient {
+                GradientStop { position: 0.0; color: "#8C8F8C" }
+                GradientStop { position: 0.17; color: "#6A6D6A" }
+                GradientStop { position: 0.98;color: "#3F3F3F" }
+                GradientStop { position: 1.0; color: "#0e1B20" }
+            }
+            Text {
+                height: header.height; anchors.centerIn: header
+                text: "files:" 
+                color: "lightblue"
+                font.weight: Font.Light
+                font.italic: true
+            }
+        }
+        GridView {
+            id:dirView
+            width:parent.width; height:parent.height*.9
+            anchors.top: header.bottom
+            cellWidth: 100; cellHeight: 75
+            model: directory.files
+            delegate: dirDelegate
+            clip: true
+            highlightMoveDuration: 40
+        }
+        Component {
+            id: dirDelegate
+            Rectangle {
+                id:file
+                color: "transparent"
+                width: GridView.view.cellWidth; height: GridView.view.cellHeight
+
+                Text {
+                    id:fileName
+                    width: parent.width
+                    anchors.centerIn: parent
+                    text: name
+                    color: "#BDCACD"
+                    font.weight: GridView.view.currentIndex == index ?  Font.DemiBold : Font.Normal
+                    font.pointSize: GridView.view.currentIndex == index ?  12 : 10
+                    elide: Text.ElideMiddle
+                    horizontalAlignment: Text.AlignHCenter
+                }
+                Rectangle {
+                    id: selection
+                    width: parent.width; height: parent.height
+                    anchors.centerIn: parent
+                    radius: 10
+                    smooth: true
+                    scale: GridView.view.currentIndex == index ?  1 : 0.5
+                    opacity: GridView.view.currentIndex == index ?  1 : 0
+                    Text {
+                        id: overlay
+                        width: parent.width
+                        anchors.centerIn: parent
+                        text: name
+                        color: "#696167"
+                        font.weight: Font.DemiBold
+                        font.pointSize: 12
+                        smooth: true
+                        elide: Text.ElideMiddle
+                        horizontalAlignment: Text.AlignHCenter
+                    }
+                    Behavior on opacity { NumberAnimation{ duration: 45 } }
+                    Behavior on scale { NumberAnimation{ duration: 45 } }
+                    gradient: Gradient {
+                        GradientStop { position: 0.0; color: Qt.lighter("lightsteelblue",1.25) }
+                        GradientStop { position: 0.67; color: Qt.darker("lightsteelblue",1.3) }
+                    }
+                    border.color: "lightsteelblue"
+                    border.width: 1
+                }
+                MouseArea {
+                    id:fileMouseArea
+                    anchors.fill:parent
+                    hoverEnabled: true
+
+                    onClicked: {
+                        GridView.view.currentIndex = index
+                        selectedFile = directory.files[index].name
+                        selectChanged()
+                    }
+                    onEntered: {
+                            fileName.color = "lightsteelblue"
+                            fileName.font.weight = Font.DemiBold
+                        }
+                    onExited: {
+                            fileName.font.weight = Font.Normal
+                            fileName.color = "#BDCACD"
+                        }
+                }
+            }
+        }
+        gradient: Gradient {
+            GradientStop { position: 0.0; color: "#A5333333" }
+            GradientStop { position: 1.0; color: "#03333333" }
+        }
+    }
+}
\ No newline at end of file
diff --git a/examples/tutorials/gettingStarted/gsQml/core/fileMenu.qml b/examples/tutorials/gettingStarted/gsQml/core/fileMenu.qml
new file mode 100644
index 0000000..afe48c7
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/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 Qt 4.7
+
+Rectangle {
+    id: fileMenu
+    height: 480; width:1000
+    property color buttonBorderColor: "#7F8487"
+    property color buttonFillColor: "#8FBDCACD"
+    property string fileContent:directory.fileContent
+
+    //the menuName is accessible from outside this QML file
+    property string menuName: "File"
+
+    //used to divide the screen into parts.
+    property real partition: 1/3
+
+    color: "#6C646A" 
+        gradient: Gradient {
+                        GradientStop { position: 0.0; color: "#6C646A" }
+                        GradientStop { position: 1.0; color: Qt.darker("#6A6D6A") }
+        }
+
+    Directory {
+        id:directory
+        filename: textInput.text
+        onDirectoryChanged:fileDialog.notifyRefresh()
+    }
+
+    Rectangle {
+        id:actionContainer
+
+        //make this rectangle invisible
+        color:"transparent"
+        anchors.left: parent.left
+
+        //the height is a good proportion that creates more space at the top of
+        //the column of buttons
+        width: fileMenu.width * partition; height: fileMenu.height
+
+        Column {
+            anchors.centerIn: parent
+            spacing: parent.height/32
+            Button {
+                id: saveButton
+                label: "Save"
+                borderColor: buttonBorderColor
+                buttonColor: buttonFillColor
+                width: actionContainer.width/ 1.3
+                height:actionContainer.height / 8
+                labelSize:24
+                onButtonClick: {
+                    directory.fileContent = textArea.textContent
+                    directory.filename = textInput.text
+                    directory.saveFile()
+                }
+                gradient: Gradient {
+                    GradientStop { position: 0.0; color: Qt.lighter(buttonFillColor,1.25) }
+                    GradientStop { position: 0.67; color: Qt.darker(buttonFillColor,1.3) }
+                }
+            }
+            Button {
+                id: loadButton
+                width: actionContainer.width/ 1.3
+                height:actionContainer.height/ 8
+                buttonColor: buttonFillColor
+                borderColor: buttonBorderColor
+                label: "Load"
+                labelSize:24
+                onButtonClick:{
+                    directory.filename = textInput.text
+                    directory.loadFile()
+                    textArea.textContent = directory.fileContent
+                }
+                gradient: Gradient {
+                    GradientStop { position: 0.0; color: Qt.lighter(buttonFillColor,1.25) }
+                    GradientStop { position: 0.67; color: Qt.darker(buttonFillColor,1.3) }
+                }
+            }
+            Button {
+                id: newButton
+                width: actionContainer.width/ 1.3
+                height: actionContainer.height/ 8
+                buttonColor: buttonFillColor
+                borderColor: buttonBorderColor
+                label: "New"
+                labelSize: 24
+                onButtonClick:{
+                    textArea.textContent = ""
+                    textInput.text = ""
+                }
+                gradient: Gradient {
+                    GradientStop { position: 0.0; color: Qt.lighter(buttonFillColor,1.25) }
+                    GradientStop { position: 0.67; color: Qt.darker(buttonFillColor,1.3) }
+                }
+
+            }
+            Rectangle {
+                id: space
+                width: actionContainer.width/ 1.3
+                height: actionContainer.height / 16
+                color: "transparent"
+            }
+            Button {
+                id: exitButton
+                width: actionContainer.width/ 1.3
+                height: actionContainer.height/ 8
+                label: "Exit"
+                labelSize: 24
+                buttonColor: buttonFillColor
+                borderColor: buttonBorderColor
+                onButtonClick: Qt.quit()
+                gradient: Gradient {
+                    GradientStop { position: 0.0; color: Qt.lighter(buttonFillColor,1.25) }
+                    GradientStop { position: 0.67; color: Qt.darker(buttonFillColor,1.3) }
+                }
+            }
+        }
+    }
+    Rectangle {
+        id:dialogContainer
+
+        width: 2*fileMenu.width * partition; height: fileMenu.height
+        anchors.right:parent.right
+        color: "transparent"
+
+        Column {
+            anchors.centerIn: parent
+            spacing: parent.height /640
+            FileDialog {
+                id:fileDialog
+                height: 2*dialogContainer.height * partition
+                width: dialogContainer.width
+                onSelectChanged: textInput.text = selectedFile
+            }
+
+            Rectangle {
+                id:lowerPartition
+                height: dialogContainer.height * partition; width: dialogContainer.width
+                color: "transparent"
+
+                Rectangle {
+                    id: nameField
+                    gradient: Gradient {
+                        GradientStop { position: 0.0; color: "#806F6F6F" }
+                        GradientStop { position: 1.0; color: "#136F6F6F" }
+                    }
+                    radius: 10
+                    anchors { centerIn:parent; leftMargin: 15; rightMargin: 15; topMargin: 15 }
+                    height: parent.height-15
+                    width: parent.width -20
+                    border { color: "#4A4A4A"; width:1 }
+
+                    TextInput {
+                        id: textInput
+                        z:2
+                        anchors { bottom: parent.bottom; topMargin: 10; horizontalCenter: parent.horizontalCenter }
+                        width: parent.width - 10
+                        height: parent.height -10
+                        font.pointSize: 40
+                        color: "lightsteelblue"
+                        focus: true
+                    }
+                    Text {
+                        id: textInstruction
+                        anchors.centerIn: parent
+                        text: "Select file name and press save or load"
+                        font {pointSize: 11; weight: Font.Light; italic: true}
+                        color: "lightblue"
+                        z: 2
+                        opacity: (textInput.text == "") ? 1 : 0
+                    }
+                    Text {
+                        id:fieldLabel
+                        anchors { top: parent.top; left: parent.left }
+                        text: "  file name: "
+                        font { pointSize: 11; weight: Font.Light; italic: true }
+                        color: "lightblue"
+                        z:2
+                    }
+                    MouseArea {
+                            anchors.centerIn:parent
+                            width: nameField.width; height: nameField.height
+                            onClicked: {
+                                textInput.text = ""
+                                textInput.focus = true
+                                textInput.forceFocus()
+                            }
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/examples/tutorials/gettingStarted/gsQml/core/menuBar.qml b/examples/tutorials/gettingStarted/gsQml/core/menuBar.qml
new file mode 100644
index 0000000..0695772
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/core/menuBar.qml
@@ -0,0 +1,147 @@
+/****************************************************************************
+**
+** 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 Qt 4.7
+
+Rectangle {
+    id: menuBar
+    width: 1000; height:300
+    color:"transparent"
+    property color fileColor: "plum"
+    property color editColor: "powderblue"
+
+    property real partition: 1/10
+
+    Column {
+        anchors.fill: parent
+        //container for the header and the buttons
+        z: 1
+        Rectangle {
+            id: labelList
+            height:menuBar.height*partition
+            width: menuBar.width
+            color: "beige"
+            gradient: Gradient {
+                GradientStop { position: 0.0; color: "#8C8F8C" }
+                GradientStop { position: 0.17; color: "#6A6D6A" }
+                GradientStop { position: 0.98;color: "#3F3F3F" }
+                GradientStop { position: 1.0; color: "#0e1B20" }
+            }
+            Text {
+                height: parent.height
+                anchors { right: labelRow.left ; verticalCenter: parent.bottom }
+                text: "menu:    " 
+                color: "lightblue"
+                font { weight: Font.Light; italic: true }
+                smooth: true
+            }
+            //row displays its children in a vertical row
+            Row {
+                id: labelRow
+                anchors.centerIn: parent
+                spacing:40
+                Button {
+                    id: fileButton
+                    height: 20; width: 50
+                    label: "File"
+                    buttonColor : menuListView.currentIndex == 0? fileColor : Qt.darker(fileColor, 1.5)
+                    scale: menuListView.currentIndex == 0? 1.25: 1
+                    labelSize: menuListView.currentIndex == 0? 16:12
+                    radius: 1
+                    smooth:true
+                    //on a button click, change the list's currently selected item to FileMenu
+                    onButtonClick: menuListView.currentIndex = 0
+                    gradient: Gradient {
+                        GradientStop { position: 0.0; color: fileColor }
+                        GradientStop { position: 1.0; color: "#136F6F6F" }
+                    }
+                }
+                Button {
+                    id: editButton
+                    height: 20; width: 50
+                    buttonColor : menuListView.currentIndex == 1? Qt.darker(editColor, 1.5) : Qt.darker(editColor, 1.9)
+                    scale: menuListView.currentIndex == 1? 1.25: 1    
+                    label: "Edit"
+                    radius: 1
+                    labelSize: menuListView.currentIndex == 1? 16:12
+                    smooth:true
+                    //on a button click, change the list's currently selected item to EditMenu
+                    onButtonClick: menuListView.currentIndex = 1    
+                    gradient: Gradient {
+                        GradientStop { position: 0.0; color: editColor }
+                        GradientStop { position: 1.0; color: "#136F6F6F" }
+                    }
+                }
+            }
+        }
+
+        //list view will display a model according to a delegate
+        ListView {
+            id: menuListView
+            width:menuBar.width; height: 9*menuBar.height*partition
+
+            //the model contains the data
+            model: menuListModel
+
+            //control the movement of the menu switching
+            snapMode: ListView.SnapOneItem
+            orientation: ListView.Horizontal
+            boundsBehavior: Flickable.StopAtBounds 
+            flickDeceleration: 5000
+            highlightFollowsCurrentItem: true
+            highlightMoveDuration:240
+            highlightRangeMode: ListView.StrictlyEnforceRange
+        }
+    }
+    //a list of visual items already have delegates handling their display
+    VisualItemModel {
+        id: menuListModel
+
+        FileMenu {
+            id:fileMenu
+            width: menuListView.width; height: menuListView.height
+            color: fileColor
+        }
+        EditMenu {
+            color: editColor
+            width:  menuListView.width; height: menuListView.height
+        }
+    }
+}
diff --git a/examples/tutorials/gettingStarted/gsQml/core/qmldir b/examples/tutorials/gettingStarted/gsQml/core/qmldir
new file mode 100644
index 0000000..08575cc
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/core/qmldir
@@ -0,0 +1,49 @@
+/****************************************************************************
+**
+** 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$
+**
+****************************************************************************/
+
+Button ./button.qml
+FileDialog ./fileDialog.qml
+TextArea ./textArea.qml
+TextEditor ./textEditor.qml
+EditMenu ./editMenu.qml
+MenuBar ./menuBar.qml
+FileMenu ./fileMenu.qml
+
+plugin FileDialog ../plugins
diff --git a/examples/tutorials/gettingStarted/gsQml/core/textArea.qml b/examples/tutorials/gettingStarted/gsQml/core/textArea.qml
new file mode 100644
index 0000000..6d3d214
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/core/textArea.qml
@@ -0,0 +1,87 @@
+/****************************************************************************
+**
+** 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 Qt 4.7
+
+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
+        }
+    }
+}
\ No newline at end of file
diff --git a/examples/tutorials/gettingStarted/gsQml/filedialog/cppPlugins.pro b/examples/tutorials/gettingStarted/gsQml/filedialog/cppPlugins.pro
new file mode 100644
index 0000000..d85787d
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/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/filedialog/dialogPlugin.cpp b/examples/tutorials/gettingStarted/gsQml/filedialog/dialogPlugin.cpp
new file mode 100644
index 0000000..e3a82dc
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/filedialog/dialogPlugin.cpp
@@ -0,0 +1,54 @@
+/****************************************************************************
+**
+** 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");
+}
+
+//FileDialog is the plugin name (same as the TARGET in the project file) and DialogPlugin is the plugin classs
+Q_EXPORT_PLUGIN2(FileDialog, DialogPlugin);
\ No newline at end of file
diff --git a/examples/tutorials/gettingStarted/gsQml/filedialog/dialogPlugin.h b/examples/tutorials/gettingStarted/gsQml/filedialog/dialogPlugin.h
new file mode 100644
index 0000000..c345641
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/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/filedialog/directory.cpp b/examples/tutorials/gettingStarted/gsQml/filedialog/directory.cpp
new file mode 100644
index 0000000..c46a65b
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/filedialog/directory.cpp
@@ -0,0 +1,224 @@
+/****************************************************************************
+**
+** 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)
+{
+    Q_UNUSED(property);
+    Q_UNUSED(file);
+    //Do nothing. can't add to a directory using this method
+}
+
+/*
+Function called to retrieve file in the list using an index
+*/
+File* fileAt(QDeclarativeListProperty<File> * property, int index)
+{
+    return static_cast< QList<File *> *>(property->data)->at(index);
+}
+
+/*
+Returns the number of files in the list
+*/
+int filesSize(QDeclarativeListProperty<File> * property) 
+{
+    return static_cast< QList<File *> *>(property->data)->size();
+}
+
+/*
+Function called to empty the list property contents
+*/
+void clearFilesPtr(QDeclarativeListProperty<File> *property)
+{
+    return static_cast< QList<File *> *>(property->data)->clear();
+}
+
+/*
+Returns the list of files as a QDeclarativeListProperty.
+*/
+QDeclarativeListProperty<File> Directory::files()
+{
+    refresh();
+    return QDeclarativeListProperty<File>( this, &m_fileList, &appendFiles, &filesSize, &fileAt,  &clearFilesPtr );
+}
+
+/*
+Return the name of the currently selected file
+*/
+QString Directory::filename() const
+{
+    return currentFile.name();
+}
+
+/*
+Return the file's content as a string.
+*/
+QString Directory::fileContent() const
+{
+    return m_fileContent;
+}
+
+/*
+Set the file name of the current file
+*/
+void Directory::setFilename(const QString &str)
+{
+    if( str != currentFile.name() ) {
+        currentFile.setName(str);
+        emit filenameChanged();
+    }
+}
+
+/*
+Set the content of the file as a string
+*/
+void Directory::setFileContent(const QString &str)
+{
+    if(str != m_fileContent){
+        m_fileContent = str;
+        emit fileContentChanged();
+    }
+}
+
+/*
+Called from QML to save the file using the filename and file content.
+Saving makes sure that the file has a .txt extension.
+*/
+void Directory::saveFile()
+{
+    if(currentFile.name().size() == 0){
+        qWarning()<< "Empty filename. no save";
+        return;
+    }
+    QString extendedName = currentFile.name();
+    if(!currentFile.name().endsWith(".txt")){
+        extendedName.append(".txt");
+    }
+    QFile file( m_dir.filePath(extendedName) );
+    if ( file.open(QFile::WriteOnly | QFile::Truncate) ) {
+        QTextStream outStream(&file);
+        outStream << m_fileContent;
+    }
+    file.close();
+    refresh();
+    emit directoryChanged();
+}
+
+/*
+Load the contents of a file.
+Only loads files with a .txt extension
+*/
+void Directory::loadFile()
+{
+    m_fileContent.clear();
+    QString extendedName = currentFile.name();
+    if( !currentFile.name().endsWith(".txt") ) {
+        extendedName.append(".txt");
+    }
+
+    QFile file( m_dir.filePath(extendedName) );
+    if ( file.open(QFile::ReadOnly ) ) {
+        QTextStream inStream(&file);
+
+        QString line;
+        do {
+            line = inStream.read(75);
+            m_fileContent.append(line);
+        } while ( !line.isNull() ) ;
+    }
+    file.close();
+}
+
+/*
+Reloads the content of the files list. This is to ensure that the newly
+created files are added onto the list.
+*/
+void Directory::refresh()
+{
+    m_dirFiles = m_dir.entryList(m_filterList,QDir::Files,QDir::Name);
+    m_fileList.clear();
+
+    File * file;
+    for(int i = 0; i < m_dirFiles.size() ; i ++) {
+        file = new File();
+
+        if( m_dirFiles.at(i).endsWith(".txt") ) {
+            QString name = m_dirFiles.at(i);
+            file->setName( name.remove(".txt",Qt::CaseSensitive) );
+        }
+        else {
+            file->setName(m_dirFiles.at(i));
+        }
+        m_fileList.append(file);
+    }
+}
\ No newline at end of file
diff --git a/examples/tutorials/gettingStarted/gsQml/filedialog/directory.h b/examples/tutorials/gettingStarted/gsQml/filedialog/directory.h
new file mode 100644
index 0000000..0dc388a
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/filedialog/directory.h
@@ -0,0 +1,107 @@
+/****************************************************************************
+**
+** 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/filedialog/file.cpp b/examples/tutorials/gettingStarted/gsQml/filedialog/file.cpp
new file mode 100644
index 0000000..ccf762c
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/filedialog/file.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 "file.h"
+
+File::File(QObject *parent) : QObject(parent)
+{
+    m_name = "";
+}
+
+QString File::name() const{
+    return m_name;
+}
+void File::setName(const QString &str){
+    if(str != m_name){
+        m_name = str;
+        emit nameChanged();
+    }
+}
\ No newline at end of file
diff --git a/examples/tutorials/gettingStarted/gsQml/filedialog/file.h b/examples/tutorials/gettingStarted/gsQml/filedialog/file.h
new file mode 100644
index 0000000..606f374
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/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/filedialog/qmldir b/examples/tutorials/gettingStarted/gsQml/filedialog/qmldir
new file mode 100644
index 0000000..c2b27da
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/filedialog/qmldir
@@ -0,0 +1 @@
+plugin FileDialog plugins
diff --git a/examples/tutorials/gettingStarted/gsQml/images/arrow.png b/examples/tutorials/gettingStarted/gsQml/images/arrow.png
new file mode 100644
index 0000000..14978c2
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/images/arrow.png
diff --git a/examples/tutorials/gettingStarted/gsQml/pics/qml-texteditor5_editmenu.png b/examples/tutorials/gettingStarted/gsQml/pics/qml-texteditor5_editmenu.png
new file mode 100644
index 0000000..27feed5
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/pics/qml-texteditor5_editmenu.png
diff --git a/examples/tutorials/gettingStarted/gsQml/pics/qml-texteditor5_filemenu.png b/examples/tutorials/gettingStarted/gsQml/pics/qml-texteditor5_filemenu.png
new file mode 100644
index 0000000..4d8f9f2
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/pics/qml-texteditor5_filemenu.png
diff --git a/examples/tutorials/gettingStarted/gsQml/pics/qml-texteditor5_newfile.png b/examples/tutorials/gettingStarted/gsQml/pics/qml-texteditor5_newfile.png
new file mode 100644
index 0000000..680acfe
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/pics/qml-texteditor5_newfile.png
diff --git a/examples/tutorials/gettingStarted/gsQml/texteditor.qml b/examples/tutorials/gettingStarted/gsQml/texteditor.qml
new file mode 100644
index 0000000..3bd9d55
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/texteditor.qml
@@ -0,0 +1,128 @@
+/****************************************************************************
+**
+** 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 Qt 4.7
+import "core"
+
+Rectangle {
+    id: screen
+    width: 1000; height: 1000
+    property int partition: height/3
+    border { width: 1; color: "#DCDCCC"}
+    state: "DRAWER_CLOSED"
+
+    //Item 1: MenuBar on the top portion of the screen
+    MenuBar {
+        id:menuBar
+        height: screen.partition; width: screen.width
+        z: 1
+    }
+
+    //Item 2: The editable text area
+    TextArea {
+        id: textArea
+        y: drawer.height
+        color: "#3F3F3F"
+        fontColor: "#DCDCCC"
+         height: partition*2; width:parent.width
+    }
+
+    //Item 3: The drawer handle
+    Rectangle {
+        id: drawer
+        height: 15; width: parent.width
+        border { color : "#6A6D6A"; width: 1 }
+        z: 1
+        gradient: Gradient {
+                GradientStop { position: 0.0; color: "#8C8F8C" }
+                GradientStop { position: 0.17; color: "#6A6D6A" }
+                GradientStop { position: 0.77; color: "#3F3F3F" }
+                GradientStop { position: 1.0; color: "#6A6D6A" }
+            }
+        Image {
+            id: arrowIcon
+            source: "images/arrow.png"
+            anchors.horizontalCenter: parent.horizontalCenter
+            Behavior{ NumberAnimation { property: "rotation"; easing.type: Easing.OutExpo } }
+        }
+
+        MouseArea {
+            id: drawerMouseArea
+            anchors.fill: parent
+            hoverEnabled: true
+            onEntered: parent.border.color = Qt.lighter("#6A6D6A")
+            onExited:  parent.border.color = "#6A6D6A"
+            onClicked: {
+                if (screen.state == "DRAWER_CLOSED") {
+                    screen.state = "DRAWER_OPEN"
+                }
+                else if (screen.state == "DRAWER_OPEN"){
+                    screen.state = "DRAWER_CLOSED"
+                }
+            }
+        }
+    }
+
+    states:[
+        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 }
+        }
+    ]
+}