Differences

This shows you the differences between two versions of the page.

--- qt-quick-for-designers-1:components [2013/06/22 04:16] – mithat
+++ qt-quick-for-designers-1:components [2013/06/22 04:24] – [Signals] mithat
@@ Line 93: / Line 93: @@
 ===== Signals =====
+  * A ''signal'' is similar to a ''property'' above except that it's used to let the outside world determine behavior.
+  * In the Button below, ''buttonClicked'' is made a signal that is emitted whenever the MouseArea is clicked.
+<file javascript Button.qml>
+import QtQuick 1.0
+Image {
+    id: button
+    source: "images/button.png"
+    property string labelText
+    signal buttonClicked()
+    Text {
+        id: label
+        text: labelText
+        color: "white"
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.top: parent.top
+        anchors.topMargin: 6
+    }
+    MouseArea {
+       anchors.fill: parent
+       onClicked: {
+           button.buttonClicked();
+       }
+   }
+}</file>
+  * The actual behavior is defined in the file where Button is used (as the Button's ''onButtonClicked'' property):
+<file javascript resuing-button.qml>
+import QtQuick 1.0
+import "randomFile.js" as RandomFunction
+Item {
+    id: myItem
+    width: 400
+    height: 400
+    property int actualStateNumber: 0
+    Image {
+        source: "images/background.png"
+    }
+    Image {
+        id: spaceship
+        x: -200
+        y: 50
+        source: "images/spaceship.png"
+    }
+    Button {
+        id: button
+        labelText: "PRESS"
+        anchors.horizontalCenter: myItem.horizontalCenter
+        anchors.bottom: myItem.bottom
+        anchors.bottomMargin: 20
+        onButtonClicked:{
+            myItem.state = RandomFunction.randomState();
+        }
+    }
+   states: [
+         State {
+             name: "bottomRight"
+             PropertyChanges {
+                 target: spaceship
+                 x: 250
+                 y: 200
+             }
+         },
+         State {
+             name: "bottomLeft"
+             PropertyChanges {
+                 target: spaceship
+                 x: 100
+                 y: 200
+             }
+         },
+         State {
+             name: "topLeft"
+             PropertyChanges {
+                 target: spaceship
+                 x: 10
+                 y: 50
+             }
+         },
+         State {
+             name: "topRight"
+             PropertyChanges {
+                 target: spaceship
+                 x: 100
+                 y: 50
+             }
+         }
+    ]
+    transitions: [
+         Transition {
+             NumberAnimation {
+                 properties: "x,y"
+                 duration: 500
+                 easing.type: Easing.OutExpo
+             }
+         },
+         Transition {
+             from: ""
+             to: "topLeft"
+             SequentialAnimation{
+                PauseAnimation {
+                     duration: 1000
+                }
+                NumberAnimation {
+                    properties: "x,y"
+                    duration: 500
+                    easing.type: Easing.OutExpo
+                }
+             }
+         }
+    ]
+    Component.onCompleted:{
+        myItem.state = "topLeft";
+    }
+}
+</file>