Components exchangeable

Change-Id: If028c67235567de4d7d99775dcd48e8c0a1ebf75
Sanity-Review: Qt Sanity Bot <qt_sanity_bot@ovi.com>
Reviewed-by: Lincoln Ramsay <lincoln.ramsay@nokia.com>

7 files changed, 382 insertions, 327 deletions

diff --git a/examples/sensors/qmlqtsensors/components/ApplicationWindow.qml b/examples/sensors/qmlqtsensors/components/ApplicationWindow.qml
new file mode 100644
index 00000000..4b67c2c2
--- /dev/null
+++ b/examples/sensors/qmlqtsensors/components/ApplicationWindow.qml
@@ -0,0 +1,51 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtSensors module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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 Nokia Corporation and its Subsidiary(-ies) 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 the declarative plugins
+import QtQuick 2.0
+
+Rectangle {
+    id: appWnd
+    x: 0
+    y: 0
+    width: 320
+    height: 480
+    color: "#ececec"
+}
diff --git a/examples/sensors/qmlqtsensors/Button.qml b/examples/sensors/qmlqtsensors/components/Button.qml
index ce8feb3f..ce8feb3f 100644
--- a/examples/sensors/qmlqtsensors/Button.qml
+++ b/examples/sensors/qmlqtsensors/components/Button.qml
diff --git a/examples/sensors/qmlqtsensors/images/button_background_disabled.png b/examples/sensors/qmlqtsensors/components/images/button_background_disabled.png
index 62a00b9a..62a00b9a 100644
--- a/examples/sensors/qmlqtsensors/images/button_background_disabled.png
+++ b/examples/sensors/qmlqtsensors/components/images/button_background_disabled.png
diff --git a/examples/sensors/qmlqtsensors/images/button_background_normal.png b/examples/sensors/qmlqtsensors/components/images/button_background_normal.png
index 1fecad5b..1fecad5b 100644
--- a/examples/sensors/qmlqtsensors/images/button_background_normal.png
+++ b/examples/sensors/qmlqtsensors/components/images/button_background_normal.png
diff --git a/examples/sensors/qmlqtsensors/images/button_background_pressed.png b/examples/sensors/qmlqtsensors/components/images/button_background_pressed.png
index 149529e1..149529e1 100644
--- a/examples/sensors/qmlqtsensors/images/button_background_pressed.png
+++ b/examples/sensors/qmlqtsensors/components/images/button_background_pressed.png
diff --git a/examples/sensors/qmlqtsensors/images/listitem_select.png b/examples/sensors/qmlqtsensors/images/listitem_select.png
deleted file mode 100644
index def234f1..00000000
--- a/examples/sensors/qmlqtsensors/images/listitem_select.png
+++ /dev/null
diff --git a/examples/sensors/qmlqtsensors/main.qml b/examples/sensors/qmlqtsensors/main.qml
index 87ab24a0..caa1a94d 100644
--- a/examples/sensors/qmlqtsensors/main.qml
+++ b/examples/sensors/qmlqtsensors/main.qml
@@ -85,405 +85,409 @@
 
 //Import the declarative plugins
 import QtQuick 2.0
+import "components"
 
 //! [0]
 import QtSensors 5.0
 //! [0]
 
-Rectangle {
-    id: mainWnd
-    x: 0
-    y: 0
-    width: 320
-    height: 480
-    color: "transparent"
-
-    property int accuracy: 1
-    property string speed: "Slow"
-
-    Text {
-        id: labelTitle
-        anchors.top: mainWnd.top
-        anchors.topMargin: 25
-        anchors.left: mainWnd.left
-        anchors.right: mainWnd.right
-
-        horizontalAlignment: Text.AlignHCenter
-        font.pixelSize: 30
-        font.bold: true
-        text: "QML QtSensors"
-    }
-
-    //Tile region
+ApplicationWindow {
+    id: appWnd
 
     Rectangle {
-        id: tiltLine
-        anchors.top: labelTitle.bottom
-        anchors.topMargin: 5
-        anchors.left: mainWnd.left
-        anchors.leftMargin: 5
-        anchors.right: mainWnd.right
-        anchors.rightMargin: 5
-        border.width: 1
-        height: 1
-        border.color: "#888888"
-    }
+        id: mainWnd
+        x: 0
+        y: 0
+        width: 320
+        height: 480
+        color: "transparent"
 
-    Text {
-        id: labelTilt
-        anchors.top: tiltLine.bottom
-        anchors.topMargin: 5
-        anchors.left: mainWnd.left
-        anchors.right: mainWnd.right
+        property int accuracy: 1
+        property string speed: "Slow"
 
-        horizontalAlignment: Text.AlignHCenter
-        font.bold: true
-        text: "TiltSensor"
-    }
+        Text {
+            id: labelTitle
+            anchors.top: mainWnd.top
+            anchors.topMargin: 25
+            anchors.left: mainWnd.left
+            anchors.right: mainWnd.right
 
-//! [1]
-    TiltSensor {
-        id: tilt
-        unit: TiltSensor.Degrees
-        enabled: false
-        accuracy: 1.0
-        speed: TiltSensor.Slow
-    }
-//! [1]
+            horizontalAlignment: Text.AlignHCenter
+            font.pixelSize: 30
+            font.bold: true
+            text: "QML QtSensors"
+        }
 
-    Rectangle{
-        id: accuracyRect
-        anchors.top: labelTilt.bottom
-        anchors.topMargin: 5
-        anchors.left: mainWnd.left
-        anchors.leftMargin: 5
-        anchors.right: mainWnd.right
-        anchors.rightMargin: mainWnd.width / 2
-        height: 110
-        color: "transparent"
+        //Tile region
 
-        Text{
-            id: textAccuracy
-            anchors.top: accuracyRect.top
-            anchors.left: accuracyRect.left
-            text: "Accuracy"
-            font.bold: true
+        Rectangle {
+            id: tiltLine
+            anchors.top: labelTitle.bottom
+            anchors.topMargin: 5
+            anchors.left: mainWnd.left
+            anchors.leftMargin: 5
+            anchors.right: mainWnd.right
+            anchors.rightMargin: 5
+            border.width: 1
+            height: 1
+            border.color: "#888888"
         }
 
-        Text{
-            id: textAccuracyValue
-            anchors.top: textAccuracy.bottom
+        Text {
+            id: labelTilt
+            anchors.top: tiltLine.bottom
             anchors.topMargin: 5
-            anchors.left: accuracyHigher.left
-            anchors.right: accuracyHigher.right
-            text: mainWnd.accuracy
-            verticalAlignment: Text.AlignVCenter
+            anchors.left: mainWnd.left
+            anchors.right: mainWnd.right
+
+            horizontalAlignment: Text.AlignHCenter
+            font.bold: true
+            text: "TiltSensor"
         }
 
-        Button{
-            id: accuracyLower
-            anchors.top: textAccuracyValue.bottom
-            anchors.left: accuracyRect.left
-            height: 30
-            width: 40
-            text: "-"
+//! [1]
+        TiltSensor {
+            id: tilt
+            unit: TiltSensor.Degrees
+            enabled: false
+            accuracy: 1.0
+            speed: TiltSensor.Slow
+        }
+//! [1]
 
-            onClicked:{
-                if (mainWnd.accuracy > 1){
-                    mainWnd.accuracy--;
-                    tilt.accuracy = mainWnd.accuracy;
-                }
+        Rectangle{
+            id: accuracyRect
+            anchors.top: labelTilt.bottom
+            anchors.topMargin: 5
+            anchors.left: mainWnd.left
+            anchors.leftMargin: 5
+            anchors.right: mainWnd.right
+            anchors.rightMargin: mainWnd.width / 2
+            height: 110
+            color: "transparent"
+
+            Text{
+                id: textAccuracy
+                anchors.top: accuracyRect.top
+                anchors.left: accuracyRect.left
+                text: "Accuracy"
+                font.bold: true
             }
-        }
 
-        Button{
-            id: accuracyHigher
-            anchors.top: textAccuracyValue.bottom
-            anchors.left: accuracyLower.right
-            height: 30
-            width: 40
-            text: "+"
+            Text{
+                id: textAccuracyValue
+                anchors.top: textAccuracy.bottom
+                anchors.topMargin: 5
+                anchors.left: accuracyHigher.left
+                anchors.right: accuracyHigher.right
+                text: mainWnd.accuracy
+                verticalAlignment: Text.AlignVCenter
+            }
 
-            onClicked:{
-                if (mainWnd.accuracy < 10){
-                    mainWnd.accuracy++;
-                    tilt.accuracy = mainWnd.accuracy;
+            Button{
+                id: accuracyLower
+                anchors.top: textAccuracyValue.bottom
+                anchors.left: accuracyRect.left
+                height: 30
+                width: 40
+                text: "-"
+
+                onClicked:{
+                    if (mainWnd.accuracy > 1){
+                        mainWnd.accuracy--;
+                        tilt.accuracy = mainWnd.accuracy;
+                    }
                 }
             }
-        }
-    }
 
-    Rectangle{
-        id: speedRect
-        anchors.top: labelTilt.bottom
-        anchors.topMargin: 5
-        anchors.left: mainWnd.left
-        anchors.leftMargin: mainWnd.width / 2
-        anchors.right: mainWnd.right
-        anchors.rightMargin: 5
-        height: 110
-        color: "transparent"
-
-        Text{
-            id: textSpeed
-            anchors.top: speedRect.top
-            anchors.left: speedRect.left
-            text: "Speed"
-            font.bold: true
+            Button{
+                id: accuracyHigher
+                anchors.top: textAccuracyValue.bottom
+                anchors.left: accuracyLower.right
+                height: 30
+                width: 40
+                text: "+"
+
+                onClicked:{
+                    if (mainWnd.accuracy < 10){
+                        mainWnd.accuracy++;
+                        tilt.accuracy = mainWnd.accuracy;
+                    }
+                }
+            }
         }
 
-        Text{
-            id: textSpeedValue
-            anchors.top: textSpeed.bottom
+        Rectangle{
+            id: speedRect
+            anchors.top: labelTilt.bottom
             anchors.topMargin: 5
-            anchors.left: speedLower.left
-            anchors.right: speedHigher.right
-            text: mainWnd.speed
-            verticalAlignment: Text.AlignVCenter
-        }
+            anchors.left: mainWnd.left
+            anchors.leftMargin: mainWnd.width / 2
+            anchors.right: mainWnd.right
+            anchors.rightMargin: 5
+            height: 110
+            color: "transparent"
+
+            Text{
+                id: textSpeed
+                anchors.top: speedRect.top
+                anchors.left: speedRect.left
+                text: "Speed"
+                font.bold: true
+            }
 
-        Button{
-            id: speedLower
-            anchors.top: textSpeedValue.bottom
-            anchors.left: speedRect.left
-            height: 30
-            width: 40
-            text: "-"
+            Text{
+                id: textSpeedValue
+                anchors.top: textSpeed.bottom
+                anchors.topMargin: 5
+                anchors.left: speedLower.left
+                anchors.right: speedHigher.right
+                text: mainWnd.speed
+                verticalAlignment: Text.AlignVCenter
+            }
 
-            onClicked:{
-                if (tilt.speed === TiltSensor.Fast) {
-                    mainWnd.speed = "Medium";
-                    tilt.speed = TiltSensor.Medium;
+            Button{
+                id: speedLower
+                anchors.top: textSpeedValue.bottom
+                anchors.left: speedRect.left
+                height: 30
+                width: 40
+                text: "-"
+
+                onClicked:{
+                    if (tilt.speed === TiltSensor.Fast) {
+                        mainWnd.speed = "Medium";
+                        tilt.speed = TiltSensor.Medium;
+                    }
+                    else if (tilt.speed === TiltSensor.Medium) {
+                        mainWnd.speed = "Slow";
+                        tilt.speed = TiltSensor.Slow;
+                    }
                 }
-                else if (tilt.speed === TiltSensor.Medium) {
-                    mainWnd.speed = "Slow";
-                    tilt.speed = TiltSensor.Slow;
+            }
+
+            Button{
+                id: speedHigher
+                anchors.top: textSpeedValue.bottom
+                anchors.left: speedLower.right
+                height: 30
+                width: 40
+                text: "+"
+
+                onClicked:{
+                    if (tilt.speed === TiltSensor.Slow) {
+                        mainWnd.speed = "Medium";
+                        tilt.speed = TiltSensor.Medium;
+                    }
+                    else if (tilt.speed === TiltSensor.Medium) {
+                        mainWnd.speed = "Fast";
+                        tilt.speed = TiltSensor.Fast;
+                    }
                 }
             }
         }
 
         Button{
-            id: speedHigher
-            anchors.top: textSpeedValue.bottom
-            anchors.left: speedLower.right
+            id: calibrate
+            anchors.left: mainWnd.left
+            anchors.leftMargin: 5
+            anchors.top: accuracyRect.bottom
             height: 30
-            width: 40
-            text: "+"
+            width: 80
+            text: "Calibrate"
 
             onClicked:{
-                if (tilt.speed === TiltSensor.Slow) {
-                    mainWnd.speed = "Medium";
-                    tilt.speed = TiltSensor.Medium;
-                }
-                else if (tilt.speed === TiltSensor.Medium) {
-                    mainWnd.speed = "Fast";
-                    tilt.speed = TiltSensor.Fast;
-                }
+                tilt.calibrate();
             }
         }
-    }
 
-    Button{
-        id: calibrate
-        anchors.left: mainWnd.left
-        anchors.leftMargin: 5
-        anchors.top: accuracyRect.bottom
-        height: 30
-        width: 80
-        text: "Calibrate"
-
-        onClicked:{
-            tilt.calibrate();
-        }
-    }
+        Button{
+            id: useRadian
+            anchors.top: calibrate.bottom
+            anchors.left: mainWnd.left
+            anchors.leftMargin: 5
+            height: 30
+            width: 80
+            text: (tilt !== null ? tilt.unit === TiltSensor.Radians ? "Degree" : "Radians" : "Degree")
 
-    Button{
-        id: useRadian
-        anchors.top: calibrate.bottom
-        anchors.left: mainWnd.left
-        anchors.leftMargin: 5
-        height: 30
-        width: 80
-        text: (tilt !== null ? tilt.unit === TiltSensor.Radians ? "Degree" : "Radians" : "Degree")
-
-        onClicked:{
-            tilt.unit = (useRadian.text === "Radians"  ? TiltSensor.Radians : TiltSensor.Degrees);
+            onClicked:{
+                tilt.unit = (useRadian.text === "Radians"  ? TiltSensor.Radians : TiltSensor.Degrees);
+            }
         }
-    }
 
-    Button{
-        id: tiltStart
-        anchors.top: useRadian.bottom
-        anchors.left: mainWnd.left
-        anchors.leftMargin: 5
-        height: 30
-        width: 80
-        text: tilt.enabled ? "Stop" : "Start"
+        Button{
+            id: tiltStart
+            anchors.top: useRadian.bottom
+            anchors.left: mainWnd.left
+            anchors.leftMargin: 5
+            height: 30
+            width: 80
+            text: tilt.enabled ? "Stop" : "Start"
 
-        onClicked:{
+            onClicked:{
 //! [2]
-            tilt.enabled = (tiltStart.text === "Start"  ? true: false);
+                tilt.enabled = (tiltStart.text === "Start"  ? true: false);
 //! [2]
+            }
         }
-    }
 
-    Text {
-        id: xrottext
-        anchors.right: mainWnd.right
-        anchors.rightMargin: 5
-        anchors.left: useRadian.right
-        anchors.leftMargin: 15
-        anchors.top: useRadian.top
-        anchors.bottom: useRadian.bottom
-        verticalAlignment: Text.AlignVCenter
+        Text {
+            id: xrottext
+            anchors.right: mainWnd.right
+            anchors.rightMargin: 5
+            anchors.left: useRadian.right
+            anchors.leftMargin: 15
+            anchors.top: useRadian.top
+            anchors.bottom: useRadian.bottom
+            verticalAlignment: Text.AlignVCenter
 //! [3]
-        text: "X Rotation: " + tilt.xRotation + (tilt.unit === TiltSensor.Radians ? " rad" : "°")
+            text: "X Rotation: " + tilt.xRotation + (tilt.unit === TiltSensor.Radians ? " rad" : "°")
 //! [3]
-    }
+        }
 
-    Text {
-        id: yrottext
-        anchors.right: mainWnd.right
-        anchors.rightMargin: 5
-        anchors.left: tiltStart.right
-        anchors.leftMargin: 15
-        anchors.top: tiltStart.top
-        anchors.bottom: tiltStart.bottom
-        verticalAlignment: Text.AlignVCenter
+        Text {
+            id: yrottext
+            anchors.right: mainWnd.right
+            anchors.rightMargin: 5
+            anchors.left: tiltStart.right
+            anchors.leftMargin: 15
+            anchors.top: tiltStart.top
+            anchors.bottom: tiltStart.bottom
+            verticalAlignment: Text.AlignVCenter
 //! [4]
-        text: "Y Rotation: " + tilt.yRotation + (tilt.unit === TiltSensor.Radians ? " rad" : "°")
+            text: "Y Rotation: " + tilt.yRotation + (tilt.unit === TiltSensor.Radians ? " rad" : "°")
 //! [4]
-    }
+        }
 
-    //Ambient Light region
+        //Ambient Light region
 
-    Rectangle {
-        id: ambientlightLine
-        anchors.top: tiltStart.bottom
-        anchors.topMargin: 5
-        anchors.left: mainWnd.left
-        anchors.leftMargin: 5
-        anchors.right: mainWnd.right
-        anchors.rightMargin: 5
-        border.width: 1
-        height: 1
-        border.color: "#888888"
-    }
+        Rectangle {
+            id: ambientlightLine
+            anchors.top: tiltStart.bottom
+            anchors.topMargin: 5
+            anchors.left: mainWnd.left
+            anchors.leftMargin: 5
+            anchors.right: mainWnd.right
+            anchors.rightMargin: 5
+            border.width: 1
+            height: 1
+            border.color: "#888888"
+        }
 
-    Text {
-        id: labelAmbientLight
-        anchors.top: ambientlightLine.bottom
-        anchors.topMargin: 5
-        anchors.left: mainWnd.left
-        anchors.right: mainWnd.right
+        Text {
+            id: labelAmbientLight
+            anchors.top: ambientlightLine.bottom
+            anchors.topMargin: 5
+            anchors.left: mainWnd.left
+            anchors.right: mainWnd.right
 
-        horizontalAlignment: Text.AlignHCenter
-        font.bold: true
-        text: "AmbientLightSensor"
-    }
+            horizontalAlignment: Text.AlignHCenter
+            font.bold: true
+            text: "AmbientLightSensor"
+        }
 
-    AmbientLightSensor {
-        id: ambientlight
-        enabled: false
+        AmbientLightSensor {
+            id: ambientlight
+            enabled: false
 //! [5]
-        onLightLevelChanged:{
-            if (ambientlight.lightLevel == AmbientLightSensor.Unknown)
-                ambientlighttext.text = "Ambient light: Unknown";
-            else if (ambientlight.lightLevel == AmbientLightSensor.Dark)
-                ambientlighttext.text = "Ambient light: Dark";
-            else if (ambientlight.lightLevel == AmbientLightSensor.Twilight)
-                ambientlighttext.text = "Ambient light: Twilight";
-            else if (ambientlight.lightLevel == AmbientLightSensor.Light)
-                ambientlighttext.text = "Ambient light: Light";
-            else if (ambientlight.lightLevel == AmbientLightSensor.Bright)
-                ambientlighttext.text = "Ambient light: Bright";
-            else if (ambientlight.lightLevel == AmbientLightSensor.Sunny)
-                ambientlighttext.text = "Ambient light: Sunny";
-        }
+            onLightLevelChanged:{
+                if (ambientlight.lightLevel == AmbientLightSensor.Unknown)
+                    ambientlighttext.text = "Ambient light: Unknown";
+                else if (ambientlight.lightLevel == AmbientLightSensor.Dark)
+                    ambientlighttext.text = "Ambient light: Dark";
+                else if (ambientlight.lightLevel == AmbientLightSensor.Twilight)
+                    ambientlighttext.text = "Ambient light: Twilight";
+                else if (ambientlight.lightLevel == AmbientLightSensor.Light)
+                    ambientlighttext.text = "Ambient light: Light";
+                else if (ambientlight.lightLevel == AmbientLightSensor.Bright)
+                    ambientlighttext.text = "Ambient light: Bright";
+                else if (ambientlight.lightLevel == AmbientLightSensor.Sunny)
+                    ambientlighttext.text = "Ambient light: Sunny";
+            }
 //! [5]
-    }
+        }
+
+        Button{
+            id: ambientlightStart
+            anchors.top: labelAmbientLight.bottom
+            anchors.topMargin: 5
+            anchors.left: mainWnd.left
+            anchors.leftMargin: 5
+            height: 30
+            width: 80
+            text: ambientlight.enabled ? "Stop" : "Start"
 
-    Button{
-        id: ambientlightStart
-        anchors.top: labelAmbientLight.bottom
-        anchors.topMargin: 5
-        anchors.left: mainWnd.left
-        anchors.leftMargin: 5
-        height: 30
-        width: 80
-        text: ambientlight.enabled ? "Stop" : "Start"
-
-        onClicked:{
-            ambientlight.enabled = (ambientlightStart.text === "Start"  ? true: false);
+            onClicked:{
+                ambientlight.enabled = (ambientlightStart.text === "Start"  ? true: false);
+            }
         }
-    }
 
-    Text {
-        id: ambientlighttext
-        anchors.left: ambientlightStart.right
-        anchors.leftMargin: 15
-        anchors.top: ambientlightStart.top
-        anchors.bottom: ambientlightStart.bottom
-        verticalAlignment: Text.AlignVCenter
-        text: "Ambient light: -"
-    }
+        Text {
+            id: ambientlighttext
+            anchors.left: ambientlightStart.right
+            anchors.leftMargin: 15
+            anchors.top: ambientlightStart.top
+            anchors.bottom: ambientlightStart.bottom
+            verticalAlignment: Text.AlignVCenter
+            text: "Ambient light: -"
+        }
 
-    //Proximity region
+        //Proximity region
 
-    Rectangle {
-        id: proximityLine
-        anchors.top: ambientlightStart.bottom
-        anchors.topMargin: 5
-        anchors.left: mainWnd.left
-        anchors.leftMargin: 5
-        anchors.right: mainWnd.right
-        anchors.rightMargin: 5
-        border.width: 1
-        height: 1
-        border.color: "#888888"
-    }
+        Rectangle {
+            id: proximityLine
+            anchors.top: ambientlightStart.bottom
+            anchors.topMargin: 5
+            anchors.left: mainWnd.left
+            anchors.leftMargin: 5
+            anchors.right: mainWnd.right
+            anchors.rightMargin: 5
+            border.width: 1
+            height: 1
+            border.color: "#888888"
+        }
 
-    Text {
-        id: labelProximityLight
-        anchors.top: proximityLine.bottom
-        anchors.topMargin: 5
-        anchors.left: mainWnd.left
-        anchors.right: mainWnd.right
-        horizontalAlignment: Text.AlignHCenter
-        font.bold: true
-        text: "ProximitySensor"
-    }
+        Text {
+            id: labelProximityLight
+            anchors.top: proximityLine.bottom
+            anchors.topMargin: 5
+            anchors.left: mainWnd.left
+            anchors.right: mainWnd.right
+            horizontalAlignment: Text.AlignHCenter
+            font.bold: true
+            text: "ProximitySensor"
+        }
 
-    ProximitySensor {
-        id: proxi
-        enabled: false
-    }
+        ProximitySensor {
+            id: proxi
+            enabled: false
+        }
+
+        Button{
+            id: proxiStart
+            anchors.top: labelProximityLight.bottom
+            anchors.topMargin: 5
+            anchors.left: mainWnd.left
+            anchors.leftMargin: 5
+            height: 30
+            width: 80
+            text: proxi.enabled ? "Stop" : "Start"
 
-    Button{
-        id: proxiStart
-        anchors.top: labelProximityLight.bottom
-        anchors.topMargin: 5
-        anchors.left: mainWnd.left
-        anchors.leftMargin: 5
-        height: 30
-        width: 80
-        text: proxi.enabled ? "Stop" : "Start"
-
-        onClicked:{
-            proxi.enabled = (proxiStart.text === "Start"  ? true: false);
+            onClicked:{
+                proxi.enabled = (proxiStart.text === "Start"  ? true: false);
+            }
         }
-    }
 
-    Text {
-        id: proxitext
-        anchors.left: proxiStart.right
-        anchors.leftMargin: 15
-        anchors.top: proxiStart.top
-        anchors.bottom: proxiStart.bottom
-        verticalAlignment: Text.AlignVCenter
+        Text {
+            id: proxitext
+            anchors.left: proxiStart.right
+            anchors.leftMargin: 15
+            anchors.top: proxiStart.top
+            anchors.bottom: proxiStart.bottom
+            verticalAlignment: Text.AlignVCenter
 //! [6]
-        text: "Proximity: " + (proxi.near ? "near" : "far")
+            text: "Proximity: " + (proxi.near ? "near" : "far")
 //! [6]
+        }
     }
 }
-