Differences

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

--- qt-quick-for-designers-1:components [2013/06/22 04:03] – mithat
+++ qt-quick-for-designers-1:components [2013/07/06 21:29] – [Signals] mithat
@@ Line 48: / Line 48: @@
 ===== Properties =====
-  * You can declare a ''property'' do expose something inside a Component to the outside:
+  * You can declare a ''property'' to expose a component's internal propery to the outside:
 <file javascript ButtonSimple2.qml>
 import QtQuick 1.0
@@ Line 66: / Line 66: @@
         anchors.topMargin: 6
     }
+    MouseArea {
+       anchors.fill: parent
+       onClicked: {
+           label.text = "Thanks!";
+       }
+   }
 }</file>
@@ Line 82: / Line 89: @@
         anchors.bottom: myItem.bottom
         anchors.bottomMargin: 20
-        MouseArea {
-            anchors.fill: parent
-            onClicked: {
-                parent.labelText = "Thanks!";
-            }
-        }
     }
 }</file>
-  * Note that the MouseArea has been moved out of ''ButtonSimple2.qml''.
+===== Signals =====
+  * A ''signal'' declaration is similar to a ''property'' declaration except that it's used to let the outside world determine behavior.
+  * In the Button below, ''buttonClicked'' is declared as a signal, and that signal 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 ''onButtonClicked''):
+<file javascript resuing-button.qml>
+import QtQuick 1.0
+Item {
+    id: myItem
+    width: 400
+    height: 400
+    Button {
+        id: button
+        labelText: "PRESS"
+        anchors.horizontalCenter: myItem.horizontalCenter
+        anchors.bottom: myItem.bottom
+        anchors.bottomMargin: 20
+        onButtonClicked:{
+            button.labelText="Hooray!";
+        }
+    }
+}
+</file>
+--------------------------------------------------------------
+====== Resources ======
+{{:qt-quick-for-designers-1:images.zip|}}