Avoid discouraged patterns in examples

In particular, use required properties where applicable, explicitly
import QtQml where we use it, avoid unqualified access into the root
scope of a component, use JavaScript functions with explicit parameters
as signal handlers.

Change-Id: I3eaaba47cc3c7a2a12d488e36f9eec145cedbb0e
Reviewed-by: Fabian Kosmale <fabian.kosmale@qt.io>
Reviewed-by: Shawn Rutledge <shawn.rutledge@qt.io>

3 files changed, 38 insertions, 21 deletions

diff --git a/examples/quick/localstorage/localstorage/Header.qml b/examples/quick/localstorage/localstorage/Header.qml
index e9446de55e..47879500a7 100644
--- a/examples/quick/localstorage/localstorage/Header.qml
+++ b/examples/quick/localstorage/localstorage/Header.qml
@@ -59,6 +59,9 @@ Item {
     width: Screen.width / 2
     height: Screen.height / 7
 
+    required property ListView listView
+    required property Text statusText
+
     function insertrec() {
         var rowid = parseInt(JS.dbInsert(dateInput.text, descInput.text, distInput.text), 10)
         if (rowid) {
@@ -148,7 +151,7 @@ Item {
                         }
                         onEditingFinished: {
                             if (dateInput.text == "") {
-                                statustext.text = "Please fill in the date"
+                                root.statusText.text = "Please fill in the date"
                                 dateInput.forceActiveFocus()
                             }
                         }
@@ -161,10 +164,10 @@ Item {
                         activeFocusOnTab: true
                         onEditingFinished: {
                             if (descInput.text.length < 8) {
-                                statustext.text = "Enter a description of minimum 8 characters"
+                                root.statusText.text = "Enter a description of minimum 8 characters"
                                 descInput.forceActiveFocus()
                             } else {
-                                statustext.text = ""
+                                root.statusText.text = ""
                             }
                         }
                     }
@@ -179,7 +182,7 @@ Item {
                         }
                         onEditingFinished: {
                             if (distInput.text == "") {
-                                statustext.text = "Please fill in the distance"
+                                root.statusText.text = "Please fill in the distance"
                                 distInput.forceActiveFocus()
                             }
                         }
diff --git a/examples/quick/localstorage/localstorage/MyDelegate.qml b/examples/quick/localstorage/localstorage/MyDelegate.qml
index 63a83bfbae..e8575d4f7a 100644
--- a/examples/quick/localstorage/localstorage/MyDelegate.qml
+++ b/examples/quick/localstorage/localstorage/MyDelegate.qml
@@ -54,18 +54,27 @@ import QtQuick.Layouts 1.1
 import "Database.js" as JS
 
 Item {
+    id: delegate
+
     width: parent.width
     height: rDate.implicitHeight
 
+    required property int index
+    required property int distance
+    required property string trip_desc
+    required property string date
+
+    signal clicked()
+
     Rectangle {
         id: baseRec
         anchors.fill: parent
         opacity: 0.8
-        color: index % 2 ? "lightgrey" : "grey"
+        color: delegate.index % 2 ? "lightgrey" : "grey"
 
         MouseArea {
             anchors.fill: parent
-            onClicked: listView.currentIndex = index
+            onClicked: delegate.clicked()
         }
         GridLayout {
             anchors.fill:parent
@@ -73,21 +82,21 @@ Item {
 
             Text {
                 id: rDate
-                text: date
+                text: delegate.date
                 font.pixelSize: 22
                 Layout.preferredWidth: parent.width / 4
                 color: "black"
             }
             Text {
                 id: rDesc
-                text: trip_desc
+                text: delegate.trip_desc
                 Layout.fillWidth: true
                 font.pixelSize: 22
                 color: "black"
             }
             Text {
                 id: rDistance
-                text: distance
+                text: delegate.distance
                 font.pixelSize: 22
                 Layout.alignment: Qt.AlignRight
                 color: "black"
diff --git a/examples/quick/localstorage/localstorage/localstorage.qml b/examples/quick/localstorage/localstorage/localstorage.qml
index 41f5cbd561..418aab838e 100644
--- a/examples/quick/localstorage/localstorage/localstorage.qml
+++ b/examples/quick/localstorage/localstorage/localstorage.qml
@@ -55,6 +55,7 @@ import QtQuick.LocalStorage 2.0
 import "Database.js" as JS
 
 Window {
+    id: window
     visible: true
     width: Screen.width / 2
     height: Screen.height / 1.8
@@ -72,19 +73,21 @@ Window {
             Header {
                 id: input
                 Layout.fillWidth: true
+                listView: listView
+                statusText: statustext
             }
             RowLayout {
                 MyButton {
                     text: "New"
                     onClicked: {
                         input.initrec_new()
-                        creatingNewEntry = true
+                        window.creatingNewEntry = true
                         listView.model.setProperty(listView.currentIndex, "id", 0)
                     }
                 }
                 MyButton {
                     id: saveButton
-                    enabled: (creatingNewEntry || editingEntry) && listView.currentIndex != -1
+                    enabled: (window.creatingNewEntry || window.editingEntry) && listView.currentIndex != -1
                     text: "Save"
                     onClicked: {
                         var insertedRow = false;
@@ -109,8 +112,8 @@ Window {
 
                         if (insertedRow) {
                             input.initrec()
-                            creatingNewEntry = false
-                            editingEntry = false
+                            window.creatingNewEntry = false
+                            window.editingEntry = false
                             listView.forceLayout()
                         }
                     }
@@ -118,20 +121,20 @@ Window {
                 MyButton {
                     id: editButton
                     text: "Edit"
-                    enabled: !creatingNewEntry && !editingEntry && listView.currentIndex != -1
+                    enabled: !window.creatingNewEntry && !window.editingEntry && listView.currentIndex != -1
                     onClicked: {
                         input.editrec(listView.model.get(listView.currentIndex).date,
                                       listView.model.get(listView.currentIndex).trip_desc,
                                       listView.model.get(listView.currentIndex).distance,
                                       listView.model.get(listView.currentIndex).id)
 
-                        editingEntry = true
+                        window.editingEntry = true
                     }
                 }
                 MyButton {
                     id: deleteButton
                     text: "Delete"
-                    enabled: !creatingNewEntry && listView.currentIndex != -1
+                    enabled: !window.creatingNewEntry && listView.currentIndex != -1
                     onClicked: {
                         JS.dbDeleteRow(listView.model.get(listView.currentIndex).id)
                         listView.model.remove(listView.currentIndex, 1)
@@ -145,7 +148,7 @@ Window {
                 MyButton {
                     id: cancelButton
                     text: "Cancel"
-                    enabled: (creatingNewEntry || editingEntry) && listView.currentIndex != -1
+                    enabled: (window.creatingNewEntry || window.editingEntry) && listView.currentIndex != -1
                     onClicked: {
                         if (listView.model.get(listView.currentIndex).id === 0) {
                             // This entry had an id of 0, which means it was being created and hadn't
@@ -153,8 +156,8 @@ Window {
                             listView.model.remove(listView.currentIndex, 1)
                         }
                         listView.forceLayout()
-                        creatingNewEntry = false
-                        editingEntry = false
+                        window.creatingNewEntry = false
+                        window.editingEntry = false
                         input.initrec()
                     }
                 }
@@ -176,9 +179,11 @@ Window {
                 Layout.fillWidth: true
                 Layout.fillHeight: true
                 model: MyModel {}
-                delegate: MyDelegate {}
+                delegate: MyDelegate {
+                    onClicked: listView.currentIndex = index
+                }
                 // Don't allow changing the currentIndex while the user is creating/editing values.
-                enabled: !creatingNewEntry && !editingEntry
+                enabled: !window.creatingNewEntry && !window.editingEntry
 
                 highlight: highlightBar
                 highlightFollowsCurrentItem: true