examples: Add type safety to animation/behaviors example

As SideRect wants to access focusItem's "text" property, we should
expose the fact that it exists. Therefore, move focusRect into a
separate file  that declares the property and reference that.

Change-Id: Id9b1d1e7868ee5abb9de124bab8fad45ee1449a9
Reviewed-by: Simon Hausmann <simon.hausmann@qt.io>

5 files changed, 126 insertions, 42 deletions

diff --git a/examples/quick/animation/animation.qrc b/examples/quick/animation/animation.qrc
index d4e78c82f0..2d88c03007 100644
--- a/examples/quick/animation/animation.qrc
+++ b/examples/quick/animation/animation.qrc
@@ -9,6 +9,7 @@
         <file>basics/color-animation.qml</file>
         <file>basics/property-animation.qml</file>
         <file>behaviors/behavior-example.qml</file>
+        <file>behaviors/FocusRect.qml</file>
         <file>behaviors/SideRect.qml</file>
         <file>behaviors/tvtennis.qml</file>
         <file>behaviors/wigglytext.qml</file>
diff --git a/examples/quick/animation/behaviors/FocusRect.qml b/examples/quick/animation/behaviors/FocusRect.qml
new file mode 100644
index 0000000000..5188919606
--- /dev/null
+++ b/examples/quick/animation/behaviors/FocusRect.qml
@@ -0,0 +1,115 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** BSD License Usage
+** Alternatively, you may use this file under the terms of the BSD license
+** as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of The Qt Company Ltd nor the names of its
+**     contributors may be used to endorse or promote products derived
+**     from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Rectangle {
+    id: focusRect
+    property string text
+
+    x: 62
+    y: 75
+    width: 75
+    height: 50
+    radius: 6
+    border.width: 4
+    border.color: "white"
+    color: "firebrick"
+
+    // Set an 'elastic' behavior on the focusRect's x property.
+    Behavior on x {
+        NumberAnimation {
+            easing.type: Easing.OutElastic
+            easing.amplitude: 3.0
+            easing.period: 2.0
+            duration: 300
+        }
+    }
+
+    //! [0]
+    // Set an 'elastic' behavior on the focusRect's y property.
+    Behavior on y {
+        NumberAnimation {
+            easing.type: Easing.OutElastic
+            easing.amplitude: 3.0
+            easing.period: 2.0
+            duration: 300
+        }
+    }
+    //! [0]
+
+    Text {
+        id: focusText
+        text: focusRect.text
+        anchors.centerIn: parent
+        color: "white"
+        font.pixelSize: 16
+        font.bold: true
+
+        // Set a behavior on the focusText's x property:
+        // Set the opacity to 0, set the new text value, then set the opacity back to 1.
+        Behavior on text {
+            SequentialAnimation {
+                NumberAnimation {
+                    target: focusText
+                    property: "opacity"
+                    to: 0
+                    duration: 150
+                }
+                NumberAnimation {
+                    target: focusText
+                    property: "opacity"
+                    to: 1
+                    duration: 150
+                }
+            }
+        }
+    }
+}
diff --git a/examples/quick/animation/behaviors/SideRect.qml b/examples/quick/animation/behaviors/SideRect.qml
index 8b37a6a0ca..19c0528054 100644
--- a/examples/quick/animation/behaviors/SideRect.qml
+++ b/examples/quick/animation/behaviors/SideRect.qml
@@ -53,6 +53,7 @@ import QtQuick 2.0
 Rectangle {
     id: myRect
 
+    property FocusRect focusItem
     property string text
 
     width: 75; height: 50
@@ -64,9 +65,9 @@ Rectangle {
         anchors.fill: parent
         hoverEnabled: true
         onEntered: {
-            focusRect.x = myRect.x;
-            focusRect.y = myRect.y;
-            focusRect.text = myRect.text;
+            myRect.focusItem.x = myRect.x;
+            myRect.focusItem.y = myRect.y;
+            myRect.focusItem.text = myRect.text;
         }
     }
 }
diff --git a/examples/quick/animation/behaviors/behavior-example.qml b/examples/quick/animation/behaviors/behavior-example.qml
index 1d07e6bb90..43ca31f185 100644
--- a/examples/quick/animation/behaviors/behavior-example.qml
+++ b/examples/quick/animation/behaviors/behavior-example.qml
@@ -64,67 +64,34 @@ Rectangle {
 
         SideRect {
             id: leftRect
+            focusItem: focusRect
             anchors { verticalCenter: parent.verticalCenter; horizontalCenter: parent.left }
             text: "Left"
         }
 
         SideRect {
             id: rightRect
+            focusItem: focusRect
             anchors { verticalCenter: parent.verticalCenter; horizontalCenter: parent.right }
             text: "Right"
         }
 
         SideRect {
             id: topRect
+            focusItem: focusRect
             anchors { verticalCenter: parent.top; horizontalCenter: parent.horizontalCenter }
             text: "Top"
         }
 
         SideRect {
             id: bottomRect
+            focusItem: focusRect
             anchors { verticalCenter: parent.bottom; horizontalCenter: parent.horizontalCenter }
             text: "Bottom"
         }
 
-
-        Rectangle {
+        FocusRect {
             id: focusRect
-
-            property string text
-
-            x: 62; y: 75; width: 75; height: 50
-            radius: 6
-            border.width: 4; border.color: "white"
-            color: "firebrick"
-
-            // Set an 'elastic' behavior on the focusRect's x property.
-            Behavior on x {
-                NumberAnimation { easing.type: Easing.OutElastic; easing.amplitude: 3.0; easing.period: 2.0; duration: 300 }
-            }
-
-            //! [0]
-            // Set an 'elastic' behavior on the focusRect's y property.
-            Behavior on y {
-                NumberAnimation { easing.type: Easing.OutElastic; easing.amplitude: 3.0; easing.period: 2.0; duration: 300 }
-            }
-            //! [0]
-
-            Text {
-                id: focusText
-                text: focusRect.text
-                anchors.centerIn: parent
-                color: "white"
-                font.pixelSize: 16; font.bold: true
-
-                // Set a behavior on the focusText's x property:
-                // Set the opacity to 0, set the new text value, then set the opacity back to 1.
-                Behavior on text {
-                    SequentialAnimation {
-                        NumberAnimation { target: focusText; property: "opacity"; to: 0; duration: 150 }
-                        NumberAnimation { target: focusText; property: "opacity"; to: 1; duration: 150 }
-                    }
-                }
-            }
         }
     }
 }
diff --git a/examples/quick/animation/doc/src/animation.qdoc b/examples/quick/animation/doc/src/animation.qdoc
index 578fb4b849..97a574d768 100644
--- a/examples/quick/animation/doc/src/animation.qdoc
+++ b/examples/quick/animation/doc/src/animation.qdoc
@@ -60,7 +60,7 @@
     \section1 Behaviors
 
     \e Behaviors uses behaviors to move a rectangle to where you click.
-    \snippet animation/behaviors/behavior-example.qml 0
+    \snippet animation/behaviors/FocusRect.qml 0
 
     \section1 Wiggly Text