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
qt-quick-for-designers-1:components [2013/06/22 04:03] mithatqt-quick-for-designers-1:components [2013/07/06 22:53] (current) – [Resources] mithat
Line 48: Line 48:
  
 ===== Properties ===== ===== Properties =====
-  * You can declare a ''property'' do expose something inside Component 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 66: Line 66:
         anchors.topMargin: 6         anchors.topMargin: 6
     }     }
 +
 +    MouseArea {
 +       anchors.fill: parent
 +       onClicked: {
 +           label.text = "Thanks!";
 +       }
 +   }
 }</file> }</file>
  
Line 82: Line 89:
         anchors.bottom: myItem.bottom         anchors.bottom: myItem.bottom
         anchors.bottomMargin: 20         anchors.bottomMargin: 20
-         
-        MouseArea { 
-            anchors.fill: parent 
-            onClicked: { 
-                parent.labelText = "Thanks!"; 
-            } 
-        } 
     }     }
 }</file> }</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:
 +    } 
 + 
 +    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|}} 
 +  * All source code is subject to this [[copyright header|copyright]].
qt-quick-for-designers-1/components.1371873807.txt.gz · Last modified: 2013/06/22 04:03 by mithat

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki