Merge v5.1.0 releasebaserock/morph

32 files changed, 816 insertions, 617 deletions

diff --git a/examples/quick/controls/gallery/content/Controls.qml b/examples/quick/controls/gallery/content/Controls.qml
index 310eee59..c1403da5 100644
--- a/examples/quick/controls/gallery/content/Controls.qml
+++ b/examples/quick/controls/gallery/content/Controls.qml
@@ -180,6 +180,14 @@ Item {
                 height: parent.height - group1.height - group2.height - 2 * parent.spacing
                 anchors { right: parent.right }
             }
+
+            MouseArea {
+                id: contextMenu
+                parent: area.viewport
+                anchors.fill: parent
+                acceptedButtons: Qt.RightButton
+                onPressed: editmenu.popup()
+            }
         }
     }
 }
diff --git a/examples/quick/controls/gallery/content/Layouts.qml b/examples/quick/controls/gallery/content/Layouts.qml
new file mode 100644
index 00000000..ac0a53a3
--- /dev/null
+++ b/examples/quick/controls/gallery/content/Layouts.qml
@@ -0,0 +1,107 @@
+/****************************************************************************
+**
+** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the Qt Quick Controls 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.1
+import QtQuick.Controls 1.0
+import QtQuick.Layouts 1.0
+
+Item {
+    id:root
+    anchors.fill: parent
+    anchors.margins: 8
+
+    ColumnLayout {
+        id: mainLayout
+        anchors.fill: parent
+        spacing: 4
+        GroupBox {
+            id: rowBox
+            title: "Row layout"
+            Layout.fillWidth: true
+            RowLayout {
+                id: rowLayout
+                anchors.fill: parent
+                TextField {
+                    placeholderText: "This wants to grow horizontally"
+                    Layout.fillWidth: true
+                }
+                Button {
+                    text: "Button"
+                }
+            }
+        }
+
+        GroupBox {
+            id: gridBox
+            title: "Grid layout"
+            Layout.fillWidth: true
+
+            GridLayout {
+                id: gridLayout
+                anchors.fill: parent
+                rows: 3
+                flow: GridLayout.TopToBottom
+
+                Label { text: "Line 1" }
+                Label { text: "Line 2" }
+                Label { text: "Line 3" }
+
+                TextField { }
+                TextField { }
+                TextField { }
+
+                TextArea {
+                    text: "This widget spans over three rows in the GridLayout.\n"
+                          + "All items in the GridLayout are implicitly positioned from top to bottom."
+                    Layout.rowSpan: 3
+                    Layout.fillHeight: true
+                    Layout.fillWidth: true
+                }
+            }
+        }
+        TextArea {
+            id: t3
+            text: "This fills the whole cell"
+            Layout.minimumHeight: 30
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+        }
+    }
+}
diff --git a/examples/quick/controls/gallery/content/ModelView.qml b/examples/quick/controls/gallery/content/ModelView.qml
index e6a6040f..483d99ee 100644
--- a/examples/quick/controls/gallery/content/ModelView.qml
+++ b/examples/quick/controls/gallery/content/ModelView.qml
@@ -51,7 +51,7 @@ Item {
     width: 600
     height: 300
     anchors.fill: parent
-    anchors.margins: Qt.platform.os === "mac" ? 12 : 6
+    anchors.margins: Qt.platform.os === "osx" ? 12 : 6
 
 //    XmlListModel {
 //        id: flickerModel
diff --git a/examples/quick/controls/gallery/content/Panel.qml b/examples/quick/controls/gallery/content/Panel.qml
deleted file mode 100644
index bdb10f83..00000000
--- a/examples/quick/controls/gallery/content/Panel.qml
+++ /dev/null
@@ -1,140 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/legal
-**
-** This file is part of the Qt Quick Controls 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.1
-import QtQuick.Controls 1.0
-
-Rectangle {
-    id:root
-
-    width: 540
-    height: 340
-    color:"#c3c3c3"
-    ScrollView {
-        frameVisible: false
-        anchors.fill: parent
-
-        Item {
-            width:600
-            height:600
-            BorderImage {
-                id: page
-                source: "../images/page.png"
-                y:10; x:50
-                width: 400; height: 400
-                border.left: 12; border.top: 12
-                border.right: 12; border.bottom: 12
-                Text {
-                    id:text
-                    anchors.fill: parent
-                    anchors.margins: 40
-                    text:textfield.text
-                }
-                Rectangle {
-                    border.color: "#444"
-                    anchors.centerIn: parent
-                    color: Qt.rgba(s1.value, s2.value, s3.value)
-                    width: 200
-                    height: width
-                }
-
-            }
-
-            BorderImage {
-                id: sidebar
-                source: "../images/panel.png"
-                anchors.left: parent.left
-                anchors.top: parent.top
-                width: show ? 160 : 40
-                height:root.height
-                Behavior on width { NumberAnimation { easing.type: Easing.OutSine ; duration: 250 } }
-                property bool show: false
-                border.left: 0;
-                border.right: 26;
-                MouseArea {
-                    id:mouseArea
-                    anchors.fill: parent
-                    onClicked: sidebar.show = !sidebar.show
-                }
-                Column {
-                    id: panel1
-                    opacity: sidebar.show ? 1 : 0
-                    Behavior on opacity { NumberAnimation { easing.type:Easing.InCubic; duration: 600} }
-
-                    scale: sidebar.show ? 1 : 0
-                    Behavior on scale { NumberAnimation { easing.type:Easing.InCubic; duration: 200 } }
-                    transformOrigin: Item.Top
-
-                    anchors.top: parent.top
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    anchors.margins: 12
-                    spacing:12
-
-                    Button { width: parent.width - 12; text: "Close Panel"; onClicked: sidebar.show = false}
-                    TextField { id: textfield; text: "Some text" ; width: parent.width - 12}
-                    SpinBox { width: parent.width - 12}
-                    CheckBox{ id: expander; text:"Sliders"}
-                }
-
-                Column {
-                    id: panel2
-                    opacity: expander.checked && sidebar.show ? 1 : 0
-                    scale: opacity
-                    Behavior on opacity{ NumberAnimation { easing.type:Easing.OutSine; duration: 300}}
-                    transformOrigin: Item.Top
-                    anchors.top: panel1.bottom
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    anchors.margins: 12
-                    spacing: 12
-                    Slider { id: s1; width:parent.width - 12; value:0.5}
-                    Slider { id: s2; width:parent.width - 12; value:0.5}
-                    Slider { id: s3; width:parent.width - 12; value:0.5}
-
-                }
-            }
-        }
-    }
-}
diff --git a/examples/quick/controls/gallery/content/Styles.qml b/examples/quick/controls/gallery/content/Styles.qml
index b5e98f80..e46a9ea0 100644
--- a/examples/quick/controls/gallery/content/Styles.qml
+++ b/examples/quick/controls/gallery/content/Styles.qml
@@ -45,195 +45,308 @@
 import QtQuick 2.1
 import QtQuick.Controls 1.0
 import QtQuick.Controls.Styles 1.0
-import QtQuick.Dialogs 1.0
+import QtQuick.Particles 2.0
+import QtQuick.Layouts 1.0
 
 Item {
     id: root
     width: 300
     height: 200
 
-    ColorDialog {
-        id: colorDialog
-        color: "#afe"
-        property color last: "#afe"
-        onRejected: color = last
-        onVisibleChanged: if (visible) last = color
-    }
-
-    Column {
-        anchors.margins: 20
-        anchors.horizontalCenter: parent.horizontalCenter
+    property int columnWidth: 120
+    GridLayout {
+        rowSpacing: 12
+        columnSpacing: 30
         anchors.top: parent.top
-        spacing: 20
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.margins: 30
 
-        Row {
-            spacing: 8
-            Button {
-                text: "Set color…"
-                style: ButtonStyle { }
-                onClicked: colorDialog.open()
-            }
-            Button {
-                text: "Push me"
-                style: ButtonStyle { }
-            }
-            Button {
-                text: "Push me"
-                style: buttonStyle
-            }
+        Button {
+            text: "Push me"
+            style: ButtonStyle { }
+            implicitWidth: columnWidth
         }
-        Row {
-            spacing: 8
-            TextField {
-                style: TextFieldStyle { }
-            }
-            TextField {
-                style: TextFieldStyle { }
-            }
-            TextField {
-                style: textfieldStyle
+        Button {
+            text: "Push me"
+            style: ButtonStyle {
+                background: BorderImage {
+                    source: control.pressed ? "../images/button-pressed.png" : "../images/button.png"
+                    border.left: 4 ; border.right: 4 ; border.top: 4 ; border.bottom: 4
+                }
             }
+            implicitWidth: columnWidth
+        }
+        Button {
+            text: "Push me"
+            style: buttonStyle
+            implicitWidth: columnWidth
         }
 
-        Row {
-            spacing: 8
-            Slider {
-                value: 50
-                maximumValue: 100
-                width: 100
-                style: SliderStyle { }
-            }
-            Slider {
-                value: 50
-                maximumValue: 100
-                width: 100
-                style: SliderStyle { }
-            }
-            Slider {
-                value: 50
-                maximumValue: 100
-                width: 100
-                style: sliderStyle
+        TextField {
+            Layout.row: 1
+            style: TextFieldStyle { }
+            implicitWidth: columnWidth
+        }
+        TextField {
+            style: TextFieldStyle {
+                background: BorderImage {
+                    source: "../images/textfield.png"
+                    border.left: 4 ; border.right: 4 ; border.top: 4 ; border.bottom: 4
+                }
             }
+            implicitWidth: columnWidth
+        }
+        TextField {
+            style: textfieldStyle
+            implicitWidth: columnWidth
         }
 
-        Row {
-            spacing: 8
-            ProgressBar {
-                value: 50
-                maximumValue: 100
-                width: 100
-                style: ProgressBarStyle{ }
-            }
-            ProgressBar {
-                value: 50
-                maximumValue: 100
-                width: 100
-                style: ProgressBarStyle{ }
-            }
-            ProgressBar {
-                value: 50
-                maximumValue: 100
-                width: 100
-                style: progressbarStyle
+        Slider {
+            id: slider1
+            Layout.row: 2
+            value: 0.5
+            implicitWidth: columnWidth
+            style: SliderStyle { }
+        }
+        Slider {
+            id: slider2
+            value: 0.5
+            implicitWidth: columnWidth
+            style: SliderStyle {
+                groove: BorderImage {
+                    height: 6
+                    border.top: 1
+                    border.bottom: 1
+                    source: "../images/progress-background.png"
+                    border.left: 6
+                    border.right: 6
+                    BorderImage {
+                        anchors.verticalCenter: parent.verticalCenter
+                        source: "../images/progress-fill.png"
+                        border.left: 5 ; border.top: 1
+                        border.right: 5 ; border.bottom: 1
+                        width: styleData.handlePosition
+                        height: parent.height
+                    }
+                }
+                handle: Item {
+                    width: 13
+                    height: 13
+                    Image {
+                        anchors.centerIn: parent
+                        source: "../images/slider-handle.png"
+                    }
+                }
             }
         }
+        Slider {
+            id: slider3
+            value: 0.5
+            implicitWidth: columnWidth
+            style: sliderStyle
+        }
 
-        Row {
-            spacing: 8
-            CheckBox {
-                text: "CheckBox"
-                style: CheckBoxStyle{}
-            }
-            RadioButton {
-                style: RadioButtonStyle{}
-                text: "RadioButton"
-            }
+        ProgressBar {
+            Layout.row: 3
+            value: slider1.value
+            implicitWidth: columnWidth
+            style: ProgressBarStyle{ }
+        }
+        ProgressBar {
+            value: slider2.value
+            implicitWidth: columnWidth
+            style: progressBarStyle
+        }
+        ProgressBar {
+            value: slider3.value
+            implicitWidth: columnWidth
+            style: progressBarStyle2
+        }
 
-            ComboBox {
-                model: ["Paris", "Oslo", "New York"]
-                style: ComboBoxStyle{}
-            }
+        CheckBox {
+            text: "CheckBox"
+            style: CheckBoxStyle{}
+            Layout.row: 4
+            implicitWidth: columnWidth
+        }
+        RadioButton {
+            style: RadioButtonStyle{}
+            text: "RadioButton"
+            implicitWidth: columnWidth
         }
 
-        Row {
-            TabView {
-                width: 400
-                height: 30
-                Tab { title: "One" ; Item {}}
-                Tab { title: "Two" ; Item {}}
-                Tab { title: "Three" ; Item {}}
-                Tab { title: "Four" ; Item {}}
-                style: tabViewStyle
-            }
+        ComboBox {
+            model: ["Paris", "Oslo", "New York"]
+            style: ComboBoxStyle{}
+            implicitWidth: columnWidth
+        }
+
+        TabView {
+            Layout.row: 5
+            Layout.columnSpan: 3
+            Layout.fillWidth: true
+            implicitHeight: 30
+            Tab { title: "One" ; Item {}}
+            Tab { title: "Two" ; Item {}}
+            Tab { title: "Three" ; Item {}}
+            Tab { title: "Four" ; Item {}}
+            style: TabViewStyle {}
+        }
+
+        TabView {
+            Layout.row: 6
+            Layout.columnSpan: 3
+            Layout.fillWidth: true
+            implicitHeight: 30
+            Tab { title: "One" ; Item {}}
+            Tab { title: "Two" ; Item {}}
+            Tab { title: "Three" ; Item {}}
+            Tab { title: "Four" ; Item {}}
+            style: tabViewStyle
         }
     }
 
     // Style delegates:
 
     property Component buttonStyle: ButtonStyle {
-        panel: Rectangle {
-            implicitHeight: 20
-            implicitWidth: 100
-            color: control.pressed ? "darkGray" : "lightGray"
+        background: Rectangle {
+            implicitHeight: 22
+            implicitWidth: columnWidth
+            color: control.pressed ? "darkGray" : control.activeFocus ? "#cdd" : "#ccc"
             antialiasing: true
             border.color: "gray"
             radius: height/2
-            Text {
-                anchors.centerIn: parent
-                text: control.text
+            Rectangle {
+                anchors.fill: parent
+                anchors.margins: 1
+                color: "transparent"
+                antialiasing: true
+                visible: !control.pressed
+                border.color: "#aaffffff"
+                radius: height/2
             }
         }
     }
 
     property Component textfieldStyle: TextFieldStyle {
         background: Rectangle {
-            implicitWidth: 100
-            implicitHeight: 20
+            implicitWidth: columnWidth
+            implicitHeight: 22
             color: "#f0f0f0"
             antialiasing: true
             border.color: "gray"
             radius: height/2
+            Rectangle {
+                anchors.fill: parent
+                anchors.margins: 1
+                color: "transparent"
+                antialiasing: true
+                border.color: "#aaffffff"
+                radius: height/2
+            }
         }
     }
 
     property Component sliderStyle: SliderStyle {
         handle: Rectangle {
-            width: 14
-            height: 14
+            width: 18
+            height: 18
             color: control.pressed ? "darkGray" : "lightGray"
             border.color: "gray"
             antialiasing: true
             radius: height/2
+            Rectangle {
+                anchors.fill: parent
+                anchors.margins: 1
+                color: "transparent"
+                antialiasing: true
+                border.color: "#eee"
+                radius: height/2
+            }
         }
 
         groove: Rectangle {
             height: 8
-            implicitWidth: 100
-            implicitHeight: 20
+            implicitWidth: columnWidth
+            implicitHeight: 22
 
             antialiasing: true
-            color: "darkGray"
-            border.color: "gray"
+            color: "#ccc"
+            border.color: "#777"
             radius: height/2
+            Rectangle {
+                anchors.fill: parent
+                anchors.margins: 1
+                color: "transparent"
+                antialiasing: true
+                border.color: "#66ffffff"
+                radius: height/2
+            }
         }
     }
 
-    property Component progressbarStyle: ProgressBarStyle {
-        panel: Rectangle {
-            implicitWidth: 100
-            implicitHeight: 20
+    property Component progressBarStyle: ProgressBarStyle {
+        background: BorderImage {
+            source: "../images/progress-background.png"
+            border.left: 2 ; border.right: 2 ; border.top: 2 ; border.bottom: 2
+        }
+        progress: Item {
+            clip: true
+            BorderImage {
+                anchors.fill: parent
+                anchors.rightMargin: (control.value < control.maximumValue) ? -4 : 0
+                source: "../images/progress-fill.png"
+                border.left: 10 ; border.right: 10
+                Rectangle {
+                    width: 1
+                    color: "#a70"
+                    opacity: 0.8
+                    anchors.top: parent.top
+                    anchors.bottom: parent.bottom
+                    anchors.bottomMargin: 1
+                    anchors.right: parent.right
+                    visible: control.value < control.maximumValue
+                    anchors.rightMargin: -parent.anchors.rightMargin
+                }
+            }
+            ParticleSystem{ id: bubbles }
+            ImageParticle{
+                id: fireball
+                system: bubbles
+                source: "../images/bubble.png"
+                opacity: 0.7
+            }
+            Emitter{
+                system: bubbles
+                anchors.bottom: parent.bottom
+                anchors.margins: 4
+                anchors.bottomMargin: -4
+                anchors.left: parent.left
+                anchors.right: parent.right
+                size: 4
+                sizeVariation: 4
+                acceleration: PointDirection{ y: -6; xVariation: 3 }
+                emitRate: 6 * control.value
+                lifeSpan: 3000
+            }
+        }
+    }
+
+    property Component progressBarStyle2: ProgressBarStyle {
+        background: Rectangle {
+            implicitWidth: columnWidth
+            implicitHeight: 24
             color: "#f0f0f0"
             border.color: "gray"
-            antialiasing: true
-            radius: height/2
+        }
+        progress: Rectangle {
+            color: "#ccc"
+            border.color: "gray"
             Rectangle {
-                implicitWidth: 100
-                implicitHeight: 20
-                color: "#f0f0f0"
-                border.color: "gray"
-                antialiasing: true
-                radius: height/2
+                color: "transparent"
+                border.color: "#44ffffff"
+                anchors.fill: parent
+                anchors.margins: 1
             }
         }
     }
@@ -250,21 +363,21 @@ Item {
             }
             border.color: "#898989"
             Rectangle { anchors.fill: parent ; anchors.margins: 1 ; border.color: "white" ; color: "transparent" }
-
         }
         tab: Item {
-            implicitWidth: image.sourceSize.width
+            property int totalOverlap: tabOverlap * (control.count - 1)
+            implicitWidth: Math.min ((styleData.availableWidth + totalOverlap)/control.count - 4, image.sourceSize.width)
             implicitHeight: image.sourceSize.height
             BorderImage {
                 id: image
                 anchors.fill: parent
-                source: tab.selected ? "../images/tab_selected.png" : "../images/tab.png"
-                border.left: 50
+                source: styleData.selected ? "../images/tab_selected.png" : "../images/tab.png"
+                border.left: 30
                 smooth: false
-                border.right: 50
+                border.right: 30
             }
             Text {
-                text: tab.title
+                text: styleData.title
                 anchors.centerIn: parent
             }
         }
diff --git a/examples/quick/controls/gallery/images/bubble.png b/examples/quick/controls/gallery/images/bubble.png
new file mode 100644
index 00000000..62aa1efe
--- /dev/null
+++ b/examples/quick/controls/gallery/images/bubble.png
diff --git a/examples/quick/controls/gallery/images/button-pressed.png b/examples/quick/controls/gallery/images/button-pressed.png
new file mode 100644
index 00000000..d64cdaa7
--- /dev/null
+++ b/examples/quick/controls/gallery/images/button-pressed.png
diff --git a/examples/quick/controls/gallery/images/button.png b/examples/quick/controls/gallery/images/button.png
new file mode 100644
index 00000000..8ab41cc8
--- /dev/null
+++ b/examples/quick/controls/gallery/images/button.png
diff --git a/examples/quick/controls/gallery/images/page.png b/examples/quick/controls/gallery/images/page.png
deleted file mode 100644
index b46f205d..00000000
--- a/examples/quick/controls/gallery/images/page.png
+++ /dev/null
diff --git a/examples/quick/controls/gallery/images/panel.png b/examples/quick/controls/gallery/images/panel.png
deleted file mode 100644
index 02d655eb..00000000
--- a/examples/quick/controls/gallery/images/panel.png
+++ /dev/null
diff --git a/examples/quick/controls/gallery/images/progress-background.png b/examples/quick/controls/gallery/images/progress-background.png
new file mode 100644
index 00000000..55a069df
--- /dev/null
+++ b/examples/quick/controls/gallery/images/progress-background.png
diff --git a/examples/quick/controls/gallery/images/progress-fill.png b/examples/quick/controls/gallery/images/progress-fill.png
new file mode 100644
index 00000000..b588c958
--- /dev/null
+++ b/examples/quick/controls/gallery/images/progress-fill.png
diff --git a/examples/quick/controls/gallery/images/slider-handle.png b/examples/quick/controls/gallery/images/slider-handle.png
new file mode 100644
index 00000000..ac4d4a0d
--- /dev/null
+++ b/examples/quick/controls/gallery/images/slider-handle.png
diff --git a/examples/quick/controls/gallery/images/textfield.png b/examples/quick/controls/gallery/images/textfield.png
new file mode 100644
index 00000000..1d4a38ab
--- /dev/null
+++ b/examples/quick/controls/gallery/images/textfield.png
diff --git a/examples/quick/controls/gallery/main.qml b/examples/quick/controls/gallery/main.qml
index 7da74031..ec00627b 100644
--- a/examples/quick/controls/gallery/main.qml
+++ b/examples/quick/controls/gallery/main.qml
@@ -51,10 +51,11 @@ import "content"
 ApplicationWindow {
     title: "Component Gallery"
 
-    width: 580
+    width: 600
     height: 400
     minimumHeight: 400
-    minimumWidth: 340
+    minimumWidth: 570
+
     property string loremIpsum:
             "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor "+
             "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor "+
@@ -69,150 +70,112 @@ ApplicationWindow {
         onAccepted: imageViewer.open(fileUrl)
     }
 
-    toolBar: ToolBar {
-        id: toolbar
-        RowLayout {
-            spacing: 2
-            anchors.verticalCenter: parent.verticalCenter
-            ToolButton {
-                iconSource: "images/window-new.png"
-                anchors.verticalCenter: parent.verticalCenter
-                onClicked: window1.visible = !window1.visible
-                Accessible.name: "New window"
-                tooltip: "Toggle visibility of the second window"
-            }
-            ToolButton {
-                action: openAction
-            }
-            ToolButton {
-                iconSource: "images/document-save-as.png"
-                anchors.verticalCenter: parent.verticalCenter
-                tooltip: "(Pretend to) save as..."
-            }
-        }
+    Action {
+        id: openAction
+        text: "&Open"
+        shortcut: "Ctrl+O"
+        iconSource: "images/document-open.png"
+        onTriggered: fileDialog.open()
+        tooltip: "Open an image"
+    }
 
-        ChildWindow { id: window1 }
+    Action {
+        id: copyAction
+        text: "&Copy"
+        shortcut: "Ctrl+C"
+        iconName: "edit-copy"
+        enabled: (!!activeFocusItem && !!activeFocusItem["copy"])
+        onTriggered: activeFocusItem.copy()
+    }
 
-        Action {
-            id: openAction
-            text: "&Open"
-            shortcut: "Ctrl+O"
-            iconSource: "images/document-open.png"
-            onTriggered: fileDialog.open()
-            tooltip: "open an image"
-        }
+    Action {
+        id: cutAction
+        text: "Cu&t"
+        shortcut: "Ctrl+X"
+        iconName: "edit-cut"
+        enabled: (!!activeFocusItem && !!activeFocusItem["cut"])
+        onTriggered: activeFocusItem.cut()
+    }
+
+    Action {
+        id: pasteAction
+        text: "&Paste"
+        shortcut: "Ctrl+V"
+        iconName: "edit-paste"
+        enabled: (!!activeFocusItem && !!activeFocusItem["paste"])
+        onTriggered: activeFocusItem.paste()
+    }
+
+    ExclusiveGroup {
+        id: textFormatGroup
 
         Action {
-            id: copyAction
-            text: "&Copy"
-            shortcut: "Ctrl+C"
-            iconName: "edit-copy"
-            enabled: (!!activeFocusItem && !!activeFocusItem["copy"])
-            onTriggered: activeFocusItem.copy()
+            id: a1
+            text: "Align Left"
+            checkable: true
+            Component.onCompleted: checked = true
         }
 
         Action {
-            id: cutAction
-            text: "Cu&t"
-            shortcut: "Ctrl+X"
-            iconName: "edit-cut"
-            enabled: (!!activeFocusItem && !!activeFocusItem["cut"])
-            onTriggered: activeFocusItem.cut()
+            id: a2
+            text: "Center"
+            checkable: true
         }
 
         Action {
-            id: pasteAction
-            text: "&Paste"
-            shortcut: "Ctrl+V"
-            iconName: "edit-paste"
-            enabled: (!!activeFocusItem && !!activeFocusItem["paste"])
-            onTriggered: activeFocusItem.paste()
+            id: a3
+            text: "Align Right"
+            checkable: true
         }
+    }
 
-        ExclusiveGroup {
-            id: textFormatGroup
-
-            Action {
-                id: a1
-                text: "Align Left"
-                checkable: true
-                Component.onCompleted: checked = true
-            }
-
-            Action {
-                id: a2
-                text: "Center"
-                checkable: true
-            }
-
-            Action {
-                id: a3
-                text: "Align Right"
-                checkable: true
-            }
-        }
+    ChildWindow { id: window1 }
 
+    Menu {
+        id: editmenu
+        MenuItem { action: cutAction }
+        MenuItem { action: copyAction }
+        MenuItem { action: pasteAction }
+        MenuSeparator {}
         Menu {
-            id: editmenu
-            MenuItem { action: cutAction }
-            MenuItem { action: copyAction }
-            MenuItem { action: pasteAction }
-            MenuSeparator {}
-            Menu {
-                title: "Text Format"
-                MenuItem { action: a1 }
-                MenuItem { action: a2 }
-                MenuItem { action: a3 }
-                MenuSeparator { }
-                MenuItem { text: "Allow Hyphenation"; checkable: true }
-                MenuSeparator { }
-                Menu {
-                    title: "More Stuff"
-                    MenuItem { action: cutAction }
-                    MenuItem { action: copyAction }
-                    MenuItem { action: pasteAction }
-                    MenuSeparator { }
-                    Menu {
-                        title: "More Stuff"
-                        MenuItem { action: cutAction }
-                        MenuItem { action: copyAction }
-                        MenuItem { action: pasteAction }
-                        MenuSeparator { }
-                        Menu {
-                            title: "More Stuff"
-                            MenuItem { action: cutAction }
-                            MenuItem { action: copyAction }
-                            MenuItem { action: pasteAction }
-                            MenuSeparator { }
-                            Menu {
-                                title: "More Stuff"
-                                MenuItem { action: cutAction }
-                                MenuItem { action: copyAction }
-                                MenuItem { action: pasteAction }
-                            }
-                        }
-                    }
-                }
-            }
-            Menu {
-                title: "Font Style"
-                MenuItem { text: "Bold"; checkable: true }
-                MenuItem { text: "Italic"; checkable: true }
-                MenuItem { text: "Underline"; checkable: true }
-            }
+            title: "Text Format"
+            MenuItem { action: a1 }
+            MenuItem { action: a2 }
+            MenuItem { action: a3 }
+            MenuSeparator { }
+            MenuItem { text: "Allow Hyphenation"; checkable: true }
         }
-        MouseArea {
-            anchors.fill:  parent
-            acceptedButtons: Qt.RightButton
-            onPressed: editmenu.popup()
+        Menu {
+            title: "Font Style"
+            MenuItem { text: "Bold"; checkable: true }
+            MenuItem { text: "Italic"; checkable: true }
+            MenuItem { text: "Underline"; checkable: true }
         }
+    }
 
-        CheckBox {
-            id: enabledCheck
-            text: "Enabled"
-            checked: true
-            anchors.right: parent.right
-            anchors.verticalCenter: parent.verticalCenter
+    toolBar: ToolBar {
+        id: toolbar
+        RowLayout {
+            id: toolbarLayout
+            spacing: 0
+            width: parent.width
+            ToolButton {
+                iconSource: "images/window-new.png"
+                onClicked: window1.visible = !window1.visible
+                Accessible.name: "New window"
+                tooltip: "Toggle visibility of the second window"
+            }
+            ToolButton { action: openAction }
+            ToolButton {
+                iconSource: "images/document-save-as.png"
+                tooltip: "(Pretend to) Save as..."
+            }
+            Item { Layout.fillWidth: true }
+            CheckBox {
+                id: enabledCheck
+                text: "Enabled"
+                checked: true
+            }
         }
     }
 
@@ -265,7 +228,7 @@ ApplicationWindow {
         enabled: enabledCheck.checked
         tabPosition: controlPage.item ? controlPage.item.tabPosition : Qt.TopEdge
         anchors.fill: parent
-        anchors.margins: Qt.platform.os === "mac" ? 12 : 2
+        anchors.margins: Qt.platform.os === "osx" ? 12 : 2
 
         Tab {
             id: controlPage
@@ -281,8 +244,8 @@ ApplicationWindow {
             Styles { anchors.fill: parent }
         }
         Tab {
-            title: "Sidebar"
-            Panel { anchors.fill:parent }
+            title: "Layouts"
+            Layouts { anchors.fill:parent }
         }
     }
 }
diff --git a/examples/quick/controls/gallery/resources.qrc b/examples/quick/controls/gallery/resources.qrc
index 14e88e52..6f487274 100644
--- a/examples/quick/controls/gallery/resources.qrc
+++ b/examples/quick/controls/gallery/resources.qrc
@@ -5,18 +5,23 @@
         <file>content/Controls.qml</file>
         <file>content/ImageViewer.qml</file>
         <file>content/ModelView.qml</file>
-        <file>content/Panel.qml</file>
+        <file>content/Layouts.qml</file>
         <file>content/Styles.qml</file>
         <file>images/document-open.png</file>
         <file>images/document-open@2x.png</file>
         <file>images/document-save-as.png</file>
         <file>images/document-save-as@2x.png</file>
         <file>images/folder_new.png</file>
-        <file>images/page.png</file>
         <file>images/tab.png</file>
         <file>images/tab_selected.png</file>
         <file>images/window-new.png</file>
         <file>images/window-new@2x.png</file>
-        <file>images/panel.png</file>
+        <file>images/bubble.png</file>
+        <file>images/button-pressed.png</file>
+        <file>images/button.png</file>
+        <file>images/progress-background.png</file>
+        <file>images/progress-fill.png</file>
+        <file>images/textfield.png</file>
+        <file>images/slider-handle.png</file>
     </qresource>
 </RCC>
diff --git a/examples/quick/controls/shared/qt_quick_controls_examplemain.h b/examples/quick/controls/shared/qt_quick_controls_examplemain.h
index e3cae9a0..324d7110 100644
--- a/examples/quick/controls/shared/qt_quick_controls_examplemain.h
+++ b/examples/quick/controls/shared/qt_quick_controls_examplemain.h
@@ -64,20 +64,13 @@ QT_BEGIN_NAMESPACE
     int main(int argc, char *argv[]) \
     { \
         Application app(argc, argv); \
-        QQmlEngine engine; \
-        QQmlComponent component(&engine); \
-        component.loadUrl(QUrl(#url)); \
-        if ( !component.isReady() ) { \
-            qWarning("%s", qPrintable(component.errorString())); \
-            return -1; \
-        } \
-        QObject *topLevel = component.create(); \
+        QQmlApplicationEngine engine(QUrl(#url)); \
+        QObject *topLevel = engine.rootObjects().value(0); \
         QQuickWindow *window = qobject_cast<QQuickWindow *>(topLevel); \
         if ( !window ) { \
             qWarning("Error: Your root item has to be a Window."); \
             return -1; \
         } \
-        QObject::connect(&engine, SIGNAL(quit()), &app, SLOT(quit())); \
         window->show(); \
         return app.exec(); \
     }
diff --git a/examples/quick/controls/splitview/main.qml b/examples/quick/controls/splitview/main.qml
index f035e644..4fa8504a 100644
--- a/examples/quick/controls/splitview/main.qml
+++ b/examples/quick/controls/splitview/main.qml
@@ -61,14 +61,6 @@ ApplicationWindow {
             color: "lightsteelblue"
         }
 
-        Rectangle {
-            id: column1
-            width: 200
-            Layout.minimumWidth: 100
-            Layout.maximumWidth: 300
-            color: "lightsteelblue"
-        }
-
         SplitView {
             orientation: Qt.Vertical
             Layout.fillWidth: true
diff --git a/examples/quick/controls/tableview/main.qml b/examples/quick/controls/tableview/main.qml
index 0e568314..1a9246f8 100644
--- a/examples/quick/controls/tableview/main.qml
+++ b/examples/quick/controls/tableview/main.qml
@@ -104,9 +104,9 @@ Window {
 
     ListModel {
         id: nestedModel
-        ListElement{controlState:  ListElement { description: "Core" ; color:"#ffaacc"}}
-        ListElement{controlState: ListElement { description: "Second" ; color:"#ffccaa"}}
-        ListElement{controlState: ListElement { description: "Third" ; color:"#ffffaa"}}
+        ListElement{content: ListElement { description: "Core" ; color:"#ffaacc"}}
+        ListElement{content: ListElement { description: "Second" ; color:"#ffccaa"}}
+        ListElement{content: ListElement { description: "Third" ; color:"#ffffaa"}}
     }
 
     ListModel {
@@ -129,7 +129,7 @@ Window {
             focus:true
             enabled: enabledCheck.checked
 
-            property int margins: Qt.platform.os === "mac" ? 16 : 0
+            property int margins: Qt.platform.os === "osx" ? 16 : 0
 
             height: parent.height - 34
             anchors.right: parent.right
@@ -176,14 +176,14 @@ Window {
                     anchors.margins: 12
 
                     TableViewColumn {
-                        role: "controlState"
+                        role: "content"
                         title: "Text and Color"
                         width: 220
                     }
 
                     itemDelegate: Item {
                         Rectangle{
-                            color: itemValue.get(0).color
+                            color: styleData.value.get(0).color
                             anchors.top:parent.top
                             anchors.right:parent.right
                             anchors.bottom:parent.bottom
@@ -196,9 +196,9 @@ Window {
                             anchors.margins: 4
                             anchors.left: parent.left
                             anchors.verticalCenter: parent.verticalCenter
-                            elide: itemElideMode
-                            text: itemValue.get(0).description
-                            color: itemTextColor
+                            elide: styleData.elideMode
+                            text: styleData.value.get(0).description
+                            color: styleData.textColor
                         }
                     }
 
@@ -251,32 +251,23 @@ Window {
                                 anchors.margins: 4
                                 anchors.left: parent.left
                                 anchors.verticalCenter: parent.verticalCenter
-                                elide: itemElideMode
-                                text: itemValue !== undefined  ? itemValue : ""
-                                color: itemTextColor
+                                elide: styleData.elideMode
+                                text: styleData.value !== undefined  ? styleData.value : ""
+                                color: styleData.textColor
                             }
                         }
                     }
 
                     Component {
-                        id: slickRowDelegate
-                        Rectangle { color: alternateBackground ? "#cef" : "white" }
-                    }
-
-                    Component {
                         id: delegate2
-                        Item {
-                            height: itemSelected? 60 : 20
-                            Behavior on height{ NumberAnimation{} }
-                            Text {
-                                width: parent.width
-                                anchors.margins: 4
-                                anchors.left: parent.left
-                                anchors.verticalCenter: parent.verticalCenter
-                                elide: itemElideMode
-                                text: itemValue !== undefined  ? itemValue : ""
-                                color: itemTextColor
-                            }
+                        Text {
+                            width: parent.width
+                            anchors.margins: 4
+                            anchors.left: parent.left
+                            anchors.verticalCenter: parent.verticalCenter
+                            elide: styleData.elideMode
+                            text: styleData.value !== undefined  ? styleData.value : ""
+                            color: styleData.textColor
                         }
                     }
 
@@ -289,10 +280,10 @@ Window {
                                 anchors.margins: 4
                                 anchors.left: parent.left
                                 anchors.verticalCenter: parent.verticalCenter
-                                elide: itemElideMode
-                                text: itemValue !== undefined ? itemValue : ""
-                                color: itemTextColor
-                                visible: !itemSelected
+                                elide: styleData.elideMode
+                                text: styleData.value !== undefined ? styleData.value : ""
+                                color: styleData.textColor
+                                visible: !styleData.selected
                             }
                             Loader { // Initialize text editor lazily to improve performance
                                 id: loaderEditor
@@ -301,19 +292,19 @@ Window {
                                 Connections {
                                     target: loaderEditor.item
                                     onAccepted: {
-                                        if (typeof itemValue === 'number')
-                                            model.setProperty(row, role, Number(parseFloat(loaderEditor.item.text).toFixed(0)))
+                                        if (typeof styleData.value === 'number')
+                                            model.setProperty(styleData.row, styleData.role, Number(parseFloat(loaderEditor.item.text).toFixed(0)))
                                         else
-                                            model.setProperty(row, role, loaderEditor.item.text)
+                                            model.setProperty(styleData.row, styleData.role, loaderEditor.item.text)
                                     }
                                 }
-                                sourceComponent: itemSelected ? editor : null
+                                sourceComponent: styleData.selected ? editor : null
                                 Component {
                                     id: editor
                                     TextInput {
                                         id: textinput
-                                        color: itemTextColor
-                                        text: itemValue
+                                        color: styleData.textColor
+                                        text: styleData.value
                                         MouseArea {
                                             id: mouseArea
                                             anchors.fill: parent
@@ -354,25 +345,22 @@ Window {
                             source: "images/header.png"
                             border{left:2;right:2;top:2;bottom:2}
                             Text {
-                                text: itemValue
+                                text: styleData.value
                                 anchors.centerIn:parent
                                 color:"#333"
                             }
                         }
 
                         rowDelegate: Rectangle {
-                            height: 20
-                            color: rowSelected ? "#448" : (alternateBackground ? "#eee" : "#fff")
-                            border.color:"#ccc"
-                            border.width: 1
-                            anchors.left: parent ? parent.left : undefined
-                            anchors.leftMargin: -2
-                            anchors.rightMargin: -1
+                            height: (delegateChooser.currentIndex == 1 && styleData.selected) ? 30 : 20
+                            Behavior on height{ NumberAnimation{} }
+
+                            color: styleData.selected ? "#448" : (styleData.alternate? "#eee" : "#fff")
                             BorderImage{
                                 id: selected
                                 anchors.fill: parent
                                 source: "images/selectedrow.png"
-                                visible: rowSelected
+                                visible: styleData.selected
                                 border{left:2; right:2; top:2; bottom:2}
                                 SequentialAnimation {
                                     running: true; loops: Animation.Infinite
@@ -383,14 +371,10 @@ Window {
                         }
 
                         itemDelegate: {
-                            switch (delegateChooser.currentIndex) {
-                            case 0:
-                                return delegate1
-                            case 1:
-                                return delegate2
-                            case 2:
-                                return editableDelegate
-                            }
+                            if (delegateChooser.currentIndex == 2)
+                                return editableDelegate;
+                            else
+                                return delegate1;
                         }
                     }
                 }
diff --git a/examples/quick/controls/text/example.html b/examples/quick/controls/text/example.html
index 0560897b..52bb507a 100644
--- a/examples/quick/controls/text/example.html
+++ b/examples/quick/controls/text/example.html
@@ -1,11 +1,13 @@
-<html><head><meta name="qrichtext" content="1" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>QTextEdit Example</title><style type="text/css">
+<html><head><meta name="qrichtext" content="1" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>TextArea Example</title><style type="text/css">
 p, li { white-space: pre-wrap; }
 </style></head><body style=" font-size:9pt; font-weight:400; font-style:normal; text-decoration:none;">
-<p align="center" style=" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:20pt; font-weight:600;">QTextEdit</span></p>
-<p align="justify" style=" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:11pt;">The QTextEdit widget is an advanced editor that supports formatted rich text. It can be used to display HTML and other rich document formats. Internally, QTextEdit uses the QTextDocument class to describe both the high-level structure of each document and the low-level formatting of paragraphs.</span></p>
-<p align="justify" style=" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:11pt;">If you are viewing this document in the <span style=" font-style:italic;">textedit</span> example, you can edit this document to explore Qt's rich text editing features. We have included some comments in each of the following sections to encourage you to experiment.  </p>
+<p align="center" style=" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:20pt; font-weight:600;">TextArea</span></p>
+<p align="justify" style=" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:11pt;">The TextArea control is an advanced editor that supports formatted rich text. It can be used to display HTML and other rich document formats. Internally, TextArea uses the QQuickTextDocument class to describe both the high-level structure of each document and the low-level formatting of paragraphs.</span></p>
+<p align="justify" style=" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:11pt;">If you are viewing this document in the <span style=" font-style:italic;">Text Editor</span> example, you can edit this document to explore Qt's rich text editing features. We have included some comments in each of the following sections to encourage you to experiment.  </p>
 <p style=" margin-top:16px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:18pt; font-weight:600;"><span style=" font-size:16pt;">Font and Paragraph Styles</span></p>
-<p align="justify" style=" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:11pt;">QTextEdit supports </span><span style=" font-size:11pt; font-weight:600;">bold</span><span style=" font-size:11pt;">, </span><span style=" font-size:11pt; font-style:italic;">italic</span><span style=" font-size:11pt;">, and </span><span style=" font-size:11pt; text-decoration: underline;">underlined</span><span style=" font-size:11pt;"> font styles, and can display </span><span style=" font-size:11pt; font-weight:600; color:#00007f;">multicolored</span><span style=" font-size:11pt;"> </span><span style=" font-size:11pt; font-weight:600; color:#aa0000;">text</span><span style=" font-size:11pt;">. Font families such as </span><span style=" font-family:'Times'; font-size:11pt; font-weight:600;">Times New Roman</span><span style=" font-size:11pt;"> and </span><span style=" font-family:'Courier'; font-size:11pt; font-weight:600;">Courier</span><span style=" font-size:11pt;"> can also be used directly. </span><span style=" font-size:11pt; font-style:italic;">If you place the cursor in a region of styled text, the controls in the tool bars will change to reflect the current style.</span></p>
+<p align="justify" style=" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:11pt;">TextArea supports </span><span style=" font-size:11pt; font-weight:600;">bold</span><span style=" font-size:11pt;">, </span><span style=" font-size:11pt; font-style:italic;">italic</span><span style=" font-size:11pt;">, and </span><span style=" font-size:11pt; text-decoration: underline;">underlined</span><span style=" font-size:11pt;"> font styles, and can display </span><span style=" font-size:11pt; font-weight:600; color:#00007f;">multicolored</span>
+<span style=" font-size:11pt;"> </span><span style=" font-size:11pt; font-weight:600; color:#aa0000;">text</span><span style=" font-size:11pt;">. Font families such as</span><span style=" font-family:'Helvetica'; font-size:11pt; font-weight:600;"> Helvetica</span><span style=" font-size:11pt;"> and
+</span><span style=" font-family:'Courier'; font-size:11pt; font-weight:600;"> Courier</span><span style=" font-size:11pt;"> can also be used directly.<span style=" font-size:11pt; font-style:italic;"> If you place the cursor in a region of styled text, the corresponding controls in the tool bar will change to reflect the current style, font size and color.</span></p>
 <p align="justify" style=" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:11pt;">Paragraphs can be formatted so that the text is left-aligned, right-aligned, centered, or fully justified.</p>
 <p align="center" style=" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:11pt;"><span style=" font-style:italic;">Try changing the alignment of some text and resize the editor to see how the text layout changes.</span> </p>
 <p align="justify" style=" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:16pt; font-weight:600;">Lists</span></p>
@@ -13,7 +15,7 @@ p, li { white-space: pre-wrap; }
 <ul style="-qt-list-indent: 1;"><li style=" font-size:11pt;" style=" margin-top:0px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">Disc symbols are typically used for top-level list items. </li></ul>
 <ul type=circle style="-qt-list-indent: 2;"><li style=" font-size:11pt;" style=" margin-top:0px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">Circle symbols can be used to distinguish between items in lower-level lists.</li></ul>
 <ul type=square style="-qt-list-indent: 3;"><li style=" font-size:11pt;" style=" margin-top:0px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">Square symbols provide a reasonable alternative to discs and circles. </li></ul>
-<p style=" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:11pt;">Ordered lists can be created that can be used for tables of contents. Different characters can be used to enumerate items, and we can use both Roman and Arabic numerals in the same list structure: </p>
+<p style=" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:11pt;">Ordered lists can be used for tables of contents. Different characters can be used to enumerate items, and one can use both Roman and Arabic numerals in the same list structure: </p>
 <ol style="-qt-list-indent: 1;"><li style=" font-size:11pt;" style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">Introduction</li>
 <li style=" font-size:11pt;" style=" margin-top:0px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">Qt Tools </li></ol>
 <ol type=a style="-qt-list-indent: 2;"><li style=" font-size:11pt;" style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">Qt Assistant</li>
@@ -26,9 +28,9 @@ p, li { white-space: pre-wrap; }
 <p style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:11pt;"></p>
 <p style=" margin-top:0px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:11pt;"><span style=" font-size:16pt; font-weight:600;">Images</span></p>
 <p style=" margin-top:0px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:16pt; font-weight:600;"><span style=" font-size:11pt; font-weight:400;">Inline images are treated like ordinary ranges of characters in the text editor, so they flow with the surrounding text. Images can also be selected in the same way as text, making it easy to cut, copy, and paste them. </span></p>
-<p align="justify" style=" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:11pt;"><img src="qrc:qml/images/logo32.png" /><span style=" font-style:italic;"> Try to select this image by clicking and dragging over it with the mouse, or use the text cursor to select it by holding down Shift and using the arrow keys. You can then cut or copy it, and paste it into different parts of this document.</span></p>
+<p align="justify" style=" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:11pt;"><img src="qrc:qml/images/qt-logo.png" /><span style=" font-style:italic;"> Try to select this image by clicking and dragging over it with the mouse, or use the text cursor to select it by holding down Shift and using the arrow keys. You can then cut or copy it, and paste it into different parts of this document.</span></p>
 <p align="justify" style=" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:11pt;"><span style=" font-size:16pt; font-weight:600;">Tables</span></p>
-<p align="justify" style=" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:16pt; font-weight:600;"><span style=" font-size:11pt; font-weight:400;">QTextEdit can arrange and format tables, supporting features such as row and column spans, text formatting within cells, and size constraints for columns. </span></p>
+<p align="justify" style=" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:16pt; font-weight:600;"><span style=" font-size:11pt; font-weight:400;">TextArea can arrange and format tables, supporting features such as row and column spans, text formatting within cells, and size constraints for columns. </span></p>
 <p style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:11pt;"></p>
 <p style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:11pt;"></p>
 <table border="1" align="center" width="90%" cellspacing="0" cellpadding="4">
@@ -72,8 +74,6 @@ p, li { white-space: pre-wrap; }
 <td></td></tr></table>
 <p style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:11pt;"></p>
 <p style=" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:11pt; font-style:italic;">Try adding text to the cells in the table and experiment with the alignment of the paragraphs.</p>
-<p style=" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:11pt;"><span style=" font-size:16pt; font-weight:600;">Hyperlinks</span></p>
-<p style=" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:11pt;">QTextEdit is designed to support hyperlinks between documents, and this feature is used extensively in </span><span style=" font-size:11pt; font-style:italic;">Qt Assistant</span><span style=" font-size:11pt;">. Hyperlinks are automatically created when an HTML file is imported into an editor. Since the rich text framework supports hyperlinks natively, they can also be created programatically.</span></p>
 <p style=" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:11pt;"><span style=" font-size:16pt; font-weight:600;">Undo and Redo</span></p>
-<p style=" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:11pt;">Full support for undo and redo operations is built into QTextEdit and the underlying rich text framework. Operations on a document can be packaged together to make editing a more comfortable experience for the user.</p>
+<p style=" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:11pt;">Full support for undo and redo operations is built into TextArea and the underlying rich text framework. Operations on a document can be packaged together to make editing easier for the user.</p>
 <p style=" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:11pt;"><span style=" font-style:italic;">Try making changes to this document and press Ctrl+Z to undo them. You can always recover  the original contents of the document.</span> </p></body></html>
diff --git a/examples/quick/controls/text/qml/ToolBarSeparator.qml b/examples/quick/controls/text/qml/ToolBarSeparator.qml
new file mode 100644
index 00000000..40a2bc58
--- /dev/null
+++ b/examples/quick/controls/text/qml/ToolBarSeparator.qml
@@ -0,0 +1,61 @@
+/****************************************************************************
+**
+** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the Qt Quick Controls 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.1
+
+Item {
+    width: 8
+    anchors.top: parent.top
+    anchors.bottom: parent.bottom
+    anchors.margins: 6
+    Rectangle {
+        width: 1
+        height: parent.height
+        anchors.horizontalCenter: parent.horizontalCenter
+        color: "#22000000"
+    }
+    Rectangle {
+        width: 1
+        height: parent.height
+        anchors.horizontalCenterOffset: 1
+        anchors.horizontalCenter: parent.horizontalCenter
+        color: "#33ffffff"
+    }
+}
diff --git a/examples/quick/controls/text/qml/images/logo32.png b/examples/quick/controls/text/qml/images/logo32.png
deleted file mode 100644
index 5f91e987..00000000
--- a/examples/quick/controls/text/qml/images/logo32.png
+++ /dev/null
diff --git a/examples/quick/controls/text/qml/images/qt-logo.png b/examples/quick/controls/text/qml/images/qt-logo.png
new file mode 100644
index 00000000..6dedc8bf
--- /dev/null
+++ b/examples/quick/controls/text/qml/images/qt-logo.png
diff --git a/examples/quick/controls/text/qml/main.qml b/examples/quick/controls/text/qml/main.qml
index dd8b1848..d8f175ed 100644
--- a/examples/quick/controls/text/qml/main.qml
+++ b/examples/quick/controls/text/qml/main.qml
@@ -42,6 +42,7 @@ import QtQuick 2.1
 import QtQuick.Controls 1.0
 import QtQuick.Layouts 1.0
 import QtQuick.Dialogs 1.0
+import QtQuick.Window 2.1
 import org.qtproject.example 1.0
 
 ApplicationWindow {
@@ -52,33 +53,66 @@ ApplicationWindow {
 
     title: document.documentTitle + " - Text Editor Example"
 
+    ApplicationWindow {
+        id: aboutBox
+
+        width: 280
+        height: 120
+        title: "About Text"
+
+        ColumnLayout {
+            anchors.fill: parent
+            anchors.margins: 8
+            Item {
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                Label {
+                    anchors.centerIn: parent
+                    horizontalAlignment: Text.AlignHCenter
+                    text: "This is a basic text editor \nwritten with Qt Quick Controls"
+                }
+            }
+            Button {
+                text: "Ok"
+                isDefault: true
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.bottom: parent.bottom
+                onClicked: aboutBox.close()
+            }
+            Keys.onReturnPressed: aboutBox.close()
+            focus: true
+        }
+    }
+
     Action {
-        id: cut
+        id: cutAction
         text: "Cut"
         shortcut: "ctrl+x"
         iconSource: "images/editcut.png"
         iconName: "edit-cut"
+        onTriggered: textArea.cut()
     }
 
     Action {
-        id: copy
+        id: copyAction
         text: "Copy"
         shortcut: "Ctrl+C"
         iconSource: "images/editcopy.png"
         iconName: "edit-copy"
-        onTriggered: console.log("Ctrl C pressed - in action...")
+        onTriggered: textArea.copy()
     }
 
     Action {
-        id: paste
+        id: pasteAction
         text: "Paste"
         shortcut: "ctrl+v"
         iconSource: "qrc:images/editpaste.png"
         iconName: "edit-paste"
+        onTriggered: textArea.paste()
     }
 
     Action {
-        id: alignLeft
+        id: alignLeftAction
         text: "&Left"
         iconSource: "images/textleft.png"
         iconName: "format-justify-left"
@@ -88,16 +122,16 @@ ApplicationWindow {
         checked: document.alignment == Qt.AlignLeft
     }
     Action {
-        id: alignCenter
+        id: alignCenterAction
         text: "C&enter"
         iconSource: "images/textcenter.png"
         iconName: "format-justify-center"
-        onTriggered: document.alignment = Qt.AlignCenter
+        onTriggered: document.alignment = Qt.AlignHCenter
         checkable: true
-        checked: document.alignment == Qt.AlignCenter
+        checked: document.alignment == Qt.AlignHCenter
     }
     Action {
-        id: alignRight
+        id: alignRightAction
         text: "&Right"
         iconSource: "images/textright.png"
         iconName: "format-justify-right"
@@ -106,7 +140,7 @@ ApplicationWindow {
         checked: document.alignment == Qt.AlignRight
     }
     Action {
-        id: alignJustify
+        id: alignJustifyAction
         text: "&Justify"
         iconSource: "images/textjustify.png"
         iconName: "format-justify-fill"
@@ -116,7 +150,7 @@ ApplicationWindow {
     }
 
     Action {
-        id: bold
+        id: boldAction
         text: "&Bold"
         iconSource: "images/textbold.png"
         iconName: "format-text-bold"
@@ -124,8 +158,9 @@ ApplicationWindow {
         checkable: true
         checked: document.bold
     }
+
     Action {
-        id: italic
+        id: italicAction
         text: "&Italic"
         iconSource: "images/textitalic.png"
         iconName: "format-text-italic"
@@ -134,7 +169,7 @@ ApplicationWindow {
         checked: document.italic
     }
     Action {
-        id: underline
+        id: underlineAction
         text: "&Underline"
         iconSource: "images/textunder.png"
         iconName: "format-text-underline"
@@ -142,56 +177,61 @@ ApplicationWindow {
         checkable: true
         checked: document.underline
     }
-    Action {
-        id: color
-        text: "&Color ..."
-        iconSource: "images/textcolor.png"
-        iconName: "format-text-color"
-    }
 
     FileDialog {
-        id: file
+        id: fileDialog
         nameFilters: ["Text files (*.txt)", "HTML files (*.html)"]
         onAccepted: document.fileUrl = fileUrl
     }
 
+    ColorDialog {
+        id: colorDialog
+        color: "black"
+        onAccepted: document.textColor = color
+    }
+
     Action {
-        id: fileOpen
+        id: fileOpenAction
         iconSource: "images/fileopen.png"
         iconName: "document-open"
         text: "Open"
-        onTriggered: file.open()
+        onTriggered: fileDialog.open()
     }
 
     menuBar: MenuBar {
         Menu {
             title: "&File"
-            MenuItem { action: fileOpen }
+            MenuItem { action: fileOpenAction }
             MenuItem { text: "Quit"; onTriggered: Qt.quit() }
         }
         Menu {
             title: "&Edit"
-            MenuItem { action: copy }
-            MenuItem { action: cut }
-            MenuItem { action: paste }
+            MenuItem { action: copyAction }
+            MenuItem { action: cutAction }
+            MenuItem { action: pasteAction }
         }
         Menu {
             title: "F&ormat"
-            MenuItem { action: bold }
-            MenuItem { action: italic }
-            MenuItem { action: underline }
+            MenuItem { action: boldAction }
+            MenuItem { action: italicAction }
+            MenuItem { action: underlineAction }
             MenuSeparator {}
-            MenuItem { action: alignLeft }
-            MenuItem { action: alignCenter }
-            MenuItem { action: alignRight }
-            MenuItem { action: alignJustify }
+            MenuItem { action: alignLeftAction }
+            MenuItem { action: alignCenterAction }
+            MenuItem { action: alignRightAction }
+            MenuItem { action: alignJustifyAction }
             MenuSeparator {}
-            MenuItem { action: color }
+            MenuItem {
+                text: "&Color ..."
+                onTriggered: {
+                    colorDialog.color = document.textColor
+                    colorDialog.open()
+                }
+            }
         }
         Menu {
             title: "&Help"
-            MenuItem { text: "About..." }
-            MenuItem { text: "About Qt" }
+            MenuItem { text: "About..." ; onTriggered: aboutBox.show() }
         }
     }
 
@@ -200,39 +240,72 @@ ApplicationWindow {
         width: parent.width
         RowLayout {
             anchors.fill: parent
-            spacing: 1
-            ToolButton { action: fileOpen }
+            spacing: 0
+            ToolButton { action: fileOpenAction }
+
+            ToolBarSeparator {}
+
+            ToolButton { action: copyAction }
+            ToolButton { action: cutAction }
+            ToolButton { action: pasteAction }
+
+            ToolBarSeparator {}
+
+            ToolButton { action: boldAction }
+            ToolButton { action: italicAction }
+            ToolButton { action: underlineAction }
 
-            Item { width: 4 }
-            ToolButton { action: copy }
-            ToolButton { action: cut }
-            ToolButton { action: paste }
-            Item { width: 4 }
-            ToolButton { action: bold }
-            ToolButton { action: italic }
-            ToolButton { action: underline }
+            ToolBarSeparator {}
 
-            Item { width: 4 }
-            ToolButton { action: alignLeft }
-            ToolButton { action: alignCenter }
-            ToolButton { action: alignRight }
-            ToolButton { action: alignJustify }
+            ToolButton { action: alignLeftAction }
+            ToolButton { action: alignCenterAction }
+            ToolButton { action: alignRightAction }
+            ToolButton { action: alignJustifyAction }
+
+            ToolBarSeparator {}
+
+            ToolButton {
+                id: colorButton
+                property var color : document.textColor
+                Rectangle {
+                    id: colorRect
+                    anchors.fill: parent
+                    anchors.margins: 8
+                    color: Qt.darker(document.textColor, colorButton.pressed ? 1.4 : 1)
+                    border.width: 1
+                    border.color: Qt.darker(colorRect.color, 2)
+                }
+                onClicked: {
+                    colorDialog.color = document.textColor
+                    colorDialog.open()
+                }
+            }
             Item { Layout.fillWidth: true }
         }
     }
+
     ToolBar {
         id: secondaryToolBar
         width: parent.width
 
         RowLayout {
             anchors.fill: parent
-            anchors.margins: 4
             ComboBox {
-                model: document.defaultFontSizes
-                onCurrentTextChanged: document.fontSize = currentText
-                currentIndex: document.defaultFontSizes.indexOf(document.fontSize + "")
+                id: fontFamilyComboBox
+                implicitWidth: 150
+                model: Qt.fontFamilies()
+                property bool special : false
+                onCurrentTextChanged: {
+                    if (special == false || currentIndex != 0)
+                        document.fontFamily = currentText
+                }
+            }
+            SpinBox {
+                id: fontSizeSpinBox
+                implicitWidth: 50
+                value: 0
+                onValueChanged: document.fontSize = value
             }
-            TextField { id: fontEdit; enabled: false }
             Item { Layout.fillWidth: true }
         }
     }
@@ -240,6 +313,7 @@ ApplicationWindow {
     TextArea {
         Accessible.name: "document"
         id: textArea
+        frameVisible: false
         width: parent.width
         anchors.top: secondaryToolBar.bottom
         anchors.bottom: parent.bottom
@@ -254,8 +328,17 @@ ApplicationWindow {
         cursorPosition: textArea.cursorPosition
         selectionStart: textArea.selectionStart
         selectionEnd: textArea.selectionEnd
-        onCurrentFontChanged: {
-            fontEdit.text = currentFont.family
+        Component.onCompleted: document.fileUrl = "qrc:/example.html"
+        onFontSizeChanged: fontSizeSpinBox.value = document.fontSize
+        onFontFamilyChanged: {
+            var index = Qt.fontFamilies().indexOf(document.fontFamily)
+            if (index == -1) {
+                fontFamilyComboBox.currentIndex = 0
+                fontFamilyComboBox.special = true
+            } else {
+                fontFamilyComboBox.currentIndex = index
+                fontFamilyComboBox.special = false
+            }
         }
     }
 }
diff --git a/examples/quick/controls/text/resources.qrc b/examples/quick/controls/text/resources.qrc
index e67fac6a..27c7b921 100644
--- a/examples/quick/controls/text/resources.qrc
+++ b/examples/quick/controls/text/resources.qrc
@@ -1,26 +1,27 @@
-<!DOCTYPE RCC><RCC version="1.0">
-<qresource prefix="/">
-  <file>qml/main.qml</file>
-  <file>qml/images/logo32.png</file>
-  <file>qml/images/editcopy.png</file>
-  <file>qml/images/editcut.png</file>
-  <file>qml/images/editpaste.png</file>
-  <file>qml/images/editredo.png</file>
-  <file>qml/images/editundo.png</file>
-  <file>qml/images/exportpdf.png</file>
-  <file>qml/images/filenew.png</file>
-  <file>qml/images/fileopen.png</file>
-  <file>qml/images/fileprint.png</file>
-  <file>qml/images/filesave.png</file>
-  <file>qml/images/textbold.png</file>
-  <file>qml/images/textcenter.png</file>
-  <file>qml/images/textitalic.png</file>
-  <file>qml/images/textjustify.png</file>
-  <file>qml/images/textleft.png</file>
-  <file>qml/images/textright.png</file>
-  <file>qml/images/textunder.png</file>
-  <file>qml/images/zoomin.png</file>
-  <file>qml/images/zoomout.png</file>
-  <file>example.html</file>
-</qresource>
+<RCC>
+    <qresource prefix="/">
+        <file>qml/main.qml</file>
+        <file>qml/ToolBarSeparator.qml</file>
+        <file>qml/images/editcopy.png</file>
+        <file>qml/images/editcut.png</file>
+        <file>qml/images/editpaste.png</file>
+        <file>qml/images/editredo.png</file>
+        <file>qml/images/editundo.png</file>
+        <file>qml/images/exportpdf.png</file>
+        <file>qml/images/filenew.png</file>
+        <file>qml/images/fileopen.png</file>
+        <file>qml/images/fileprint.png</file>
+        <file>qml/images/filesave.png</file>
+        <file>qml/images/textbold.png</file>
+        <file>qml/images/textcenter.png</file>
+        <file>qml/images/textitalic.png</file>
+        <file>qml/images/textjustify.png</file>
+        <file>qml/images/textleft.png</file>
+        <file>qml/images/textright.png</file>
+        <file>qml/images/textunder.png</file>
+        <file>qml/images/zoomin.png</file>
+        <file>qml/images/zoomout.png</file>
+        <file>example.html</file>
+        <file>qml/images/qt-logo.png</file>
+    </qresource>
 </RCC>
diff --git a/examples/quick/controls/text/src/documenthandler.cpp b/examples/quick/controls/text/src/documenthandler.cpp
index 48b6d033..e0c9610d 100644
--- a/examples/quick/controls/text/src/documenthandler.cpp
+++ b/examples/quick/controls/text/src/documenthandler.cpp
@@ -52,7 +52,6 @@ DocumentHandler::DocumentHandler()
     , m_selectionStart(0)
     , m_selectionEnd(0)
 {
-    setFileUrl(QUrl("qrc:/example.html"));
 }
 
 void DocumentHandler::setTarget(QQuickItem *target)
@@ -91,6 +90,8 @@ void DocumentHandler::setFileUrl(const QUrl &arg)
 
                 emit textChanged();
                 emit documentTitleChanged();
+
+                reset();
             }
         }
         emit fileUrlChanged();
@@ -135,12 +136,18 @@ void DocumentHandler::setCursorPosition(int position)
 
     m_cursorPosition = position;
 
-    emit currentFontChanged();
+    reset();
+}
+
+void DocumentHandler::reset()
+{
+    emit fontFamilyChanged();
     emit alignmentChanged();
     emit boldChanged();
     emit italicChanged();
     emit underlineChanged();
     emit fontSizeChanged();
+    emit textColorChanged();
 }
 
 QTextCursor DocumentHandler::textCursor() const
@@ -166,13 +173,11 @@ void DocumentHandler::mergeFormatOnWordOrSelection(const QTextCharFormat &format
 void DocumentHandler::setSelectionStart(int position)
 {
     m_selectionStart = position;
-//    emit selectionStartChanged();
 }
 
 void DocumentHandler::setSelectionEnd(int position)
 {
     m_selectionEnd = position;
-//    emit selectionEndChanged();
 }
 
 void DocumentHandler::setAlignment(Qt::Alignment a)
@@ -188,10 +193,8 @@ void DocumentHandler::setAlignment(Qt::Alignment a)
 
 Qt::Alignment DocumentHandler::alignment() const
 {
-//    if (!m_doc || m_doc->isEmpty() || m_cursorPosition < 0)
-//        return Qt::AlignLeft;
     QTextCursor cursor = textCursor();
-    if (cursor.isNull() || cursor.blockNumber() == 0)
+    if (cursor.isNull())
         return Qt::AlignLeft;
     return textCursor().blockFormat().alignment();
 }
@@ -199,7 +202,7 @@ Qt::Alignment DocumentHandler::alignment() const
 bool DocumentHandler::bold() const
 {
     QTextCursor cursor = textCursor();
-    if (cursor.isNull() || cursor.blockNumber() == 0)
+    if (cursor.isNull())
         return false;
     return textCursor().charFormat().fontWeight() == QFont::Bold;
 }
@@ -207,7 +210,7 @@ bool DocumentHandler::bold() const
 bool DocumentHandler::italic() const
 {
     QTextCursor cursor = textCursor();
-    if (cursor.isNull() || cursor.blockNumber() == 0)
+    if (cursor.isNull())
         return false;
     return textCursor().charFormat().fontItalic();
 }
@@ -215,7 +218,7 @@ bool DocumentHandler::italic() const
 bool DocumentHandler::underline() const
 {
     QTextCursor cursor = textCursor();
-    if (cursor.isNull() || cursor.blockNumber() == 0)
+    if (cursor.isNull())
         return false;
     return textCursor().charFormat().fontUnderline();
 }
@@ -264,13 +267,44 @@ void DocumentHandler::setFontSize(int arg)
     emit fontSizeChanged();
 }
 
-QFont DocumentHandler::currentFont() const
+QColor DocumentHandler::textColor() const
+{
+    QTextCursor cursor = textCursor();
+    if (cursor.isNull())
+        return QColor(Qt::black);
+    QTextCharFormat format = cursor.charFormat();
+    return format.foreground().color();
+}
+
+void DocumentHandler::setTextColor(const QColor &c)
+{
+    QTextCursor cursor = textCursor();
+    if (cursor.isNull())
+        return;
+    QTextCharFormat format;
+    format.setForeground(QBrush(c));
+    mergeFormatOnWordOrSelection(format);
+    emit textColorChanged();
+}
+
+QString DocumentHandler::fontFamily() const
 {
     QTextCursor cursor = textCursor();
     if (cursor.isNull())
-        return QFont();
+        return QString();
     QTextCharFormat format = cursor.charFormat();
-    return format.font();
+    return format.font().family();
+}
+
+void DocumentHandler::setFontFamily(const QString &arg)
+{
+    QTextCursor cursor = textCursor();
+    if (cursor.isNull())
+        return;
+    QTextCharFormat format;
+    format.setFontFamily(arg);
+    mergeFormatOnWordOrSelection(format);
+    emit fontFamilyChanged();
 }
 
 QStringList DocumentHandler::defaultFontSizes() const
diff --git a/examples/quick/controls/text/src/documenthandler.h b/examples/quick/controls/text/src/documenthandler.h
index c60bc1d5..a759c403 100644
--- a/examples/quick/controls/text/src/documenthandler.h
+++ b/examples/quick/controls/text/src/documenthandler.h
@@ -63,7 +63,8 @@ class DocumentHandler : public QObject
     Q_PROPERTY(int selectionStart READ selectionStart WRITE setSelectionStart NOTIFY selectionStartChanged)
     Q_PROPERTY(int selectionEnd READ selectionEnd WRITE setSelectionEnd NOTIFY selectionEndChanged)
 
-    Q_PROPERTY(QFont currentFont READ currentFont NOTIFY currentFontChanged)
+    Q_PROPERTY(QColor textColor READ textColor WRITE setTextColor NOTIFY textColorChanged)
+    Q_PROPERTY(QString fontFamily READ fontFamily WRITE setFontFamily NOTIFY fontFamilyChanged)
     Q_PROPERTY(Qt::Alignment alignment READ alignment WRITE setAlignment NOTIFY alignmentChanged)
 
     Q_PROPERTY(bool bold READ bold WRITE setBold NOTIFY boldChanged)
@@ -93,7 +94,9 @@ public:
     int selectionStart() const { return m_selectionStart; }
     int selectionEnd() const { return m_selectionEnd; }
 
-    QFont currentFont() const;
+    QString fontFamily() const;
+
+    QColor textColor() const;
 
     Qt::Alignment alignment() const;
     void setAlignment(Qt::Alignment a);
@@ -114,6 +117,8 @@ public Q_SLOTS:
     void setItalic(bool arg);
     void setUnderline(bool arg);
     void setFontSize(int arg);
+    void setTextColor(const QColor &arg);
+    void setFontFamily(const QString &arg);
 
     void setFileUrl(const QUrl &arg);
     void setText(const QString &arg);
@@ -126,7 +131,8 @@ Q_SIGNALS:
     void selectionStartChanged();
     void selectionEndChanged();
 
-    void currentFontChanged();
+    void fontFamilyChanged();
+    void textColorChanged();
     void alignmentChanged();
 
     void boldChanged();
@@ -142,6 +148,7 @@ Q_SIGNALS:
     void documentTitleChanged();
 
 private:
+    void reset();
     QTextCursor textCursor() const;
     void mergeFormatOnWordOrSelection(const QTextCharFormat &format);
 
@@ -153,9 +160,6 @@ private:
     int m_selectionEnd;
 
     QFont m_font;
-    bool m_bold;
-    bool m_italic;
-    bool m_underline;
     int m_fontSize;
     QUrl m_fileUrl;
     QString m_text;
diff --git a/examples/quick/controls/text/src/main.cpp b/examples/quick/controls/text/src/main.cpp
index 0fc064dc..8d2b8dd0 100644
--- a/examples/quick/controls/text/src/main.cpp
+++ b/examples/quick/controls/text/src/main.cpp
@@ -49,24 +49,14 @@
 int main(int argc, char *argv[])
 {
     QApplication app(argc, argv);
-    QQmlEngine engine;
-
     qmlRegisterType<DocumentHandler>("org.qtproject.example", 1, 0, "DocumentHandler");
-
-    QQmlComponent component(&engine);
-    component.loadUrl(QUrl("qrc:/qml/main.qml"));
-    if ( !component.isReady() ) {
-        qWarning("%s", qPrintable(component.errorString()));
-        return -1;
-    }
-    QObject *topLevel = component.create();
+    QQmlApplicationEngine engine(QUrl("qrc:/qml/main.qml"));
+    QObject *topLevel = engine.rootObjects().value(0);
     QQuickWindow *window = qobject_cast<QQuickWindow *>(topLevel);
     if ( !window ) {
         qWarning("Error: Your root item has to be a Window.");
         return -1;
     }
-
-    QObject::connect(&engine, SIGNAL(quit()), &app, SLOT(quit()));
     window->show();
     return app.exec();
 }
diff --git a/examples/quick/controls/text/text.pro b/examples/quick/controls/text/text.pro
index ce6d5f33..864ce0bb 100644
--- a/examples/quick/controls/text/text.pro
+++ b/examples/quick/controls/text/text.pro
@@ -7,7 +7,8 @@ qtHaveModule(widgets) {
 include(src/src.pri)
 
 OTHER_FILES += \
-    qml/main.qml
+    qml/main.qml \
+    qml/ToolBarSeparator.qml
 
 RESOURCES += \
     resources.qrc
diff --git a/examples/quick/controls/touch/content/ButtonPage.qml b/examples/quick/controls/touch/content/ButtonPage.qml
index 635ce3b9..f431a52e 100644
--- a/examples/quick/controls/touch/content/ButtonPage.qml
+++ b/examples/quick/controls/touch/content/ButtonPage.qml
@@ -86,7 +86,7 @@ Item {
             anchors.margins: 20
             style: touchStyle
             text: "Dont press me"
-            onClicked: if (pageStack) pageStack.pop()
+            onClicked: if (stackView) stackView.pop()
         }
 
     }
diff --git a/examples/quick/controls/touch/content/TabBarPage.qml b/examples/quick/controls/touch/content/TabBarPage.qml
index c96314be..7651a3c1 100644
--- a/examples/quick/controls/touch/content/TabBarPage.qml
+++ b/examples/quick/controls/touch/content/TabBarPage.qml
@@ -80,11 +80,11 @@ Item {
                     anchors.fill: parent
                     border.bottom: 8
                     border.top: 8
-                    source: tab.selected ? "../images/tab_selected.png":"../images/tabs_standard.png"
+                    source: styleData.selected ? "../images/tab_selected.png":"../images/tabs_standard.png"
                     Text {
                         anchors.centerIn: parent
                         color: "white"
-                        text: tab.title.toUpperCase()
+                        text: styleData.title.toUpperCase()
                         font.pixelSize: 16
                     }
                     Rectangle {
diff --git a/examples/quick/controls/touch/main.qml b/examples/quick/controls/touch/main.qml
index 3058a0d3..9f93cb78 100644
--- a/examples/quick/controls/touch/main.qml
+++ b/examples/quick/controls/touch/main.qml
@@ -54,8 +54,8 @@ ApplicationWindow {
     // Implements back key navigation
     Keys.onReleased: {
         if (event.key === Qt.Key_Back) {
-            if (pageStack.depth > 1) {
-                pageStack.pop();
+            if (stackView.depth > 1) {
+                stackView.pop();
                 event.accepted = true;
             } else { Qt.quit(); }
         }
@@ -72,7 +72,7 @@ ApplicationWindow {
             width: opacity ? 60 : 0
             anchors.left: parent.left
             anchors.leftMargin: 20
-            opacity: pageStack.depth > 1 ? 1 : 0
+            opacity: stackView.depth > 1 ? 1 : 0
             anchors.verticalCenter: parent.verticalCenter
             antialiasing: true
             height: 60
@@ -87,7 +87,7 @@ ApplicationWindow {
                 id: backmouse
                 anchors.fill: parent
                 anchors.margins: -10
-                onClicked: pageStack.pop()
+                onClicked: stackView.pop()
             }
         }
 
@@ -126,7 +126,7 @@ ApplicationWindow {
     }
 
     StackView {
-        id: pageStack
+        id: stackView
         anchors.fill: parent
 
         initialItem: Item {
@@ -137,7 +137,7 @@ ApplicationWindow {
                 anchors.fill: parent
                 delegate: AndroidDelegate {
                     text: title
-                    onClicked: pageStack.push(Qt.resolvedUrl(page))
+                    onClicked: stackView.push(Qt.resolvedUrl(page))
                 }
             }
         }