Examples: Fix chapter5 and chapter6 of extending-qml tutorial

We need to pass a parent to the PieSlices in order to make them visible.
Use inline components to reduce the boiler plate.

Amends commit 775eac90ed10dc0c854e7d249d81782f228597e7

Fixes: QTBUG-135475
Change-Id: I55e2591703ceecbeb883a3f0de2a2a84b1600529
Reviewed-by: Fabian Kosmale <fabian.kosmale@qt.io>
(cherry picked from commit 5d51790adbdfdb3c1371aeb667cf08a435f25117)
Reviewed-by: Qt Cherry-pick Bot <cherrypick_bot@qt-project.org>
(cherry picked from commit d933af9121d1f6432fa733c38d769c58514af5a5)

2 files changed, 32 insertions, 18 deletions

diff --git a/examples/qml/tutorials/extending-qml/chapter5-listproperties/App.qml b/examples/qml/tutorials/extending-qml/chapter5-listproperties/App.qml
index 9e200a9b60..5f97487978 100644
--- a/examples/qml/tutorials/extending-qml/chapter5-listproperties/App.qml
+++ b/examples/qml/tutorials/extending-qml/chapter5-listproperties/App.qml
@@ -1,6 +1,7 @@
 // Copyright (C) 2017 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
 //![0]
+pragma ComponentBehavior: Bound
 import Charts
 import QtQuick
 
@@ -8,24 +9,30 @@ Item {
     width: 300; height: 200
 
     PieChart {
+        id: chart
         anchors.centerIn: parent
         width: 100; height: 100
 
+        component Slice: PieSlice {
+            parent: chart
+            anchors.fill: parent
+        }
+
         slices: [
-            PieSlice {
-                anchors.fill: parent
+            Slice {
                 color: "red"
-                fromAngle: 0; angleSpan: 110
+                fromAngle: 0
+                angleSpan: 110
             },
-            PieSlice {
-                anchors.fill: parent
+            Slice {
                 color: "black"
-                fromAngle: 110; angleSpan: 50
+                fromAngle: 110
+                angleSpan: 50
             },
-            PieSlice {
-                anchors.fill: parent
+            Slice {
                 color: "blue"
-                fromAngle: 160; angleSpan: 100
+                fromAngle: 160
+                angleSpan: 100
             }
         ]
     }
diff --git a/examples/qml/tutorials/extending-qml/chapter6-plugins/App.qml b/examples/qml/tutorials/extending-qml/chapter6-plugins/App.qml
index 1d1cb74176..0aad74d803 100644
--- a/examples/qml/tutorials/extending-qml/chapter6-plugins/App.qml
+++ b/examples/qml/tutorials/extending-qml/chapter6-plugins/App.qml
@@ -1,5 +1,6 @@
 // Copyright (C) 2017 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+pragma ComponentBehavior: Bound
 import QtQuick
 import Charts
 
@@ -7,24 +8,30 @@ Item {
     width: 300; height: 200
 
     PieChart {
+        id: chart
         anchors.centerIn: parent
         width: 100; height: 100
 
+        component Slice: PieSlice {
+            parent: chart
+            anchors.fill: parent
+        }
+
         slices: [
-            PieSlice {
-                anchors.fill: parent
+            Slice {
                 color: "red"
-                fromAngle: 0; angleSpan: 110
+                fromAngle: 0
+                angleSpan: 110
             },
-            PieSlice {
-                anchors.fill: parent
+            Slice {
                 color: "black"
-                fromAngle: 110; angleSpan: 50
+                fromAngle: 110
+                angleSpan: 50
             },
-            PieSlice {
-                anchors.fill: parent
+            Slice {
                 color: "blue"
-                fromAngle: 160; angleSpan: 100
+                fromAngle: 160
+                angleSpan: 100
             }
         ]
     }