Doc: add UI Forms tutorial

Based on the Qt Quick Controls UI Forms example.

Change-Id: Iec42b7559161f980e4f482c63bfc40a22f5e77f8
Reviewed-by: Tim Jenssen <tim.jenssen@theqtcompany.com>

doc/config/qtcreator-project.qdocconf

@@ -7,6 +7,7 @@ sourcedirs = $SRCDIR/src
 imagedirs = $SRCDIR/images $SRCDIR/templates/images
 outputdir = $OUTDIR
 exampledirs = $SRCDIR/examples
+examples.fileextensions += *.qml
 
 HTML.extraimages         = images/commercial.png
 qhp.QtCreator.extraFiles = images/commercial.png

doc/examples/uiforms/CustomerModelSingleton.qml

@@ -0,0 +1,130 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples 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 The Qt Company Ltd 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$
+**
+****************************************************************************/
+
+pragma Singleton
+
+import QtQuick 2.0
+
+ListModel {
+    property QtObject selection
+    ListElement {
+        customerId: "15881123"
+        firstName: "Julia"
+        title: "Ms."
+        lastName: "Jefferson"
+        email: "Julia@example.com"
+        address: "Spandia Avenue, Suite 610"
+        city: "Toronto"
+        zipCode: "92334"
+        phoneNumber: "0803-033330"
+        notes: "Very demanding customer."
+        history: "21.4.2014|Order|coffee~23.4.2014|Order|poster~29.4.2014|Invoice|poster 40$~05.5.2014|Overdue Notice|poster 40$"
+    }
+
+    ListElement {
+        customerId: "29993496"
+        firstName: "Tim"
+        lastName: "Northington"
+        title: "Mr."
+        email: "Northington@example.com"
+        address: "North Fifth Street 55"
+        city: "San Jose"
+        zipCode: "95112"
+        phoneNumber: "09000-3330"
+        notes: "Very good customer."
+        history: "18.4.2014|Order|orange juice~23.4.2014|Order|chair~24.4.2014|Complaint|Chair is broken."
+    }
+
+    ListElement {
+        customerId: "37713567"
+        firstName: "Daniel"
+        lastName: "Krumm"
+        title: "Mr."
+        email: "Krumm@example.com"
+        address: "Waterfront 14"
+        city: "Berlin"
+        zipCode: "12334"
+        phoneNumber: "0708093330"
+        notes: "This customer has a lot of Complaints."
+        history: "15.4.2014|Order|table~25.4.2014|Return|table~28.4.2014|Complaint|Table had wrong color."
+    }
+
+    ListElement {
+        customerId: "45817387"
+        firstName: "Sandra"
+        lastName: "Booth"
+        title: "Ms."
+        email: "Sandrab@example.com"
+        address: "Folsom Street 23"
+        city: "San Francisco"
+        zipCode: "94103"
+        phoneNumber: "0103436370"
+        notes: "This customer is not paying."
+        history: "22.4.2014|Order|coffee~23.4.2014|Order|smartphone~29.4.2014|Invoice|smartphone 200$~05.5.2014|Overdue Notice|smartphone 200$"
+    }
+
+    ListElement {
+        customerId: "588902396"
+        firstName: "Lora"
+        lastName: "Beckner"
+        title: "Ms."
+        email: "LoraB@example.com"
+        address: " W Wilson Apt 3"
+        city: "Los Angeles"
+        zipCode: "90086"
+        phoneNumber: "0903436360"
+        notes: "This customer usually pays late."
+        history: "17.4.2014|Order|soft drink~23.4.2014|Order|computer~29.4.2014|Invoice|computer 1200$~07.5.2014|Overdue Notice|computer 1200$"
+    }
+
+    ListElement {
+        customerId: "78885693"
+        firstName: "Vanessa"
+        lastName: "Newbury"
+        title: "Ms."
+        email: "VanessaN@example.com"
+        address: "Madison Ave. 277"
+        city: "New York"
+        zipCode: "10016"
+        phoneNumber: "0503053530"
+        notes: "Deliveries sometime do not arrive on time."
+        history: "19.4.2014|Order|coffee~23.4.2014|Order|bicycle~29.4.2014|Invoice|bicycle 500$~06.5.2014|Overdue Notice|bicycle 500$"
+    }
+}

doc/examples/uiforms/CustomerTableView.qml

@@ -0,0 +1,68 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples 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 The Qt Company Ltd 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.4
+import QtQuick.Controls 1.3
+import QtQuick.Layouts 1.1
+
+TableView {
+    id: tableView
+
+    property int columnWidth: width / 3 - 1
+    Layout.minimumWidth: splitView1.width * 2 / 5
+
+    TableViewColumn {
+        role: "customerId"
+        title: qsTr("Customer Id")
+        width: tableView.columnWidth
+    }
+
+    TableViewColumn {
+        role: "firstName"
+        title: qsTr("First Name")
+        width: tableView.columnWidth
+    }
+
+    TableViewColumn {
+        role: "lastName"
+        title: qsTr("Last Name")
+        width: tableView.columnWidth
+    }
+}

doc/examples/uiforms/History.qml

@@ -0,0 +1,73 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples 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 The Qt Company Ltd 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.4
+import my.customermodel.singleton 1.0
+
+HistoryTableView {
+
+    function readData() {
+        CustomerModel.selection.forEach(function (rowIndex) {
+
+            var history = CustomerModel.get(rowIndex).history
+            var entries = history.split("~")
+
+            model.clear()
+
+            var index
+            for (index = 0; index < entries.length; index++) {
+                var entry = entries[index]
+                var data = entry.split("|")
+                model.append({
+                              date: data[0],
+                              type: data[1],
+                              text: data[2]
+                             })
+            }
+        })
+    }
+
+    Connections {
+        target: CustomerModel.selection
+        onSelectionChanged: readData()
+    }
+
+    Component.onCompleted: readData()
+}

doc/examples/uiforms/HistoryTableView.qml

@@ -0,0 +1,72 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples 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 The Qt Company Ltd 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.4
+import QtQuick.Controls 1.3
+import QtQuick.Layouts 1.1
+
+TableView {
+    id: tableView
+
+    property int columnWidth: width / 3
+
+    anchors.fill: parent
+
+    TableViewColumn {
+        role: "date"
+        title: qsTr("Date")
+        width: tableView.columnWidth
+    }
+
+    TableViewColumn {
+        role: "type"
+        title: qsTr("Type")
+        width: tableView.columnWidth
+    }
+
+    TableViewColumn {
+        role: "text"
+        title: qsTr("Description")
+        width: tableView.columnWidth
+    }
+
+    model: ListModel {
+    }
+}

doc/examples/uiforms/MainForm.ui.qml

@@ -0,0 +1,86 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples 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 The Qt Company Ltd 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.4
+import QtQuick.Controls 1.2
+import QtQuick.Layouts 1.1
+
+Item {
+    property alias tableView1: tableView1
+
+    SplitView {
+        id: splitView1
+        anchors.fill: parent
+
+        CustomerTableView {
+            id: tableView1
+        }
+
+        TabView {
+            id: tabView1
+            width: 360
+            height: 300
+
+            Tab {
+                id: tab1
+                source: "Settings.qml"
+                title: "Customer Settings"
+            }
+
+            Tab {
+                id: tab2
+                x: -3
+                y: 5
+                source: "Notes.qml"
+                title: "Customer Notes"
+            }
+
+            Tab {
+                id: tab3
+                x: -7
+                y: -7
+                source: "History.qml"
+                title: "Customer History"
+            }
+        }
+    }
+
+}
+

doc/examples/uiforms/Notes.qml

@@ -0,0 +1,74 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples 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 The Qt Company Ltd 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.4
+import my.customermodel.singleton 1.0
+
+NotesForm {
+    id: form
+
+    function readData() {
+        CustomerModel.selection.forEach(function (rowIndex) {
+            form.textArea1.text = CustomerModel.get(rowIndex).notes
+        })
+
+        save.enabled = true
+        cancel.enabled = true
+        form.textArea1.enabled = true
+    }
+
+    function writeData() {
+        CustomerModel.selection.forEach(function (rowIndex) {
+            var data = CustomerModel.get(rowIndex)
+            data.notes = form.textArea1.text
+            CustomerModel.set(rowIndex, data)
+        })
+    }
+
+    cancel.onClicked: readData()
+    save.onClicked: writeData()
+
+    Connections {
+        target: CustomerModel.selection
+        onSelectionChanged: form.readData()
+    }
+
+    Component.onCompleted: readData()
+}

doc/examples/uiforms/NotesForm.ui.qml

@@ -0,0 +1,93 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples 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 The Qt Company Ltd 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.4
+import QtQuick.Layouts 1.0
+import QtQuick.Controls 1.2
+
+Item {
+    id: content
+    width: 400
+    height: 400
+    property alias textArea1: textArea1
+    property alias cancel: cancel
+    property alias save: save
+
+    ColumnLayout {
+        id: columnLayout1
+        height: 100
+        anchors.right: parent.right
+        anchors.rightMargin: 12
+        anchors.left: parent.left
+        anchors.leftMargin: 12
+        anchors.top: parent.top
+        anchors.topMargin: 12
+
+        TextArea {
+            id: textArea1
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+        }
+    }
+
+    RowLayout {
+        id: rowLayout1
+        width: 100
+        anchors.right: parent.right
+        anchors.rightMargin: 12
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 12
+
+        Button {
+            id: save
+            text: qsTr("Save")
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+        }
+
+        Button {
+            id: cancel
+            text: qsTr("Cancel")
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+        }
+    }
+}
+

doc/examples/uiforms/Settings.qml

@@ -0,0 +1,86 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples 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 The Qt Company Ltd 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.4
+import my.customermodel.singleton 1.0
+
+SettingsForm {
+    id: form
+    anchors.fill: parent
+
+    function readData() {
+
+        form.title.model = ["Mr.", "Ms."]
+
+        CustomerModel.selection.forEach(function (rowIndex) {
+            form.firstName.text = CustomerModel.get(rowIndex).firstName
+            form.lastName.text = CustomerModel.get(rowIndex).lastName
+            form.customerId.text = CustomerModel.get(rowIndex).customerId
+            form.title.currentIndex = form.title.find(CustomerModel.get(rowIndex).title)
+        })
+
+        save.enabled = true
+        cancel.enabled = true
+        gridLayout1.enabled = true
+    }
+
+    function writeData() {
+        CustomerModel.selection.forEach(function (rowIndex) {
+            var notes = CustomerModel.get(rowIndex).notes
+            CustomerModel.set(rowIndex, {
+                                  firstName: form.firstName.text,
+                                  lastName: form.lastName.text,
+                                  customerId: form.customerId.text,
+                                  title: form.title.currentText,
+                                  notes: notes
+                              })
+        })
+    }
+
+    cancel.onClicked: readData()
+    save.onClicked: writeData()
+
+    Connections {
+        target: CustomerModel.selection
+        onSelectionChanged: form.readData()
+    }
+
+    Component.onCompleted: readData()
+}

doc/examples/uiforms/SettingsForm.ui.qml

@@ -0,0 +1,152 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples 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 The Qt Company Ltd 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.4
+import QtQuick.Controls 1.2
+import QtQuick.Layouts 1.0
+
+Item {
+    id: content
+
+    property alias customerId: customerId
+    property alias lastName: lastName
+    property alias firstName: firstName
+    property alias gridLayout1: gridLayout1
+    property alias rowLayout1: rowLayout1
+
+    property alias save: save
+    property alias cancel: cancel
+    property alias title: title
+
+    GridLayout {
+        id: gridLayout1
+        rows: 4
+        columns: 3
+        rowSpacing: 8
+        columnSpacing: 8
+        anchors.right: parent.right
+        anchors.rightMargin: 12
+        anchors.left: parent.left
+        anchors.leftMargin: 12
+        anchors.top: parent.top
+        anchors.topMargin: 12
+
+        Label {
+            id: label1
+            text: qsTr("Title")
+        }
+
+        Label {
+            id: label2
+            text: qsTr("First Name")
+        }
+
+        Label {
+            id: label3
+            text: qsTr("Last Name")
+        }
+
+
+        ComboBox {
+            id: title
+        }
+
+
+        TextField {
+            id: firstName
+            text: ""
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+            placeholderText: qsTr("First Name")
+        }
+
+
+
+        TextField {
+            id: lastName
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+            placeholderText: qsTr("Last Name")
+        }
+
+
+
+
+        Label {
+            id: label4
+            text: qsTr("Customer Id")
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+        }
+
+        TextField {
+            id: customerId
+            width: 0
+            height: 0
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+            Layout.columnSpan: 3
+            placeholderText: qsTr("Customer Id")
+        }
+    }
+
+    RowLayout {
+        id: rowLayout1
+        anchors.right: parent.right
+        anchors.rightMargin: 12
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 12
+
+        Button {
+            id: save
+            text: qsTr("Save")
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+        }
+
+        Button {
+            id: cancel
+            text: qsTr("Cancel")
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+        }
+    }
+}
+

doc/examples/uiforms/deployment.pri

@@ -0,0 +1,27 @@
+android-no-sdk {
+    target.path = /data/user/qt
+    export(target.path)
+    INSTALLS += target
+} else:android {
+    x86 {
+        target.path = /libs/x86
+    } else: armeabi-v7a {
+        target.path = /libs/armeabi-v7a
+    } else {
+        target.path = /libs/armeabi
+    }
+    export(target.path)
+    INSTALLS += target
+} else:unix {
+    isEmpty(target.path) {
+        qnx {
+            target.path = /tmp/$${TARGET}/bin
+        } else {
+            target.path = /opt/$${TARGET}/bin
+        }
+        export(target.path)
+    }
+    INSTALLS += target
+}
+
+export(INSTALLS)

doc/examples/uiforms/main.cpp

@@ -0,0 +1,56 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples 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 The Qt Company Ltd nor the names of its
+**     contributors may be used to endorse or promote products derived
+**     from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#include <QApplication>
+#include <QQmlApplicationEngine>
+#include <QtQml>
+
+int main(int argc, char *argv[])
+{
+    QApplication app(argc, argv);
+
+    QUrl resourceUrl(QStringLiteral("qrc:/CustomerModelSingleton.qml"));
+    qmlRegisterSingletonType(resourceUrl, "my.customermodel.singleton", 1, 0, "CustomerModel");
+
+    QQmlApplicationEngine engine;
+    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
+
+    return app.exec();
+}

doc/examples/uiforms/main.qml

@@ -0,0 +1,130 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples 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 The Qt Company Ltd 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.4
+import QtQuick.Controls 1.2
+import QtQuick.Dialogs 1.2
+import QtQuick.Layouts 1.1
+import my.customermodel.singleton 1.0
+
+ApplicationWindow {
+    visible: true
+    width: 640
+    height: 480
+    title: qsTr("Qt Quick UI Forms")
+
+    menuBar: MenuBar {
+        Menu {
+            title: qsTr("&File")
+            MenuItem {
+                text: qsTr("E&xit")
+                onTriggered: Qt.quit();
+            }
+        }
+        Menu {
+            title: qsTr("&Edit")
+            MenuItem {
+                action: cutAction
+            }
+            MenuItem {
+                action: copyAction
+            }
+            MenuItem {
+                action: pasteAction
+            }
+        }
+        Menu {
+            title: qsTr("&Help")
+            MenuItem {
+                text: qsTr("About...")
+                onTriggered: aboutDialog.open()
+            }
+        }
+    }
+
+    Action {
+        id: copyAction
+        text: qsTr("&Copy")
+        shortcut: StandardKey.Copy
+        iconName: "edit-copy"
+        enabled: (!!activeFocusItem && !!activeFocusItem["copy"])
+        onTriggered: activeFocusItem.copy()
+    }
+
+    Action {
+        id: cutAction
+        text: qsTr("Cu&t")
+        shortcut: StandardKey.Cut
+        iconName: "edit-cut"
+        enabled: (!!activeFocusItem && !!activeFocusItem["cut"])
+        onTriggered: activeFocusItem.cut()
+    }
+
+    Action {
+        id: pasteAction
+        text: qsTr("&Paste")
+        shortcut: StandardKey.Paste
+        iconName: "edit-paste"
+        enabled: (!!activeFocusItem && !!activeFocusItem["paste"])
+        onTriggered: activeFocusItem.paste()
+    }
+
+    MainForm {
+        anchors.fill: parent
+        Layout.minimumWidth: 800
+        Layout.minimumHeight: 480
+        Layout.preferredWidth: 768
+        Layout.preferredHeight: 480
+        tableView1.model: CustomerModel
+
+        Component.onCompleted: CustomerModel.selection = tableView1.selection
+    }
+
+    MessageDialog {
+        id: aboutDialog
+        icon: StandardIcon.Information
+        title: qsTr("About")
+        text: "Qt Quick UI Forms"
+        informativeText: qsTr("This example demonstrates how to separate the "
+                              + "implementation of an application from the UI "
+                              + "using ui.qml files.")
+    }
+}
+

doc/examples/uiforms/qml.qrc

@@ -0,0 +1,14 @@
+<RCC>
+    <qresource prefix="/">
+        <file>main.qml</file>
+        <file>MainForm.ui.qml</file>
+        <file>CustomerModelSingleton.qml</file>
+        <file>Settings.qml</file>
+        <file>SettingsForm.ui.qml</file>
+        <file>Notes.qml</file>
+        <file>NotesForm.ui.qml</file>
+        <file>History.qml</file>
+        <file>HistoryTableView.qml</file>
+        <file>CustomerTableView.qml</file>
+    </qresource>
+</RCC>

doc/examples/uiforms/uiforms.pro

@@ -0,0 +1,15 @@
+TEMPLATE = app
+
+QT += qml quick widgets
+
+SOURCES += main.cpp
+
+RESOURCES += qml.qrc
+
+# Additional import path used to resolve QML modules in Qt Creator's code model
+QML_IMPORT_PATH =
+
+# Default rules for deployment.
+include(deployment.pri)
+
+DISTFILES +=

doc/src/overview/creator-tutorials.qdoc

@@ -51,6 +51,14 @@
             Learn how to create a Qt Quick application using Qt Quick Controls
             for Android and iOS devices.
 
+       \li \l{Using Qt Quick UI Forms}
+
+            Learn how to develop a Qt Quick application by using UI forms.
+            UI forms are split into \e .qml and \e .js files that contain the
+            business logic, and \e .ui.qml files that only contain the purely
+            declarative description of the UI. Note that some of the described
+            features are only available in the commercial version of \QC.
+
     \endlist
 
 */

doc/src/projects/creator-projects-overview.qdoc

@@ -24,7 +24,7 @@
 
 /*!
     \contentspage {Qt Creator Manual}
-    \previouspage creator-mobile-app-tutorial.html
+    \previouspage {Using Qt Quick UI Forms}
     \page creator-project-managing.html
     \nextpage creator-project-creating.html
 

doc/src/qtcreator.qdoc

@@ -139,6 +139,7 @@
                 \li \l{Creating a Qt Quick Application}
                 \li \l{Creating a Qt Widget Based Application}
                 \li \l{Creating a Mobile Application}
+                \li \l{Using Qt Quick UI Forms}
             \endlist
         \endlist
         \li \l{Managing Projects}

doc/src/qtquick/creator-mobile-app-tutorial.qdoc

@@ -26,7 +26,7 @@
     \contentspage {Qt Creator Manual}
     \previouspage creator-writing-program.html
     \page creator-mobile-app-tutorial.html
-    \nextpage creator-project-managing.html
+    \nextpage {Using Qt Quick UI Forms}
 
     \title Creating a Mobile Application
 

doc/src/qtquick/qtquick-app-tutorial.qdoc

@@ -43,6 +43,9 @@
     For more information about using \QMLD, see
     \l{Developing Qt Quick Applications}.
 
+    For tutorials that describe using Qt Quick Controls, see
+    \l{Qt Quick Text Editor Guide} and \l{Qt Quick Controls - UI Forms}.
+
     \section1 Creating the Project
 
     \list 1

doc/src/qtquick/qtquick-uiforms-tutorial.qdoc

@@ -0,0 +1,516 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing
+**
+** This file is part of Qt Creator
+**
+**
+** GNU Free Documentation License
+**
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of this
+** file.
+**
+**
+****************************************************************************/
+/*!
+    \contentspage {Qt Creator Manual}
+    \previouspage creator-mobile-app-tutorial.html
+    \example uiforms
+    \nextpage creator-project-managing.html
+
+    \title Using Qt Quick UI Forms
+
+    \commercial
+
+    This tutorial describes how to develop an application that uses \e ui.qml
+    files to separate the application logic from the UI. The tutorial uses \QMLD
+    to implement a simplified version of the \l{Qt Quick Controls - UI Forms}
+    {UI Forms example}, which provides an interface to a customer database and
+    is purely written in QML and JavaScript.
+
+    \note Some of the described features are only available in the commercial
+    version of \QC.
+
+    \image qmldesigner-uiforms-example.png
+
+    \e {UI forms} consist of \e .qml and \e .js files that implement the
+    business logic, and corresponding \e .ui.qml files that only contain the
+    purely declarative description of the UI. The \e .ui.qml files should be
+    edited only in the \uicontrol Design mode of \QC. However, \QMLD does not
+    fully support all QML controls, such as the TableView, so you sometimes need
+    to edit UI forms also in the \uicontrol Edit mode. You can keep this to the
+    minimum by creating custom QML types that you edit in the \uicontrol Edit
+    mode.
+
+    \section1 Creating the UI Forms Project
+
+    \list 1
+
+        \li Select \uicontrol File > \uicontrol {New File or Project} >
+            \uicontrol Application > \uicontrol {Qt Quick Controls Application}
+            > \uicontrol Choose.
+
+        \li In the \uicontrol Name field, type \b uiforms.
+
+        \li In the \uicontrol {Create in} field, enter the path for the project
+            files and then click \uicontrol Next (or \uicontrol Continue on
+            OS X).
+
+        \li In the \uicontrol {Minimal required Qt version} field, select
+            \uicontrol {Qt 5.4}, or later.
+
+        \li Select \l{glossary-buildandrun-kit}{kits} for your project and click
+            \uicontrol{Next}.
+
+            \note Kits are listed if they have been specified in
+            \uicontrol Tools > \uicontrol Options > \uicontrol {Build & Run} >
+            \uicontrol Kits (on Windows and Linux) or in \uicontrol {Qt Creator}
+            > \uicontrol Preferences \uicontrol {Build & Run} > \uicontrol Kits
+            (on OS X).
+
+        \li Review the project settings, and click \uicontrol Finish (or
+            \uicontrol Done on OS X).
+
+    \endlist
+
+    \QC generates a default UI file, \e MainForm.ui.qml, that you can modify to
+    create the main view of the application.
+
+    \section1 Creating the UI Forms Main View
+
+    The main view of the application displays a customer list in a table view
+    and detailed information about the selected customer in a tab view.
+
+    \image qmldesigner-uiforms-example-main-view.png
+
+    To create the main view:
+
+    \list 1
+
+        \li In the \uicontrol Projects view (1), double-click the
+            \e MainForm.ui.qml file to open it in \QMLD.
+
+        \li In the \uicontrol Navigator (2), select the \uicontrol RowLayout and
+            press \key Delete to delete it.
+
+        \li In \uicontrol Library > \uicontrol {QML Types} (3), select
+            \uicontrol SplitView and drag and drop it to the \uicontrol Item in
+            the navigator.
+
+        \li Select the split view in the navigator, then select the
+            \uicontrol Layout tab in \uicontrol Properties (4), and then click
+            the \inlineimage qmldesigner-anchor-fill-screen.png
+            (\uicontrol {Fill to Parent}) button to anchor the split view to the
+            item.
+
+        \li Drag and drop a \uicontrol TableView and a \uicontrol {Tab View}
+            from the library to the split view in the navigator.
+
+        \li Select the \inlineimage qmldesigner-export-item-button.png
+            (\uicontrol Export) button in the navigator to export the table view
+            as a property.
+
+        \li Right-click \uicontrol TabView to open the context menu and select
+            \uicontrol {Add Tab} to create a Tab element.
+
+            \QC creates the element as a separate QML file with the name that
+            you enter in the dialog. By default, the element is called
+            \uicontrol Tab.
+
+        \li Select the tab in the navigator and enter \b {Customer Settings} in
+            the \uicontrol Title field in the properties.
+
+        \li Press \key Ctrl+C to copy the tab to the clipboard, and then press
+            \key Ctrl+V twice to create two more tabs that you name
+            \b {Customer Notes} and \b {Customer History}. \QC uses the \l Tab
+            type in the \e MainForm.ui.qml file. You will create separate UI
+            forms for the tab contents later.
+
+    \endlist
+
+    \section2 Editing the Table View
+
+    \QMLD does not support adding columns to TableView types, and therefore, you
+    must use the code editor to add them. To keep editing the \e MainForm.ui.qml
+    file in the \uicontrol Edit mode to the minimum, move the TableView type to
+    a separate QML file called \e CustomerTableView.qml:
+
+    \list 1
+
+        \li Click \uicontrol Edit to open \e MainForm.ui.qml in \uicontrol Edit
+            mode.
+
+        \li To move the TableView type to a separate QML file, right-click it
+            and select \uicontrol Refactoring >
+            \uicontrol {Move Component into Separate File}.
+
+        \li Add the code from the \l {uiforms/CustomerTableView.qml}
+            {CustomerTableView.qml} example file to the file that \QC creates
+            for you.
+
+    \endlist
+
+    \section1 Implementing the Application Logic for the Main View
+
+    The new project wizard adds boilerplate code to the \e main.qml file to
+    create menu items and push buttons. Modify the boilerplate code by removing
+    obsolete code and by adding new code. You removed the push buttons from the
+    UI Form, so you also need to remove the corresponding code from
+    \e main.qml (or the application cannot be built).
+
+    You will want to keep the dialog box and menu bar, but change their
+    contents, as instructed later.
+
+    Edit the \e main.qml file in the code editor, as described in the following
+    sections.
+
+    \section2 Specifying Main View Size
+
+    The wizard creates an ApplicationWindow type and a MainForm type that
+    specify the application main view. Enter the application name as the
+    value of the \c title property.
+
+    Clean up the MainForm code by removing the obsolete lines that call
+    functions when buttons are clicked:
+
+    \badcode
+    MainForm {
+        anchors.fill: parent
+        button1.onClicked: messageDialog.show(qsTr("Button 1 pressed"))
+        button2.onClicked: messageDialog.show(qsTr("Button 2 pressed"))
+    }
+    \endcode
+
+    Remove the \c width and \c height properties from the ApplicationWindow
+    type and use a Layout type in the MainForm type to set the minimum and
+    preferred size of the main view.
+
+    To use the Layouts, import QtQuick Layouts:
+
+    \quotefromfile uiforms/main.qml
+    \skipto QtQuick.Layouts
+    \printline Layouts
+
+    Then specify the following properties for the MainForm:
+
+    \skipto MainForm
+    \printuntil Layout.preferredHeight
+
+    \section2 Creating the Table View Model
+
+    Use a list model to display customer data in the table view. Because the
+    list model is accessed from several different \e .qml files, access it
+    through a singleton type defined in \e CustomerModelSingleton.qml and
+    registered in \e main.cpp. This way, you do not have to rely on the QML
+    context scoping rules to access the list model.
+
+    \list 1
+
+        \li In the \uicontrol Projects view, right-click \uicontrol qml.qrc and
+            select \uicontrol {Add New} > \uicontrol Qt >
+            \uicontrol {QML File (Qt Quick 2)} to create the
+            \e CustomerModelSingleton.qml file and to add it to the project.
+
+        \li Copy the implementation from \l{uiforms/CustomerModelSingleton.qml}
+            {CustomerModelSingleton.qml}.
+
+        \li Add the following code to the MainForm in \e main.qml to access the
+            list model:
+
+            \quotefromfile uiforms/main.qml
+            \skipto tableView1.model: CustomerModel
+            \printuntil tableView1.selection
+
+        \li To register the singleton type in the \e main.cpp file, include the
+            Qt QML module and call the \c qmlRegisterSingletonType() function in
+            the initialization function:
+
+            \quotefromfile uiforms/main.cpp
+            \dots
+            \skipto QtQml
+            \printuntil "CustomerModel");
+
+        \li To use the registered singleton type in \e main.qml, you must import
+            the singleton type:
+
+            \quotefromfile uiforms/main.qml
+            \skipto my.customermodel.singleton
+            \printline 1.0
+
+    \endlist
+
+    \section1 Creating Tabs
+
+    You can use the new file wizard to create UI forms that specify tab
+    contents and functionality. You set the QML files as sources for the tabs
+    in the \e MainForm.ui.qml file and modify the corresponding UI forms in the
+    \uicontrol Design mode.
+
+    \section2 Creating UI Forms for Tab Contents
+
+    To create UI forms for the tab contents:
+
+    \list 1
+
+        \li Select \uicontrol File > \uicontrol {New File or Project} >
+            \uicontrol Qt > \uicontrol {QtQuick UI File} > \uicontrol Choose.
+
+        \li In the \uicontrol {Component name} field, enter \b Settings.
+
+        \li Click \uicontrol Next.
+
+        \li Click \uicontrol Finish to create the UI form,
+            \e SettingsForm.ui.qml, and a corresponding QML file,
+            \e Settings.qml.
+
+    \endlist
+
+    Create the UI form, \e NotesForm.ui.qml, and the corresponding QML file,
+    \e Notes.qml, for the notes tab in the same way. You will not need an
+    \e ui.qml file for the history tab, so you will create the QML file for it
+    later.
+
+    \section2 Creating the Settings Tab
+
+    The \uicontrol {Customer Settings} tab contains information about the
+    selected user.
+
+    \image qmldesigner-uiforms-example-settings-tab.png
+
+    To create the tab contents:
+
+    \list 1
+
+        \li Double-click \e SettingsForm.ui.qml in the \uicontrol Projects
+            view to open it for editing in the \uicontrol Design mode.
+
+        \li Select \uicontrol Item in the \uicontrol Navigator and enter
+            \b content in the \uicontrol Id field in \uicontrol Properties.
+
+        \li In \uicontrol Library, select \uicontrol Imports >
+            \uicontrol {Add Import} and import Qt Quick Controls and Layouts to
+            make the QML types in those modules visible in the library.
+
+        \li Drag and drop a \uicontrol {Grid Layout} from the library to the
+            \b content item in the navigator.
+
+        \li Select \uicontrol Layout > \uicontrol Top, \uicontrol Left, and
+            \uicontrol Right buttons to anchor the grid layout to the parent.
+
+        \li In the \uicontrol Margin fields for the anchors, set the margins
+            to \b 12.
+
+        \li In \uicontrol Properties, set \uicontrol {Column spacing} and
+            \uicontrol {Row spacing} to \b 8, \uicontrol Columns to \b 3, and
+            \uicontrol Rows to \b 4. If you add more fields, add the necessary
+            amount of rows.
+
+        \li Drag and drop four \uicontrol Label controls, a
+            \uicontrol {Combo Box}, and three \uicontrol {Text Field} controls
+            from the library to the navigator.
+
+        \li Use the down arrow in the navigator to move one label down to the
+            position above the last text field.
+
+        \li In the properties, change the label text for each field in the
+            \uicontrol Text field. You need the following labels: \b Title,
+            \b {First Name}, \b {Last Name}, and \b {Customer Id}.
+
+        \li In the properties, change the placeholder text for each text field
+            in the \uicontrol {Placeholder text} field to be the same as the
+            field label.
+
+        \li Select the customer ID text field, then select \uicontrol Layout
+            in properties and set \uicontrol {Column span} to 3 and check
+            \uicontrol {Fill width} to make the ID field span the length of
+            the grid layout.
+
+        \li Drag and drop a \uicontrol {Row Layout} from the library to the
+            \b content item in the navigator and click on it.
+
+        \li Reset the height of the row layout in properties.
+
+            \image qmldesigner-uiforms-reset-height.png
+
+        \li Select \uicontrol Layout > \uicontrol Bottom and \uicontrol Right
+            buttons to anchor the row layout to the parent.
+
+        \li In the \uicontrol Margin fields for the anchors, set the margins
+            to \b 12.
+
+        \li Drag and drop two \uicontrol Button controls from the library to the
+            row layout in the navigator.
+
+        \li In the properties, change the button labels in the \uicontrol Text
+            field to \b Save and \b Cancel.
+
+        \li Select \uicontrol Layout and > \uicontrol {Fill width} and
+            \uicontrol {Fill height} in properties for each button to have the
+            buttons fill the row layout.
+
+        \li In the navigator, select \uicontrol Export for each field to export
+            the field IDs as properties. The following items should be exported,
+            so that they can be referred to in \e Settings.qml:
+
+            \quotefromfile uiforms/SettingsForm.ui.qml
+            \skipto property
+            \printuntil title
+
+    \endlist
+
+    \section2 Creating the Notes Tab
+
+    The \uicontrol {Customer Notes} tab contains a text area for entering notes
+    about the selected customer and buttons for saving or canceling the changes.
+
+    To create the tab contents:
+
+    \list 1
+
+        \li Double-click \e NotesForm.ui.qml in the \uicontrol Projects
+            view to open it for editing in the \uicontrol Design mode.
+
+        \li Select \uicontrol Item in the \uicontrol Navigator and enter
+            \b content in the \uicontrol Id field in \uicontrol Properties.
+
+        \li In \uicontrol Library, select \uicontrol Imports >
+            \uicontrol {Add Import} and import Qt Quick Controls and Layouts.
+
+        \li Drag and drop a \uicontrol {Column Layout} from the library to the
+            \b content item in the navigator.
+
+        \li Select \uicontrol Layout > \uicontrol Top, \uicontrol Left, and
+            \uicontrol Right buttons to anchor the grid layout to the parent
+            and set the margins to \b 12.
+
+        \li Drag and drop a \uicontrol {Text Area} from the library to the
+            column layout.
+
+        \li Select \uicontrol Layout and > \uicontrol {Fill width} and
+            \uicontrol {Fill height} in properties to have the text area fill
+            the column layout.
+
+        \li Create the \uicontrol Save and \uicontrol Cancel buttons as
+            instructed in \l {Creating the Settings Tab}. You can also copy and
+            paste the row layout from SettingsForm.ui.qml.
+
+        \li In the navigator, select \uicontrol Export for each field to export
+            the field IDs as properties. The following items should be exported,
+            so that they can be referred to in \e Notes.qml:
+
+            \quotefromfile uiforms/NotesForm.ui.qml
+            \skipto property
+            \printuntil save
+
+    \endlist
+
+    \section2 Creating the History Tab
+
+    The \uicontrol {Customer History} tab contains a table view that displays
+    the transactions performed by the customer. Create a custom HistoryTableView
+    type that you can edit in the \uicontrol Edit mode. For the history tab, you
+    do not need an \e ui.qml file at all.
+
+    To create the history tab:
+
+    \list 1
+
+        \li In the \uicontrol Projects view, right-click \uicontrol qml.qrc and
+            select \uicontrol {Add New} > \uicontrol Qt >
+            \uicontrol {QML File (Qt Quick 2)} to create the
+            \e HistoryTableView.qml file and to add it to the project.
+
+        \li Copy the implementation from \l{uiforms/HistoryTableView.qml}
+            {HistoryTableView.qml}.
+
+        \li Add the code from the example \l{uiforms/History.qml}{History.qml}
+            file to your \e History.qml file to access the code model.
+
+    \endlist
+
+    \section1 Adding Tab Functionality
+
+    Add functions for displaying data from the customer model in the tabs. You
+    have already created the files that you need. You now need to copy the
+    implementation for the settings tab from the \l {uiforms/Settings.qml}
+    {Settings.qml} file and for the notes tab from the \l {uiforms/Notes.qml}
+    {Notes.qml} file.
+
+    To display the tab contents in the main view, set the QML files as sources
+    for the tabs in the \uicontrol Design mode. Select the settings tab in the
+    \uicontrol Navigator and specify for example \e Settings.qml in the
+    \uicontrol Source field in the \uicontrol Properties view. Similarly,
+    specify the sources for the notes and history tabs.
+
+    You can then remove the \e Tab.qml file that the wizard generated but that
+    you no longer need by selecting \uicontrol {Remove File} in the context
+    menu.
+
+    \section1 Creating Menus
+
+    The wizard adds a menu bar to the \e main.qml file that contains a
+    \uicontrol File menu with the \uicontrol Open and \uicontrol Exit menu
+    items. Keep the menu and the \uicontrol Exit menu item, and add the
+    \uicontrol Edit and \uicontrol Help menus with standard menu items.
+
+    The wizard creates the following code:
+
+    \badcode
+    menuBar: MenuBar {
+        Menu {
+            title: qsTr("&File")
+            MenuItem {
+                text: qsTr("&Open")
+                onTriggered: messageDialog.show(qsTr("Open action triggered"));
+            }
+            MenuItem {
+                text: qsTr("E&xit")
+                onTriggered: Qt.quit();
+            }
+        }
+    }
+    \endcode
+
+    Remove the \uicontrol Open menu item and add the following code to create
+    the new menus:
+
+    \quotefromfile uiforms/main.qml
+    \skipto menuBar
+    \printuntil activeFocusItem.paste
+    \printuntil }
+
+    \section1 Creating Dialogs
+
+    \image qmldesigner-uiforms-example-about-dialog.png
+
+    The wizard creates a message box in the \e main.qml file that you should
+    turn into an \uicontrol About dialog for the purpose of this example:
+
+    \badcode
+    MessageDialog {
+        id: messageDialog
+        title: qsTr("May I have your attention, please?")
+
+        function show(caption) {
+            messageDialog.text = caption;
+            messageDialog.open();
+        }
+    \endcode
+
+    Modify the code created by the wizard to add an icon and some text:
+
+    \quotefromfile uiforms/main.qml
+    \skipto MessageDialog
+    \printuntil }
+
+    Enable access to the \uicontrol About dialog from the \uicontrol Help menu
+    that you create next.
+
+    \section1 Running the Application
+
+    The application is complete and ready to be run on the desktop or deployed
+    to a device. To run the application, press \key {Ctrl+R}.
+*/