Improve chattutorial example

- Use modern QML type registration.
- Fix qmllint warnings.
- Tidy up code.
- Update copyright year.

Fixes: QTBUG-119986
Change-Id: Ibb47c929a14cd0e786acb7c7496e6cce34f624df
Reviewed-by: Ulf Hermann <[email protected]>

11 files changed, 63 insertions, 38 deletions

diff --git a/examples/quickcontrols/chattutorial/chapter4/CMakeLists.txt b/examples/quickcontrols/chattutorial/chapter4/CMakeLists.txt
index a962c10a53..0181c2dee8 100644
--- a/examples/quickcontrols/chattutorial/chapter4/CMakeLists.txt
+++ b/examples/quickcontrols/chattutorial/chapter4/CMakeLists.txt
@@ -1,4 +1,4 @@
-# Copyright (C) 2022 The Qt Company Ltd.
+# Copyright (C) 2023 The Qt Company Ltd.
 # SPDX-License-Identifier: BSD-3-Clause
 
 cmake_minimum_required(VERSION 3.16)
@@ -30,11 +30,11 @@ target_link_libraries(chattutorial-chapter4 PRIVATE
 
 qt_policy(SET QTP0001 NEW)
 qt_add_qml_module(chattutorial-chapter4
-    URI chapter4
+    URI chattutorial
     QML_FILES
         "ContactPage.qml"
         "ConversationPage.qml"
-        "main.qml"
+        "Main.qml"
     RESOURCES
         "images/Albert_Einstein.png"
         "images/[email protected]"
diff --git a/examples/quickcontrols/chattutorial/chapter4/ContactPage.qml b/examples/quickcontrols/chattutorial/chapter4/ContactPage.qml
index 739d0b5402..2ed2243289 100644
--- a/examples/quickcontrols/chattutorial/chapter4/ContactPage.qml
+++ b/examples/quickcontrols/chattutorial/chapter4/ContactPage.qml
@@ -1,10 +1,12 @@
-// Copyright (C) 2017 The Qt Company Ltd.
+// Copyright (C) 2023 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
 
+pragma ComponentBehavior: Bound
+
 import QtQuick
 import QtQuick.Controls
 
-import io.qt.examples.chattutorial
+import chattutorial
 
 Page {
     id: root
@@ -27,15 +29,21 @@ Page {
         spacing: 20
         model: SqlContactModel {}
         delegate: ItemDelegate {
+            id: contactDelegate
             text: model.display
             width: listView.width - listView.leftMargin - listView.rightMargin
             height: avatar.implicitHeight
             leftPadding: avatar.implicitWidth + 32
+
+            // Use "model" rather than the specific "display" role, because it
+            // would conflict with the display property of ItemDelegate.
+            required property var model
+
             onClicked: root.StackView.view.push("ConversationPage.qml", { inConversationWith: model.display })
 
             Image {
                 id: avatar
-                source: "images/" + model.display.replace(" ", "_") + ".png"
+                source: "images/" + contactDelegate.model.display.replace(" ", "_") + ".png"
             }
         }
     }
diff --git a/examples/quickcontrols/chattutorial/chapter4/ConversationPage.qml b/examples/quickcontrols/chattutorial/chapter4/ConversationPage.qml
index ef5b959aec..44c39b40bd 100644
--- a/examples/quickcontrols/chattutorial/chapter4/ConversationPage.qml
+++ b/examples/quickcontrols/chattutorial/chapter4/ConversationPage.qml
@@ -1,11 +1,13 @@
-// Copyright (C) 2017 The Qt Company Ltd.
+// Copyright (C) 2023 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
 
+pragma ComponentBehavior: Bound
+
 import QtQuick
 import QtQuick.Layouts
 import QtQuick.Controls
 
-import io.qt.examples.chattutorial
+import chattutorial
 
 Page {
     id: root
@@ -23,7 +25,7 @@ Page {
 
         Label {
             id: pageTitle
-            text: inConversationWith
+            text: root.inConversationWith
             font.pixelSize: 20
             anchors.centerIn: parent
         }
@@ -42,34 +44,40 @@ Page {
             verticalLayoutDirection: ListView.BottomToTop
             spacing: 12
             model: SqlConversationModel {
-                recipient: inConversationWith
+                recipient: root.inConversationWith
             }
             delegate: Column {
+                id: conversationDelegate
                 anchors.right: sentByMe ? listView.contentItem.right : undefined
                 spacing: 6
 
-                readonly property bool sentByMe: model.recipient !== "Me"
+                required property string author
+                required property string recipient
+                required property date timestamp
+                required property string message
+                readonly property bool sentByMe: recipient !== "Me"
 
                 Row {
                     id: messageRow
                     spacing: 6
-                    anchors.right: sentByMe ? parent.right : undefined
+                    anchors.right: conversationDelegate.sentByMe ? parent.right : undefined
 
                     Image {
                         id: avatar
-                        source: !sentByMe ? "images/" + model.author.replace(" ", "_") + ".png" : ""
+                        source: !conversationDelegate.sentByMe
+                            ? "images/" + conversationDelegate.author.replace(" ", "_") + ".png" : ""
                     }
 
                     Rectangle {
                         width: Math.min(messageText.implicitWidth + 24,
-                            listView.width - (!sentByMe ? avatar.width + messageRow.spacing : 0))
+                            listView.width - (!conversationDelegate.sentByMe ? avatar.width + messageRow.spacing : 0))
                         height: messageText.implicitHeight + 24
-                        color: sentByMe ? "lightgrey" : "steelblue"
+                        color: conversationDelegate.sentByMe ? "lightgrey" : "steelblue"
 
                         Label {
                             id: messageText
-                            text: model.message
-                            color: sentByMe ? "black" : "white"
+                            text: conversationDelegate.message
+                            color: conversationDelegate.sentByMe ? "black" : "white"
                             anchors.fill: parent
                             anchors.margins: 12
                             wrapMode: Label.Wrap
@@ -79,9 +87,9 @@ Page {
 
                 Label {
                     id: timestampText
-                    text: Qt.formatDateTime(model.timestamp, "d MMM hh:mm")
+                    text: Qt.formatDateTime(conversationDelegate.timestamp, "d MMM hh:mm")
                     color: "lightgrey"
-                    anchors.right: sentByMe ? parent.right : undefined
+                    anchors.right: conversationDelegate.sentByMe ? parent.right : undefined
                 }
             }
 
@@ -107,8 +115,8 @@ Page {
                     text: qsTr("Send")
                     enabled: messageField.length > 0
                     onClicked: {
-                        listView.model.sendMessage(inConversationWith, messageField.text);
-                        messageField.text = "";
+                        listView.model.sendMessage(root.inConversationWith, messageField.text)
+                        messageField.text = ""
                     }
                 }
             }
diff --git a/examples/quickcontrols/chattutorial/chapter4/main.qml b/examples/quickcontrols/chattutorial/chapter4/Main.qml
index da080e3a45..bb968e9f7a 100644
--- a/examples/quickcontrols/chattutorial/chapter4/main.qml
+++ b/examples/quickcontrols/chattutorial/chapter4/Main.qml
@@ -1,7 +1,6 @@
-// Copyright (C) 2017 The Qt Company Ltd.
+// Copyright (C) 2023 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
 
-import QtQuick
 import QtQuick.Controls
 
 ApplicationWindow {
diff --git a/examples/quickcontrols/chattutorial/chapter4/chapter4.pro b/examples/quickcontrols/chattutorial/chapter4/chapter4.pro
index 399b3506c2..4f40fd726b 100644
--- a/examples/quickcontrols/chattutorial/chapter4/chapter4.pro
+++ b/examples/quickcontrols/chattutorial/chapter4/chapter4.pro
@@ -1,7 +1,11 @@
 TEMPLATE = app
 
 QT += qml quick sql
-CONFIG += c++11
+CONFIG += c++11 qmltypes
+
+QML_IMPORT_PATH = $$pwd/.
+QML_IMPORT_NAME = chattutorial
+QML_IMPORT_MAJOR_VERSION = 1
 
 HEADERS += sqlcontactmodel.h \
     sqlconversationmodel.h
@@ -25,8 +29,9 @@ resources.files = \
     images/[email protected] \
     images/[email protected] \
     images/[email protected] \
-    main.qml
-resources.prefix = qt/qml/chapter4/
+    Main.qml \
+    qmldir
+resources.prefix = qt/qml/chattutorial/
 RESOURCES += resources \
     qtquickcontrols2.conf
 
diff --git a/examples/quickcontrols/chattutorial/chapter4/main.cpp b/examples/quickcontrols/chattutorial/chapter4/main.cpp
index 4c7289deb3..bcb6c1e923 100644
--- a/examples/quickcontrols/chattutorial/chapter4/main.cpp
+++ b/examples/quickcontrols/chattutorial/chapter4/main.cpp
@@ -1,4 +1,4 @@
-// Copyright (C) 2017 The Qt Company Ltd.
+// Copyright (C) 2023 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
 
 #include <QtCore>
@@ -7,9 +7,6 @@
 #include <QSqlError>
 #include <QtQml>
 
-#include "sqlcontactmodel.h"
-#include "sqlconversationmodel.h"
-
 static void connectToDatabase()
 {
     QSqlDatabase database = QSqlDatabase::database();
@@ -37,13 +34,10 @@ int main(int argc, char *argv[])
 {
     QGuiApplication app(argc, argv);
 
-    qmlRegisterType<SqlContactModel>("io.qt.examples.chattutorial", 1, 0, "SqlContactModel");
-    qmlRegisterType<SqlConversationModel>("io.qt.examples.chattutorial", 1, 0, "SqlConversationModel");
-
     connectToDatabase();
 
     QQmlApplicationEngine engine;
-    engine.load(QUrl(QStringLiteral("qrc:/qt/qml/chapter4/main.qml")));
+    engine.loadFromModule("chattutorial", "Main");
     if (engine.rootObjects().isEmpty())
         return -1;
 
diff --git a/examples/quickcontrols/chattutorial/chapter4/qmldir b/examples/quickcontrols/chattutorial/chapter4/qmldir
new file mode 100644
index 0000000000..27f99a4777
--- /dev/null
+++ b/examples/quickcontrols/chattutorial/chapter4/qmldir
@@ -0,0 +1,5 @@
+module chattutorial
+ContactPage 1.0 ContactPage.qml
+ConversationPage 1.0 ConversationPage.qml
+Main 1.0 Main.qml
+typeinfo chapter4.qmltypes
diff --git a/examples/quickcontrols/chattutorial/chapter4/sqlcontactmodel.cpp b/examples/quickcontrols/chattutorial/chapter4/sqlcontactmodel.cpp
index cce8cffbb8..189924deec 100644
--- a/examples/quickcontrols/chattutorial/chapter4/sqlcontactmodel.cpp
+++ b/examples/quickcontrols/chattutorial/chapter4/sqlcontactmodel.cpp
@@ -1,4 +1,4 @@
-// Copyright (C) 2017 The Qt Company Ltd.
+// Copyright (C) 2023 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
 
 #include "sqlcontactmodel.h"
diff --git a/examples/quickcontrols/chattutorial/chapter4/sqlcontactmodel.h b/examples/quickcontrols/chattutorial/chapter4/sqlcontactmodel.h
index a6d24a4774..c7f9a154eb 100644
--- a/examples/quickcontrols/chattutorial/chapter4/sqlcontactmodel.h
+++ b/examples/quickcontrols/chattutorial/chapter4/sqlcontactmodel.h
@@ -1,13 +1,17 @@
-// Copyright (C) 2017 The Qt Company Ltd.
+// Copyright (C) 2023 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
 
 #ifndef SQLCONTACTMODEL_H
 #define SQLCONTACTMODEL_H
 
+#include <QQmlEngine>
 #include <QSqlQueryModel>
 
 class SqlContactModel : public QSqlQueryModel
 {
+    Q_OBJECT
+    QML_ELEMENT
+
 public:
     SqlContactModel(QObject *parent = nullptr);
 };
diff --git a/examples/quickcontrols/chattutorial/chapter4/sqlconversationmodel.cpp b/examples/quickcontrols/chattutorial/chapter4/sqlconversationmodel.cpp
index 1a1594b094..5be01de52c 100644
--- a/examples/quickcontrols/chattutorial/chapter4/sqlconversationmodel.cpp
+++ b/examples/quickcontrols/chattutorial/chapter4/sqlconversationmodel.cpp
@@ -1,4 +1,4 @@
-// Copyright (C) 2017 The Qt Company Ltd.
+// Copyright (C) 2023 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
 
 #include "sqlconversationmodel.h"
diff --git a/examples/quickcontrols/chattutorial/chapter4/sqlconversationmodel.h b/examples/quickcontrols/chattutorial/chapter4/sqlconversationmodel.h
index 8a3cdd4c43..b4917c0eff 100644
--- a/examples/quickcontrols/chattutorial/chapter4/sqlconversationmodel.h
+++ b/examples/quickcontrols/chattutorial/chapter4/sqlconversationmodel.h
@@ -1,14 +1,16 @@
-// Copyright (C) 2017 The Qt Company Ltd.
+// Copyright (C) 2023 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
 
 #ifndef SQLCONVERSATIONMODEL_H
 #define SQLCONVERSATIONMODEL_H
 
+#include <QQmlEngine>
 #include <QSqlTableModel>
 
 class SqlConversationModel : public QSqlTableModel
 {
     Q_OBJECT
+    QML_ELEMENT
     Q_PROPERTY(QString recipient READ recipient WRITE setRecipient NOTIFY recipientChanged)
 
 public: