User Tools

Site Tools


qt-quick-for-designers-1:components

This is an old revision of the document!


Table of Contents

Components

  • It’s a good idea to recycle your code and create components for elements that can be reused.
  • To create a component, place a tree of elements in a file with a .qml extension.
    • The tree is then available as a reusable component with the same name as the file but without the .qml extension.
  • Example:
ButtonSimple.qml
import QtQuick 1.0
 
Image {
    id: button
    source: "images/button.png"
 
    Text {
        id: label
        text: "Push me!"
        color: "white"
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        anchors.topMargin: 6
    }
 
    MouseArea {
       anchors.fill: parent
       onClicked: {
           label.text = "Thanks!";
       }
   }
}
reusing-buttonsimple.qml
import QtQuick 1.0
 
Item {
    id: myItem
    width: 400
    height: 400
 
    ButtonSimple {
        id: myButton
        anchors.horizontalCenter: myItem.horizontalCenter
        anchors.bottom: myItem.bottom
        anchors.bottomMargin: 20
    }
}
  • ButtonSimple.qml and reusing-buttonsimple.qml must be in the same directory.

Properties

  • You can declare a property do expose a component's internal propery to the outside:
ButtonSimple2.qml
import QtQuick 1.0
 
Image {
    id: button
    source: "images/button.png"
 
    property string labelText
 
    Text {
        id: label
        text: labelText
        color: "white"
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        anchors.topMargin: 6
    }
 
    MouseArea {
       anchors.fill: parent
       onClicked: {
           label.text = "Thanks!";
       }
   }
}
reusing-buttonsimple2.qml
import QtQuick 1.0
 
Item {
    id: myItem
    width: 400
    height: 400
 
    ButtonSimple2 {
        id: myButton
        labelText: "Hey you!"
        anchors.horizontalCenter: myItem.horizontalCenter
        anchors.bottom: myItem.bottom
        anchors.bottomMargin: 20
    }
}

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.
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();
       }
   }
}
  • The actual behavior is defined in the file where Button is used (as the Button's onButtonClicked property):
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";
    }
 
}
qt-quick-for-designers-1/components.1371875088.txt.gz · Last modified: 2013/06/22 04:24 by mithat

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki