feedc0de/qt-creator
1
0
Fork 0
forked from qt-creator/qt-creator
Code Pull Requests Activity

Doc: add UI Forms tutorial

Browse Source 
Based on the Qt Quick Controls UI Forms example.

Change-Id: Iec42b7559161f980e4f482c63bfc40a22f5e77f8
Reviewed-by: Tim Jenssen <tim.jenssen@theqtcompany.com>
This commit is contained in:
Leena Miettinen
2015-06-26 14:40:35 +02:00
parent 59b57518f3
commit 36173e25ff
26 changed files with 1607 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
doc/config/qtcreator-project.qdocconf
View File

@@ -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

130
doc/examples/uiforms/CustomerModelSingleton.qml Normal file
View File

@@ -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$"
}
}

68
doc/examples/uiforms/CustomerTableView.qml Normal file
View File

@@ -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
}
}

73
doc/examples/uiforms/History.qml Normal file
View File

@@ -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()
}

72
doc/examples/uiforms/HistoryTableView.qml Normal file
View File

@@ -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 {
}
}

86
doc/examples/uiforms/MainForm.ui.qml Normal file
View File

@@ -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"
}
}
}
}

74
doc/examples/uiforms/Notes.qml Normal file
View File

@@ -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()
}

93
doc/examples/uiforms/NotesForm.ui.qml Normal file
View File

@@ -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
}
}
}

86
doc/examples/uiforms/Settings.qml Normal file
View File

@@ -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()
}

152
doc/examples/uiforms/SettingsForm.ui.qml Normal file
View File

@@ -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
}
}
}

27
doc/examples/uiforms/deployment.pri Normal file
View File

@@ -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)

56
doc/examples/uiforms/main.cpp Normal file
View File

@@ -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();
}

130
doc/examples/uiforms/main.qml Normal file
View File

@@ -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.")
}
}

14
doc/examples/uiforms/qml.qrc Normal file
View File

@@ -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>

15
doc/examples/uiforms/uiforms.pro Normal file
View File

@@ -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 +=

BIN
doc/images/qmldesigner-uiforms-example-about-dialog.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

BIN
doc/images/qmldesigner-uiforms-example-main-view.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
doc/images/qmldesigner-uiforms-example-settings-tab.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
doc/images/qmldesigner-uiforms-example.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
doc/images/qmldesigner-uiforms-reset-height.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

8
doc/src/overview/creator-tutorials.qdoc
View File

@@ -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
*/

2
doc/src/projects/creator-projects-overview.qdoc
View File

@@ -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

1
doc/src/qtcreator.qdoc
View File

@@ -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}

2
doc/src/qtquick/creator-mobile-app-tutorial.qdoc
View File

@@ -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

3
doc/src/qtquick/qtquick-app-tutorial.qdoc
View File

@@ -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

516
doc/src/qtquick/qtquick-uiforms-tutorial.qdoc Normal file
View File

@@ -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}.
*/