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>

5 files changed, 17 insertions, 14 deletions

diff --git a/examples/quick/text/fonts/availableFonts.qml b/examples/quick/text/fonts/availableFonts.qml
index ea3bff22b8..41dbae0021 100644
--- a/examples/quick/text/fonts/availableFonts.qml
+++ b/examples/quick/text/fonts/availableFonts.qml
@@ -61,11 +61,12 @@ Rectangle {
 
         delegate: Item {
             height: 40; width: ListView.view.width
+            required property string modelData
             Text {
                 anchors.centerIn: parent
-                text: modelData
+                text: parent.modelData
 //! [delegate]
-                font.family: modelData
+                font.family: parent.modelData
 //! [delegate]
                 font.pixelSize: 20
                 color: "white"
diff --git a/examples/quick/text/fonts/fonts.qml b/examples/quick/text/fonts/fonts.qml
index d356e00417..4478db0135 100644
--- a/examples/quick/text/fonts/fonts.qml
+++ b/examples/quick/text/fonts/fonts.qml
@@ -51,6 +51,7 @@
 import QtQuick 2.0
 
 Rectangle {
+    id: root
     property string myText: "The quick brown fox jumps over the lazy dog."
 
     width: 320; height: 480
@@ -71,7 +72,7 @@ Rectangle {
         spacing: 15
 
         Text {
-            text: myText
+            text: root.myText
             color: "lightsteelblue"
             width: parent.width
             wrapMode: Text.WordWrap
@@ -81,7 +82,7 @@ Rectangle {
             font.pixelSize: 20
         }
         Text {
-            text: myText
+            text: root.myText
             color: "lightsteelblue"
             width: parent.width
             wrapMode: Text.WordWrap
@@ -89,7 +90,7 @@ Rectangle {
             font { family: "Times"; pixelSize: 20; capitalization: Font.AllUppercase }
         }
         Text {
-            text: myText
+            text: root.myText
             color: "lightsteelblue"
             width: parent.width
             horizontalAlignment: Text.AlignRight
@@ -97,14 +98,14 @@ Rectangle {
             font { family: fixedFont.name; pixelSize: 20; weight: Font.Bold; capitalization: Font.AllLowercase }
         }
         Text {
-            text: myText
+            text: root.myText
             color: "lightsteelblue"
             width: parent.width
             wrapMode: Text.WordWrap
             font { family: fixedFont.name; pixelSize: 20; italic: true; capitalization: Font.SmallCaps }
         }
         Text {
-            text: myText
+            text: root.myText
             color: "lightsteelblue"
             width: parent.width
             wrapMode: Text.WordWrap
@@ -112,7 +113,7 @@ Rectangle {
         }
         Text {
             text: {
-                if (webFont.status == FontLoader.Ready) myText
+                if (webFont.status == FontLoader.Ready) root.myText
                 else if (webFont.status == FontLoader.Loading) "Loading..."
                 else if (webFont.status == FontLoader.Error) "Error loading font"
             }
diff --git a/examples/quick/text/imgtag/TextWithImage.qml b/examples/quick/text/imgtag/TextWithImage.qml
index 1cb65e739d..d22e93146d 100644
--- a/examples/quick/text/imgtag/TextWithImage.qml
+++ b/examples/quick/text/imgtag/TextWithImage.qml
@@ -55,5 +55,5 @@ Text {
     font.pointSize: 14
     wrapMode: Text.WordWrap
     textFormat: Text.StyledText
-    horizontalAlignment: main.hAlign
+    horizontalAlignment: parent.hAlign
 }
diff --git a/examples/quick/text/imgtag/imgtag.qml b/examples/quick/text/imgtag/imgtag.qml
index 1790853de2..177008940a 100644
--- a/examples/quick/text/imgtag/imgtag.qml
+++ b/examples/quick/text/imgtag/imgtag.qml
@@ -56,7 +56,7 @@ Rectangle {
     focus: true
     color: "#dedede"
 
-    property var hAlign: Text.AlignLeft
+    property int hAlign: Text.AlignLeft
 
     Flickable {
         anchors.fill: parent
@@ -68,6 +68,7 @@ Rectangle {
             x: 10; y: 10
             spacing: 20
             width: parent.width - 20
+            property int hAlign: main.hAlign
 
             TextWithImage {
                 text: "This is a <b>happy</b> face<img src=\"images/face-smile.png\">"
diff --git a/examples/quick/text/styledtext-layout.qml b/examples/quick/text/styledtext-layout.qml
index 631a37b493..b399b638dc 100644
--- a/examples/quick/text/styledtext-layout.qml
+++ b/examples/quick/text/styledtext-layout.qml
@@ -71,12 +71,12 @@ Rectangle {
         text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at ante dui <a href=\"http://www.digia.com\">www.digia.com</a>.<br/>Curabitur ante est, pulvinar quis adipiscing a, iaculis id ipsum. Nunc blandit condimentum odio vel egestas.<br><ul type=\"bullet\"><li>Coffee<ol type=\"a\"><li>Espresso<li>Cappuccino<li>Latte</ol><li>Juice<ol type=\"1\"><li>Orange</li><li>Apple</li><li>Pineapple</li><li>Tomato</li></ol></li></ul><p><font color=\"#434343\"><i>Proin consectetur <b>sapien</b> in ipsum lacinia sit amet mattis orci interdum. Quisque vitae accumsan lectus. Ut nisi turpis, sollicitudin ut dignissim id, fermentum ac est. Maecenas nec libero leo. Sed ac leo eget ipsum ultricies viverra sit amet eu orci. Praesent et tortor risus, viverra accumsan sapien. Sed faucibus eleifend lectus, sed euismod urna porta eu. Quisque vitae accumsan lectus. Ut nisi turpis, sollicitudin ut dignissim id, fermentum ac est. Maecenas nec libero leo. Sed ac leo eget ipsum ultricies viverra sit amet eu orci."
 
 //! [layout]
-        onLineLaidOut: {
-            line.width = width / 2  - (margin)
+        onLineLaidOut: (line) => {
+            line.width = width / 2  - main.margin
 
             if (line.y + line.height >= height) {
-                line.y -= height - margin
-                line.x = width / 2 + margin
+                line.y -= height - main.margin
+                line.x = width / 2 + main.activeFocusmargin
             }
 
             if (line.isLast) {