Differences

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

--- qt-quick-for-designers-1:components [2013/06/22 04:24] – [Signals] mithat
+++ qt-quick-for-designers-1:components [2013/07/06 22:53] (current) – [Resources] mithat
@@ Line 48: / Line 48: @@
 ===== Properties =====
-  * You can declare a ''property'' do expose a component's internal propery 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 93: / Line 93: @@
 ===== Signals =====
-  * A ''signal'' is similar to a ''property'' above except that it's used to let the outside world determine behavior.
+  * 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 made a signal that is emitted whenever the MouseArea is clicked.
+  * 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
@@ Line 121: / Line 121: @@
    }
 }</file>
-  * The actual behavior is defined in the file where Button is used (as the Button's ''onButtonClicked'' property):
+  * The actual behavior is defined in the file where Button is used (as ''onButtonClicked''):
 <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 {
@@ Line 153: / Line 138: @@
         onButtonClicked:{
-            myItem.state = RandomFunction.randomState();
+            button.labelText="Hooray!";
         }
     }
-   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>
+--------------------------------------------------------------
+====== Resources ======
+  * {{:qt-quick-for-designers-1:images.zip|}}
+  * All source code is subject to this [[copyright header|copyright]].