diff --git a/doc/config/qtcreator-project.qdocconf b/doc/config/qtcreator-project.qdocconf index 598bd327358..fbe1054e0df 100644 --- a/doc/config/qtcreator-project.qdocconf +++ b/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 diff --git a/doc/examples/uiforms/CustomerModelSingleton.qml b/doc/examples/uiforms/CustomerModelSingleton.qml new file mode 100644 index 00000000000..1a80ea083e8 --- /dev/null +++ b/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$" + } +} diff --git a/doc/examples/uiforms/CustomerTableView.qml b/doc/examples/uiforms/CustomerTableView.qml new file mode 100644 index 00000000000..a938fc59ebf --- /dev/null +++ b/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 + } +} diff --git a/doc/examples/uiforms/History.qml b/doc/examples/uiforms/History.qml new file mode 100644 index 00000000000..dfa1bfc0724 --- /dev/null +++ b/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() +} diff --git a/doc/examples/uiforms/HistoryTableView.qml b/doc/examples/uiforms/HistoryTableView.qml new file mode 100644 index 00000000000..4a33087f3f6 --- /dev/null +++ b/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 { + } +} diff --git a/doc/examples/uiforms/MainForm.ui.qml b/doc/examples/uiforms/MainForm.ui.qml new file mode 100644 index 00000000000..d0beed79871 --- /dev/null +++ b/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" + } + } + } + +} + diff --git a/doc/examples/uiforms/Notes.qml b/doc/examples/uiforms/Notes.qml new file mode 100644 index 00000000000..be6a5d75ec5 --- /dev/null +++ b/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() +} diff --git a/doc/examples/uiforms/NotesForm.ui.qml b/doc/examples/uiforms/NotesForm.ui.qml new file mode 100644 index 00000000000..edbde598a92 --- /dev/null +++ b/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 + } + } +} + diff --git a/doc/examples/uiforms/Settings.qml b/doc/examples/uiforms/Settings.qml new file mode 100644 index 00000000000..a0b70e161ea --- /dev/null +++ b/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() +} diff --git a/doc/examples/uiforms/SettingsForm.ui.qml b/doc/examples/uiforms/SettingsForm.ui.qml new file mode 100644 index 00000000000..5a86c8c7fd1 --- /dev/null +++ b/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 + } + } +} + diff --git a/doc/examples/uiforms/deployment.pri b/doc/examples/uiforms/deployment.pri new file mode 100644 index 00000000000..5441b63dc85 --- /dev/null +++ b/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) diff --git a/doc/examples/uiforms/main.cpp b/doc/examples/uiforms/main.cpp new file mode 100644 index 00000000000..86f9268177b --- /dev/null +++ b/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 +#include +#include + +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(); +} diff --git a/doc/examples/uiforms/main.qml b/doc/examples/uiforms/main.qml new file mode 100644 index 00000000000..0d6830d5e51 --- /dev/null +++ b/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.") + } +} + diff --git a/doc/examples/uiforms/qml.qrc b/doc/examples/uiforms/qml.qrc new file mode 100644 index 00000000000..a459cec0380 --- /dev/null +++ b/doc/examples/uiforms/qml.qrc @@ -0,0 +1,14 @@ + + + main.qml + MainForm.ui.qml + CustomerModelSingleton.qml + Settings.qml + SettingsForm.ui.qml + Notes.qml + NotesForm.ui.qml + History.qml + HistoryTableView.qml + CustomerTableView.qml + + diff --git a/doc/examples/uiforms/uiforms.pro b/doc/examples/uiforms/uiforms.pro new file mode 100644 index 00000000000..d11099c2b53 --- /dev/null +++ b/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 += diff --git a/doc/images/qmldesigner-uiforms-example-about-dialog.png b/doc/images/qmldesigner-uiforms-example-about-dialog.png new file mode 100644 index 00000000000..0cf6e33210c Binary files /dev/null and b/doc/images/qmldesigner-uiforms-example-about-dialog.png differ diff --git a/doc/images/qmldesigner-uiforms-example-main-view.png b/doc/images/qmldesigner-uiforms-example-main-view.png new file mode 100644 index 00000000000..099611c10fe Binary files /dev/null and b/doc/images/qmldesigner-uiforms-example-main-view.png differ diff --git a/doc/images/qmldesigner-uiforms-example-settings-tab.png b/doc/images/qmldesigner-uiforms-example-settings-tab.png new file mode 100644 index 00000000000..7c5319bc1c9 Binary files /dev/null and b/doc/images/qmldesigner-uiforms-example-settings-tab.png differ diff --git a/doc/images/qmldesigner-uiforms-example.png b/doc/images/qmldesigner-uiforms-example.png new file mode 100644 index 00000000000..01292e5e105 Binary files /dev/null and b/doc/images/qmldesigner-uiforms-example.png differ diff --git a/doc/images/qmldesigner-uiforms-reset-height.png b/doc/images/qmldesigner-uiforms-reset-height.png new file mode 100644 index 00000000000..99d748a72db Binary files /dev/null and b/doc/images/qmldesigner-uiforms-reset-height.png differ diff --git a/doc/src/overview/creator-tutorials.qdoc b/doc/src/overview/creator-tutorials.qdoc index e14391bf8c3..26c3817aee9 100644 --- a/doc/src/overview/creator-tutorials.qdoc +++ b/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 */ diff --git a/doc/src/projects/creator-projects-overview.qdoc b/doc/src/projects/creator-projects-overview.qdoc index 013243fccca..e7751703dbf 100644 --- a/doc/src/projects/creator-projects-overview.qdoc +++ b/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 diff --git a/doc/src/qtcreator.qdoc b/doc/src/qtcreator.qdoc index 9b2c51c174c..d1917e537e6 100644 --- a/doc/src/qtcreator.qdoc +++ b/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} diff --git a/doc/src/qtquick/creator-mobile-app-tutorial.qdoc b/doc/src/qtquick/creator-mobile-app-tutorial.qdoc index 56f84210f8b..27c1fc60cd5 100644 --- a/doc/src/qtquick/creator-mobile-app-tutorial.qdoc +++ b/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 diff --git a/doc/src/qtquick/qtquick-app-tutorial.qdoc b/doc/src/qtquick/qtquick-app-tutorial.qdoc index 204ce69bdae..919eade1af7 100644 --- a/doc/src/qtquick/qtquick-app-tutorial.qdoc +++ b/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 diff --git a/doc/src/qtquick/qtquick-uiforms-tutorial.qdoc b/doc/src/qtquick/qtquick-uiforms-tutorial.qdoc new file mode 100644 index 00000000000..3736777ddb3 --- /dev/null +++ b/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}. +*/