summaryrefslogtreecommitdiffstats
path: root/examples/tutorials/gettingStarted/gsQml/parts/part3
diff options
context:
space:
mode:
Diffstat (limited to 'examples/tutorials/gettingStarted/gsQml/parts/part3')
-rw-r--r--examples/tutorials/gettingStarted/gsQml/parts/part3/Button.qml99
-rw-r--r--examples/tutorials/gettingStarted/gsQml/parts/part3/EditMenu.qml77
-rw-r--r--examples/tutorials/gettingStarted/gsQml/parts/part3/FileMenu.qml92
-rw-r--r--examples/tutorials/gettingStarted/gsQml/parts/part3/MenuBar.qml140
-rw-r--r--examples/tutorials/gettingStarted/gsQml/parts/part3/TextArea.qml80
-rw-r--r--examples/tutorials/gettingStarted/gsQml/parts/part3/TextEditor.qml68
-rw-r--r--examples/tutorials/gettingStarted/gsQml/parts/part3/images/arrow.pngbin0 -> 583 bytes
-rw-r--r--examples/tutorials/gettingStarted/gsQml/parts/part3/pics/qml-texteditor3_texteditor.pngbin0 -> 59345 bytes
-rw-r--r--examples/tutorials/gettingStarted/gsQml/parts/part3/qml-texteditor3.qmlproject16
9 files changed, 572 insertions, 0 deletions
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part3/Button.qml b/examples/tutorials/gettingStarted/gsQml/parts/part3/Button.qml
new file mode 100644
index 00000000..4162c94d
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part3/Button.qml
@@ -0,0 +1,99 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+** * Redistributions of source code must retain the above copyright
+** notice, this list of conditions and the following disclaimer.
+** * Redistributions in binary form must reproduce the above copyright
+** notice, this list of conditions and the following disclaimer in
+** the documentation and/or other materials provided with the
+** distribution.
+** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+** the names of its contributors may be used to endorse or promote
+** products derived from this software without specific prior written
+** permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 1.0
+
+Rectangle {
+
+ //identifier of the item
+ id: button
+
+ property string label: "button label"
+
+ //these properties act as constants, useable outside this QML file
+ property int buttonHeight: 75
+ property int buttonWidth: 150
+
+ //the color highlight when the mouse hovers on the rectangle
+ property color onHoverColor: "gold"
+ property color borderColor: "white"
+
+ //buttonColor is set to the button's main color
+ property color buttonColor: "lightblue"
+
+ //set appearance properties
+ radius:10
+ smooth: true
+ border{color: "white"; width: 3}
+ width: buttonWidth; height: buttonHeight
+
+ Text{
+ id: buttonLabel
+ anchors.centerIn: parent
+ text: label
+ }
+
+ //buttonClick() is callable and a signal handler, onButtonClick is automatically created
+ signal buttonClick()
+ onButtonClick: {
+ console.log(buttonLabel.text + " clicked" )
+ }
+
+ //define the clickable area to be the whole rectangle
+ MouseArea{
+ id: buttonMouseArea
+ anchors.fill: parent //stretch the area to the parent's dimension
+ onClicked: buttonClick()
+
+ //if true, then onEntered and onExited called if mouse hovers in the mouse area
+ //if false, a button must be clicked to detect the mouse hover
+ hoverEnabled: true
+
+ //display a border if the mouse hovers on the button mouse area
+ onEntered: parent.border.color = onHoverColor
+ //remove the border if the mouse exits the button mouse area
+ onExited: parent.border.color = borderColor
+
+ }
+
+ //change the color of the button when pressed
+ color: buttonMouseArea.pressed ? Qt.darker(buttonColor, 1.5) : buttonColor
+
+}
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part3/EditMenu.qml b/examples/tutorials/gettingStarted/gsQml/parts/part3/EditMenu.qml
new file mode 100644
index 00000000..65956663
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part3/EditMenu.qml
@@ -0,0 +1,77 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+** * Redistributions of source code must retain the above copyright
+** notice, this list of conditions and the following disclaimer.
+** * Redistributions in binary form must reproduce the above copyright
+** notice, this list of conditions and the following disclaimer in
+** the documentation and/or other materials provided with the
+** distribution.
+** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+** the names of its contributors may be used to endorse or promote
+** products derived from this software without specific prior written
+** permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 1.0
+
+Rectangle {
+ id: editMenu
+ height: 480; width:1000
+ color: "powderblue"
+ property string menuName:"Edit"
+
+ Rectangle{
+ id:actionContainer
+ color:"transparent"
+ anchors.centerIn: parent
+
+ width: parent.width; height: parent.height / 5
+ Row{
+ anchors.centerIn: parent
+ spacing: parent.width/6
+ Button{
+ id: loadButton
+ buttonColor: "lightgrey"
+ label: "Cut"
+ }
+
+ Button{
+ buttonColor: "grey"
+ id: saveButton
+ label: "Paste"
+ }
+ Button{
+ id: exitButton
+ label: "Select All"
+ buttonColor: "darkgrey"
+ }
+ }
+ }
+
+}
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part3/FileMenu.qml b/examples/tutorials/gettingStarted/gsQml/parts/part3/FileMenu.qml
new file mode 100644
index 00000000..694f4857
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part3/FileMenu.qml
@@ -0,0 +1,92 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+** * Redistributions of source code must retain the above copyright
+** notice, this list of conditions and the following disclaimer.
+** * Redistributions in binary form must reproduce the above copyright
+** notice, this list of conditions and the following disclaimer in
+** the documentation and/or other materials provided with the
+** distribution.
+** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+** the names of its contributors may be used to endorse or promote
+** products derived from this software without specific prior written
+** permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 1.0
+
+Rectangle {
+ id: fileMenu
+
+ //the menuName is accessible from outside this QML file
+ property string menuName: "File"
+
+ //generous amount of screen space that will allow the buttons to fit
+ height: 480; width:1000
+
+ color: "#6C646A"
+
+ //a sub-rectangle allows the flexibility of setting the row area
+ Rectangle{
+ id:actionContainer
+
+ //make this rectangle invisible
+ color:"transparent"
+ anchors.centerIn: parent
+
+ //the height is a good proportion that creates more space at the top of the row of buttons
+ width: parent.width; height: parent.height / 5
+
+ Row{
+ anchors.centerIn: parent
+ spacing: parent.width/6
+ Button{
+ id: loadButton
+ buttonColor: "lightgrey"
+ label: "Load"
+ }
+
+ Button{
+ buttonColor: "grey"
+ id: saveButton
+ label: "Save"
+ }
+ Button{
+ id: exitButton
+ label: "Exit"
+ buttonColor: "darkgrey"
+
+ //exit the application if the exitButton is clicked
+ onButtonClick:{
+ Qt.quit()
+ }
+ }
+ }
+ }
+
+}
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part3/MenuBar.qml b/examples/tutorials/gettingStarted/gsQml/parts/part3/MenuBar.qml
new file mode 100644
index 00000000..fe115622
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part3/MenuBar.qml
@@ -0,0 +1,140 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+** * Redistributions of source code must retain the above copyright
+** notice, this list of conditions and the following disclaimer.
+** * Redistributions in binary form must reproduce the above copyright
+** notice, this list of conditions and the following disclaimer in
+** the documentation and/or other materials provided with the
+** distribution.
+** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+** the names of its contributors may be used to endorse or promote
+** products derived from this software without specific prior written
+** permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 1.0
+
+Rectangle {
+ id: menuBar
+ width: 1000
+ height:300
+
+ property color fileColor: "thistle"
+ property color editColor: "powderblue"
+
+ //container for the header and the buttons
+ Rectangle{
+
+ id: labelList
+ height:parent.height/10
+ width: parent.width
+ color: "steelblue"
+
+ //default z is 0, items with higher z values are shown on top of items with lower z values
+ z: 1
+
+ //row displays its children in a vertical row
+ Row{
+ anchors.centerIn: parent
+ spacing:40
+ Button{
+ height: 20
+ width: 50
+ label: "File"
+ id: fileButton
+ buttonColor : menuListView.currentIndex == 0? fileColor : Qt.darker(fileColor, 1.5)
+ scale: menuListView.currentIndex == 0? 1.25: 1
+ radius: 1
+
+ //on a button click, change the list's currently selected item to FileMenu
+ onButtonClick: {
+ menuListView.currentIndex = 0
+ }
+ }
+ Button{
+ height: 20
+ width: 50
+ id: editButton
+ buttonColor : menuListView.currentIndex == 1? editColor : Qt.darker(editColor, 1.5)
+ scale: menuListView.currentIndex == 1? 1.25: 1
+ label: "Edit"
+ radius: 1
+
+ //on a button click, change the list's currently selected item to EditMenu
+ onButtonClick: {
+ menuListView.currentIndex = 1
+ }
+
+
+ }
+
+
+ }
+ }
+
+ //a list of visual items already have delegates handling their display
+ VisualItemModel{
+ id: menuListModel
+
+ FileMenu{
+ width: menuListView.width
+ height: menuBar.height
+ color: fileColor
+ }
+ EditMenu{
+ color: editColor
+ width: menuListView.width
+ height: menuBar.height
+
+ }
+ }
+
+ //list view will display a model according to a delegate
+ ListView{
+ id: menuListView
+ anchors.fill:parent
+ anchors.bottom: parent.bottom
+ width:parent.width
+ height: parent.height
+
+ //the model contains the data
+ model: menuListModel
+
+ //control the movement of the menu switching
+ snapMode: ListView.SnapOneItem
+ orientation: ListView.Horizontal
+ boundsBehavior: Flickable.StopAtBounds
+ flickDeceleration: 5000
+ highlightFollowsCurrentItem: true
+ highlightMoveDuration:240
+ highlightRangeMode: ListView.StrictlyEnforceRange
+ }
+
+
+}
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part3/TextArea.qml b/examples/tutorials/gettingStarted/gsQml/parts/part3/TextArea.qml
new file mode 100644
index 00000000..892271d8
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part3/TextArea.qml
@@ -0,0 +1,80 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+** * Redistributions of source code must retain the above copyright
+** notice, this list of conditions and the following disclaimer.
+** * Redistributions in binary form must reproduce the above copyright
+** notice, this list of conditions and the following disclaimer in
+** the documentation and/or other materials provided with the
+** distribution.
+** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+** the names of its contributors may be used to endorse or promote
+** products derived from this software without specific prior written
+** permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 1.0
+
+Rectangle {
+ id:textArea
+
+ width :400
+ height:400
+ color: "white"
+
+ Flickable{
+ id: flickArea
+
+ width: parent.width
+ height: parent.height
+ anchors.fill:parent
+
+ function ensureVisible(r){
+ if (contentX >= r.x)
+ contentX = r.x;
+ else if (contentX+width <= r.x+r.width)
+ contentX = r.x+r.width-width;
+ if (contentY >= r.y)
+ contentY = r.y;
+ else if (contentY+height <= r.y+r.height)
+ contentY = r.y+r.height-height;
+ }
+
+ TextEdit{
+ id: textEditor
+ anchors.fill:parent
+ width:parent.width; height:parent.height
+ color:"midnightblue"
+ focus: true
+
+ wrapMode: TextEdit.Wrap
+
+ onCursorRectangleChanged: flickArea.ensureVisible(cursorRectangle)
+ }
+ }
+}
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part3/TextEditor.qml b/examples/tutorials/gettingStarted/gsQml/parts/part3/TextEditor.qml
new file mode 100644
index 00000000..c2af3f32
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part3/TextEditor.qml
@@ -0,0 +1,68 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+** * Redistributions of source code must retain the above copyright
+** notice, this list of conditions and the following disclaimer.
+** * Redistributions in binary form must reproduce the above copyright
+** notice, this list of conditions and the following disclaimer in
+** the documentation and/or other materials provided with the
+** distribution.
+** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+** the names of its contributors may be used to endorse or promote
+** products derived from this software without specific prior written
+** permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 1.0
+
+Rectangle {
+
+ id: screen
+ width: 1000; height: 1000
+ border.color:"black"
+ //the screen is partitioned into the MenuBar and TextArea. 1/3 of the screen is assigned to the MenuBar
+ property int partition: height/3
+
+ MenuBar{
+ id:menuBar
+ height: partition
+ width:parent.width
+ z: 1
+ }
+
+
+ TextArea{
+ id:textArea
+ anchors.bottom:parent.bottom
+ y: partition
+ color: "azure"
+ height: partition*2
+ width:parent.width
+ }
+
+}
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part3/images/arrow.png b/examples/tutorials/gettingStarted/gsQml/parts/part3/images/arrow.png
new file mode 100644
index 00000000..14978c2e
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part3/images/arrow.png
Binary files differ
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part3/pics/qml-texteditor3_texteditor.png b/examples/tutorials/gettingStarted/gsQml/parts/part3/pics/qml-texteditor3_texteditor.png
new file mode 100644
index 00000000..d0623b5a
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part3/pics/qml-texteditor3_texteditor.png
Binary files differ
diff --git a/examples/tutorials/gettingStarted/gsQml/parts/part3/qml-texteditor3.qmlproject b/examples/tutorials/gettingStarted/gsQml/parts/part3/qml-texteditor3.qmlproject
new file mode 100644
index 00000000..d4909f86
--- /dev/null
+++ b/examples/tutorials/gettingStarted/gsQml/parts/part3/qml-texteditor3.qmlproject
@@ -0,0 +1,16 @@
+import QmlProject 1.0
+
+Project {
+ /* Include .qml, .js, and image files from current directory and subdirectories */
+ QmlFiles {
+ directory: "."
+ }
+ JavaScriptFiles {
+ directory: "."
+ }
+ ImageFiles {
+ directory: "."
+ }
+ /* List of plugin directories passed to QML runtime */
+ // importPaths: [ " ../exampleplugin " ]
+}