aboutsummaryrefslogtreecommitdiffstats
path: root/examples/quick/tutorials/gettingStartedQml/parts
diff options
context:
space:
mode:
Diffstat (limited to 'examples/quick/tutorials/gettingStartedQml/parts')
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part0/Button.qml55
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part1/Button.qml97
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part1/EditMenu.qml76
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part1/FileMenu.qml91
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part1/SimpleButton.qml73
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part1/pics/qml-texteditor1_button.pngbin0 -> 1670 bytes
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part1/pics/qml-texteditor1_editmenu.pngbin0 -> 6177 bytes
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part1/pics/qml-texteditor1_filemenu.pngbin0 -> 6062 bytes
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part1/pics/qml-texteditor1_simplebutton.pngbin0 -> 1055 bytes
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part1/qml-texteditor.qmlproject14
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part2/Button.qml99
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part2/EditMenu.qml77
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part2/FileMenu.qml92
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part2/MenuBar.qml140
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part2/pics/qml-texteditor2_menubar.pngbin0 -> 6079 bytes
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part2/qml-texteditor2.qmlproject14
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part3/Button.qml99
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part3/EditMenu.qml77
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part3/FileMenu.qml92
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part3/MenuBar.qml140
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part3/TextArea.qml80
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part3/TextEditor.qml68
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part3/images/arrow.pngbin0 -> 583 bytes
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part3/pics/qml-texteditor3_texteditor.pngbin0 -> 59345 bytes
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part3/qml-texteditor3.qmlproject14
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part4/Button.qml109
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part4/EditMenu.qml81
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part4/FileMenu.qml96
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part4/MenuBar.qml146
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part4/SimpleButton.qml59
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part4/TextArea.qml80
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part4/TextEditor.qml146
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part4/images/arrow.pngbin0 -> 583 bytes
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part4/pics/qml-texteditor4_texteditor.pngbin0 -> 63629 bytes
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part4/qml-texteditor4.qmlproject14
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part5/TextEditor.qml127
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part5/core/Button.qml109
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part5/core/EditMenu.qml110
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part5/core/FileDialog.qml171
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part5/core/FileMenu.qml233
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part5/core/MenuBar.qml145
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part5/core/TextArea.qml86
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part5/core/qmldir11
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part5/filedialog/dialogPlugin.cpp57
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part5/filedialog/dialogPlugin.h57
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part5/filedialog/directory.cpp219
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part5/filedialog/directory.h108
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part5/filedialog/file.cpp56
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part5/filedialog/file.h67
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part5/filedialog/filedialog.pro17
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part5/filedialog/qmldir1
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part5/images/arrow.pngbin0 -> 583 bytes
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part5/pics/qml-texteditor5_editmenu.pngbin0 -> 65123 bytes
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part5/pics/qml-texteditor5_filemenu.pngbin0 -> 21367 bytes
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part5/pics/qml-texteditor5_newfile.pngbin0 -> 76693 bytes
-rw-r--r--examples/quick/tutorials/gettingStartedQml/parts/part5/qml-texteditor5.qmlproject14
56 files changed, 3717 insertions, 0 deletions
diff --git a/examples/quick/tutorials/gettingStartedQml/parts/part0/Button.qml b/examples/quick/tutorials/gettingStartedQml/parts/part0/Button.qml
new file mode 100644
index 0000000000..f49ca9359f
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part0/Button.qml
@@ -0,0 +1,55 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the QtQml 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 Digia Plc 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 2.0
+
+Rectangle {
+ id: simplebutton
+ color: "grey"
+ width: 150; height: 75
+
+ Text{
+ id: buttonLabel
+ anchors.centerIn: parent
+ text: "button label"
+ }
+}
+//! [document]
diff --git a/examples/quick/tutorials/gettingStartedQml/parts/part1/Button.qml b/examples/quick/tutorials/gettingStartedQml/parts/part1/Button.qml
new file mode 100644
index 0000000000..ab85963593
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part1/Button.qml
@@ -0,0 +1,97 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the QtQml 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 Digia Plc and its Subsidiary(-ies) nor the names
+** of its contributors may be used to endorse or promote products derived
+** from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Rectangle {
+
+ //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
+ antialiasing: 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/quick/tutorials/gettingStartedQml/parts/part1/EditMenu.qml b/examples/quick/tutorials/gettingStartedQml/parts/part1/EditMenu.qml
new file mode 100644
index 0000000000..1940aebac3
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part1/EditMenu.qml
@@ -0,0 +1,76 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the QtQml 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 Digia Plc and its Subsidiary(-ies) nor the names
+** of its contributors may be used to endorse or promote products derived
+** from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Rectangle {
+ id: 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/quick/tutorials/gettingStartedQml/parts/part1/FileMenu.qml b/examples/quick/tutorials/gettingStartedQml/parts/part1/FileMenu.qml
new file mode 100644
index 0000000000..abb7fba41b
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part1/FileMenu.qml
@@ -0,0 +1,91 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the QtQml 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 Digia Plc and its Subsidiary(-ies) nor the names
+** of its contributors may be used to endorse or promote products derived
+** from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Rectangle {
+ id: 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/quick/tutorials/gettingStartedQml/parts/part1/SimpleButton.qml b/examples/quick/tutorials/gettingStartedQml/parts/part1/SimpleButton.qml
new file mode 100644
index 0000000000..7559d4a917
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part1/SimpleButton.qml
@@ -0,0 +1,73 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the QtQml 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 Digia Plc and its Subsidiary(-ies) nor the names
+** of its contributors may be used to endorse or promote products derived
+** from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Rectangle {
+
+ //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/quick/tutorials/gettingStartedQml/parts/part1/pics/qml-texteditor1_button.png b/examples/quick/tutorials/gettingStartedQml/parts/part1/pics/qml-texteditor1_button.png
new file mode 100644
index 0000000000..aab64bcf39
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part1/pics/qml-texteditor1_button.png
Binary files differ
diff --git a/examples/quick/tutorials/gettingStartedQml/parts/part1/pics/qml-texteditor1_editmenu.png b/examples/quick/tutorials/gettingStartedQml/parts/part1/pics/qml-texteditor1_editmenu.png
new file mode 100644
index 0000000000..d3ff66f2fd
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part1/pics/qml-texteditor1_editmenu.png
Binary files differ
diff --git a/examples/quick/tutorials/gettingStartedQml/parts/part1/pics/qml-texteditor1_filemenu.png b/examples/quick/tutorials/gettingStartedQml/parts/part1/pics/qml-texteditor1_filemenu.png
new file mode 100644
index 0000000000..f2e2b0d990
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part1/pics/qml-texteditor1_filemenu.png
Binary files differ
diff --git a/examples/quick/tutorials/gettingStartedQml/parts/part1/pics/qml-texteditor1_simplebutton.png b/examples/quick/tutorials/gettingStartedQml/parts/part1/pics/qml-texteditor1_simplebutton.png
new file mode 100644
index 0000000000..21ce50929b
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part1/pics/qml-texteditor1_simplebutton.png
Binary files differ
diff --git a/examples/quick/tutorials/gettingStartedQml/parts/part1/qml-texteditor.qmlproject b/examples/quick/tutorials/gettingStartedQml/parts/part1/qml-texteditor.qmlproject
new file mode 100644
index 0000000000..2bb4016996
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part1/qml-texteditor.qmlproject
@@ -0,0 +1,14 @@
+import QmlProject 1.0
+
+Project {
+ /* Include .qml, .js, and image files from current directory and subdirectories */
+ QmlFiles {
+ directory: "."
+ }
+ JavaScriptFiles {
+ directory: "."
+ }
+ ImageFiles {
+ directory: "."
+ }
+}
diff --git a/examples/quick/tutorials/gettingStartedQml/parts/part2/Button.qml b/examples/quick/tutorials/gettingStartedQml/parts/part2/Button.qml
new file mode 100644
index 0000000000..7119feeb08
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part2/Button.qml
@@ -0,0 +1,99 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the QtQml 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 Digia Plc and its Subsidiary(-ies) nor the names
+** of its contributors may be used to endorse or promote products derived
+** from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Rectangle {
+
+ //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
+ antialiasing: 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/quick/tutorials/gettingStartedQml/parts/part2/EditMenu.qml b/examples/quick/tutorials/gettingStartedQml/parts/part2/EditMenu.qml
new file mode 100644
index 0000000000..47a37059b0
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part2/EditMenu.qml
@@ -0,0 +1,77 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the QtQml 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 Digia Plc and its Subsidiary(-ies) nor the names
+** of its contributors may be used to endorse or promote products derived
+** from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Rectangle {
+ id: 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/quick/tutorials/gettingStartedQml/parts/part2/FileMenu.qml b/examples/quick/tutorials/gettingStartedQml/parts/part2/FileMenu.qml
new file mode 100644
index 0000000000..41c7369fc0
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part2/FileMenu.qml
@@ -0,0 +1,92 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the QtQml 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 Digia Plc and its Subsidiary(-ies) nor the names
+** of its contributors may be used to endorse or promote products derived
+** from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Rectangle {
+ id: 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/quick/tutorials/gettingStartedQml/parts/part2/MenuBar.qml b/examples/quick/tutorials/gettingStartedQml/parts/part2/MenuBar.qml
new file mode 100644
index 0000000000..f9a293361e
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part2/MenuBar.qml
@@ -0,0 +1,140 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the QtQml 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 Digia Plc and its Subsidiary(-ies) nor the names
+** of its contributors may be used to endorse or promote products derived
+** from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Rectangle {
+ id: 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/quick/tutorials/gettingStartedQml/parts/part2/pics/qml-texteditor2_menubar.png b/examples/quick/tutorials/gettingStartedQml/parts/part2/pics/qml-texteditor2_menubar.png
new file mode 100644
index 0000000000..da959a3468
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part2/pics/qml-texteditor2_menubar.png
Binary files differ
diff --git a/examples/quick/tutorials/gettingStartedQml/parts/part2/qml-texteditor2.qmlproject b/examples/quick/tutorials/gettingStartedQml/parts/part2/qml-texteditor2.qmlproject
new file mode 100644
index 0000000000..2bb4016996
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part2/qml-texteditor2.qmlproject
@@ -0,0 +1,14 @@
+import QmlProject 1.0
+
+Project {
+ /* Include .qml, .js, and image files from current directory and subdirectories */
+ QmlFiles {
+ directory: "."
+ }
+ JavaScriptFiles {
+ directory: "."
+ }
+ ImageFiles {
+ directory: "."
+ }
+}
diff --git a/examples/quick/tutorials/gettingStartedQml/parts/part3/Button.qml b/examples/quick/tutorials/gettingStartedQml/parts/part3/Button.qml
new file mode 100644
index 0000000000..7119feeb08
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part3/Button.qml
@@ -0,0 +1,99 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the QtQml 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 Digia Plc and its Subsidiary(-ies) nor the names
+** of its contributors may be used to endorse or promote products derived
+** from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Rectangle {
+
+ //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
+ antialiasing: 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/quick/tutorials/gettingStartedQml/parts/part3/EditMenu.qml b/examples/quick/tutorials/gettingStartedQml/parts/part3/EditMenu.qml
new file mode 100644
index 0000000000..47a37059b0
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part3/EditMenu.qml
@@ -0,0 +1,77 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the QtQml 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 Digia Plc and its Subsidiary(-ies) nor the names
+** of its contributors may be used to endorse or promote products derived
+** from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Rectangle {
+ id: 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/quick/tutorials/gettingStartedQml/parts/part3/FileMenu.qml b/examples/quick/tutorials/gettingStartedQml/parts/part3/FileMenu.qml
new file mode 100644
index 0000000000..41c7369fc0
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part3/FileMenu.qml
@@ -0,0 +1,92 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the QtQml 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 Digia Plc and its Subsidiary(-ies) nor the names
+** of its contributors may be used to endorse or promote products derived
+** from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Rectangle {
+ id: 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/quick/tutorials/gettingStartedQml/parts/part3/MenuBar.qml b/examples/quick/tutorials/gettingStartedQml/parts/part3/MenuBar.qml
new file mode 100644
index 0000000000..f9a293361e
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part3/MenuBar.qml
@@ -0,0 +1,140 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the QtQml 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 Digia Plc and its Subsidiary(-ies) nor the names
+** of its contributors may be used to endorse or promote products derived
+** from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Rectangle {
+ id: 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/quick/tutorials/gettingStartedQml/parts/part3/TextArea.qml b/examples/quick/tutorials/gettingStartedQml/parts/part3/TextArea.qml
new file mode 100644
index 0000000000..fa79c71fd9
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part3/TextArea.qml
@@ -0,0 +1,80 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the QtQml 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 Digia Plc and its Subsidiary(-ies) nor the names
+** of its contributors may be used to endorse or promote products derived
+** from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Rectangle {
+ id: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/quick/tutorials/gettingStartedQml/parts/part3/TextEditor.qml b/examples/quick/tutorials/gettingStartedQml/parts/part3/TextEditor.qml
new file mode 100644
index 0000000000..49be5e84cd
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part3/TextEditor.qml
@@ -0,0 +1,68 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the QtQml 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 Digia Plc and its Subsidiary(-ies) nor the names
+** of its contributors may be used to endorse or promote products derived
+** from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Rectangle {
+
+ id: 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/quick/tutorials/gettingStartedQml/parts/part3/images/arrow.png b/examples/quick/tutorials/gettingStartedQml/parts/part3/images/arrow.png
new file mode 100644
index 0000000000..14978c2e56
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part3/images/arrow.png
Binary files differ
diff --git a/examples/quick/tutorials/gettingStartedQml/parts/part3/pics/qml-texteditor3_texteditor.png b/examples/quick/tutorials/gettingStartedQml/parts/part3/pics/qml-texteditor3_texteditor.png
new file mode 100644
index 0000000000..d0623b5a79
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part3/pics/qml-texteditor3_texteditor.png
Binary files differ
diff --git a/examples/quick/tutorials/gettingStartedQml/parts/part3/qml-texteditor3.qmlproject b/examples/quick/tutorials/gettingStartedQml/parts/part3/qml-texteditor3.qmlproject
new file mode 100644
index 0000000000..2bb4016996
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part3/qml-texteditor3.qmlproject
@@ -0,0 +1,14 @@
+import QmlProject 1.0
+
+Project {
+ /* Include .qml, .js, and image files from current directory and subdirectories */
+ QmlFiles {
+ directory: "."
+ }
+ JavaScriptFiles {
+ directory: "."
+ }
+ ImageFiles {
+ directory: "."
+ }
+}
diff --git a/examples/quick/tutorials/gettingStartedQml/parts/part4/Button.qml b/examples/quick/tutorials/gettingStartedQml/parts/part4/Button.qml
new file mode 100644
index 0000000000..50d4c9059f
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part4/Button.qml
@@ -0,0 +1,109 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the QtQml 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 Digia Plc and its Subsidiary(-ies) nor the names
+** of its contributors may be used to endorse or promote products derived
+** from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Rectangle {
+
+ //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
+ antialiasing: 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/quick/tutorials/gettingStartedQml/parts/part4/EditMenu.qml b/examples/quick/tutorials/gettingStartedQml/parts/part4/EditMenu.qml
new file mode 100644
index 0000000000..9613e3aaf5
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part4/EditMenu.qml
@@ -0,0 +1,81 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the QtQml 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 Digia Plc and its Subsidiary(-ies) nor the names
+** of its contributors may be used to endorse or promote products derived
+** from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Rectangle {
+ id: 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/quick/tutorials/gettingStartedQml/parts/part4/FileMenu.qml b/examples/quick/tutorials/gettingStartedQml/parts/part4/FileMenu.qml
new file mode 100644
index 0000000000..fd3ccbd710
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part4/FileMenu.qml
@@ -0,0 +1,96 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the QtQml 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 Digia Plc and its Subsidiary(-ies) nor the names
+** of its contributors may be used to endorse or promote products derived
+** from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Rectangle {
+ id: 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/quick/tutorials/gettingStartedQml/parts/part4/MenuBar.qml b/examples/quick/tutorials/gettingStartedQml/parts/part4/MenuBar.qml
new file mode 100644
index 0000000000..abd8a313cf
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part4/MenuBar.qml
@@ -0,0 +1,146 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the QtQml 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 Digia Plc and its Subsidiary(-ies) nor the names
+** of its contributors may be used to endorse or promote products derived
+** from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Rectangle {
+ id: 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/quick/tutorials/gettingStartedQml/parts/part4/SimpleButton.qml b/examples/quick/tutorials/gettingStartedQml/parts/part4/SimpleButton.qml
new file mode 100644
index 0000000000..27f6923c1d
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part4/SimpleButton.qml
@@ -0,0 +1,59 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the QtQml 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 Digia Plc and its Subsidiary(-ies) nor the names
+** of its contributors may be used to endorse or promote products derived
+** from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Rectangle {
+ id: 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/quick/tutorials/gettingStartedQml/parts/part4/TextArea.qml b/examples/quick/tutorials/gettingStartedQml/parts/part4/TextArea.qml
new file mode 100644
index 0000000000..88a60d049c
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part4/TextArea.qml
@@ -0,0 +1,80 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the QtQml 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 Digia Plc and its Subsidiary(-ies) nor the names
+** of its contributors may be used to endorse or promote products derived
+** from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Rectangle {
+ id: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/quick/tutorials/gettingStartedQml/parts/part4/TextEditor.qml b/examples/quick/tutorials/gettingStartedQml/parts/part4/TextEditor.qml
new file mode 100644
index 0000000000..09bcb37cb2
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part4/TextEditor.qml
@@ -0,0 +1,146 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the QtQml 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 Digia Plc and its Subsidiary(-ies) nor the names
+** of its contributors may be used to endorse or promote products derived
+** from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Rectangle {
+ id: 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/quick/tutorials/gettingStartedQml/parts/part4/images/arrow.png b/examples/quick/tutorials/gettingStartedQml/parts/part4/images/arrow.png
new file mode 100644
index 0000000000..14978c2e56
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part4/images/arrow.png
Binary files differ
diff --git a/examples/quick/tutorials/gettingStartedQml/parts/part4/pics/qml-texteditor4_texteditor.png b/examples/quick/tutorials/gettingStartedQml/parts/part4/pics/qml-texteditor4_texteditor.png
new file mode 100644
index 0000000000..a195fb87c3
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part4/pics/qml-texteditor4_texteditor.png
Binary files differ
diff --git a/examples/quick/tutorials/gettingStartedQml/parts/part4/qml-texteditor4.qmlproject b/examples/quick/tutorials/gettingStartedQml/parts/part4/qml-texteditor4.qmlproject
new file mode 100644
index 0000000000..2bb4016996
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part4/qml-texteditor4.qmlproject
@@ -0,0 +1,14 @@
+import QmlProject 1.0
+
+Project {
+ /* Include .qml, .js, and image files from current directory and subdirectories */
+ QmlFiles {
+ directory: "."
+ }
+ JavaScriptFiles {
+ directory: "."
+ }
+ ImageFiles {
+ directory: "."
+ }
+}
diff --git a/examples/quick/tutorials/gettingStartedQml/parts/part5/TextEditor.qml b/examples/quick/tutorials/gettingStartedQml/parts/part5/TextEditor.qml
new file mode 100644
index 0000000000..5ce5a89ceb
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part5/TextEditor.qml
@@ -0,0 +1,127 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the QtQml 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 Digia Plc and its Subsidiary(-ies) nor the names
+** of its contributors may be used to endorse or promote products derived
+** from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import "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/quick/tutorials/gettingStartedQml/parts/part5/core/Button.qml b/examples/quick/tutorials/gettingStartedQml/parts/part5/core/Button.qml
new file mode 100644
index 0000000000..eca367e859
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part5/core/Button.qml
@@ -0,0 +1,109 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the QtQml 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 Digia Plc and its Subsidiary(-ies) nor the names
+** of its contributors may be used to endorse or promote products derived
+** from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Rectangle {
+
+ //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
+ antialiasing: 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/quick/tutorials/gettingStartedQml/parts/part5/core/EditMenu.qml b/examples/quick/tutorials/gettingStartedQml/parts/part5/core/EditMenu.qml
new file mode 100644
index 0000000000..57e297c509
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part5/core/EditMenu.qml
@@ -0,0 +1,110 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the QtQml 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 Digia Plc and its Subsidiary(-ies) nor the names
+** of its contributors may be used to endorse or promote products derived
+** from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Rectangle {
+ id: 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/quick/tutorials/gettingStartedQml/parts/part5/core/FileDialog.qml b/examples/quick/tutorials/gettingStartedQml/parts/part5/core/FileDialog.qml
new file mode 100644
index 0000000000..b73e908464
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part5/core/FileDialog.qml
@@ -0,0 +1,171 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the QtQml 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 Digia Plc and its Subsidiary(-ies) nor the names
+** of its contributors may be used to endorse or promote products derived
+** from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Rectangle {
+ id: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
+ antialiasing: true
+ anchors.centerIn:parent
+ height: parent.height -15; width: parent.width -30
+
+ Rectangle{
+ id:header
+ height:parent.height*0.1
+ width: parent.width
+ radius:3
+ antialiasing: true
+ 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
+ antialiasing: 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
+ 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/quick/tutorials/gettingStartedQml/parts/part5/core/FileMenu.qml b/examples/quick/tutorials/gettingStartedQml/parts/part5/core/FileMenu.qml
new file mode 100644
index 0000000000..c13e753f06
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part5/core/FileMenu.qml
@@ -0,0 +1,233 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the QtQml 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 Digia Plc and its Subsidiary(-ies) nor the names
+** of its contributors may be used to endorse or promote products derived
+** from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import "../filedialog" 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/quick/tutorials/gettingStartedQml/parts/part5/core/MenuBar.qml b/examples/quick/tutorials/gettingStartedQml/parts/part5/core/MenuBar.qml
new file mode 100644
index 0000000000..89f21c021d
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part5/core/MenuBar.qml
@@ -0,0 +1,145 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the QtQml 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 Digia Plc and its Subsidiary(-ies) nor the names
+** of its contributors may be used to endorse or promote products derived
+** from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Rectangle {
+ id: 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}
+ }
+
+ //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
+ //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
+ //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/quick/tutorials/gettingStartedQml/parts/part5/core/TextArea.qml b/examples/quick/tutorials/gettingStartedQml/parts/part5/core/TextArea.qml
new file mode 100644
index 0000000000..a19e53264d
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part5/core/TextArea.qml
@@ -0,0 +1,86 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the QtQml 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 Digia Plc and its Subsidiary(-ies) nor the names
+** of its contributors may be used to endorse or promote products derived
+** from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Rectangle {
+ id: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/quick/tutorials/gettingStartedQml/parts/part5/core/qmldir b/examples/quick/tutorials/gettingStartedQml/parts/part5/core/qmldir
new file mode 100644
index 0000000000..b8b0c7c431
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part5/core/qmldir
@@ -0,0 +1,11 @@
+
+Button ./Button.qml
+FileDialog ./FileDialog.qml
+TextArea ./TextArea.qml
+TextEditor ./TextEditor.qml
+EditMenu ./EditMenu.qml
+MenuBar ./MenuBar.qml
+
+
+
+
diff --git a/examples/quick/tutorials/gettingStartedQml/parts/part5/filedialog/dialogPlugin.cpp b/examples/quick/tutorials/gettingStartedQml/parts/part5/filedialog/dialogPlugin.cpp
new file mode 100644
index 0000000000..d71e622b33
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part5/filedialog/dialogPlugin.cpp
@@ -0,0 +1,57 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the QtQml 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 Digia Plc 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 <QtQml/qqml.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<QQmlListProperty<QString> > ("QQmlListProperty<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);
diff --git a/examples/quick/tutorials/gettingStartedQml/parts/part5/filedialog/dialogPlugin.h b/examples/quick/tutorials/gettingStartedQml/parts/part5/filedialog/dialogPlugin.h
new file mode 100644
index 0000000000..82035193c8
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part5/filedialog/dialogPlugin.h
@@ -0,0 +1,57 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the QtQml 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 Digia Plc 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 <QtQml/QQmlExtensionPlugin>
+
+class DialogPlugin : public QQmlExtensionPlugin
+{
+ Q_OBJECT
+
+ public:
+ //registerTypes is inherited from QQmlExtensionPlugin
+ void registerTypes(const char *uri);
+
+};
+
+#endif
+
diff --git a/examples/quick/tutorials/gettingStartedQml/parts/part5/filedialog/directory.cpp b/examples/quick/tutorials/gettingStartedQml/parts/part5/filedialog/directory.cpp
new file mode 100644
index 0000000000..4cd9d2da85
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part5/filedialog/directory.cpp
@@ -0,0 +1,219 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the QtQml 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 Digia Plc 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(QQmlListProperty<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(QQmlListProperty<File> * property, int index){
+ return static_cast< QList<File *> *>(property->data)->at(index);
+}
+
+/*
+Returns the number of files in the list
+*/
+int filesSize(QQmlListProperty<File> * property){
+ return static_cast< QList<File *> *>(property->data)->size();
+}
+
+/*
+Function called to empty the list property contents
+*/
+void clearFilesPtr(QQmlListProperty<File> *property){
+ return static_cast< QList<File *> *>(property->data)->clear();
+}
+
+/*
+Returns the list of files as a QQmlListProperty.
+*/
+QQmlListProperty<File> Directory::files(){
+
+ refresh();
+// return QQmlListProperty<QString>(this,m_filePtrList); //not recommended in the docs
+ return QQmlListProperty<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);
+ }
+}
diff --git a/examples/quick/tutorials/gettingStartedQml/parts/part5/filedialog/directory.h b/examples/quick/tutorials/gettingStartedQml/parts/part5/filedialog/directory.h
new file mode 100644
index 0000000000..25b121d5b3
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part5/filedialog/directory.h
@@ -0,0 +1,108 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the QtQml 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 Digia Plc 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 <QQmlListProperty>
+#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(QQmlListProperty<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;
+ QQmlListProperty<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/quick/tutorials/gettingStartedQml/parts/part5/filedialog/file.cpp b/examples/quick/tutorials/gettingStartedQml/parts/part5/filedialog/file.cpp
new file mode 100644
index 0000000000..162350eb0f
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part5/filedialog/file.cpp
@@ -0,0 +1,56 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the QtQml 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 Digia Plc 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();
+ }
+}
diff --git a/examples/quick/tutorials/gettingStartedQml/parts/part5/filedialog/file.h b/examples/quick/tutorials/gettingStartedQml/parts/part5/filedialog/file.h
new file mode 100644
index 0000000000..7125a9aae5
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part5/filedialog/file.h
@@ -0,0 +1,67 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the QtQml 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 Digia Plc 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
diff --git a/examples/quick/tutorials/gettingStartedQml/parts/part5/filedialog/filedialog.pro b/examples/quick/tutorials/gettingStartedQml/parts/part5/filedialog/filedialog.pro
new file mode 100644
index 0000000000..71abddc7e3
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part5/filedialog/filedialog.pro
@@ -0,0 +1,17 @@
+TEMPLATE = lib
+CONFIG += qt plugin
+QT += qml
+
+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/quick/tutorials/gettingStartedQml/parts/part5/filedialog/qmldir b/examples/quick/tutorials/gettingStartedQml/parts/part5/filedialog/qmldir
new file mode 100644
index 0000000000..4a8d13d026
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part5/filedialog/qmldir
@@ -0,0 +1 @@
+plugin FileDialog ../plugins
diff --git a/examples/quick/tutorials/gettingStartedQml/parts/part5/images/arrow.png b/examples/quick/tutorials/gettingStartedQml/parts/part5/images/arrow.png
new file mode 100644
index 0000000000..14978c2e56
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part5/images/arrow.png
Binary files differ
diff --git a/examples/quick/tutorials/gettingStartedQml/parts/part5/pics/qml-texteditor5_editmenu.png b/examples/quick/tutorials/gettingStartedQml/parts/part5/pics/qml-texteditor5_editmenu.png
new file mode 100644
index 0000000000..27feed5e82
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part5/pics/qml-texteditor5_editmenu.png
Binary files differ
diff --git a/examples/quick/tutorials/gettingStartedQml/parts/part5/pics/qml-texteditor5_filemenu.png b/examples/quick/tutorials/gettingStartedQml/parts/part5/pics/qml-texteditor5_filemenu.png
new file mode 100644
index 0000000000..4d8f9f22b2
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part5/pics/qml-texteditor5_filemenu.png
Binary files differ
diff --git a/examples/quick/tutorials/gettingStartedQml/parts/part5/pics/qml-texteditor5_newfile.png b/examples/quick/tutorials/gettingStartedQml/parts/part5/pics/qml-texteditor5_newfile.png
new file mode 100644
index 0000000000..680acfe839
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part5/pics/qml-texteditor5_newfile.png
Binary files differ
diff --git a/examples/quick/tutorials/gettingStartedQml/parts/part5/qml-texteditor5.qmlproject b/examples/quick/tutorials/gettingStartedQml/parts/part5/qml-texteditor5.qmlproject
new file mode 100644
index 0000000000..2bb4016996
--- /dev/null
+++ b/examples/quick/tutorials/gettingStartedQml/parts/part5/qml-texteditor5.qmlproject
@@ -0,0 +1,14 @@
+import QmlProject 1.0
+
+Project {
+ /* Include .qml, .js, and image files from current directory and subdirectories */
+ QmlFiles {
+ directory: "."
+ }
+ JavaScriptFiles {
+ directory: "."
+ }
+ ImageFiles {
+ directory: "."
+ }
+}