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

7 files changed, 33 insertions, 20 deletions

diff --git a/examples/quickcontrols/chattutorial/chapter3/CMakeLists.txt b/examples/quickcontrols/chattutorial/chapter3/CMakeLists.txt
index ad853842f2..de4a16803a 100644
--- a/examples/quickcontrols/chattutorial/chapter3/CMakeLists.txt
+++ b/examples/quickcontrols/chattutorial/chapter3/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)
@@ -27,11 +27,11 @@ target_link_libraries(chattutorial-chapter3 PRIVATE
 
 qt_policy(SET QTP0001 NEW)
 qt_add_qml_module(chattutorial-chapter3
-    URI chapter3
+    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/chapter3/ContactPage.qml b/examples/quickcontrols/chattutorial/chapter3/ContactPage.qml
index 88979a40b2..939d911964 100644
--- a/examples/quickcontrols/chattutorial/chapter3/ContactPage.qml
+++ b/examples/quickcontrols/chattutorial/chapter3/ContactPage.qml
@@ -1,6 +1,8 @@
-// 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
 
@@ -25,15 +27,19 @@ Page {
         spacing: 20
         model: ["Albert Einstein", "Ernest Hemingway", "Hans Gude"]
         delegate: ItemDelegate {
+            id: contactDelegate
             text: modelData
             width: listView.width - listView.leftMargin - listView.rightMargin
             height: avatar.implicitHeight
             leftPadding: avatar.implicitWidth + 32
+
+            required property string modelData
+
             onClicked: root.StackView.view.push("ConversationPage.qml", { inConversationWith: modelData })
 
             Image {
                 id: avatar
-                source: "images/" + modelData.replace(" ", "_") + ".png"
+                source: "images/" + contactDelegate.modelData.replace(" ", "_") + ".png"
             }
         }
     }
diff --git a/examples/quickcontrols/chattutorial/chapter3/ConversationPage.qml b/examples/quickcontrols/chattutorial/chapter3/ConversationPage.qml
index e61d014e6e..8f3a64485c 100644
--- a/examples/quickcontrols/chattutorial/chapter3/ConversationPage.qml
+++ b/examples/quickcontrols/chattutorial/chapter3/ConversationPage.qml
@@ -1,6 +1,8 @@
-// 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
@@ -21,7 +23,7 @@ Page {
 
         Label {
             id: pageTitle
-            text: inConversationWith
+            text: root.inConversationWith
             font.pixelSize: 20
             anchors.centerIn: parent
         }
@@ -41,28 +43,30 @@ Page {
             spacing: 12
             model: 10
             delegate: Row {
-                readonly property bool sentByMe: index % 2 == 0
-
+                id: messageDelegate
                 anchors.right: sentByMe ? listView.contentItem.right : undefined
                 spacing: 6
 
+                required property int index
+                readonly property bool sentByMe: index % 2 == 0
+
                 Rectangle {
                     id: avatar
                     width: height
                     height: parent.height
                     color: "grey"
-                    visible: !sentByMe
+                    visible: !messageDelegate.sentByMe
                 }
 
                 Rectangle {
                     width: 80
                     height: 40
-                    color: sentByMe ? "lightgrey" : "steelblue"
+                    color: messageDelegate.sentByMe ? "lightgrey" : "steelblue"
 
                     Label {
                         anchors.centerIn: parent
-                        text: index
-                        color: sentByMe ? "black" : "white"
+                        text: messageDelegate.index
+                        color: messageDelegate.sentByMe ? "black" : "white"
                     }
                 }
             }
diff --git a/examples/quickcontrols/chattutorial/chapter3/main.qml b/examples/quickcontrols/chattutorial/chapter3/Main.qml
index da080e3a45..bb968e9f7a 100644
--- a/examples/quickcontrols/chattutorial/chapter3/main.qml
+++ b/examples/quickcontrols/chattutorial/chapter3/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/chapter3/chapter3.pro b/examples/quickcontrols/chattutorial/chapter3/chapter3.pro
index 5314e2dd36..b0eebae94a 100644
--- a/examples/quickcontrols/chattutorial/chapter3/chapter3.pro
+++ b/examples/quickcontrols/chattutorial/chapter3/chapter3.pro
@@ -1,7 +1,6 @@
 TEMPLATE = app
 
 QT += qml quick
-CONFIG += c++11
 
 SOURCES += main.cpp
 
@@ -20,8 +19,9 @@ resources.files = \
     images/[email protected] \
     images/[email protected] \
     images/[email protected] \
-    main.qml
-resources.prefix = qt/qml/chapter3/
+    Main.qml \
+    qmldir
+resources.prefix = qt/qml/chattutorial/
 RESOURCES += resources \
     qtquickcontrols2.conf
 
diff --git a/examples/quickcontrols/chattutorial/chapter3/main.cpp b/examples/quickcontrols/chattutorial/chapter3/main.cpp
index 71e250bed5..73d4bf3b63 100644
--- a/examples/quickcontrols/chattutorial/chapter3/main.cpp
+++ b/examples/quickcontrols/chattutorial/chapter3/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 <QGuiApplication>
@@ -9,7 +9,7 @@ int main(int argc, char *argv[])
     QGuiApplication app(argc, argv);
 
     QQmlApplicationEngine engine;
-    engine.load(QUrl(QStringLiteral("qrc:/qt/qml/chapter3/main.qml")));
+    engine.loadFromModule("chattutorial", "Main");
 
     return app.exec();
 }
diff --git a/examples/quickcontrols/chattutorial/chapter3/qmldir b/examples/quickcontrols/chattutorial/chapter3/qmldir
new file mode 100644
index 0000000000..16e455a37b
--- /dev/null
+++ b/examples/quickcontrols/chattutorial/chapter3/qmldir
@@ -0,0 +1,4 @@
+module chattutorial
+ContactPage 1.0 ContactPage.qml
+ConversationPage 1.0 ConversationPage.qml
+Main 1.0 Main.qml