User Tools

Site Tools


qt-quick-for-designers-1:components

Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
Last revisionBoth sides next revision
qt-quick-for-designers-1:components [2013/06/22 04:24] – [Signals] mithatqt-quick-for-designers-1:components [2013/07/06 21:29] – [Signals] mithat
Line 48: Line 48:
  
 ===== Properties ===== ===== 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> <file javascript ButtonSimple2.qml>
 import QtQuick 1.0 import QtQuick 1.0
Line 93: Line 93:
  
 ===== Signals ===== ===== 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> <file javascript Button.qml>
 import QtQuick 1.0 import QtQuick 1.0
Line 121: Line 121:
    }    }
 }</file> }</file>
-  * The actual behavior is defined in the file where Button is used (as the Button'''onButtonClicked'' property):+  * The actual behavior is defined in the file where Button is used (as ''onButtonClicked''):
 <file javascript resuing-button.qml> <file javascript resuing-button.qml>
 import QtQuick 1.0 import QtQuick 1.0
    
-import "randomFile.js" as RandomFunction 
- 
 Item { Item {
     id: myItem     id: myItem
     width: 400     width: 400
     height: 400     height: 400
- 
-    property int actualStateNumber: 0 
- 
-    Image { 
-        source: "images/background.png" 
-    } 
- 
-    Image { 
-        id: spaceship 
-        x: -200 
-        y: 50 
-        source: "images/spaceship.png" 
-    } 
  
     Button {     Button {
Line 153: Line 138:
  
         onButtonClicked:{         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> </file>
  
 +--------------------------------------------------------------
 +====== Resources ======
 +{{:qt-quick-for-designers-1:images.zip|}}
qt-quick-for-designers-1/components.txt · Last modified: 2013/07/06 22:53 by mithat

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki